feat: add highlighted data to the debug state

elastic · Mar 11, 2021 · 077a91b · 077a91b
1 parent ebc9123
commit 077a91b
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 14 deletions.
diff --git a/api/charts.api.md b/api/charts.api.md
@@ -1106,8 +1106,8 @@ export interface HeatmapSpec extends Spec {
     data: Datum[];
     // (undocumented)
     highlightedData?: {
-        x: any[];
-        y: any[];
+        x: Array<string | number>;
+        y: Array<string | number>;
     };
     // (undocumented)
     name?: string;

diff --git a/src/chart_types/heatmap/specs/heatmap.ts b/src/chart_types/heatmap/specs/heatmap.ts
@@ -68,7 +68,7 @@ export interface HeatmapSpec extends Spec {
   ySortPredicate: Predicate;
   xScaleType: SeriesScales['xScaleType'];
   config: RecursivePartial<Config>;
-  highlightedData?: { x: any[]; y: any[] };
+  highlightedData?: { x: Array<string | number>; y: Array<string | number> };
   name?: string;
 }
 

diff --git a/src/chart_types/heatmap/state/selectors/get_debug_state.ts b/src/chart_types/heatmap/state/selectors/get_debug_state.ts
@@ -25,15 +25,16 @@ import { DebugState, DebugStateLegend } from '../../../../state/types';
 import { Position } from '../../../../utils/common';
 import { computeLegendSelector } from './compute_legend';
 import { geometries } from './geometries';
-import { getHighlightedAreaSelector } from './get_highlighted_area';
+import { getHighlightedAreaSelector, getHighlightedDataSelector } from './get_highlighted_area';
+import { getPickedCells } from './get_picked_cells';
 
 /**
  * Returns a stringified version of the `debugState`
  * @internal
  */
 export const getDebugStateSelector = createCachedSelector(
-  [geometries, computeLegendSelector, getHighlightedAreaSelector],
-  (geoms, legend, pickedArea): DebugState => {
+  [geometries, computeLegendSelector, getHighlightedAreaSelector, getPickedCells, getHighlightedDataSelector],
+  (geoms, legend, pickedArea, pickedCells, highlightedData): DebugState => {
     return {
       // Common debug state
       legend: getLegendState(legend),
@@ -68,7 +69,10 @@ export const getDebugStateSelector = createCachedSelector(
           formatted,
           value,
         })),
-        selectedArea: pickedArea,
+        selection: {
+          area: pickedArea,
+          data: highlightedData,
+        },
       },
     };
   },

diff --git a/src/chart_types/heatmap/state/selectors/get_highlighted_area.ts b/src/chart_types/heatmap/state/selectors/get_highlighted_area.ts
@@ -24,7 +24,20 @@ import { getHeatmapSpecSelector } from './get_heatmap_spec';
 import { isBrushingSelector } from './is_brushing';
 
 /**
- *
+ * @internal
+ */
+export const getHighlightedDataSelector = createCachedSelector(
+  [getHeatmapSpecSelector, isBrushingSelector],
+  (spec, isBrushing) => {
+    if (!spec.highlightedData || isBrushing) {
+      return null;
+    }
+    return spec.highlightedData;
+  },
+)(getChartIdSelector);
+
+/**
+ * Returns rect position of the highlighted selection.
  * @internal
  */
 export const getHighlightedAreaSelector = createCachedSelector(

diff --git a/src/state/types.ts b/src/state/types.ts
@@ -83,7 +83,10 @@ type CellDebug = Pick<Cell, 'value' | 'formatted' | 'x' | 'y'> & { fill: string
 
 type HeatmapDebugState = {
   cells: CellDebug[];
-  selectedArea: { x: number; y: number; width: number; height: number } | null;
+  selection: {
+    area: { x: number; y: number; width: number; height: number } | null;
+    data: { x: Array<string | number>; y: Array<string | number> } | null;
+  };
 };
 
 /**

diff --git a/stories/heatmap/1_basic.tsx b/stories/heatmap/1_basic.tsx
@@ -25,7 +25,7 @@ import {
   Chart,
   DebugState,
   Heatmap,
-  HeatmapBrushEvent,
+  HeatmapElementEvent,
   niceTimeFormatter,
   RecursivePartial,
   ScaleType,
@@ -35,7 +35,7 @@ import { Config } from '../../src/chart_types/heatmap/layout/types/config_types'
 import { SWIM_LANE_DATA } from '../../src/utils/data_samples/test_anomaly_swim_lane';
 
 export const Example = () => {
-  const [selection, setSelection] = useState<HeatmapBrushEvent | undefined>();
+  const [selection, setSelection] = useState<{ x: (string | number)[]; y: (string | number)[] } | undefined>();
 
   const persistCellsSelection = boolean('Persist cells selection', true);
   const debugState = boolean('Enable debug state', true);
@@ -80,7 +80,7 @@ export const Example = () => {
         },
       },
       onBrushEnd: ((e) => {
-        setSelection(e);
+        setSelection({ x: e.x, y: e.y });
       }) as Config['onBrushEnd'],
     }),
     [],
@@ -99,10 +99,17 @@ export const Example = () => {
     }
   }, 100);
 
+  // @ts-ignore
+  const onElementClick: ElementClickListener = useCallback((e: HeatmapElementEvent[]) => {
+    const cell = e[0][0];
+    // @ts-ignore
+    setSelection({ x: [cell.datum.x, cell.datum.x], y: [cell.datum.y] });
+  }, []);
+
   return (
     <Chart className="story-chart">
       <Settings
-        onElementClick={action('onElementClick')}
+        onElementClick={onElementClick}
         onRenderChange={logDebugstate}
         showLegend
         legendPosition="top"
@@ -117,7 +124,6 @@ export const Example = () => {
         ranges={[0, 3, 25, 50, 75]}
         colors={['#ffffff', '#d2e9f7', '#8bc8fb', '#fdec25', '#fba740', '#fe5050']}
         data={SWIM_LANE_DATA.map((v) => ({ ...v, time: v.time * 1000 }))}
-        // highlightedData={{ x: [], y: [] }}
         xAccessor={(d) => d.time}
         yAccessor={(d) => d.laneLabel}
         valueAccessor={(d) => d.value}