feat(heatmap): add axis titles

integration/tests/heatmap_stories.test.ts

@@ -33,4 +33,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

@@ -1086,6 +1086,8 @@ export type HeatmapBrushEvent = {
 
 // @public (undocumented)
 export interface HeatmapConfig {
+    // (undocumented)
+    axisTitle: TextStyle & Visible;
     brushArea: {
         visible: boolean;
         fill: Color;
@@ -1216,12 +1218,16 @@ export interface HeatmapSpec extends Spec {
     // (undocumented)
     xAccessor: Accessor | AccessorFn;
     // (undocumented)
+    xAxisTitle: string;
+    // (undocumented)
     xScale: RasterTimeScale | OrdinalScale | LinearScale;
     // (undocumented)
     xSortPredicate: Predicate;
     // (undocumented)
     yAccessor: Accessor | AccessorFn;
     // (undocumented)
+    yAxisTitle: string;
+    // (undocumented)
     ySortPredicate: Predicate;
 }
 

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

@@ -7,6 +7,7 @@
  */
 
 import { Colors } from '../../../../common/colors';
+import { LIGHT_THEME } from '../../../../utils/themes/light_theme';
 import { Config } from '../types/config_types';
 
 /** @internal */
@@ -17,6 +18,7 @@ export const config: Config = {
   maxRowHeight: 30,
   maxColumnWidth: 30,
   fontFamily: 'Sans-Serif',
+  axisTitle: LIGHT_THEME.axes.axisTitle,
 
   brushArea: {
     visible: true,

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

@@ -9,6 +9,7 @@
 import { Color } from '../../../../common/colors';
 import { Pixels, SizeRatio } from '../../../../common/geometry';
 import { Font, FontFamily, TextAlign, TextBaseline } from '../../../../common/text_utils';
+import { TextStyle, Visible } from '../../../../utils/themes/theme';
 
 /**
  * @public
@@ -22,6 +23,7 @@ export interface Config {
   // general text config
   fontFamily: FontFamily;
   timeZone: string;
+  axisTitle: TextStyle & Visible;
 
   /**
    * Config of the mask over the area outside of the selected cells

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

@@ -9,17 +9,21 @@
 import { Color, Colors } from '../../../../common/colors';
 import { Font } from '../../../../common/text_utils';
 import { clearCanvas, renderLayers, withContext } from '../../../../renderers/canvas';
+import { Theme } from '../../../../utils/themes/theme';
 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 { ShapeViewModel } from '../../layout/types/viewmodel_types';
+import { HeatmapSpec } from '../../specs/heatmap';
 
 /** @internal */
 export function renderCanvas2d(
   ctx: CanvasRenderingContext2D,
   dpr: number,
   { config, heatmapViewModel }: ShapeViewModel,
   background: Color,
+  theme: Theme,
+  heatmapSpec?: HeatmapSpec,
 ) {
   // eslint-disable-next-line no-empty-pattern
   const {} = config;
@@ -127,6 +131,61 @@ export function renderCanvas2d(
             renderText(ctx, { x: xValue.x, y: xValue.y }, xValue.text, config.xAxisLabel),
           ),
         ),
+
+      () =>
+        // render the xAxisTitle
+        heatmapSpec?.xAxisTitle &&
+        withContext(ctx, () => {
+          const { xValues } = heatmapViewModel;
+          const { width } = config;
+          // half the xAxixLabel width and padding
+          const halfLabel = (xValues[0].x + config.xAxisLabel.padding) / 2;
+          renderText(
+            ctx,
+            {
+              x: (width + halfLabel) / 2,
+              y: xValues[0].y + config.xAxisLabel.fontSize,
+            },
+            heatmapSpec.xAxisTitle,
+            {
+              fontVariant: 'normal',
+              fontWeight: 'bold',
+              textColor: '#333',
+              fontStyle: 'normal',
+              baseline: 'middle',
+              ...config.axisTitle,
+              align: 'center',
+            },
+          );
+        }),
+
+      () =>
+        // render the yAxisTitle
+        heatmapSpec?.yAxisTitle &&
+        withContext(ctx, () => {
+          const { yValues } = heatmapViewModel;
+          const heightOfLabels = yValues[yValues.length - 1].y - yValues[0].y;
+          const yAxisTitlePadding =
+            typeof config.yAxisLabel.padding === 'number'
+              ? config.yAxisLabel.padding
+              : config.yAxisLabel.padding.left ?? config.yAxisLabel.padding.bottom;
+          renderText(
+            ctx,
+            // subtract two times the  padding from the chart for the axis label height
+            { x: config.yAxisLabel.fontSize, y: (heightOfLabels + 2 * (yAxisTitlePadding ?? 0)) / 2 },
+            heatmapSpec.yAxisTitle,
+            {
+              fontVariant: 'normal',
+              fontWeight: 'bold',
+              textColor: '#333',
+              fontStyle: 'normal',
+              baseline: 'middle',
+              ...config.axisTitle,
+              align: 'center',
+            },
+            -90,
+          );
+        }),
     ]);
   });
 }

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

@@ -22,9 +22,13 @@ import {
 import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
 import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
 import { Dimensions } from '../../../../utils/dimensions';
+import { LIGHT_THEME } from '../../../../utils/themes/light_theme';
+import { Theme } from '../../../../utils/themes/theme';
 import { nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
+import { HeatmapSpec } from '../../specs/heatmap';
 import { geometries } from '../../state/selectors/geometries';
 import { getHeatmapContainerSizeSelector } from '../../state/selectors/get_heatmap_container_size';
+import { getHeatmapSpecSelector } from '../../state/selectors/get_heatmap_spec';
 import { renderCanvas2d } from './canvas_renderers';
 
 interface ReactiveChartStateProps {
@@ -33,6 +37,8 @@ interface ReactiveChartStateProps {
   chartContainerDimensions: Dimensions;
   a11ySettings: A11ySettings;
   background: Color;
+  heatmapTheme: Theme;
+  heatmapSpec?: HeatmapSpec;
 }
 
 interface ReactiveChartDispatchProps {
@@ -97,6 +103,8 @@ class Component extends React.Component<Props> {
           config: { ...this.props.geometries.config, width, height },
         },
         this.props.background,
+        this.props.heatmapTheme,
+        this.props.heatmapSpec,
       );
     }
   }
@@ -152,8 +160,8 @@ const DEFAULT_PROPS: ReactiveChartStateProps = {
   },
   a11ySettings: DEFAULT_A11Y_SETTINGS,
   background: Colors.Transparent.keyword,
+  heatmapTheme: LIGHT_THEME,
 };
-
 const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
   if (getInternalIsInitializedSelector(state) !== InitStatus.Initialized) {
     return DEFAULT_PROPS;
@@ -162,8 +170,10 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
     initialized: true,
     geometries: geometries(state),
     chartContainerDimensions: getHeatmapContainerSizeSelector(state),
+    heatmapSpec: getHeatmapSpecSelector(state),
     a11ySettings: getA11ySettingsSelector(state),
     background: getChartThemeSelector(state).background.color,
+    heatmapTheme: getChartThemeSelector(state),
   };
 };
 

packages/charts/src/chart_types/heatmap/specs/heatmap.ts

@@ -34,6 +34,8 @@ const defaultProps = {
   xSortPredicate: Predicate.AlphaAsc,
   ySortPredicate: Predicate.AlphaAsc,
   config,
+  xAxisTitle: '',
+  yAxisTitle: '',
 };
 
 /** @public */
@@ -93,6 +95,8 @@ export interface HeatmapSpec extends Spec {
   ySortPredicate: Predicate;
   xScale: RasterTimeScale | OrdinalScale | LinearScale;
   config: RecursivePartial<Config>;
+  xAxisTitle: string;
+  yAxisTitle: string;
   highlightedData?: { x: Array<string | number>; y: Array<string | number> };
   name?: string;
 }
@@ -112,5 +116,7 @@ export const Heatmap: React.FunctionComponent<
     | 'valueFormatter'
     | 'config'
     | 'xScale'
+    | 'xAxisTitle'
+    | 'yAxisTitle'
   >(defaultProps),
 );

packages/charts/src/chart_types/heatmap/state/selectors/compute_chart_dimensions.ts

@@ -11,13 +11,15 @@ import { max as d3Max } from 'd3-array';
 import { Box, measureText } from '../../../../common/text_utils';
 import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
 import { getLegendSizeSelector } from '../../../../state/selectors/get_legend_size';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { Position } from '../../../../utils/common';
 import { Dimensions } from '../../../../utils/dimensions';
 import { HeatmapCellDatum } from '../../layout/viewmodel/viewmodel';
 import { getGridHeightParamsSelector } from './get_grid_full_height';
 import { getHeatmapConfigSelector } from './get_heatmap_config';
+import { getHeatmapSpecSelector } from './get_heatmap_spec';
 import { getHeatmapTableSelector } from './get_heatmap_table';
 import { getXAxisRightOverflow } from './get_x_axis_right_overflow';
 
@@ -45,6 +47,8 @@ export const computeChartDimensionsSelector = createCustomCachedSelector(
     getXAxisRightOverflow,
     getGridHeightParamsSelector,
     getSettingsSpecSelector,
+    getHeatmapSpecSelector,
+    getChartThemeSelector,
   ],
   (
     chartContainerDimensions,
@@ -54,6 +58,8 @@ export const computeChartDimensionsSelector = createCustomCachedSelector(
     rightOverflow,
     { height },
     { showLegend, legendPosition },
+    { yAxisTitle },
+    { axes: axesStyles },
   ): Dimensions => {
     let { width, left } = chartContainerDimensions;
     const { top } = chartContainerDimensions;
@@ -76,7 +82,9 @@ export const computeChartDimensionsSelector = createCustomCachedSelector(
           ...config.yAxisLabel,
         };
       });
+      // account for the space needed to show the yAxisTitle in the canvas element
       const measuredYValues = textMeasure(config.yAxisLabel.fontSize, boxedYValues);
+      const titleWidth = yAxisTitle ? axesStyles.axisTitle.fontSize : 0;
 
       let yColumnWidth: number = d3Max(measuredYValues, ({ width }) => width) ?? 0;
       if (typeof config.yAxisLabel.width === 'number') {
@@ -85,8 +93,8 @@ export const computeChartDimensionsSelector = createCustomCachedSelector(
         yColumnWidth = config.yAxisLabel.width.max;
       }
 
-      width -= yColumnWidth + rightOverflow + totalHorizontalPadding;
-      left += yColumnWidth + totalHorizontalPadding;
+      width -= yColumnWidth + rightOverflow + totalHorizontalPadding + titleWidth;
+      left += yColumnWidth + totalHorizontalPadding + titleWidth;
     }
     let legendWidth = 0;
     if (showLegend && (legendPosition === Position.Right || legendPosition === Position.Left)) {

packages/charts/src/chart_types/heatmap/state/selectors/get_grid_full_height.ts

@@ -8,11 +8,13 @@
 
 import { GlobalChartState } from '../../../../state/chart_state';
 import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getChartThemeSelector } from '../../../../state/selectors/get_chart_theme';
 import { getLegendSizeSelector } from '../../../../state/selectors/get_legend_size';
 import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
 import { isHorizontalLegend } from '../../../../utils/legend';
 import { Config } from '../../layout/types/config_types';
 import { getHeatmapConfigSelector } from './get_heatmap_config';
+import { getHeatmapSpecSelector } from './get_heatmap_spec';
 import { getHeatmapTableSelector } from './get_heatmap_table';
 
 /** @internal */
@@ -31,21 +33,25 @@ export const getGridHeightParamsSelector = createCustomCachedSelector(
     getParentDimension,
     getHeatmapConfigSelector,
     getHeatmapTableSelector,
+    getHeatmapSpecSelector,
+    getChartThemeSelector,
   ],
   (
     legendSize,
     { showLegend },
     { height: containerHeight },
     { xAxisLabel: { padding, visible, fontSize }, grid, maxLegendHeight },
     { yValues },
+    { xAxisTitle },
+    { axes: axesStyle },
   ): GridHeightParams => {
     const xAxisHeight = visible ? fontSize : 0;
-    const totalVerticalPadding = padding * 2;
+    const titleHeight = xAxisTitle ? axesStyle.axisTitle.fontSize : 0;
     let legendHeight = 0;
     if (showLegend && isHorizontalLegend(legendSize.position)) {
       legendHeight = maxLegendHeight ?? legendSize.height;
     }
-    const verticalRemainingSpace = containerHeight - xAxisHeight - totalVerticalPadding - legendHeight;
+    const verticalRemainingSpace = containerHeight - xAxisHeight - padding - legendHeight - titleHeight;
 
     // compute the grid cell height
     const gridCellHeight = getGridCellHeight(yValues, grid, verticalRemainingSpace);

packages/charts/src/mocks/specs/specs.ts

@@ -191,6 +191,8 @@ export class MockSeriesSpec {
     xSortPredicate: Predicate.AlphaAsc,
     ySortPredicate: Predicate.AlphaAsc,
     config: {},
+    xAxisTitle: '',
+    yAxisTitle: '',
   };
 
   static bar(partial?: Partial<BarSeriesSpec>): BarSeriesSpec {

storybook/stories/heatmap/1_basic.story.tsx

@@ -33,6 +33,9 @@ export const Example = () => {
 
   const persistCellsSelection = boolean('Persist cells selection', true);
   const debugState = boolean('Enable debug state', true);
+  const showXAxisTitle = boolean('Show x axis title', false);
+  const showYAxisTitle = boolean('Show y axis title', false);
+
   const dataStateAction = action('DataState');
 
   const handler = useCallback(() => {
@@ -140,6 +143,8 @@ export const Example = () => {
         xScale={{ type: ScaleType.Time, interval: DATA_6.interval }}
         config={config}
         highlightedData={persistCellsSelection ? selection : undefined}
+        xAxisTitle={showXAxisTitle ? 'Bottom axis' : undefined}
+        yAxisTitle={showYAxisTitle ? 'Left axis' : undefined}
       />
     </Chart>
   );

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

@@ -28,6 +28,9 @@ export const Example = () => {
   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 showXAxisTitle = boolean('Show x axis title', false);
+  const showYAxisTitle = boolean('Show y axis title', false);
+
   return (
     <Chart>
       <Settings
@@ -56,6 +59,8 @@ export const Example = () => {
         valueAccessor={(d) => d[3]}
         valueFormatter={(value) => value.toFixed(0.2)}
         xSortPredicate="alphaAsc"
+        xAxisTitle={showXAxisTitle ? 'Bottom axis' : undefined}
+        yAxisTitle={showYAxisTitle ? 'Left axis' : undefined}
         config={{
           grid: {
             stroke: {