feat(heatmap): allow rotation of x axis labels

integration/tests/heatmap_stories.test.ts

@@ -58,4 +58,16 @@ describe('Heatmap stories', () => {
       'http://localhost:9001/?path=/story/heatmap-alpha--basic&knob-Show%20x%20axis%20title=true&knob-Show%20y%20axis%20title=true',
     );
   });
+
+  test('rotate categorical axis labels', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/heatmap-alpha--label-rotation&globals=theme:light&knob-Y-axis auto width=true&knob-Y-axis width=50&knob-X-Axis visible=true&knob-X-Axis label fontSize=12&knob-X-Axis label padding=6&knob-X-Axis label rotation=45&knob-Use categorical data=true&knob-Show legend=',
+    );
+  });
+
+  test('rotate time axis labels', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/heatmap-alpha--label-rotation&globals=theme:light&knob-Y-axis auto width=true&knob-Y-axis width=50&knob-X-Axis visible=true&knob-X-Axis label fontSize=12&knob-X-Axis label padding=6&knob-X-Axis label rotation=45&knob-Use categorical data=&knob-Show legend=',
+    );
+  });
 });

packages/charts/api/charts.api.md

@@ -1086,7 +1086,7 @@ export type GroupId = string;
 export type GroupKeysOrKeyFn<T> = Array<keyof T> | GroupByKeyFn<T>;
 
 // @alpha
-export const Heatmap: <D extends BaseDatum = any>(props: SFProps<HeatmapSpec<D>, "chartType" | "specType", "data" | "timeZone" | "valueAccessor" | "valueFormatter" | "xAccessor" | "yAccessor" | "xSortPredicate" | "ySortPredicate" | "xScale" | "xAxisLabelFormatter" | "xAxisTitle" | "yAxisTitle" | "yAxisLabelFormatter" | "xAxisLabelName" | "yAxisLabelName", "name" | "onBrushEnd" | "highlightedData", "id" | "colorScale">) => null;
+export const Heatmap: <D extends BaseDatum = any>(props: SFProps<HeatmapSpec<D>, "chartType" | "specType", "data" | "timeZone" | "valueAccessor" | "valueFormatter" | "xAccessor" | "yAccessor" | "xSortPredicate" | "ySortPredicate" | "xScale" | "xAxisTitle" | "yAxisTitle" | "xAxisLabelFormatter" | "yAxisLabelFormatter" | "xAxisLabelName" | "yAxisLabelName", "name" | "onBrushEnd" | "highlightedData", "id" | "colorScale">) => null;
 
 // @alpha (undocumented)
 export interface HeatmapBandsColorScale {
@@ -1222,19 +1222,16 @@ export interface HeatmapStyle {
     // (undocumented)
     xAxisLabel: Font & {
         fontSize: Pixels;
-        width: Pixels | 'auto';
-        align: TextAlign;
-        baseline: TextBaseline;
         visible: boolean;
         padding: Pixels | Padding;
+        rotation: number;
     };
     // (undocumented)
     yAxisLabel: Font & {
         fontSize: Pixels;
         width: Pixels | 'auto' | {
             max: Pixels;
         };
-        baseline: TextBaseline;
         visible: boolean;
         padding: Pixels | Padding;
     };
@@ -2683,8 +2680,6 @@ export type YDomainRange = YDomainBase & DomainRange & LogScaleOptions;
 // Warnings were encountered during analysis:
 //
 // src/chart_types/partition_chart/layout/types/config.ts:60:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts
-// src/utils/themes/theme.ts:217:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts
-// src/utils/themes/theme.ts:218:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts
 
 // (No @packageDocumentation comment for this package)
 

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

@@ -9,7 +9,7 @@
 import { ChartType } from '../../..';
 import { Color, Colors } from '../../../../common/colors';
 import { Pixels } from '../../../../common/geometry';
-import { Box, Font } from '../../../../common/text_utils';
+import { Box, Font, TextAlign } from '../../../../common/text_utils';
 import { Fill, Line, Rect, Stroke } from '../../../../geoms/types';
 import { HeatmapBrushEvent } from '../../../../specs/settings';
 import { Point } from '../../../../utils/point';
@@ -40,6 +40,7 @@ export interface TextBox extends Box {
   value: NonNullable<PrimitiveValue>;
   x: number;
   y: number;
+  align: TextAlign;
 }
 
 /** @internal */

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

@@ -13,13 +13,12 @@ import { colorToRgba } from '../../../../common/color_library_wrappers';
 import { fillTextColor } from '../../../../common/fill_text_color';
 import { Pixels } from '../../../../common/geometry';
 import { Box, Font, maximiseFontSize } from '../../../../common/text_utils';
-import { ScaleContinuous } from '../../../../scales';
 import { ScaleType } from '../../../../scales/constants';
 import { LinearScale, OrdinalScale, RasterTimeScale } from '../../../../specs';
-import { TextMeasure, withTextMeasure } from '../../../../utils/bbox/canvas_text_bbox_calculator';
+import { TextMeasure } from '../../../../utils/bbox/canvas_text_bbox_calculator';
 import { addIntervalToTime } from '../../../../utils/chrono/elasticsearch';
 import { clamp, Datum } from '../../../../utils/common';
-import { Dimensions, horizontalPad, innerPad, pad } from '../../../../utils/dimensions';
+import { innerPad, pad } from '../../../../utils/dimensions';
 import { Logger } from '../../../../utils/logger';
 import { HeatmapStyle, Theme, Visible } from '../../../../utils/themes/theme';
 import { PrimitiveValue } from '../../../partition_chart/layout/utils/group_by_rollup';
@@ -54,29 +53,6 @@ function getValuesInRange(
   return values.slice(startIndex, endIndex);
 }
 
-function estimatedNonOverlappingTickCount(
-  chartWidth: number,
-  style: HeatmapStyle['xAxisLabel'],
-  sampleLabel: string,
-): number {
-  return withTextMeasure((textMeasure) => {
-    const { width } = textMeasure(
-      sampleLabel,
-      {
-        fontFamily: style.fontFamily,
-        fontWeight: style.fontWeight,
-        fontVariant: style.fontVariant,
-        fontStyle: style.fontStyle,
-      },
-      style.fontSize,
-    );
-    const maxTicks = chartWidth / (width + horizontalPad(style.padding));
-    // Dividing by 2 is a temp fix to make sure {@link ScaleContinuous} won't produce
-    // to many ticks creating nice rounded tick values
-    // TODO add support for limiting the number of tick in {@link ScaleContinuous}
-    return Math.floor(maxTicks / 2);
-  });
-}
 /** @internal */
 export function shapeViewModel<D extends BaseDatum = Datum>(
   textMeasure: TextMeasure,
@@ -125,7 +101,7 @@ export function shapeViewModel<D extends BaseDatum = Datum>(
   const currentGridHeight = elementSizes.grid.height;
 
   // compute the position of each column label
-  const textXValues = getXTicks(spec, heatmapTheme, elementSizes.grid, xScale, heatmapTable);
+  const textXValues = getXTicks(spec, heatmapTheme.xAxisLabel, xScale, heatmapTable.xValues);
 
   const { padding } = heatmapTheme.yAxisLabel;
 
@@ -136,6 +112,7 @@ export function shapeViewModel<D extends BaseDatum = Datum>(
       // position of the Y labels
       x: -pad(padding, 'right'),
       y: cellHeight / 2 + (yScale(d.value) || 0),
+      align: 'right',
     };
   });
 
@@ -337,20 +314,23 @@ export function shapeViewModel<D extends BaseDatum = Datum>(
     return pickHighlightedArea(area.x, area.y);
   };
 
-  // vertical lines
-  const xLines = Array.from({ length: xValues.length + 1 }, (d, i) => ({
-    x1: elementSizes.grid.left + i * cellWidth,
-    x2: elementSizes.grid.left + i * cellWidth,
-    y1: elementSizes.grid.top,
-    y2: currentGridHeight,
-  }));
+  // ordered left-right vertical lines
+  const xLines = Array.from({ length: xValues.length + 1 }, (d, i) => {
+    const xAxisExtension = i % elementSizes.xAxisTickCadence === 0 ? 5 : 0;
+    return {
+      x1: elementSizes.grid.left + i * cellWidth,
+      x2: elementSizes.grid.left + i * cellWidth,
+      y1: elementSizes.grid.top,
+      y2: currentGridHeight + xAxisExtension,
+    };
+  });
 
   // horizontal lines
   const yLines = Array.from({ length: elementSizes.visibleNumberOfRows + 1 }, (d, i) => ({
     x1: elementSizes.grid.left,
     x2: elementSizes.grid.left + elementSizes.grid.width,
-    y1: i * cellHeight,
-    y2: i * cellHeight,
+    y1: elementSizes.grid.top + i * cellHeight,
+    y2: elementSizes.grid.top + i * cellHeight,
   }));
 
   const cells = Object.values(cellMap);
@@ -434,45 +414,21 @@ export function isRasterTimeScale(scale: RasterTimeScale | OrdinalScale | Linear
 
 function getXTicks(
   spec: HeatmapSpec,
-  style: HeatmapStyle,
-  grid: Dimensions,
-  xScale: ScaleBand<string | number>,
-  { xValues, xNumericExtent }: HeatmapTable,
+  style: HeatmapStyle['xAxisLabel'],
+  scale: ScaleBand<string | number>,
+  values: NonNullable<PrimitiveValue>[],
 ): Array<TextBox> {
-  const getTextValue = (
-    formatter: HeatmapSpec['xAxisLabelFormatter'],
-    scaleCallback: (x: string | number) => number | undefined | null,
-  ) => (value: string | number): TextBox => {
+  const isTimeScale = isRasterTimeScale(spec.xScale);
+  const isRotated = style.rotation !== 0;
+  return values.map<TextBox>((value) => {
     return {
-      text: formatter(value),
+      text: spec.xAxisLabelFormatter(value),
       value,
       isValue: false,
-      ...style.xAxisLabel,
-      x: scaleCallback(value) ?? 0,
-      y: style.xAxisLabel.fontSize / 2 + pad(style.xAxisLabel.padding, 'top'),
-    };
-  };
-  if (isRasterTimeScale(spec.xScale)) {
-    const sampleLabel = spec.xAxisLabelFormatter(xNumericExtent[0]);
-    const timeScale = new ScaleContinuous(
-      {
-        type: ScaleType.Time,
-        domain: xNumericExtent,
-        range: [0, grid.width],
-        nice: false,
-      },
-      {
-        desiredTickCount: estimatedNonOverlappingTickCount(grid.width, style.xAxisLabel, sampleLabel),
-        timeZone: spec.timeZone,
-      },
-    );
-    return timeScale.ticks().map<TextBox>(getTextValue(spec.xAxisLabelFormatter, (x) => timeScale.scale(x)));
-  }
-
-  return xValues.map<TextBox>((textBox: string | number) => {
-    return {
-      ...getTextValue(spec.xAxisLabelFormatter, xScale)(textBox),
-      x: (xScale(textBox) || 0) + xScale.bandwidth() / 2,
+      ...style,
+      y: style.fontSize / 2 + pad(style.padding, 'top'),
+      x: (scale(value) ?? 0) + (isTimeScale ? 0 : scale.bandwidth() / 2),
+      align: isRotated ? 'right' : isTimeScale ? 'left' : 'center',
     };
   });
 }

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

@@ -6,12 +6,13 @@
  * Side Public License, v 1.
  */
 
-import { Color, Colors } from '../../../../common/colors';
-import { Font } from '../../../../common/text_utils';
+import { Color } from '../../../../common/colors';
 import { clearCanvas, renderLayers, withContext } from '../../../../renderers/canvas';
+import { radToDeg } from '../../../../utils/common';
+import { horizontalPad } from '../../../../utils/dimensions';
 import { renderMultiLine } from '../../../xy_chart/renderer/canvas/primitives/line';
 import { renderRect } from '../../../xy_chart/renderer/canvas/primitives/rect';
-import { renderText, wrapLines } from '../../../xy_chart/renderer/canvas/primitives/text';
+import { renderText, TextFont, wrapLines } from '../../../xy_chart/renderer/canvas/primitives/text';
 import { ShapeViewModel } from '../../layout/types/viewmodel_types';
 import { ChartElementSizes } from '../../state/selectors/compute_chart_dimensions';
 
@@ -37,6 +38,7 @@ export function renderCanvas2d(
     //         text rendering must be y-flipped, which is a bit easier this way
     ctx.textAlign = 'center';
     ctx.textBaseline = 'middle';
+    ctx.lineCap = 'square';
     // ctx.translate(chartCenter.x, chartCenter.y);
     // this applies the mathematical x/y conversion (+y is North) which is easier when developing geometry
     // functions - also, all renderers have flexibility (eg. SVG scale) and WebGL NDC is also +y up
@@ -117,34 +119,23 @@ export function renderCanvas2d(
         // render text on Y axis
         theme.yAxisLabel.visible &&
         withContext(ctx, () => {
+          // the text is right aligned so the canvas needs to be aligned to the right of the Y axis box
           ctx.translate(elementSizes.yAxis.left + elementSizes.yAxis.width, elementSizes.yAxis.top);
-          filteredYValues.forEach((yValue) => {
-            const font: Font = {
-              fontFamily: theme.yAxisLabel.fontFamily,
-              fontStyle: theme.yAxisLabel.fontStyle ? theme.yAxisLabel.fontStyle : 'normal',
-              fontVariant: 'normal',
-              fontWeight: 'normal',
-              textColor: Colors.Black.keyword,
-            };
-            const { padding } = theme.yAxisLabel;
-            const horizontalPadding =
-              typeof padding === 'number' ? padding * 2 : (padding.left ?? 0) + (padding.right ?? 0);
-            const [resultText] = wrapLines(
+          const font: TextFont = { ...theme.yAxisLabel, baseline: 'middle' /* fixed */, align: 'right' /* fixed */ };
+          const { padding } = theme.yAxisLabel;
+          const horizontalPadding = horizontalPad(padding);
+          filteredYValues.forEach(({ x, y, text }) => {
+            const textLines = wrapLines(
               ctx,
-              yValue.text,
+              text,
               font,
               theme.yAxisLabel.fontSize,
               heatmapViewModel.gridOrigin.x - horizontalPadding,
-              16,
+              theme.yAxisLabel.fontSize,
               { shouldAddEllipsis: true, wrapAtWord: false },
             ).lines;
-            renderText(
-              ctx,
-              { x: yValue.x, y: yValue.y },
-              resultText,
-              // the alignment for y axis labels is fixed to the right
-              { ...theme.yAxisLabel, align: 'right' },
-            );
+            // TODO improve the `wrapLines` code to handle results with short width
+            renderText(ctx, { x, y }, textLines.length > 0 ? textLines[0] : '…', font);
           });
         }),
 
@@ -153,9 +144,28 @@ export function renderCanvas2d(
         theme.xAxisLabel.visible &&
         withContext(ctx, () => {
           ctx.translate(elementSizes.xAxis.left, elementSizes.xAxis.top);
-          heatmapViewModel.xValues.forEach((xValue) =>
-            renderText(ctx, { x: xValue.x, y: xValue.y }, xValue.text, theme.xAxisLabel),
-          );
+          heatmapViewModel.xValues
+            .filter((_, i) => i % elementSizes.xAxisTickCadence === 0)
+            .forEach(({ x, y, text, align }) => {
+              const textLines = wrapLines(
+                ctx,
+                text,
+                theme.xAxisLabel,
+                theme.xAxisLabel.fontSize,
+                // TODO wrap into multilines
+                Infinity,
+                16,
+                { shouldAddEllipsis: true, wrapAtWord: false },
+              ).lines;
+              renderText(
+                ctx,
+                { x, y },
+                textLines.length > 0 ? textLines[0] : '…',
+                { ...theme.xAxisLabel, baseline: 'middle', align },
+                // negative rotation due to the canvas rotation direction
+                radToDeg(-elementSizes.xLabelRotation),
+              );
+            });
         }),
 
       () =>

packages/charts/src/chart_types/heatmap/renderer/canvas/connected_component.tsx

@@ -164,6 +164,8 @@ const DEFAULT_PROPS: ReactiveChartStateProps = {
     fullHeatmapHeight: 0,
     rowHeight: 0,
     visibleNumberOfRows: 0,
+    xAxisTickCadence: 1,
+    xLabelRotation: 0,
   },
   debug: false,
 };