feat(heatmap): allow rotation of x axis labels

integration/tests/heatmap_stories.test.ts

@@ -33,4 +33,16 @@ describe('Heatmap stories', () => {
       `http://localhost:9001/?path=/story/heatmap-alpha--time-snap&globals=theme:light&knob-dataset=${dataset}`,
     );
   });
+
+  it('should allow rotation of labels', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/test-cases--overlapping-heatmap-labels&&knob-set%20rotation%20of%20x%20axis%20label_labels=45',
+    );
+  });
+
+  it('should allow customizable length for x axis labels and allow alternating labels', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/test-cases--overlapping-heatmap-labels&&knob-set%20rotation%20of%20x%20axis%20label_labels=45&knob-show_labels=true&knob-set the max text length for the x axis labels_labels=5&knob-set overflow property for x axis labels_labels=true&knob-set x axis labels to alternate_labels=true',
+    );
+  });
 });

packages/charts/api/charts.api.md

@@ -1167,6 +1167,15 @@ export interface HeatmapConfig {
         visible: boolean;
         padding: number;
         formatter: (value: string | number) => string;
+        rotation: number;
+        overflow: 'ellipsis' | false;
+        maxTextLength: {
+            dflt: number;
+            min: number;
+            max: number;
+            documentation: string;
+        };
+        alternate: boolean;
     };
     // (undocumented)
     yAxisLabel: Font & {
@@ -1184,6 +1193,14 @@ export interface HeatmapConfig {
             bottom?: number;
         };
         formatter: (value: string | number) => string;
+        rotation: number;
+        overflow: 'ellipsis' | false;
+        maxTextLength: {
+            dflt: number;
+            min: number;
+            max: number;
+            documentation: string;
+        };
     };
 }
 

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

@@ -49,6 +49,15 @@ export const config: Config = {
     baseline: 'verticalAlign' as CanvasTextBaseline,
     padding: 6,
     formatter: String,
+    rotation: 0,
+    overflow: 'ellipsis',
+    maxTextLength: {
+      dflt: 100,
+      min: 2,
+      max: 200,
+      documentation: 'Limits the total number of characters in the x axis label',
+    },
+    alternate: false,
   },
   yAxisLabel: {
     name: 'Y Value',
@@ -63,6 +72,14 @@ export const config: Config = {
     baseline: 'verticalAlign' as CanvasTextBaseline,
     padding: 5,
     formatter: String,
+    rotation: 0,
+    overflow: 'ellipsis',
+    maxTextLength: {
+      dflt: 100,
+      min: 2,
+      max: 200,
+      documentation: 'Limits the total number of characters in linked labels.',
+    },
   },
   grid: {
     cellWidth: {

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

@@ -49,6 +49,15 @@ export interface Config {
     visible: boolean;
     padding: number;
     formatter: (value: string | number) => string;
+    rotation: number;
+    overflow: 'ellipsis' | false;
+    maxTextLength: {
+      dflt: number;
+      min: number;
+      max: number;
+      documentation: string;
+    };
+    alternate: boolean;
   };
   yAxisLabel: Font & {
     name: string;
@@ -58,6 +67,14 @@ export interface Config {
     visible: boolean;
     padding: number | { left?: number; right?: number; top?: number; bottom?: number };
     formatter: (value: string | number) => string;
+    rotation: number;
+    overflow: 'ellipsis' | false;
+    maxTextLength: {
+      dflt: number;
+      min: number;
+      max: number;
+      documentation: string;
+    };
   };
   grid: {
     cellWidth: {

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

@@ -12,7 +12,7 @@ import { ScaleBand, scaleBand, scaleQuantize } from 'd3-scale';
 import { colorToRgba } 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 { Box, cutToLength, maximiseFontSize, TextMeasure } from '../../../../common/text_utils';
 import { ScaleContinuous } from '../../../../scales';
 import { ScaleType } from '../../../../scales/constants';
 import { LinearScale, OrdinalScale, RasterTimeScale, SettingsSpec } from '../../../../specs';
@@ -392,12 +392,14 @@ function getXTicks(
   { xValues, xNumericExtent }: HeatmapTable,
   gridHeight: number,
 ): Array<TextBox> {
+  const maxTextLength = config.xAxisLabel.maxTextLength.max;
   const getTextValue = (
     formatter: Config['xAxisLabel']['formatter'],
     scaleCallback: (x: string | number) => number | undefined | null,
+    overflow: Config['xAxisLabel']['overflow'],
   ) => (value: string | number): TextBox => {
     return {
-      text: formatter(value),
+      text: overflow ? cutToLength(formatter(value), maxTextLength) : formatter(value),
       value,
       isValue: false,
       ...config.xAxisLabel,
@@ -418,13 +420,20 @@ function getXTicks(
         timeZone: config.timeZone,
       },
     );
-    return timeScale.ticks().map<TextBox>(getTextValue(config.xAxisLabel.formatter, (x) => timeScale.scale(x)));
+    return timeScale
+      .ticks()
+      .map<TextBox>(getTextValue(config.xAxisLabel.formatter, (x) => timeScale.scale(x), config.xAxisLabel.overflow));
   }
 
   return xValues.map<TextBox>((textBox: string | number) => {
-    return {
-      ...getTextValue(config.xAxisLabel.formatter, xScale)(textBox),
-      x: chartDimensions.left + (xScale(textBox) || 0) + xScale.bandwidth() / 2,
-    };
+    return config.xAxisLabel.overflow
+      ? {
+          ...getTextValue(config.xAxisLabel.formatter, xScale, config.xAxisLabel.overflow)(textBox),
+          x: chartDimensions.left + (xScale(textBox) || 0) + xScale.bandwidth() / 2,
+        }
+      : {
+          ...getTextValue(config.xAxisLabel.formatter, xScale, config.xAxisLabel.overflow)(textBox),
+          x: chartDimensions.left + (xScale(textBox) || 0) + xScale.bandwidth() / 2,
+        };
   });
 }

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

@@ -115,18 +115,47 @@ export function renderCanvas2d(
               resultText,
               // the alignment for y axis labels is fixed to the right
               { ...config.yAxisLabel, align: 'right' },
+              config.yAxisLabel.rotation,
             );
           }),
         ),
 
       () =>
         // render text on X axis
         config.xAxisLabel.visible &&
-        withContext(ctx, () =>
-          heatmapViewModel.xValues.forEach((xValue) =>
-            renderText(ctx, { x: xValue.x, y: xValue.y }, xValue.text, config.xAxisLabel),
-          ),
-        ),
+        withContext(ctx, () => {
+          // alternate rendering xAxisLabels
+          return config.xAxisLabel.alternate
+            ? heatmapViewModel.xValues.forEach((xValue, index) => {
+                if (index % 2 === 0) {
+                  // xAxis label rotations
+                  return config.xAxisLabel.rotation !== 0
+                    ? renderText(
+                        ctx,
+                        { x: xValue.x, y: xValue.y },
+                        xValue.text,
+                        { ...config.xAxisLabel, align: 'left' },
+                        config.xAxisLabel.rotation,
+                      )
+                    : // no rotations specified
+                      renderText(ctx, { x: xValue.x, y: xValue.y }, xValue.text, config.xAxisLabel);
+                }
+              })
+            : // render all xAxisLabels
+              heatmapViewModel.xValues.forEach((xValue) =>
+                // xAxisLabel rotations
+                config.xAxisLabel.rotation !== 0
+                  ? renderText(
+                      ctx,
+                      { x: xValue.x, y: xValue.y },
+                      xValue.text,
+                      { ...config.xAxisLabel, align: 'left' },
+                      config.xAxisLabel.rotation,
+                    )
+                  : // no rotations specified
+                    renderText(ctx, { x: xValue.x, y: xValue.y }, xValue.text, config.xAxisLabel),
+              );
+        }),
     ]);
   });
 }

packages/charts/src/chart_types/xy_chart/renderer/canvas/axes/tick_label.ts

@@ -36,7 +36,6 @@ export function renderTickLabel(
   );
 
   const center = { x: tickLabelProps.x + tickLabelProps.offsetX, y: tickLabelProps.y + tickLabelProps.offsetY };
-
   if (debug) {
     const { maxLabelBboxWidth, maxLabelBboxHeight, maxLabelTextWidth: width, maxLabelTextHeight: height } = dimension;
     // full text container

storybook/stories/test_cases/9_overlapping_heatmap_labels.story.tsx

@@ -0,0 +1,111 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { action } from '@storybook/addon-actions';
+import { boolean, number, text } from '@storybook/addon-knobs';
+import React from 'react';
+
+import { Chart, Heatmap, Settings } from '@elastic/charts';
+
+import { useBaseTheme } from '../../use_base_theme';
+
+export const Example = () => {
+  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');
+
+  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');
+
+  const setRotation = number('set rotation of x axis label', 45, { step: 1, min: 0, max: 359, range: true }, 'labels');
+  const allowOverflow = boolean('set overflow property for x axis labels', true, 'labels');
+  const maxTextLength = text('set the max text length for the x axis labels', '20', 'labels');
+  const shouldAlternate = boolean('set x axis labels to alternate', false, 'labels');
+  return (
+    <Chart>
+      <Settings
+        onElementClick={action('onElementClick')}
+        showLegend
+        legendPosition="right"
+        brushAxis="both"
+        baseTheme={useBaseTheme()}
+        onBrushEnd={action('onBrushEnd')}
+      />
+      <Heatmap
+        id="heatmap2"
+        colorScale={{
+          type: 'bands',
+          bands: [
+            { 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={[
+          [1880, 'F', 'Helen Helen Helen Helen Helen', 636, 0.00651612638826278],
+          [1880, 'F', 'Amanda Amanda Amanda Amanda Amanda', 241, 0.00246916109995492],
+          [1880, 'F', 'Dorothy Dorothy Dorothy Dorothy Dorothy', 112, 0.00114749395516577],
+          [1880, 'F', 'Linda Linda Linda Linda Linda Linda', 270, 0.000276628007048891],
+          [1880, 'F', 'Deborah Deborah Deborah Deborah Deborah Deborah', 12, 0.000122945780910618],
+          [1880, 'F', 'Jessica', 7, 7.17183721978607e-5],
+          [1881, 'F', 'Helen', 612, 0.00619088564058469],
+          [1881, 'F', 'Amanda Amanda Amanda Amanda Amanda', 263, 0.0026604622932578],
+          [1881, 'F', 'Betty', 112, 0.00113297253553184],
+          [1881, 'F', 'Dorothy Dorothy Dorothy Dorothy Dorothy', 109, 0.00110262505690152],
+          [1881, 'F', 'Linda Linda Linda Linda Linda', 38, 0.000384401395984017],
+          [1881, 'F', 'Deborah Deborah Deborah Deborah', 14, 0.00014162156694148],
+        ]}
+        xAccessor={(d) => d[2]}
+        yAccessor={(d) => d[0]}
+        valueAccessor={(d) => d[3]}
+        valueFormatter={(value) => value.toFixed(0.2)}
+        xSortPredicate="alphaAsc"
+        config={{
+          grid: {
+            stroke: {
+              width: 0,
+            },
+            cellHeight: {
+              min: minCellHeight,
+              max: maxCellHeight,
+            },
+          },
+          cell: {
+            maxWidth: 'fill',
+            label: {
+              minFontSize,
+              maxFontSize,
+              visible: showLabels,
+              useGlobalMinFontSize,
+            },
+            border: {
+              stroke: 'transparent',
+              strokeWidth: 1,
+            },
+          },
+          yAxisLabel: {
+            visible: true,
+          },
+          xAxisLabel: {
+            visible: true,
+            rotation: setRotation,
+            overflow: allowOverflow ? 'ellipsis' : false,
+            maxTextLength: {
+              max: parseFloat(maxTextLength),
+            },
+            alternate: shouldAlternate,
+          },
+        }}
+      />
+    </Chart>
+  );
+};

storybook/stories/test_cases/test_cases.stories.tsx

@@ -18,3 +18,4 @@ export { Example as legendScrollBarSizing } from './5_legend_scroll_bar_sizing.s
 export { Example as accessibilityCustomizations } from './6_a11y_custom_description.story';
 export { Example as rtlText } from './7_rtl_text.story';
 export { Example as testPointsOutsideOfDomain } from './8_test_points_outside_of_domain.story';
+export { Example as overlappingHeatmapLabels } from './9_overlapping_heatmap_labels.story';