feat(heatmap): add axis titles (#1503)

`xAxisTitle` and `yAxisTitle` props are available and rendered in the Heatmap chart.
The title style reuse the one provided by the `Theme.axes.axisTitle` theme configuration.

BREAKING CHANGE: The heatmap yAxisLabel.padding style type is changed from Pixel | Partial<Padding> to Pixels | Padding. The heatmap axis labels are now correctly subjected to padding calculations and it will result in a slightly different position of labels.

Co-authored-by: Marco Vettorello <[email protected]>

integration/tests/heatmap_stories.test.ts

@@ -52,4 +52,10 @@ describe('Heatmap stories', () => {
       `http://localhost:9001/?path=/story/heatmap-alpha--time-snap&globals=theme:light&knob-dataset=${dataset}`,
     );
   });
+
+  it('should show x and y axis titles', async () => {
+    await common.expectChartAtUrlToMatchScreenshot(
+      'http://localhost:9001/?path=/story/heatmap-alpha--basic&knob-Show%20x%20axis%20title=true&knob-Show%20y%20axis%20title=true',
+    );
+  });
 });

packages/charts/api/charts.api.md

@@ -1120,6 +1120,8 @@ export interface HeatmapSpec extends Spec {
     // (undocumented)
     xAxisLabelName: string;
     // (undocumented)
+    xAxisTitle: string;
+    // (undocumented)
     xScale: RasterTimeScale | OrdinalScale | LinearScale;
     // (undocumented)
     xSortPredicate: Predicate;
@@ -1130,6 +1132,8 @@ export interface HeatmapSpec extends Spec {
     // (undocumented)
     yAxisLabelName: string;
     // (undocumented)
+    yAxisTitle: string;
+    // (undocumented)
     ySortPredicate: Predicate;
 }
 
@@ -1196,7 +1200,7 @@ export interface HeatmapStyle {
         align: TextAlign;
         baseline: TextBaseline;
         visible: boolean;
-        padding: number;
+        padding: Pixels | Padding;
     };
     // (undocumented)
     yAxisLabel: Font & {
@@ -1206,12 +1210,7 @@ export interface HeatmapStyle {
         };
         baseline: TextBaseline;
         visible: boolean;
-        padding: number | {
-            left?: number;
-            right?: number;
-            top?: number;
-            bottom?: number;
-        };
+        padding: Pixels | Padding;
     };
 }
 
@@ -2157,9 +2156,9 @@ export type ShowAccessor = (value: PrimitiveValue) => boolean;
 // @public
 export interface SimplePadding {
     // (undocumented)
-    inner: number;
+    inner: Pixels;
     // (undocumented)
-    outer: number;
+    outer: Pixels;
 }
 
 // @alpha (undocumented)

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

@@ -9,22 +9,15 @@
 import { ChartType } from '../../..';
 import { Color, Colors } from '../../../../common/colors';
 import { Pixels } from '../../../../common/geometry';
-import { Box } from '../../../../common/text_utils';
+import { Box, Font } from '../../../../common/text_utils';
 import { Fill, Line, Rect, Stroke } from '../../../../geoms/types';
 import { HeatmapBrushEvent } from '../../../../specs/settings';
 import { Point } from '../../../../utils/point';
 import { LIGHT_THEME } from '../../../../utils/themes/light_theme';
-import { HeatmapStyle } from '../../../../utils/themes/theme';
+import { Visible, HeatmapStyle } from '../../../../utils/themes/theme';
 import { PrimitiveValue } from '../../../partition_chart/layout/utils/group_by_rollup';
 import { HeatmapCellDatum } from '../viewmodel/viewmodel';
 
-/** @internal */
-export interface Value {
-  order: number;
-  value: string | number;
-  formatted: string;
-}
-
 /** @public */
 export interface Cell {
   x: number;
@@ -65,6 +58,15 @@ export interface HeatmapViewModel {
   xValues: Array<TextBox>;
   yValues: Array<TextBox>;
   pageSize: number;
+  titles: Array<
+    Font &
+      Visible & {
+        fontSize: number;
+        text: string;
+        origin: Point;
+        rotation: 0 | -90;
+      }
+  >;
 }
 
 /** @internal */
@@ -122,6 +124,7 @@ export const nullHeatmapViewModel: HeatmapViewModel = {
   yValues: [],
   pageSize: 0,
   cellFontSize: () => 0,
+  titles: [],
 };
 
 /** @internal */

packages/charts/src/chart_types/heatmap/state/selectors/scenegraph.ts → packages/charts/src/chart_types/heatmap/layout/viewmodel/scenegraph.ts

@@ -7,38 +7,26 @@
  */
 
 import { measureText } from '../../../../common/text_utils';
-import { Dimensions } from '../../../../utils/dimensions';
 import { Theme } from '../../../../utils/themes/theme';
 import { ShapeViewModel, nullShapeViewModel } from '../../layout/types/viewmodel_types';
 import { shapeViewModel } from '../../layout/viewmodel/viewmodel';
 import { HeatmapSpec } from '../../specs';
-import { HeatmapTable } from './compute_chart_dimensions';
-import { ColorScale } from './get_color_scale';
-import { GridHeightParams } from './get_grid_full_height';
+import { ChartElementSizes, HeatmapTable } from '../../state/selectors/compute_chart_dimensions';
+import { ColorScale } from '../../state/selectors/get_color_scale';
 
 /** @internal */
 export function render(
   spec: HeatmapSpec,
-  chartDimensions: Dimensions,
+  elementSizes: ChartElementSizes,
   heatmapTable: HeatmapTable,
   colorScale: ColorScale,
   bandsToHide: Array<[number, number]>,
-  gridHeightParams: GridHeightParams,
   theme: Theme,
 ): ShapeViewModel {
   const textMeasurer = document.createElement('canvas');
   const textMeasurerCtx = textMeasurer.getContext('2d');
   if (!textMeasurerCtx) {
     return nullShapeViewModel();
   }
-  return shapeViewModel(
-    measureText(textMeasurerCtx),
-    spec,
-    theme,
-    chartDimensions,
-    heatmapTable,
-    colorScale,
-    bandsToHide,
-    gridHeightParams,
-  );
+  return shapeViewModel(measureText(textMeasurerCtx), spec, theme, elementSizes, heatmapTable, colorScale, bandsToHide);
 }