add useGlobalMinFontSize option

elastic · Sep 6, 2021 · 3c2dc77 · 3c2dc77
1 parent 9017878
commit 3c2dc77
Show file tree

Hide file tree

Showing 9 changed files with 24 additions and 7 deletions.
diff --git a/...-stories-test-ts-heatmap-stories-should-maximize-the-label-font-size-1-snap.png b/...-stories-test-ts-heatmap-stories-should-maximize-the-label-font-size-1-snap.png
diff --git a/...s-heatmap-stories-should-maximize-the-label-with-an-unique-font-size-1-snap.png b/...s-heatmap-stories-should-maximize-the-label-with-an-unique-font-size-1-snap.png
diff --git a/integration/tests/heatmap_stories.test.ts b/integration/tests/heatmap_stories.test.ts
@@ -16,8 +16,14 @@ describe('Heatmap stories', () => {
       { left: 300, top: 300 },
     );
   });
-  it('should maximize the label fontSize', async () => {
+  it('should maximize the label with an unique fontSize', async () => {
     await page.setViewport({ width: 420, height: 600 });
     await common.expectChartAtUrlToMatchScreenshot('http://localhost:9001/?path=/story/heatmap-alpha--categorical');
   });
+  it('should maximize the label fontSize', async () => {
+    await page.setViewport({ width: 420, height: 600 });
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/heatmap-alpha--categorical&knob-use global min fontSize_labels=false',
+    );
+  });
 });
diff --git a/packages/charts/src/chart_types/heatmap/layout/config/config.ts b/packages/charts/src/chart_types/heatmap/layout/config/config.ts
@@ -97,6 +97,7 @@ export const config: Config = {
       fontVariant: 'normal',
       fontWeight: 'normal',
       textOpacity: 1,
+      useGlobalMinFontSize: true,
     },
     border: {
       strokeWidth: 1,

diff --git a/packages/charts/src/chart_types/heatmap/layout/types/config_types.ts b/packages/charts/src/chart_types/heatmap/layout/types/config_types.ts
@@ -84,6 +84,7 @@ export interface Config {
     label: Font & {
       minFontSize: Pixels;
       maxFontSize: Pixels;
+      useGlobalMinFontSize: boolean;
       maxWidth: Pixels | 'fill';
       visible: boolean;
     };

diff --git a/packages/charts/src/chart_types/heatmap/layout/types/viewmodel_types.ts b/packages/charts/src/chart_types/heatmap/layout/types/viewmodel_types.ts
@@ -58,6 +58,7 @@ export interface HeatmapViewModel {
     stroke: Stroke;
   };
   cells: Cell[];
+  cellFontSize: (c: Cell) => Pixels;
   xValues: Array<TextBox>;
   yValues: Array<TextBox>;
   pageSize: number;
@@ -117,6 +118,7 @@ export const nullHeatmapViewModel: HeatmapViewModel = {
   xValues: [],
   yValues: [],
   pageSize: 0,
+  cellFontSize: () => 0,
 };
 
 /** @internal */

diff --git a/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts
@@ -199,9 +199,9 @@ export function shapeViewModel(
       config.cell.label,
       config.cell.label.minFontSize,
       config.cell.label.maxFontSize,
-      // adding 4px padding per side to avoid that text touches the edges
-      cellWidthInner - 8,
-      cellHeightInner - 8,
+      // adding 3px padding per side to avoid that text touches the edges
+      cellWidthInner - 6,
+      cellHeightInner - 6,
     );
 
     acc[cellKey] = {
@@ -373,6 +373,9 @@ export function shapeViewModel(
     yLines.push({ x1: chartDimensions.left, y1: y, x2: chartDimensions.width + chartDimensions.left, y2: y });
   }
 
+  const cells = Object.values(cellMap);
+  const tableMinFontSize = cells.reduce((acc, { fontSize }) => Math.min(acc, fontSize), Infinity);
+
   return {
     config,
     heatmapViewModel: {
@@ -389,7 +392,8 @@ export function shapeViewModel(
         },
       },
       pageSize,
-      cells: Object.values(cellMap),
+      cells,
+      cellFontSize: (cell: Cell) => (config.cell.label.useGlobalMinFontSize ? tableMinFontSize : cell.fontSize),
       xValues: textXValues,
       yValues: textYValues,
     },

diff --git a/packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts b/packages/charts/src/chart_types/heatmap/renderer/canvas/canvas_renderers.ts
@@ -72,10 +72,11 @@ export function renderCanvas2d(
           const { x, y } = heatmapViewModel.gridOrigin;
           ctx.translate(x, y);
           filteredCells.forEach((cell) => {
-            if (cell.visible && Number.isFinite(cell.fontSize))
+            const fontSize = heatmapViewModel.cellFontSize(cell);
+            if (cell.visible && Number.isFinite(fontSize))
               renderText(ctx, { x: cell.x + cell.width / 2, y: cell.y + cell.height / 2 }, cell.formatted, {
                 ...config.cell.label,
-                fontSize: cell.fontSize,
+                fontSize,
                 align: 'center',
                 baseline: 'middle',
               });

diff --git a/storybook/stories/heatmap/2_categorical.story.tsx b/storybook/stories/heatmap/2_categorical.story.tsx
@@ -18,6 +18,7 @@ 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 useGlobalMinFontSize = boolean('use global min fontSize', 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');
@@ -68,6 +69,7 @@ export const Example = () => {
               minFontSize,
               maxFontSize,
               visible: showLabels,
+              useGlobalMinFontSize,
             },
             border: {
               stroke: 'transparent',