Make heatmap label color readable on dark background (#16773) (#16966)

* Implement automatical heatmap label color

* Prevent failure in tests

src/core_plugins/kbn_vislib_vis_types/public/controls/heatmap_options.html

@@ -220,6 +220,15 @@
         </div>
 
         <div class="kuiSideBarFormRow">
+          <label class="kuiSideBarFormRow__label" for="overwriteColor">
+            Overwrite automatic color
+          </label>
+          <div class="kuiSideBarFormRow__control">
+            <input class="kuiCheckBox" id="overwriteColor" type="checkbox" ng-model="vis.params.valueAxes[0].labels.overwriteColor">
+          </div>
+        </div>
+
+        <div class="kuiSideBarFormRow" ng-show="vis.params.valueAxes[0].labels.overwriteColor">
           <label class="kuiSideBarFormRow__label" for="labelColor">
             Color
           </label>

src/core_plugins/kbn_vislib_vis_types/public/heatmap.js

@@ -40,7 +40,8 @@ export default function HeatmapVisType(Private) {
           labels: {
             show: false,
             rotate: 0,
-            color: '#555'
+            overwriteColor: false,
+            color: '#555',
           }
         }]
       },

src/ui/public/vis/vis_update_state.js

@@ -1,5 +1,20 @@
 import _ from 'lodash';
 
+/**
+ * Will figure out if an heatmap state was saved before the auto coloring
+ * feature of heatmaps was created. If so it will set the ovewriteColor flag
+ * for the label to true if labels are enabled and a non default color has been used.
+ * So that those earlier created heatmaps will still use the manual specified color.
+ */
+function convertHeatmapLabelColor(visState) {
+  const hasOverwriteColorParam = _.get(visState, 'params.valueAxes[0].labels.overwriteColor') !== undefined;
+  if (visState.type === 'heatmap' && visState.params && !hasOverwriteColorParam) {
+    const showLabels = _.get(visState, 'params.valueAxes[0].labels.show', false);
+    const color = _.get(visState, 'params.valueAxes[0].labels.color', '#555');
+    _.set(visState, 'params.valueAxes[0].labels.overwriteColor', showLabels && color !== '#555');
+  }
+}
+
 /**
  * This function is responsible for updating old visStates - the actual saved object
  * object - into the format, that will be required by the current Kibana version.
@@ -35,5 +50,7 @@ export const updateOldState = (visState) => {
     delete newState.params.metric.gaugeColorMode;
   }
 
+  convertHeatmapLabelColor(newState);
+
   return newState;
 };

src/ui/public/vislib/visualizations/point_series/heatmap_chart.js

@@ -2,6 +2,9 @@ import _ from 'lodash';
 import moment from 'moment';
 import { VislibVisualizationsPointSeriesProvider } from './_point_series';
 import { getHeatmapColors } from 'ui/vislib/components/color/heatmap_color';
+import {
+  isColorDark
+} from '@elastic/eui';
 
 export function VislibVisualizationsHeatmapChartProvider(Private) {
 
@@ -114,6 +117,7 @@ export function VislibVisualizationsHeatmapChartProvider(Private) {
       const zAxisConfig = this.getValueAxis().axisConfig;
       const zAxisFormatter = zAxisConfig.get('labels.axisFormatter');
       const showLabels = zAxisConfig.get('labels.show');
+      const overwriteLabelColor = zAxisConfig.get('labels.overwriteColor', false);
 
       const layer = svg.append('g')
         .attr('class', 'series');
@@ -213,6 +217,20 @@ export function VislibVisualizationsHeatmapChartProvider(Private) {
           Math.abs(squareHeight / Math.cos(rotateRad))
         ) - cellPadding;
 
+        let labelColor;
+        if (overwriteLabelColor) {
+          // If overwriteLabelColor is true, use the manual specified color
+          labelColor = zAxisConfig.get('labels.color');
+        } else {
+          // Otherwise provide a function that will calculate a light or dark color
+          labelColor = d => {
+            const bgColor = z(d);
+            const color = /rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/.exec(bgColor);
+            return color && isColorDark(parseInt(color[1]), parseInt(color[2]), parseInt(color[3]))
+              ? '#FFF' : '#222';
+          };
+        }
+
         let hiddenLabels = false;
         squares.append('text')
           .text(d => zAxisFormatter(d.y))
@@ -228,7 +246,7 @@ export function VislibVisualizationsHeatmapChartProvider(Private) {
           })
           .style('dominant-baseline', 'central')
           .style('text-anchor', 'middle')
-          .style('fill', zAxisConfig.get('labels.color'))
+          .style('fill', labelColor)
           .attr('x', function (d) {
             const center = x(d) + squareWidth / 2;
             return center;