From ea7404e2d46ffddaba08deb2f2ffeff103ca75b8 Mon Sep 17 00:00:00 2001 From: Robert Monfera Date: Thu, 28 Jan 2021 22:03:39 +0100 Subject: [PATCH 1/9] feat: partition drilldown --- api/charts.api.md | 4 +- .../partition_chart/layout/config/config.ts | 4 ++ .../layout/types/config_types.ts | 7 +++ .../layout/utils/group_by_rollup.ts | 49 ++++++++++++------- .../viewmodel/hierarchy_of_arrays.test.ts | 2 +- .../layout/viewmodel/hierarchy_of_arrays.ts | 5 +- .../partition_chart/state/selectors/tree.ts | 48 +++++++++++------- src/state/chart_state.ts | 5 +- src/state/reducers/interactions.ts | 11 +++-- stories/icicle/01_unix_icicle.tsx | 2 +- stories/icicle/02_unix_flame.tsx | 10 ++-- 11 files changed, 95 insertions(+), 52 deletions(-) diff --git a/api/charts.api.md b/api/charts.api.md index 0ae309dab0..0cd4eb76a5 100644 --- a/api/charts.api.md +++ b/api/charts.api.md @@ -2004,8 +2004,8 @@ export type YDomainRange = YDomainBase & DomainRange; // src/chart_types/heatmap/layout/types/config_types.ts:28:13 - (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts // src/chart_types/heatmap/layout/types/config_types.ts:60:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts // src/chart_types/heatmap/layout/types/config_types.ts:61:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts -// src/chart_types/partition_chart/layout/types/config_types.ts:128:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts -// src/chart_types/partition_chart/layout/types/config_types.ts:129:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts +// src/chart_types/partition_chart/layout/types/config_types.ts:134:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts +// src/chart_types/partition_chart/layout/types/config_types.ts:136:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts // src/chart_types/partition_chart/specs/index.ts:48:13 - (ae-forgotten-export) The symbol "NodeColorAccessor" needs to be exported by the entry point index.d.ts // src/common/series_id.ts:40:3 - (ae-forgotten-export) The symbol "SeriesKey" needs to be exported by the entry point index.d.ts diff --git a/src/chart_types/partition_chart/layout/config/config.ts b/src/chart_types/partition_chart/layout/config/config.ts index 6b1c8bab9d..bdb8c06f85 100644 --- a/src/chart_types/partition_chart/layout/config/config.ts +++ b/src/chart_types/partition_chart/layout/config/config.ts @@ -165,6 +165,10 @@ export const configMetadata = { type: 'string', values: Object.keys(PartitionLayout), }, + drilldown: { + dflt: false, + type: 'boolean', + }, // fill text layout config circlePadding: { dflt: 2, min: 0.0, max: 8, type: 'number' }, diff --git a/src/chart_types/partition_chart/layout/types/config_types.ts b/src/chart_types/partition_chart/layout/types/config_types.ts index d04e53cbed..fe8e37051e 100644 --- a/src/chart_types/partition_chart/layout/types/config_types.ts +++ b/src/chart_types/partition_chart/layout/types/config_types.ts @@ -90,6 +90,8 @@ export interface StaticConfig extends FillFontSizeRange { clockwiseSectors: boolean; specialFirstInnermostSector: boolean; partitionLayout: PartitionLayout; + /** @alpha */ + drilldown: boolean; // general text config fontFamily: FontFamily; @@ -118,14 +120,19 @@ export interface StaticConfig extends FillFontSizeRange { export type EasingFunction = (x: Ratio) => Ratio; export interface AnimKeyframe { + /** @alpha */ time: number; + /** @alpha */ easingFunction: EasingFunction; + /** @alpha */ keyframeConfig: Partial; } export interface Config extends StaticConfig { animation: { + /** @alpha */ duration: TimeMs; + /** @alpha */ keyframes: Array; }; } diff --git a/src/chart_types/partition_chart/layout/utils/group_by_rollup.ts b/src/chart_types/partition_chart/layout/utils/group_by_rollup.ts index 68fa1ee4d0..c6df4e5e0b 100644 --- a/src/chart_types/partition_chart/layout/utils/group_by_rollup.ts +++ b/src/chart_types/partition_chart/layout/utils/group_by_rollup.ts @@ -108,6 +108,8 @@ export function groupByRollup( identity: () => any; }, factTable: Relation, + drilldown: boolean, + drilldownSelection: CategoryKey[], ): HierarchyOfMaps { const statistics: Statistics = { globalAggregate: NaN, @@ -115,26 +117,35 @@ export function groupByRollup( const reductionMap: HierarchyOfMaps = factTable.reduce((p: HierarchyOfMaps, n, index) => { const keyCount = keyAccessors.length; let pointer: HierarchyOfMaps = p; - keyAccessors.forEach((keyAccessor, i) => { - const key: Key = keyAccessor(n, index); - const last = i === keyCount - 1; - const node = pointer.get(key); - const inputIndices = node?.[INPUT_KEY] ?? []; - const childrenMap = node?.[CHILDREN_KEY] ?? new Map(); - const aggregate = node?.[AGGREGATE_KEY] ?? identity(); - const reductionValue = reducer(aggregate, valueAccessor(n)); - pointer.set(key, { - [AGGREGATE_KEY]: reductionValue, - [STATISTICS_KEY]: statistics, - [INPUT_KEY]: [...inputIndices, index], - [DEPTH_KEY]: i, - ...(!last && { [CHILDREN_KEY]: childrenMap }), + keyAccessors + .filter( + () => + !drilldown || + keyAccessors + .slice(0, drilldownSelection.length) + .map((ka) => ka(n, index)) + .join(' | ') === drilldownSelection.slice(0, drilldownSelection.length).join(' | '), + ) + .forEach((keyAccessor, i) => { + const key: Key = keyAccessor(n, index); + const last = i === keyCount - 1; + const node = pointer.get(key); + const inputIndices = node?.[INPUT_KEY] ?? []; + const childrenMap = node?.[CHILDREN_KEY] ?? new Map(); + const aggregate = node?.[AGGREGATE_KEY] ?? identity(); + const reductionValue = reducer(aggregate, valueAccessor(n)); + pointer.set(key, { + [AGGREGATE_KEY]: reductionValue, + [STATISTICS_KEY]: statistics, + [INPUT_KEY]: [...inputIndices, index], + [DEPTH_KEY]: i, + ...(!last && { [CHILDREN_KEY]: childrenMap }), + }); + if (childrenMap) { + // will always be true except when exiting from forEach, ie. upon encountering the leaf node + pointer = childrenMap; + } }); - if (childrenMap) { - // will always be true except when exiting from forEach, ie. upon encountering the leaf node - pointer = childrenMap; - } - }); return p; }, new Map()); if (reductionMap.get(HIERARCHY_ROOT_KEY) !== undefined) { diff --git a/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.test.ts b/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.test.ts index 9af02cb739..69b782b402 100644 --- a/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.test.ts +++ b/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.test.ts @@ -32,7 +32,7 @@ const groupByRollupAccessors = [() => null, (d: any) => d.sitc1]; describe('Test', () => { test('getHierarchyOfArrays should omit zero and negative values', () => { - const outerResult = getHierarchyOfArrays(rawFacts, valueAccessor, groupByRollupAccessors); + const outerResult = getHierarchyOfArrays(rawFacts, valueAccessor, groupByRollupAccessors, null, false, []); expect(outerResult.length).toBe(1); const results = outerResult[0]; diff --git a/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts b/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts index 867be4b5ec..c3dd557b22 100644 --- a/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts +++ b/src/chart_types/partition_chart/layout/viewmodel/hierarchy_of_arrays.ts @@ -17,6 +17,7 @@ * under the License. */ +import { CategoryKey } from '../../../../common/category'; import { IndexedAccessorFn } from '../../../../utils/accessor'; import { ValueAccessor } from '../../../../utils/common'; import { Relation } from '../types/types'; @@ -36,6 +37,8 @@ export function getHierarchyOfArrays( valueAccessor: ValueAccessor, groupByRollupAccessors: IndexedAccessorFn[], sorter: Sorter | null = childOrders.descending, + drilldown: boolean, + drilldownSelection: CategoryKey[], ): HierarchyOfArrays { const aggregator = aggregators.sum; @@ -53,7 +56,7 @@ export function getHierarchyOfArrays( // By introducing `scale`, we no longer need to deal with the dichotomy of // size as data value vs size as number of pixels in the rectangle return mapsToArrays( - groupByRollup(groupByRollupAccessors, valueAccessor, aggregator, facts), + groupByRollup(groupByRollupAccessors, valueAccessor, aggregator, facts, drilldown, drilldownSelection), sorter && aggregateComparator(mapEntryValue, sorter), ); } diff --git a/src/chart_types/partition_chart/state/selectors/tree.ts b/src/chart_types/partition_chart/state/selectors/tree.ts index 2839720442..be53e7de4f 100644 --- a/src/chart_types/partition_chart/state/selectors/tree.ts +++ b/src/chart_types/partition_chart/state/selectors/tree.ts @@ -20,8 +20,9 @@ import createCachedSelector from 're-reselect'; import { ChartTypes } from '../../..'; +import { CategoryKey } from '../../../../common/category'; import { SpecTypes } from '../../../../specs'; -import { GlobalChartState } from '../../../../state/chart_state'; +import { GlobalChartState, SpecList } from '../../../../state/chart_state'; import { getSpecsFromStore } from '../../../../state/utils'; import { configMetadata } from '../../layout/config/config'; import { childOrders, HierarchyOfArrays, HIERARCHY_ROOT_KEY } from '../../layout/utils/group_by_rollup'; @@ -31,22 +32,31 @@ import { PartitionSpec } from '../../specs'; const getSpecs = (state: GlobalChartState) => state.specs; +const getDrilldownSelection = (state: GlobalChartState) => state.interactions.drilldown || []; + +/** @internal */ +export const getTreeFun = (specs: SpecList, drilldownSelection: CategoryKey[]): HierarchyOfArrays => { + const pieSpecs = getSpecsFromStore(specs, ChartTypes.Partition, SpecTypes.Series); + if (pieSpecs.length !== 1) { + return []; + } + const { + data, + valueAccessor, + layers, + config: { drilldown }, + } = pieSpecs[0]; + const layout = pieSpecs[0].config.partitionLayout ?? configMetadata.partitionLayout.dflt; + const sorter = isTreemap(layout) || isSunburst(layout) ? childOrders.descending : null; + return getHierarchyOfArrays( + data, + valueAccessor, + [() => HIERARCHY_ROOT_KEY, ...layers.map(({ groupByRollup }) => groupByRollup)], + sorter, + Boolean(drilldown), + drilldownSelection, + ); +}; + /** @internal */ -export const getTree = createCachedSelector( - [getSpecs], - (specs): HierarchyOfArrays => { - const pieSpecs = getSpecsFromStore(specs, ChartTypes.Partition, SpecTypes.Series); - if (pieSpecs.length !== 1) { - return []; - } - const { data, valueAccessor, layers } = pieSpecs[0]; - const layout = pieSpecs[0].config.partitionLayout ?? configMetadata.partitionLayout.dflt; - const sorter = isTreemap(layout) || isSunburst(layout) ? childOrders.descending : null; - return getHierarchyOfArrays( - data, - valueAccessor, - [() => HIERARCHY_ROOT_KEY, ...layers.map(({ groupByRollup }) => groupByRollup)], - sorter, - ); - }, -)((state) => state.chartId); +export const getTree = createCachedSelector([getSpecs, getDrilldownSelection], getTreeFun)((state) => state.chartId); diff --git a/src/state/chart_state.ts b/src/state/chart_state.ts index e2fe1200ef..18e0b18a0a 100644 --- a/src/state/chart_state.ts +++ b/src/state/chart_state.ts @@ -25,6 +25,7 @@ import { HeatmapState } from '../chart_types/heatmap/state/chart_state'; import { PrimitiveValue } from '../chart_types/partition_chart/layout/utils/group_by_rollup'; import { PartitionState } from '../chart_types/partition_chart/state/chart_state'; import { XYAxisChartState } from '../chart_types/xy_chart/state/chart_state'; +import { CategoryKey } from '../common/category'; import { LegendItem, LegendItemExtraValues } from '../common/legend'; import { SeriesIdentifier, SeriesKey } from '../common/series_id'; import { TooltipAnchorPosition, TooltipInfo } from '../components/tooltip/types'; @@ -186,6 +187,7 @@ export interface InteractionsState { highlightedLegendPath: LegendPath; deselectedDataSeries: SeriesIdentifier[]; hoveredDOMElement: DOMElement | null; + drilldown: CategoryKey[]; } /** @internal */ @@ -275,6 +277,7 @@ export const getInitialState = (chartId: string): GlobalChartState => ({ highlightedLegendPath: [], deselectedDataSeries: [], hoveredDOMElement: null, + drilldown: [], }, externalEvents: { pointer: null, @@ -391,7 +394,7 @@ export const chartStoreReducer = (chartId: string) => { return getInternalIsInitializedSelector(state) === InitStatus.Initialized ? { ...state, - interactions: interactionsReducer(state.interactions, action, getLegendItemsSelector(state)), + interactions: interactionsReducer(state, action, getLegendItemsSelector(state)), } : state; } diff --git a/src/state/reducers/interactions.ts b/src/state/reducers/interactions.ts index 5f26b693c9..9a0c3ff626 100644 --- a/src/state/reducers/interactions.ts +++ b/src/state/reducers/interactions.ts @@ -17,9 +17,11 @@ * under the License. */ +import { getPickedShapesLayerValues } from '../../chart_types/partition_chart/state/selectors/picked_shapes'; import { getSeriesIndex } from '../../chart_types/xy_chart/utils/series'; import { LegendItem } from '../../common/legend'; import { SeriesIdentifier } from '../../common/series_id'; +import { LayerValue } from '../../specs'; import { getDelta } from '../../utils/point'; import { DOMElementActions, ON_DOM_ELEMENT_ENTER, ON_DOM_ELEMENT_LEAVE } from '../actions/dom_element'; import { KeyActions, ON_KEY_UP } from '../actions/key'; @@ -30,8 +32,8 @@ import { ON_TOGGLE_DESELECT_SERIES, ToggleDeselectSeriesAction, } from '../actions/legend'; -import { MouseActions, ON_MOUSE_DOWN, ON_MOUSE_UP, ON_POINTER_MOVE } from '../actions/mouse'; -import { InteractionsState } from '../chart_state'; +import { ON_MOUSE_DOWN, ON_MOUSE_UP, ON_POINTER_MOVE, MouseActions } from '../actions/mouse'; +import { GlobalChartState, InteractionsState } from '../chart_state'; import { getInitialPointerState } from '../utils'; /** @@ -46,10 +48,11 @@ const DRAG_DETECTION_PIXEL_DELTA = 4; /** @internal */ export function interactionsReducer( - state: InteractionsState, + globalState: GlobalChartState, action: LegendActions | MouseActions | KeyActions | DOMElementActions, legendItems: LegendItem[], ): InteractionsState { + const { interactions: state } = globalState; switch (action.type) { case ON_KEY_UP: if (action.key === 'Escape') { @@ -79,8 +82,10 @@ export function interactionsReducer( }, }; case ON_MOUSE_DOWN: + const layerValues: LayerValue[] = getPickedShapesLayerValues(globalState)[0]; return { ...state, + drilldown: layerValues ? layerValues[layerValues.length - 1].path.map((n) => n.value) : [], pointer: { ...state.pointer, dragging: false, diff --git a/stories/icicle/01_unix_icicle.tsx b/stories/icicle/01_unix_icicle.tsx index d4bbecdf3b..6e90c5c901 100644 --- a/stories/icicle/01_unix_icicle.tsx +++ b/stories/icicle/01_unix_icicle.tsx @@ -36,7 +36,7 @@ export const Example = () => { valueAccessor={(d: Datum) => d.value as number} valueFormatter={() => ''} layers={getLayerSpec(color)} - config={{ ...config, partitionLayout: PartitionLayout.icicle }} + config={{ ...config, partitionLayout: PartitionLayout.sunburst, drilldown: true }} /> ); diff --git a/stories/icicle/02_unix_flame.tsx b/stories/icicle/02_unix_flame.tsx index ed7c1d0ecc..0aba440d15 100644 --- a/stories/icicle/02_unix_flame.tsx +++ b/stories/icicle/02_unix_flame.tsx @@ -35,10 +35,6 @@ export const Example = () => { legendStrategy={LegendStrategy.PathWithDescendants} legendMaxDepth={maxDepth} theme={STORYBOOK_LIGHT_THEME} - onElementClick={(e) => { - // eslint-disable-next-line no-console - console.log(e); - }} /> { valueAccessor={(d: Datum) => d.value as number} valueFormatter={() => ''} layers={getLayerSpec(color)} - config={{ ...config, partitionLayout: PartitionLayout.flame }} + config={{ + ...config, + partitionLayout: PartitionLayout.flame, + drilldown: true, + }} /> ); From 19d0fb0d41474f662338c84b619a77aab1956ac6 Mon Sep 17 00:00:00 2001 From: Robert Monfera Date: Thu, 28 Jan 2021 22:20:56 +0100 Subject: [PATCH 2/9] refactor: inlining getTree back into selector for comparability --- .../partition_chart/state/selectors/tree.ts | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/src/chart_types/partition_chart/state/selectors/tree.ts b/src/chart_types/partition_chart/state/selectors/tree.ts index be53e7de4f..c0abdd3754 100644 --- a/src/chart_types/partition_chart/state/selectors/tree.ts +++ b/src/chart_types/partition_chart/state/selectors/tree.ts @@ -25,7 +25,7 @@ import { SpecTypes } from '../../../../specs'; import { GlobalChartState, SpecList } from '../../../../state/chart_state'; import { getSpecsFromStore } from '../../../../state/utils'; import { configMetadata } from '../../layout/config/config'; -import { childOrders, HierarchyOfArrays, HIERARCHY_ROOT_KEY } from '../../layout/utils/group_by_rollup'; +import { childOrders, HIERARCHY_ROOT_KEY, HierarchyOfArrays } from '../../layout/utils/group_by_rollup'; import { getHierarchyOfArrays } from '../../layout/viewmodel/hierarchy_of_arrays'; import { isSunburst, isTreemap } from '../../layout/viewmodel/viewmodel'; import { PartitionSpec } from '../../specs'; @@ -35,28 +35,28 @@ const getSpecs = (state: GlobalChartState) => state.specs; const getDrilldownSelection = (state: GlobalChartState) => state.interactions.drilldown || []; /** @internal */ -export const getTreeFun = (specs: SpecList, drilldownSelection: CategoryKey[]): HierarchyOfArrays => { - const pieSpecs = getSpecsFromStore(specs, ChartTypes.Partition, SpecTypes.Series); - if (pieSpecs.length !== 1) { - return []; - } - const { - data, - valueAccessor, - layers, - config: { drilldown }, - } = pieSpecs[0]; - const layout = pieSpecs[0].config.partitionLayout ?? configMetadata.partitionLayout.dflt; - const sorter = isTreemap(layout) || isSunburst(layout) ? childOrders.descending : null; - return getHierarchyOfArrays( - data, - valueAccessor, - [() => HIERARCHY_ROOT_KEY, ...layers.map(({ groupByRollup }) => groupByRollup)], - sorter, - Boolean(drilldown), - drilldownSelection, - ); -}; - -/** @internal */ -export const getTree = createCachedSelector([getSpecs, getDrilldownSelection], getTreeFun)((state) => state.chartId); +export const getTree = createCachedSelector( + [getSpecs, getDrilldownSelection], + (specs: SpecList, drilldownSelection: CategoryKey[]): HierarchyOfArrays => { + const pieSpecs = getSpecsFromStore(specs, ChartTypes.Partition, SpecTypes.Series); + if (pieSpecs.length !== 1) { + return []; + } + const { + data, + valueAccessor, + layers, + config: { drilldown }, + } = pieSpecs[0]; + const layout = pieSpecs[0].config.partitionLayout ?? configMetadata.partitionLayout.dflt; + const sorter = isTreemap(layout) || isSunburst(layout) ? childOrders.descending : null; + return getHierarchyOfArrays( + data, + valueAccessor, + [() => HIERARCHY_ROOT_KEY, ...layers.map(({ groupByRollup }) => groupByRollup)], + sorter, + Boolean(drilldown), + drilldownSelection, + ); + }, +)((state) => state.chartId); From c7ef1e081ba7680a264b0db8797edf7185fe352c Mon Sep 17 00:00:00 2001 From: Robert Monfera Date: Thu, 28 Jan 2021 22:26:18 +0100 Subject: [PATCH 3/9] fix: restored icicle --- stories/icicle/01_unix_icicle.tsx | 2 +- stories/icicle/02_unix_flame.tsx | 6 +----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/stories/icicle/01_unix_icicle.tsx b/stories/icicle/01_unix_icicle.tsx index 6e90c5c901..8c4fde3696 100644 --- a/stories/icicle/01_unix_icicle.tsx +++ b/stories/icicle/01_unix_icicle.tsx @@ -36,7 +36,7 @@ export const Example = () => { valueAccessor={(d: Datum) => d.value as number} valueFormatter={() => ''} layers={getLayerSpec(color)} - config={{ ...config, partitionLayout: PartitionLayout.sunburst, drilldown: true }} + config={{ ...config, partitionLayout: PartitionLayout.icicle, drilldown: true }} /> ); diff --git a/stories/icicle/02_unix_flame.tsx b/stories/icicle/02_unix_flame.tsx index 0aba440d15..195dffefbc 100644 --- a/stories/icicle/02_unix_flame.tsx +++ b/stories/icicle/02_unix_flame.tsx @@ -42,11 +42,7 @@ export const Example = () => { valueAccessor={(d: Datum) => d.value as number} valueFormatter={() => ''} layers={getLayerSpec(color)} - config={{ - ...config, - partitionLayout: PartitionLayout.flame, - drilldown: true, - }} + config={{ ...config, partitionLayout: PartitionLayout.flame, drilldown: true }} /> ); From c17ed23aedd7795eba2f4f33c41dc6f24cac2268 Mon Sep 17 00:00:00 2001 From: Robert Monfera Date: Mon, 1 Feb 2021 20:45:07 +0100 Subject: [PATCH 4/9] Update src/chart_types/partition_chart/layout/utils/group_by_rollup.ts Co-authored-by: Nick Partridge --- src/chart_types/partition_chart/layout/utils/group_by_rollup.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/chart_types/partition_chart/layout/utils/group_by_rollup.ts b/src/chart_types/partition_chart/layout/utils/group_by_rollup.ts index c6df4e5e0b..cd1ed87f30 100644 --- a/src/chart_types/partition_chart/layout/utils/group_by_rollup.ts +++ b/src/chart_types/partition_chart/layout/utils/group_by_rollup.ts @@ -123,7 +123,7 @@ export function groupByRollup( !drilldown || keyAccessors .slice(0, drilldownSelection.length) - .map((ka) => ka(n, index)) + .map((keyAccessor) => keyAccessor(n, index)) .join(' | ') === drilldownSelection.slice(0, drilldownSelection.length).join(' | '), ) .forEach((keyAccessor, i) => { From 2c6abd6e424ee5511e88aa96517961c45dcf0440 Mon Sep 17 00:00:00 2001 From: Robert Monfera Date: Mon, 1 Feb 2021 20:45:44 +0100 Subject: [PATCH 5/9] Update src/chart_types/partition_chart/state/selectors/tree.ts Co-authored-by: Nick Partridge --- src/chart_types/partition_chart/state/selectors/tree.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/chart_types/partition_chart/state/selectors/tree.ts b/src/chart_types/partition_chart/state/selectors/tree.ts index c0abdd3754..21784a9cc8 100644 --- a/src/chart_types/partition_chart/state/selectors/tree.ts +++ b/src/chart_types/partition_chart/state/selectors/tree.ts @@ -37,7 +37,7 @@ const getDrilldownSelection = (state: GlobalChartState) => state.interactions.dr /** @internal */ export const getTree = createCachedSelector( [getSpecs, getDrilldownSelection], - (specs: SpecList, drilldownSelection: CategoryKey[]): HierarchyOfArrays => { + (specs, drilldownSelection): HierarchyOfArrays => { const pieSpecs = getSpecsFromStore(specs, ChartTypes.Partition, SpecTypes.Series); if (pieSpecs.length !== 1) { return []; From cf1b3e2d0cff4c2cb64bc4a04d21b3c309ae47cc Mon Sep 17 00:00:00 2001 From: Robert Monfera Date: Mon, 1 Feb 2021 21:04:20 +0100 Subject: [PATCH 6/9] chore: post merge fix --- src/chart_types/partition_chart/state/selectors/tree.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/chart_types/partition_chart/state/selectors/tree.ts b/src/chart_types/partition_chart/state/selectors/tree.ts index 21784a9cc8..040f8018e2 100644 --- a/src/chart_types/partition_chart/state/selectors/tree.ts +++ b/src/chart_types/partition_chart/state/selectors/tree.ts @@ -20,9 +20,8 @@ import createCachedSelector from 're-reselect'; import { ChartTypes } from '../../..'; -import { CategoryKey } from '../../../../common/category'; import { SpecTypes } from '../../../../specs'; -import { GlobalChartState, SpecList } from '../../../../state/chart_state'; +import { GlobalChartState } from '../../../../state/chart_state'; import { getSpecsFromStore } from '../../../../state/utils'; import { configMetadata } from '../../layout/config/config'; import { childOrders, HIERARCHY_ROOT_KEY, HierarchyOfArrays } from '../../layout/utils/group_by_rollup'; From ab5b2258adbfc73b9f1591e9e23693ce99c9e507 Mon Sep 17 00:00:00 2001 From: Robert Monfera Date: Wed, 3 Feb 2021 18:02:07 +0100 Subject: [PATCH 7/9] chore: api post merge update --- api/charts.api.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/api/charts.api.md b/api/charts.api.md index 50959f873c..a2e5ce881e 100644 --- a/api/charts.api.md +++ b/api/charts.api.md @@ -2340,8 +2340,8 @@ export type YDomainRange = YDomainBase & DomainRange; // src/chart_types/heatmap/layout/types/config_types.ts:28:13 - (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts // src/chart_types/heatmap/layout/types/config_types.ts:60:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts // src/chart_types/heatmap/layout/types/config_types.ts:61:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts -// src/chart_types/partition_chart/layout/types/config_types.ts:128:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts -// src/chart_types/partition_chart/layout/types/config_types.ts:129:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts +// src/chart_types/partition_chart/layout/types/config_types.ts:134:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts +// src/chart_types/partition_chart/layout/types/config_types.ts:136:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts // src/common/series_id.ts:40:3 - (ae-forgotten-export) The symbol "SeriesKey" needs to be exported by the entry point index.d.ts // (No @packageDocumentation comment for this package) From 7137cd0c30fa3a0df19fe6f3954f8514db96c946 Mon Sep 17 00:00:00 2001 From: Robert Monfera Date: Sat, 6 Feb 2021 13:03:20 +0100 Subject: [PATCH 8/9] chore: api doc line number update --- api/charts.api.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/api/charts.api.md b/api/charts.api.md index a47d23fc8f..2981b674a7 100644 --- a/api/charts.api.md +++ b/api/charts.api.md @@ -2346,8 +2346,8 @@ export type YDomainRange = YDomainBase & DomainRange; // src/chart_types/heatmap/layout/types/config_types.ts:29:13 - (ae-forgotten-export) The symbol "SizeRatio" needs to be exported by the entry point index.d.ts // src/chart_types/heatmap/layout/types/config_types.ts:61:5 - (ae-forgotten-export) The symbol "TextAlign" needs to be exported by the entry point index.d.ts // src/chart_types/heatmap/layout/types/config_types.ts:62:5 - (ae-forgotten-export) The symbol "TextBaseline" needs to be exported by the entry point index.d.ts -// src/chart_types/partition_chart/layout/types/config_types.ts:126:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts -// src/chart_types/partition_chart/layout/types/config_types.ts:127:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts +// src/chart_types/partition_chart/layout/types/config_types.ts:132:5 - (ae-forgotten-export) The symbol "TimeMs" needs to be exported by the entry point index.d.ts +// src/chart_types/partition_chart/layout/types/config_types.ts:134:5 - (ae-forgotten-export) The symbol "AnimKeyframe" needs to be exported by the entry point index.d.ts // src/common/series_id.ts:40:3 - (ae-forgotten-export) The symbol "SeriesKey" needs to be exported by the entry point index.d.ts // (No @packageDocumentation comment for this package) From 7e32a70e56b715cdc013195d34f070d9f58485d2 Mon Sep 17 00:00:00 2001 From: Robert Monfera Date: Sat, 6 Feb 2021 13:26:06 +0100 Subject: [PATCH 9/9] refactor: decouple directly chart dependent logic from the interaction reducer --- src/state/reducers/interactions.ts | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/src/state/reducers/interactions.ts b/src/state/reducers/interactions.ts index 9a0c3ff626..812289d364 100644 --- a/src/state/reducers/interactions.ts +++ b/src/state/reducers/interactions.ts @@ -17,6 +17,7 @@ * under the License. */ +import { ChartTypes } from '../../chart_types'; import { getPickedShapesLayerValues } from '../../chart_types/partition_chart/state/selectors/picked_shapes'; import { getSeriesIndex } from '../../chart_types/xy_chart/utils/series'; import { LegendItem } from '../../common/legend'; @@ -82,10 +83,9 @@ export function interactionsReducer( }, }; case ON_MOUSE_DOWN: - const layerValues: LayerValue[] = getPickedShapesLayerValues(globalState)[0]; return { ...state, - drilldown: layerValues ? layerValues[layerValues.length - 1].path.map((n) => n.value) : [], + drilldown: getDrilldownData(globalState), pointer: { ...state.pointer, dragging: false, @@ -174,7 +174,10 @@ export function interactionsReducer( } } -/** @internal */ +/** + * Helper functions that currently depend on chart type eg. xy or partition + */ + function toggleDeselectedDataSeries( { legendItemId: id, negate }: ToggleDeselectSeriesAction, deselectedDataSeries: SeriesIdentifier[], @@ -199,3 +202,11 @@ function toggleDeselectedDataSeries( } return [...deselectedDataSeries, id]; } + +function getDrilldownData(globalState: GlobalChartState) { + if (globalState.chartType !== ChartTypes.Partition) { + return []; + } + const layerValues: LayerValue[] = getPickedShapesLayerValues(globalState)[0]; + return layerValues ? layerValues[layerValues.length - 1].path.map((n) => n.value) : []; +}