fix(heatmap): adjust pageSize based available chart height (#849)

.playground/playground.tsx

@@ -22,17 +22,133 @@ import React from 'react';
 import { Chart, Heatmap, HeatmapConfig, RecursivePartial, ScaleType, Settings } from '../src';
 import { HeatmapSpec } from '../src/chart_types/heatmap/specs';
 import { BABYNAME_DATA } from '../src/utils/data_samples/babynames';
-import { SWIM_LANE_DATA } from '../src/utils/data_samples/test_anomaly_swim_lane';
 
+export const SWIM_LANE_DATA = [
+  {
+    laneLabel: 'Overall',
+    time: 1572825600,
+    value: 0,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572829200,
+    value: 0,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572832800,
+    value: 0,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572836400,
+    value: 0,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572840000,
+    value: 0,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572843600,
+    value: 1.066358,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572847200,
+    value: 1.813946,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572850800,
+    value: 0,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572854400,
+    value: 0.05191579,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572858000,
+    value: 1.63678,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572861600,
+    value: 2.031104,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572865200,
+    value: 0,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572868800,
+    value: 1.09738,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572872400,
+    value: 0,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572876000,
+    value: 0.2232534,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572879600,
+    value: 19.49729,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572883200,
+    value: 34.10214,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572886800,
+    value: 0,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572890400,
+    value: 55.18972,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572894000,
+    value: 0.9794427671013135,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572897600,
+    value: 1.2711643855082817,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572901200,
+    value: 0.12110509647944609,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572904800,
+    value: 0.9807310648820486,
+  },
+  {
+    laneLabel: 'Overall',
+    time: 1572908400,
+    value: 1.0793822204067567,
+  },
+];
 export class Playground extends React.Component<any, { highlightedData?: HeatmapSpec['highlightedData'] }> {
   constructor(props: any) {
     super(props);
-    this.state = {
-      highlightedData: {
-        x: [1572908400000, 1572910200000],
-        y: ['i-ca80c01a'],
-      },
-    };
+    this.state = {};
   }
 
   onBrushEnd: HeatmapConfig['onBrushEnd'] = (e) => {
@@ -46,8 +162,7 @@ export class Playground extends React.Component<any, { highlightedData?: Heatmap
     const heatmapConfig: RecursivePartial<HeatmapConfig> = {
       grid: {
         cellHeight: {
-          min: 20,
-          max: 20, // 'fill',
+          max: 30,
         },
         stroke: {
           width: 1,
@@ -65,20 +180,16 @@ export class Playground extends React.Component<any, { highlightedData?: Heatmap
           strokeWidth: 0,
         },
       },
-      brushArea: {
-        fill: 'red',
-      },
       yAxisLabel: {
         name: 'instance',
         visible: true,
-        width: { max: 50 },
-        padding: 5,
-        fill: '#6a717d',
-      },
-      xAxisLabel: {
-        fill: '#6a717d',
+        width: 170,
+        // eui color subdued
+        fill: `#6a717d`,
+        padding: 8,
       },
       onBrushEnd: this.onBrushEnd,
+      maxLegendHeight: 20,
     };
     console.log(
       BABYNAME_DATA.filter(([year]) => year > 1950).map((d) => {
@@ -87,7 +198,7 @@ export class Playground extends React.Component<any, { highlightedData?: Heatmap
     );
     return (
       <div>
-        <div className="chart" style={{ height: '500px', overflow: 'auto' }}>
+        <div className="chart" style={{ height: '88px', overflow: 'auto' }}>
           <Chart>
             <Settings
               onElementClick={console.log}

api/charts.api.md

@@ -832,6 +832,8 @@ export interface HeatmapConfig {
     // (undocumented)
     maxColumnWidth: Pixels;
     // (undocumented)
+    maxLegendHeight?: number;
+    // (undocumented)
     maxRowHeight: Pixels;
     // Warning: (ae-forgotten-export) The symbol "HeatmapBrushEvent" needs to be exported by the entry point index.d.ts
     //

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

@@ -103,6 +103,7 @@ export interface Config {
       stroke: Color;
     };
   };
+  maxLegendHeight?: number;
 }
 
 export type HeatmapBrushEvent = {

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

@@ -31,6 +31,7 @@ import { stringToRGB } from '../../../partition_chart/layout/utils/color_library
 import { HeatmapSpec } from '../../specs';
 import { HeatmapTable } from '../../state/selectors/compute_chart_dimensions';
 import { ColorScaleType } from '../../state/selectors/get_color_scale';
+import { GridHeightParams } from '../../state/selectors/get_grid_full_height';
 import { Config } from '../types/config_types';
 import {
   Cell,
@@ -39,7 +40,6 @@ import {
   PickHighlightedArea,
   ShapeViewModel,
 } from '../types/viewmodel_types';
-import { getGridCellHeight } from './grid';
 
 export interface HeatmapCellDatum {
   x: string | number;
@@ -84,11 +84,11 @@ export function shapeViewModel(
   heatmapTable: HeatmapTable,
   colorScale: ColorScaleType,
   filterRanges: Array<[number, number | null]>,
+  { height, pageSize }: GridHeightParams,
 ): ShapeViewModel {
   const gridStrokeWidth = config.grid.stroke.width ?? 1;
 
-  const { table, yValues } = heatmapTable;
-  const { xDomain } = heatmapTable;
+  const { table, yValues, xDomain } = heatmapTable;
 
   // measure the text width of all rows values to get the grid area width
   const boxedYValues = yValues.map<Box & { value: string | number }>((value) => {
@@ -99,26 +99,13 @@ export function shapeViewModel(
     };
   });
 
-  const maxGridAreaWidth = chartDimensions.width;
-  const maxGridAreaHeight = chartDimensions.height;
-
-  // compute the grid cell height
-  const gridCellHeight = getGridCellHeight(yValues, config);
-  const maxHeight = gridCellHeight * yValues.length;
-
-  // compute the pageSize: how many rows can be fitted into the current panel height
-  const pageSize: number =
-    gridCellHeight > 0 && maxHeight > maxGridAreaHeight
-      ? Math.floor(maxGridAreaHeight / gridCellHeight)
-      : yValues.length;
-
   // compute the scale for the rows positions
   const yScale = scaleBand<string | number>()
     .domain(yValues)
-    .range([0, maxHeight]);
+    .range([0, height]);
 
   const yInvertedScale = scaleQuantize<string | number>()
-    .domain([0, maxHeight])
+    .domain([0, height])
     .range(yValues);
 
   let xValues = xDomain.domain;
@@ -129,7 +116,7 @@ export function shapeViewModel(
           {
             type: ScaleType.Time,
             domain: xDomain.domain,
-            range: [0, maxGridAreaWidth],
+            range: [0, chartDimensions.width],
           },
           {
             ticks: getTicks(chartDimensions.width, config.xAxisLabel),
@@ -152,10 +139,10 @@ export function shapeViewModel(
   // compute the scale for the columns positions
   const xScale = scaleBand<string | number>()
     .domain(xValues)
-    .range([0, maxGridAreaWidth]);
+    .range([0, chartDimensions.width]);
 
   const xInvertedScale = scaleQuantize<string | number>()
-    .domain([0, maxGridAreaWidth])
+    .domain([0, chartDimensions.width])
     .range(xValues);
 
   // compute the cell width (can be smaller then the available size depending on config
@@ -370,22 +357,22 @@ export function shapeViewModel(
     const width = endFromScale - startFromScale + (isOutOfRange ? cellWidth : 0);
 
     // resolve Y coordinated making sure the order is correct
-    const { y: yStart, height } = y.reduce(
+    const { y: yStart, totalHeight } = y.reduce(
       (acc, current, i) => {
         if (i === 0) {
           acc.y = yScale(current) || 0;
         }
-        acc.height += cellHeight;
+        acc.totalHeight += cellHeight;
         return acc;
       },
-      { y: 0, height: 0 },
+      { y: 0, totalHeight: 0 },
     );
 
     return {
       x: xStart,
       y: yStart,
       width,
-      height,
+      height: totalHeight,
     };
   };
 

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

@@ -23,11 +23,11 @@ import { bindActionCreators, Dispatch } from 'redux';
 
 import { onChartRendered } from '../../../../state/actions/chart';
 import { GlobalChartState } from '../../../../state/chart_state';
-import { getChartContainerDimensionsSelector } from '../../../../state/selectors/get_chart_container_dimensions';
 import { getInternalIsInitializedSelector, InitStatus } from '../../../../state/selectors/get_internal_is_intialized';
 import { Dimensions } from '../../../../utils/dimensions';
 import { nullShapeViewModel, ShapeViewModel } from '../../layout/types/viewmodel_types';
 import { geometries } from '../../state/selectors/geometries';
+import { getHeatmapContainerSizeSelector } from '../../state/selectors/get_heatmap_container_size';
 import { renderCanvas2d } from './canvas_renderers';
 
 interface ReactiveChartStateProps {
@@ -145,7 +145,7 @@ const mapStateToProps = (state: GlobalChartState): ReactiveChartStateProps => {
   return {
     initialized: true,
     geometries: geometries(state),
-    chartContainerDimensions: getChartContainerDimensionsSelector(state),
+    chartContainerDimensions: getHeatmapContainerSizeSelector(state),
   };
 };