feat(heatmap): add text color contrast to heatmap cells

packages/charts/api/charts.api.md

@@ -366,6 +366,8 @@ export interface Cell {
     // (undocumented)
     stroke: Stroke;
     // (undocumented)
+    textColor: Color;
+    // (undocumented)
     value: number;
     // (undocumented)
     visible: boolean;
@@ -2436,8 +2438,8 @@ export type YDomainRange = YDomainBase & DomainRange & LogScaleOptions;
 // Warnings were encountered during analysis:
 //
 // src/chart_types/heatmap/layout/types/config_types.ts:20:13 - (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts
-// src/chart_types/heatmap/layout/types/config_types.ts:51:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
-// src/chart_types/heatmap/layout/types/config_types.ts:52:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
+// src/chart_types/heatmap/layout/types/config_types.ts:50:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
+// src/chart_types/heatmap/layout/types/config_types.ts:51:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
 // src/chart_types/partition_chart/layout/types/config_types.ts:139:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
 // src/chart_types/partition_chart/layout/types/config_types.ts:140:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts
 

packages/charts/src/chart_types/heatmap/layout/config/config.ts

@@ -15,7 +15,6 @@ export const config: Config = {
   margin: { left: 0.01, right: 0.01, top: 0.01, bottom: 0.01 },
   maxRowHeight: 30,
   maxColumnWidth: 30,
-
   fontFamily: 'Sans-Serif',
 
   onBrushEnd: undefined,

packages/charts/src/chart_types/heatmap/layout/types/config_types.ts

@@ -22,7 +22,6 @@ export interface Config {
   maxColumnWidth: Pixels;
   // general text config
   fontFamily: FontFamily;
-
   timeZone: string;
 
   onBrushEnd?: (brushArea: HeatmapBrushEvent) => void;

packages/charts/src/chart_types/heatmap/layout/types/viewmodel_types.ts

@@ -10,6 +10,7 @@ import { ChartType } from '../../..';
 import { Pixels } from '../../../../common/geometry';
 import { Box } from '../../../../common/text_utils';
 import { Fill, Line, Rect, Stroke } from '../../../../geoms/types';
+import { Color } from '../../../../utils/common';
 import { Point } from '../../../../utils/point';
 import { PrimitiveValue } from '../../../partition_chart/layout/utils/group_by_rollup';
 import { config } from '../config/config';
@@ -36,6 +37,7 @@ export interface Cell {
   formatted: string;
   visible: boolean;
   datum: HeatmapCellDatum;
+  textColor: Color;
   fontSize: Pixels;
 }
 

packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts

@@ -10,6 +10,7 @@ import { bisectLeft } from 'd3-array';
 import { scaleBand, scaleQuantize } from 'd3-scale';
 
 import { stringToRGB } from '../../../../common/color_library_wrappers';
+import { fillTextColor } from '../../../../common/fill_text_color';
 import { Pixels } from '../../../../common/geometry';
 import { Box, maximiseFontSize, TextMeasure } from '../../../../common/text_utils';
 import { ScaleContinuous } from '../../../../scales';
@@ -20,6 +21,7 @@ import { snapDateToESInterval } from '../../../../utils/chrono/elasticsearch';
 import { clamp, range } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
 import { ContinuousDomain } from '../../../../utils/domain';
+import { Theme } from '../../../../utils/themes/theme';
 import { PrimitiveValue } from '../../../partition_chart/layout/utils/group_by_rollup';
 import { HeatmapSpec } from '../../specs';
 import { HeatmapTable } from '../../state/selectors/compute_chart_dimensions';
@@ -79,6 +81,7 @@ export function shapeViewModel(
   colorScale: ColorScale,
   bandsToHide: Array<[number, number]>,
   { height, pageSize }: GridHeightParams,
+  theme: Theme,
 ): ShapeViewModel {
   const gridStrokeWidth = config.grid.stroke.width ?? 1;
 
@@ -185,6 +188,7 @@ export function shapeViewModel(
     const x = xScale(String(d.x));
     const y = yScale(String(d.y))! + gridStrokeWidth;
     const yIndex = yValues.indexOf(d.y);
+    // cell background color
     const color = colorScale(d.value);
     if (x === undefined || y === undefined || yIndex === -1) {
       return acc;
@@ -223,6 +227,13 @@ export function shapeViewModel(
       visible: !isValueHidden(d.value, bandsToHide),
       formatted: formattedValue,
       fontSize,
+      textColor: fillTextColor(
+        config.cell.label.textColor,
+        true,
+        4.5,
+        color,
+        theme.background.color === 'transparent' ? 'rgba(255, 255, 255, 1)' : theme.background.color,
+      ),
     };
     return acc;
   }, {});

packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts

@@ -79,6 +79,7 @@ export function renderCanvas2d(
                 fontSize,
                 align: 'center',
                 baseline: 'middle',
+                textColor: cell.textColor,
               });
           });
         }),

packages/charts/src/chart_types/heatmap/state/selectors/geometries.ts

@@ -8,6 +8,7 @@
 
 import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
 import { computeChartDimensionsSelector } from './compute_chart_dimensions';
@@ -29,6 +30,7 @@ export const geometries = createCustomCachedSelector(
     getColorScale,
     getDeselectedSeriesSelector,
     getGridHeightParamsSelector,
+    getChartThemeSelector,
   ],
   (
     heatmapSpec,
@@ -38,6 +40,7 @@ export const geometries = createCustomCachedSelector(
     { bands, scale: colorScale },
     deselectedSeries,
     gridHeightParams,
+    theme,
   ): ShapeViewModel => {
     // instead of using the specId, each legend item is associated with an unique band label
     const disabledBandLabels = new Set(
@@ -53,7 +56,16 @@ export const geometries = createCustomCachedSelector(
       .map(({ start, end }) => [start, end]);
 
     return heatmapSpec
-      ? render(heatmapSpec, settingSpec, chartDimensions, heatmapTable, colorScale, bandsToHide, gridHeightParams)
+      ? render(
+          heatmapSpec,
+          settingSpec,
+          chartDimensions,
+          heatmapTable,
+          colorScale,
+          bandsToHide,
+          gridHeightParams,
+          theme,
+        )
       : nullShapeViewModel();
   },
 );

packages/charts/src/chart_types/heatmap/state/selectors/scenegraph.ts

@@ -10,6 +10,7 @@ import { measureText } from '../../../../common/text_utils';
 import { SettingsSpec } from '../../../../specs';
 import { RecursivePartial, mergePartial } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
+import { Theme } from '../../../../utils/themes/theme';
 import { config as defaultConfig } from '../../layout/config/config';
 import { Config } from '../../layout/types/config_types';
 import { ShapeViewModel, nullShapeViewModel } from '../../layout/types/viewmodel_types';
@@ -28,6 +29,7 @@ export function render(
   colorScale: ColorScale,
   bandsToHide: Array<[number, number]>,
   gridHeightParams: GridHeightParams,
+  theme: Theme,
 ): ShapeViewModel {
   const textMeasurer = document.createElement('canvas');
   const textMeasurerCtx = textMeasurer.getContext('2d');
@@ -48,5 +50,6 @@ export function render(
     colorScale,
     bandsToHide,
     gridHeightParams,
+    theme,
   );
 }

packages/charts/src/common/color_calcs.ts

@@ -100,6 +100,7 @@ export function makeHighContrastColor(foreground: Color, background: Color, rati
   // determine the lightness factor of the background color to determine whether to lighten or darken the foreground
   const lightness = chroma(background).get('hsl.l');
   let highContrastTextColor = foreground;
+  const originalhighContrastTextColor = foreground;
   const isBackgroundDark = colorIsDark(background);
   // determine whether white or black text is ideal contrast vs a grey that just passes the ratio
   if (isBackgroundDark && chroma.deltaE('black', foreground) === 0) {
@@ -117,9 +118,12 @@ export function makeHighContrastColor(foreground: Color, background: Color, rati
     const scaledOldContrast = Math.round(contrast * precision) / precision;
     contrast = getContrast(highContrastTextColor, background);
     const scaledContrast = Math.round(contrast * precision) / precision;
-    // catch if the ideal contrast may not be possible
+    // catch if the ideal contrast may not be possible, switch to the other extreme color contrast
     if (scaledOldContrast === scaledContrast) {
-      break;
+      const contrastColor =
+        originalhighContrastTextColor === 'rgba(255, 255, 255, 1)' ? 'rgba(0, 0 , 0, 1)' : 'rgba(255, 255, 255, 1)';
+      // make sure the new text color hits the ratio, if not, then return the scaledContrast since we tried earlier
+      return getContrast(contrastColor, background) > ratio ? contrastColor : scaledContrast.toString();
     }
   }
   return highContrastTextColor.toString();

packages/charts/src/common/color_library_wrappers.ts

@@ -13,6 +13,7 @@ import { Color } from '../utils/common';
 
 type RGB = number;
 type A = number;
+
 /** @internal */
 export type RgbTuple = [RGB, RGB, RGB, RGB?];
 /** @public */

packages/charts/src/common/fill_text_color.ts

@@ -41,7 +41,7 @@ export function fillTextColor(
   textColor: Color,
   textInvertible: boolean,
   textContrast: TextContrast,
-  shapeFillColor: string,
+  shapeFillColor: Color,
   backgroundColor?: Color,
 ): string {
   if (!isBackgroundColorValid(backgroundColor, true)) {
@@ -55,7 +55,10 @@ export function fillTextColor(
   }
 
   const adjustedTextColor: string | undefined = textColor;
-  const containerBackground = combineColors(shapeFillColor, backgroundColor);
+  const containerBackground = combineColors(
+    shapeFillColor,
+    backgroundColor === 'transparent' ? 'rgba(255, 255, 255, 1)' : backgroundColor,
+  );
   const textShouldBeInvertedAndTextContrastIsFalse = textInvertible && !textContrast;
   const textShouldBeInvertedAndTextContrastIsSetToTrue = textInvertible && typeof textContrast !== 'number';
   const textContrastIsSetToANumberValue = typeof textContrast === 'number';