feat(heatmap): reduce font size to fit label within cells

integration/tests/heatmap_stories.test.ts

@@ -16,4 +16,8 @@ describe('Heatmap stories', () => {
       { left: 300, top: 300 },
     );
   });
+  it('should maximize the label fontSize', async () => {
+    await page.setViewport({ width: 360, height: 600 });
+    await common.expectChartAtUrlToMatchScreenshot('http://localhost:9001/?path=/story/heatmap-alpha--categorical');
+  });
 });

packages/charts/api/charts.api.md

@@ -356,6 +356,8 @@ export interface Cell {
     // (undocumented)
     fill: Fill;
     // (undocumented)
+    fontSize: Pixels;
+    // (undocumented)
     formatted: string;
     // (undocumented)
     height: number;
@@ -958,10 +960,9 @@ export interface HeatmapConfig {
         maxHeight: Pixels | 'fill';
         align: 'center';
         label: Font & {
-            fontSize: Pixels;
+            minFontSize: Pixels;
+            maxFontSize: Pixels;
             maxWidth: Pixels | 'fill';
-            align: TextAlign;
-            baseline: TextBaseline;
             visible: boolean;
         };
         border: {
@@ -1007,8 +1008,6 @@ export interface HeatmapConfig {
     onBrushEnd?: (brushArea: HeatmapBrushEvent) => void;
     // (undocumented)
     timeZone: string;
-    // Warning: (ae-forgotten-export) The symbol "Pixels" needs to be exported by the entry point index.d.ts
-    //
     // (undocumented)
     width: Pixels;
     // Warning: (ae-forgotten-export) The symbol "Font" needs to be exported by the entry point index.d.ts
@@ -1506,6 +1505,9 @@ export const PATH_KEY = "path";
 // @public (undocumented)
 export function pathAccessor(n: ArrayEntry): LegendPath;
 
+// @public (undocumented)
+export type Pixels = number;
+
 // @public
 export const Placement: Readonly<{
     Top: "top";

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

@@ -89,15 +89,14 @@ export const config: Config = {
     label: {
       visible: true,
       maxWidth: 'fill',
-      fontSize: 10,
+      minFontSize: 8,
+      maxFontSize: 12,
       fontFamily: 'Sans-Serif',
       fontStyle: 'normal',
       textColor: 'black',
       fontVariant: 'normal',
       fontWeight: 'normal',
       textOpacity: 1,
-      align: 'center' as CanvasTextAlign,
-      baseline: 'verticalAlign' as CanvasTextBaseline,
     },
     border: {
       strokeWidth: 1,

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

@@ -82,10 +82,9 @@ export interface Config {
     maxHeight: Pixels | 'fill';
     align: 'center';
     label: Font & {
-      fontSize: Pixels;
+      minFontSize: Pixels;
+      maxFontSize: Pixels;
       maxWidth: Pixels | 'fill';
-      align: TextAlign;
-      baseline: TextBaseline;
       visible: boolean;
     };
     border: {

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

@@ -36,6 +36,7 @@ export interface Cell {
   formatted: string;
   visible: boolean;
   datum: HeatmapCellDatum;
+  fontSize: Pixels;
 }
 
 /** @internal */

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

@@ -11,7 +11,7 @@ import { scaleBand, scaleQuantize } from 'd3-scale';
 
 import { stringToRGB } from '../../../../common/color_library_wrappers';
 import { Pixels } from '../../../../common/geometry';
-import { Box, TextMeasure } from '../../../../common/text_utils';
+import { Box, maximiseFontSize, TextMeasure } from '../../../../common/text_utils';
 import { ScaleContinuous } from '../../../../scales';
 import { ScaleType } from '../../../../scales/constants';
 import { SettingsSpec } from '../../../../specs';
@@ -177,6 +177,9 @@ export function shapeViewModel(
     };
   });
 
+  const cellWidthInner = cellWidth - gridStrokeWidth * 2;
+  const cellHeightInner = cellHeight - gridStrokeWidth * 2;
+
   // compute each available cell position, color and value
   const cellMap = table.reduce<Record<string, Cell>>((acc, d) => {
     const x = xScale(String(d.x));
@@ -187,13 +190,26 @@ export function shapeViewModel(
       return acc;
     }
     const cellKey = getCellKey(d.x, d.y);
+
+    const formattedValue = spec.valueFormatter(d.value);
+
+    const fontSize = maximiseFontSize(
+      textMeasure,
+      formattedValue,
+      config.cell.label,
+      config.cell.label.minFontSize,
+      config.cell.label.maxFontSize,
+      cellWidthInner,
+      cellHeightInner,
+    );
+
     acc[cellKey] = {
       x:
         (config.cell.maxWidth !== 'fill' ? x + xScale.bandwidth() / 2 - config.cell.maxWidth / 2 : x) + gridStrokeWidth,
       y,
       yIndex,
-      width: cellWidth - gridStrokeWidth * 2,
-      height: cellHeight - gridStrokeWidth * 2,
+      width: cellWidthInner,
+      height: cellHeightInner,
       datum: d,
       fill: {
         color: stringToRGB(color),
@@ -204,7 +220,8 @@ export function shapeViewModel(
       },
       value: d.value,
       visible: !isValueHidden(d.value, bandsToHide),
-      formatted: spec.valueFormatter(d.value),
+      formatted: formattedValue,
+      fontSize,
     };
     return acc;
   }, {});

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

@@ -72,13 +72,13 @@ export function renderCanvas2d(
           const { x, y } = heatmapViewModel.gridOrigin;
           ctx.translate(x, y);
           filteredCells.forEach((cell) => {
-            if (cell.visible)
-              renderText(
-                ctx,
-                { x: cell.x + cell.width / 2, y: cell.y + cell.height / 2 },
-                cell.formatted,
-                config.cell.label,
-              );
+            if (cell.visible && Number.isFinite(cell.fontSize))
+              renderText(ctx, { x: cell.x + cell.width / 2, y: cell.y + cell.height / 2 }, cell.formatted, {
+                ...config.cell.label,
+                fontSize: cell.fontSize,
+                align: 'center',
+                baseline: 'middle',
+              });
           });
         }),
 

packages/charts/src/common/text_utils.ts

@@ -134,3 +134,22 @@ export function fitText(
   const { width } = measure(fontSize, [{ ...font, text }])[0];
   return { width, text };
 }
+
+/** @internal */
+export function maximiseFontSize(
+  measure: TextMeasure,
+  text: string,
+  font: Font,
+  minFontSize: Pixels,
+  maxFontSize: Pixels,
+  boxWidth: Pixels,
+  boxHeight: Pixels,
+): Pixels {
+  const response = (fontSize: number) => {
+    const [{ width }] = measure(fontSize, [{ text, ...font }]);
+    const widthDiff = boxWidth - width;
+    const heightDiff = boxHeight - fontSize;
+    return -Math.min(widthDiff, heightDiff);
+  };
+  return monotonicHillClimb(response, maxFontSize, 0, integerSnap, minFontSize);
+}

packages/charts/src/index.ts

@@ -92,6 +92,6 @@ export { DataGenerator } from './utils/data_generators/data_generator';
 export * from './utils/themes/merge_utils';
 export { MODEL_KEY } from './chart_types/partition_chart/layout/config';
 export { LegendStrategy } from './chart_types/partition_chart/layout/utils/highlighted_geoms';
-export { Ratio } from './common/geometry';
+export { Pixels, Ratio } from './common/geometry';
 export { AdditiveNumber } from './utils/accessor';
 export { FontStyle, FONT_STYLES } from './common/text_utils';

storybook/stories/heatmap/2_categorical.story.tsx

@@ -7,6 +7,7 @@
  */
 
 import { action } from '@storybook/addon-actions';
+import { boolean, number } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { Chart, Heatmap, Settings } from '@elastic/charts';
@@ -16,6 +17,13 @@ import { useBaseTheme } from '../../use_base_theme';
 
 export const Example = () => {
   const data = BABYNAME_DATA.filter(([year]) => year > 1950 && year < 1960);
+  const showLabels = boolean('show', true, 'labels');
+
+  const minFontSize = number('min fontSize', 6, { step: 1, min: 4, max: 10, range: true }, 'labels');
+  const maxFontSize = number('max fontSize', 12, { step: 1, min: 10, max: 64, range: true }, 'labels');
+
+  const minCellHeight = number('min cell height', 10, { step: 1, min: 3, max: 8, range: true }, 'grid');
+  const maxCellHeight = number('max cell height', 30, { step: 1, min: 8, max: 45, range: true }, 'grid');
 
   return (
     <Chart>
@@ -31,11 +39,11 @@ export const Example = () => {
         colorScale={{
           type: 'bands',
           bands: [
-            { start: -Infinity, end: 1000, color: '#ffffcc' },
-            { start: 1000, end: 5000, color: '#a1dab4' },
-            { start: 5000, end: 10000, color: '#41b6c4' },
-            { start: 10000, end: 50000, color: '#2c7fb8' },
-            { start: 50000, end: Infinity, color: '#253494' },
+            { start: -Infinity, end: 1000, color: '#AADC32' },
+            { start: 1000, end: 5000, color: '#35B779' },
+            { start: 5000, end: 10000, color: '#24868E' },
+            { start: 10000, end: 50000, color: '#3B528B' },
+            { start: 50000, end: Infinity, color: '#471164' },
           ],
         }}
         data={data}
@@ -49,12 +57,17 @@ export const Example = () => {
             stroke: {
               width: 0,
             },
+            cellHeight: {
+              min: minCellHeight,
+              max: maxCellHeight,
+            },
           },
           cell: {
             maxWidth: 'fill',
-            maxHeight: 20,
             label: {
-              visible: true,
+              minFontSize,
+              maxFontSize,
+              visible: showLabels,
             },
             border: {
               stroke: 'transparent',