From 0a5f8bfbfdb4868ca4dcf1d48942733843e7be70 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Wed, 1 Sep 2021 14:59:30 -0600 Subject: [PATCH 1/5] fix: filter out tooltip picked shapes into x axis --- .../src/chart_types/heatmap/state/selectors/tooltip.ts | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts b/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts index 15218ae5b5..8a36e93e9a 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts @@ -9,6 +9,7 @@ import { RGBtoString } from '../../../../common/color_library_wrappers'; import { TooltipInfo } from '../../../../components/tooltip/types'; import { createCustomCachedSelector } from '../../../../state/create_selector'; +import { getGridHeightParamsSelector } from './get_grid_full_height'; import { getHeatmapConfigSelector } from './get_heatmap_config'; import { getSpecOrNull } from './heatmap_spec'; import { getPickedShapes } from './picked_shapes'; @@ -20,8 +21,8 @@ const EMPTY_TOOLTIP = Object.freeze({ /** @internal */ export const getTooltipInfoSelector = createCustomCachedSelector( - [getSpecOrNull, getHeatmapConfigSelector, getPickedShapes], - (spec, config, pickedShapes): TooltipInfo => { + [getSpecOrNull, getHeatmapConfigSelector, getPickedShapes, getGridHeightParamsSelector], + (spec, config, pickedShapes, gridParams): TooltipInfo => { if (!spec) { return EMPTY_TOOLTIP; } @@ -33,6 +34,7 @@ export const getTooltipInfoSelector = createCustomCachedSelector( if (Array.isArray(pickedShapes)) { pickedShapes + .filter(({ y }) => y < gridParams.gridCellHeight * gridParams.pageSize) .filter(({ visible }) => visible) .forEach((shape) => { // X-axis value From 1fc046a398120df0ecd3b2b72ae791e3b82a0736 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Wed, 1 Sep 2021 15:18:24 -0600 Subject: [PATCH 2/5] fix: update cursor pointer --- .../heatmap/state/selectors/get_cursor_pointer.ts | 11 ++++++++--- 1 file changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_cursor_pointer.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_cursor_pointer.ts index 7ae0b1920a..4aad8baed6 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/get_cursor_pointer.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/get_cursor_pointer.ts @@ -8,13 +8,18 @@ import { DEFAULT_CSS_CURSOR } from '../../../../common/constants'; import { createCustomCachedSelector } from '../../../../state/create_selector'; +import { getGridHeightParamsSelector } from './get_grid_full_height'; import { isBrushingSelector } from './is_brushing'; import { getPickedShapes } from './picked_shapes'; /** @internal */ export const getPointerCursorSelector = createCustomCachedSelector( - [getPickedShapes, isBrushingSelector], - (pickedShapes, isBrushing) => { - return isBrushing || (Array.isArray(pickedShapes) && pickedShapes.length > 0) ? 'pointer' : DEFAULT_CSS_CURSOR; + [getPickedShapes, isBrushingSelector, getGridHeightParamsSelector], + (pickedShapes, isBrushing, gridParams) => { + return isBrushing || + (Array.isArray(pickedShapes) && + pickedShapes.filter(({ y }) => y < gridParams.gridCellHeight * gridParams.pageSize).length > 0) + ? 'pointer' + : DEFAULT_CSS_CURSOR; }, ); From 8358dd80e446b2b96ce5f45dc0fc250ae41cfc21 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Thu, 2 Sep 2021 14:42:01 -0600 Subject: [PATCH 3/5] refactor: clean up picked shapes selector --- .../heatmap/state/selectors/get_cursor_pointer.ts | 11 +++-------- .../heatmap/state/selectors/picked_shapes.ts | 10 +++++++--- .../chart_types/heatmap/state/selectors/tooltip.ts | 6 ++---- 3 files changed, 12 insertions(+), 15 deletions(-) diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/get_cursor_pointer.ts b/packages/charts/src/chart_types/heatmap/state/selectors/get_cursor_pointer.ts index 4aad8baed6..7ae0b1920a 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/get_cursor_pointer.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/get_cursor_pointer.ts @@ -8,18 +8,13 @@ import { DEFAULT_CSS_CURSOR } from '../../../../common/constants'; import { createCustomCachedSelector } from '../../../../state/create_selector'; -import { getGridHeightParamsSelector } from './get_grid_full_height'; import { isBrushingSelector } from './is_brushing'; import { getPickedShapes } from './picked_shapes'; /** @internal */ export const getPointerCursorSelector = createCustomCachedSelector( - [getPickedShapes, isBrushingSelector, getGridHeightParamsSelector], - (pickedShapes, isBrushing, gridParams) => { - return isBrushing || - (Array.isArray(pickedShapes) && - pickedShapes.filter(({ y }) => y < gridParams.gridCellHeight * gridParams.pageSize).length > 0) - ? 'pointer' - : DEFAULT_CSS_CURSOR; + [getPickedShapes, isBrushingSelector], + (pickedShapes, isBrushing) => { + return isBrushing || (Array.isArray(pickedShapes) && pickedShapes.length > 0) ? 'pointer' : DEFAULT_CSS_CURSOR; }, ); diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/picked_shapes.ts b/packages/charts/src/chart_types/heatmap/state/selectors/picked_shapes.ts index 3fdbb45aa6..6180871b96 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/picked_shapes.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/picked_shapes.ts @@ -10,6 +10,7 @@ import { GlobalChartState } from '../../../../state/chart_state'; import { createCustomCachedSelector } from '../../../../state/create_selector'; import { Cell, TextBox } from '../../layout/types/viewmodel_types'; import { geometries } from './geometries'; +import { getGridHeightParamsSelector } from './get_grid_full_height'; function getCurrentPointerPosition(state: GlobalChartState) { return state.interactions.pointer.current.position; @@ -17,10 +18,13 @@ function getCurrentPointerPosition(state: GlobalChartState) { /** @internal */ export const getPickedShapes = createCustomCachedSelector( - [geometries, getCurrentPointerPosition], - (geoms, pointerPosition): Cell[] | TextBox => { + [geometries, getCurrentPointerPosition, getGridHeightParamsSelector], + (geoms, pointerPosition, gridParams): Cell[] | TextBox => { const picker = geoms.pickQuads; const { x, y } = pointerPosition; - return picker(x, y); + const arrayPicker = picker(x, y) as Cell[]; + return Array.isArray(picker(x, y)) + ? arrayPicker.filter(({ y }) => y < gridParams.gridCellHeight * gridParams.pageSize) + : picker(x, y); }, ); diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts b/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts index 8a36e93e9a..15218ae5b5 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/tooltip.ts @@ -9,7 +9,6 @@ import { RGBtoString } from '../../../../common/color_library_wrappers'; import { TooltipInfo } from '../../../../components/tooltip/types'; import { createCustomCachedSelector } from '../../../../state/create_selector'; -import { getGridHeightParamsSelector } from './get_grid_full_height'; import { getHeatmapConfigSelector } from './get_heatmap_config'; import { getSpecOrNull } from './heatmap_spec'; import { getPickedShapes } from './picked_shapes'; @@ -21,8 +20,8 @@ const EMPTY_TOOLTIP = Object.freeze({ /** @internal */ export const getTooltipInfoSelector = createCustomCachedSelector( - [getSpecOrNull, getHeatmapConfigSelector, getPickedShapes, getGridHeightParamsSelector], - (spec, config, pickedShapes, gridParams): TooltipInfo => { + [getSpecOrNull, getHeatmapConfigSelector, getPickedShapes], + (spec, config, pickedShapes): TooltipInfo => { if (!spec) { return EMPTY_TOOLTIP; } @@ -34,7 +33,6 @@ export const getTooltipInfoSelector = createCustomCachedSelector( if (Array.isArray(pickedShapes)) { pickedShapes - .filter(({ y }) => y < gridParams.gridCellHeight * gridParams.pageSize) .filter(({ visible }) => visible) .forEach((shape) => { // X-axis value From 6785db68a66403bb5aaf0ec20e1403ea1217abd6 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Fri, 3 Sep 2021 07:04:17 -0600 Subject: [PATCH 4/5] fix: code review changes --- .../chart_types/heatmap/state/selectors/picked_shapes.ts | 8 ++++---- storybook/stories/heatmap/2_categorical.story.tsx | 4 +++- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/packages/charts/src/chart_types/heatmap/state/selectors/picked_shapes.ts b/packages/charts/src/chart_types/heatmap/state/selectors/picked_shapes.ts index 6180871b96..cc64cf3d9e 100644 --- a/packages/charts/src/chart_types/heatmap/state/selectors/picked_shapes.ts +++ b/packages/charts/src/chart_types/heatmap/state/selectors/picked_shapes.ts @@ -22,9 +22,9 @@ export const getPickedShapes = createCustomCachedSelector( (geoms, pointerPosition, gridParams): Cell[] | TextBox => { const picker = geoms.pickQuads; const { x, y } = pointerPosition; - const arrayPicker = picker(x, y) as Cell[]; - return Array.isArray(picker(x, y)) - ? arrayPicker.filter(({ y }) => y < gridParams.gridCellHeight * gridParams.pageSize) - : picker(x, y); + const pickedData = picker(x, y); + return Array.isArray(pickedData) + ? pickedData.filter(({ y }) => y < gridParams.gridCellHeight * gridParams.pageSize) + : pickedData; }, ); diff --git a/storybook/stories/heatmap/2_categorical.story.tsx b/storybook/stories/heatmap/2_categorical.story.tsx index ed93832e45..095103d151 100644 --- a/storybook/stories/heatmap/2_categorical.story.tsx +++ b/storybook/stories/heatmap/2_categorical.story.tsx @@ -7,6 +7,7 @@ */ import { action } from '@storybook/addon-actions'; +import { boolean } from '@storybook/addon-knobs'; import React from 'react'; import { Chart, Heatmap, Settings } from '@elastic/charts'; @@ -15,7 +16,8 @@ import { BABYNAME_DATA } from '@elastic/charts/src/utils/data_samples/babynames' import { useBaseTheme } from '../../use_base_theme'; export const Example = () => { - const data = BABYNAME_DATA.filter(([year]) => year > 1950 && year < 1960); + const filterData = boolean('filter BABYNAME_DATA', false); + const data = filterData ? BABYNAME_DATA : BABYNAME_DATA.filter(([year]) => year > 1950 && year < 1960); return ( From 38147b4eaa9cf9fe7ba371b75c3a169d4f5f3bc0 Mon Sep 17 00:00:00 2001 From: rshen91 Date: Fri, 3 Sep 2021 10:50:28 -0600 Subject: [PATCH 5/5] fix: fix ternary in story --- storybook/stories/heatmap/2_categorical.story.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/storybook/stories/heatmap/2_categorical.story.tsx b/storybook/stories/heatmap/2_categorical.story.tsx index 095103d151..9b8bc4170c 100644 --- a/storybook/stories/heatmap/2_categorical.story.tsx +++ b/storybook/stories/heatmap/2_categorical.story.tsx @@ -16,8 +16,8 @@ import { BABYNAME_DATA } from '@elastic/charts/src/utils/data_samples/babynames' import { useBaseTheme } from '../../use_base_theme'; export const Example = () => { - const filterData = boolean('filter BABYNAME_DATA', false); - const data = filterData ? BABYNAME_DATA : BABYNAME_DATA.filter(([year]) => year > 1950 && year < 1960); + const filterData = boolean('filter dataset', true); + const data = filterData ? BABYNAME_DATA.filter(([year]) => year > 1950 && year < 1960) : BABYNAME_DATA; return (