fix(heatmap): brushing selection values

elastic · Apr 21, 2023 · 02c277d · 02c277d
1 parent 4439802
commit 02c277d
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 5 deletions.
diff --git a/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts b/packages/charts/src/chart_types/heatmap/layout/viewmodel/viewmodel.ts
@@ -224,7 +224,11 @@ export function shapeViewModel<D extends BaseDatum = Datum>(
 
   const getPanelPointCoordinates = (x: Pixels, y: Pixels) => {
     const { category: v, panelValue: panelY, panelOffset: panelOffsetY } = getPanelPointCoordinate(y, 'vertical');
-    const { category: h, panelValue: panelX, panelOffset: panelOffsetX } = getPanelPointCoordinate(x, 'horizontal');
+    const {
+      category: h,
+      panelValue: panelX,
+      panelOffset: panelOffsetX,
+    } = getPanelPointCoordinate(x - chartDimensions.left, 'horizontal');
 
     return {
       x: panelX,
@@ -278,7 +282,7 @@ export function shapeViewModel<D extends BaseDatum = Datum>(
       return [];
     }
 
-    const { x: xValue, y: yValue, h, v } = getPanelPointCoordinates(x - chartDimensions.left, y);
+    const { x: xValue, y: yValue, h, v } = getPanelPointCoordinates(x, y);
 
     if (xValue === undefined || yValue === undefined) {
       return [];
@@ -304,7 +308,7 @@ export function shapeViewModel<D extends BaseDatum = Datum>(
 
     // Find panel based on start pointer
     const { category: smHorizontalAccessorValue, panelOffset: hOffset } = getPanelPointCoordinate(
-      start.x,
+      start.x - chartDimensions.left,
       'horizontal',
     );
     const { category: smVerticalAccessorValue, panelOffset: vOffset } = getPanelPointCoordinate(start.y, 'vertical');

diff --git a/storybook/stories/small_multiples/9_heatmap.story.tsx b/storybook/stories/small_multiples/9_heatmap.story.tsx
@@ -9,7 +9,7 @@
 import { boolean, number } from '@storybook/addon-knobs';
 import { range } from 'lodash';
 import { DateTime } from 'luxon';
-import React, { useMemo } from 'react';
+import React, { useEffect, useMemo } from 'react';
 
 import {
   ScaleType,
@@ -130,7 +130,11 @@ export const Example = () => {
     () => sampleSize(fullData, vSplitCountAbs * hSplitCountAbs * dataCount * categories * density),
     [categories, dataCount, density, fullData, vSplitCountAbs, hSplitCountAbs],
   );
-  const { highlightedData, onElementClick, onBrushEnd } = useHeatmapSelection();
+  const { highlightedData, onElementClick, onBrushEnd, clearSelection } = useHeatmapSelection();
+
+  useEffect(() => {
+    clearSelection();
+  }, [clearSelection, vSplit, hSplit, vSplitCount, hSplitCount, categories, density, xScaleType]);
 
   return (
     <Chart>

diff --git a/storybook/stories/utils/use_heatmap_selection.ts b/storybook/stories/utils/use_heatmap_selection.ts
@@ -49,6 +49,7 @@ export const useHeatmapSelection = (disableActions = false) => {
     setSelection,
     onBrushEnd,
     onElementClick,
+    clearSelection,
     highlightedData: persistCellsSelection ? selection : undefined,
   };
 };