refactor: heatmap grid, axes layout to respect panels

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

@@ -9,6 +9,7 @@
 import { ChartType } from '../../..';
 import { Color, Colors } from '../../../../common/colors';
 import { Pixels } from '../../../../common/geometry';
+import { PerPanelMap } from '../../../../common/panel_utils';
 import { Box, Font, TextAlign } from '../../../../common/text_utils';
 import { Fill, Line, Rect, Stroke } from '../../../../geoms/types';
 import { HeatmapBrushEvent } from '../../../../specs/settings';
@@ -47,7 +48,7 @@ export interface TextBox extends Box {
 }
 
 /** @internal */
-export interface HeatmapViewModel {
+export interface HeatmapViewModel extends PerPanelMap {
   gridOrigin: {
     x: number;
     y: number;
@@ -62,6 +63,8 @@ export interface HeatmapViewModel {
   xValues: Array<TextBox>;
   yValues: Array<TextBox>;
   pageSize: number;
+  primaryRow: boolean;
+  primaryColumn: boolean;
   titles: Array<
     Font &
       Visible & {
@@ -111,7 +114,7 @@ export type DragShape = ReturnType<PickDragShapeFunction>;
 /** @internal */
 export type ShapeViewModel = {
   theme: HeatmapStyle;
-  heatmapViewModel: HeatmapViewModel;
+  heatmapViewModels: HeatmapViewModel[];
   pickQuads: PickFunction;
   pickDragArea: PickDragFunction;
   pickDragShape: PickDragShapeFunction;
@@ -120,29 +123,10 @@ export type ShapeViewModel = {
   pickCursorBand: PickCursorBand;
 };
 
-/** @internal */
-export const nullHeatmapViewModel: HeatmapViewModel = {
-  gridOrigin: {
-    x: 0,
-    y: 0,
-  },
-  gridLines: {
-    x: [],
-    y: [],
-    stroke: { width: 0, color: Colors.Transparent.rgba },
-  },
-  cells: [],
-  xValues: [],
-  yValues: [],
-  pageSize: 0,
-  cellFontSize: () => 0,
-  titles: [],
-};
-
 /** @internal */
 export const nullShapeViewModel = (): ShapeViewModel => ({
   theme: LIGHT_THEME.heatmap,
-  heatmapViewModel: nullHeatmapViewModel,
+  heatmapViewModels: [],
   pickQuads: () => [],
   pickDragArea: () => ({ cells: [], x: [], y: [], chartType: ChartType.Heatmap }),
   pickDragShape: () => ({ x: 0, y: 0, width: 0, height: 0 }),

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

@@ -6,24 +6,39 @@
  * Side Public License, v 1.
  */
 
+import { SmallMultipleScales } from '../../../../common/panel_utils';
 import { withTextMeasure } from '../../../../utils/bbox/canvas_text_bbox_calculator';
 import { Theme } from '../../../../utils/themes/theme';
+import { ChartDimensions } from '../../../xy_chart/utils/dimensions';
 import { ShapeViewModel } from '../../layout/types/viewmodel_types';
 import { shapeViewModel } from '../../layout/viewmodel/viewmodel';
 import { HeatmapSpec } from '../../specs';
-import { ChartElementSizes, HeatmapTable } from '../../state/selectors/compute_chart_dimensions';
+import { ChartElementSizes } from '../../state/selectors/compute_chart_element_sizes';
 import { ColorScale } from '../../state/selectors/get_color_scale';
+import { HeatmapTable } from '../../state/selectors/get_heatmap_table';
 
 /** @internal */
-export function render(
+export function computeScenegraph(
   spec: HeatmapSpec,
+  chartDimensions: ChartDimensions,
   elementSizes: ChartElementSizes,
+  smScales: SmallMultipleScales,
   heatmapTable: HeatmapTable,
   colorScale: ColorScale,
   bandsToHide: Array<[number, number]>,
   theme: Theme,
 ): ShapeViewModel {
   return withTextMeasure((measureText) => {
-    return shapeViewModel(measureText, spec, theme, elementSizes, heatmapTable, colorScale, bandsToHide);
+    return shapeViewModel(
+      measureText,
+      spec,
+      theme,
+      chartDimensions,
+      elementSizes,
+      heatmapTable,
+      colorScale,
+      smScales,
+      bandsToHide,
+    );
   });
 }