feat(partition): add element click, over, out events

.playground/playground.tsx

@@ -22,51 +22,116 @@ import {
   ScaleType,
   Position,
   Axis,
-  LineSeries,
-  LineAnnotation,
-  RectAnnotation,
-  AnnotationDomainTypes,
-  LineAnnotationDatum,
-  RectAnnotationDatum,
+  Settings,
+  PartitionElementEvent,
+  XYChartElementEvent,
+  Partition,
+  BarSeries,
 } from '../src';
-import { SeededDataGenerator } from '../src/mocks/utils';
 
+type PieDatum = [string, number, string, number];
+const pieData: Array<PieDatum> = [
+  ['CN', 301, 'CN', 64],
+  ['CN', 301, 'IN', 44],
+  ['CN', 301, 'US', 24],
+  ['CN', 301, 'ID', 13],
+  ['CN', 301, 'BR', 8],
+  ['IN', 245, 'IN', 41],
+  ['IN', 245, 'CN', 36],
+  ['IN', 245, 'US', 22],
+  ['IN', 245, 'BR', 11],
+  ['IN', 245, 'ID', 10],
+  ['US', 130, 'CN', 33],
+  ['US', 130, 'IN', 23],
+  ['US', 130, 'US', 9],
+  ['US', 130, 'ID', 7],
+  ['US', 130, 'BR', 5],
+  ['ID', 55, 'CN', 9],
+  ['ID', 55, 'IN', 8],
+  ['ID', 55, 'ID', 5],
+  ['ID', 55, 'BR', 4],
+  ['ID', 55, 'US', 3],
+  ['PK', 43, 'CN', 8],
+  ['PK', 43, 'IN', 5],
+  ['PK', 43, 'US', 5],
+  ['PK', 43, 'FR', 2],
+  ['PK', 43, 'PK', 2],
+];
 export class Playground extends React.Component<{}, { isSunburstShown: boolean }> {
+  onClick = (elements: Array<PartitionElementEvent | XYChartElementEvent>) => {
+    // eslint-disable-next-line no-console
+    console.log(elements[0]);
+  };
   render() {
-    const dg = new SeededDataGenerator();
-    const data = dg.generateGroupedSeries(10, 2).map((item) => ({
-      ...item,
-      y1: item.y + 100,
-    }));
-    const lineDatum: LineAnnotationDatum[] = [{ dataValue: 321321 }];
-    const rectDatum: RectAnnotationDatum[] = [{ coordinates: { x1: 100 } }];
-
     return (
       <>
         <div className="chart">
-          <Chart>
-            <Axis id="y1" position={Position.Left} title="y1" />
-            <Axis id="y2" domain={{ fit: true }} groupId="g2" position={Position.Right} title="y2" />
-            <Axis id="x" position={Position.Bottom} title="x" />
-            <LineSeries
-              id="line1"
-              xScaleType={ScaleType.Linear}
+          <Chart size={[300, 200]}>
+            <Settings
+              onElementClick={this.onClick}
+              rotation={90}
+              theme={{
+                barSeriesStyle: {
+                  displayValue: {
+                    fontSize: 15,
+                    fill: 'black',
+                    offsetX: 5,
+                    offsetY: -8,
+                  },
+                },
+              }}
+            />
+            <Axis id="y1" position={Position.Left} />
+            <BarSeries
+              id="amount"
+              xScaleType={ScaleType.Ordinal}
               xAccessor="x"
               yAccessors={['y']}
-              splitSeriesAccessors={['g']}
-              data={data}
+              data={[
+                { x: 'trousers', y: 390, val: 1222 },
+                { x: 'watches', y: 0, val: 1222 },
+                { x: 'bags', y: 750, val: 1222 },
+                { x: 'cocktail dresses', y: 854, val: 1222 },
+              ]}
+              displayValueSettings={{
+                showValueLabel: true,
+                isValueContainedInElement: true,
+                hideClippedValue: true,
+                valueFormatter: (d) => {
+                  return `${d} $`;
+                },
+              }}
             />
-            <LineSeries
-              id="line2"
-              groupId="g2"
-              xScaleType={ScaleType.Linear}
-              xAccessor="x"
-              yAccessors={['y1']}
-              splitSeriesAccessors={['g']}
-              data={data}
+          </Chart>
+        </div>
+        <div className="chart">
+          <Chart>
+            <Settings onElementClick={this.onClick} />
+            <Partition
+              id="pie"
+              data={pieData}
+              valueAccessor={(d) => {
+                return d[3];
+              }}
+              layers={[
+                {
+                  groupByRollup: (d: PieDatum) => {
+                    return d[0];
+                  },
+                  nodeLabel: (d) => {
+                    return `dest: ${d}`;
+                  },
+                },
+                {
+                  groupByRollup: (d: PieDatum) => {
+                    return d[2];
+                  },
+                  nodeLabel: (d) => {
+                    return `source: ${d}`;
+                  },
+                },
+              ]}
             />
-            <LineAnnotation id="sss" dataValues={lineDatum} domainType={AnnotationDomainTypes.XDomain} />
-            <RectAnnotation id="111" dataValues={rectDatum} />
           </Chart>
         </div>
       </>

integration/tests/interactions.test.ts

@@ -94,5 +94,14 @@ describe.only('Tooltips', () => {
         },
       );
     });
+    it('shows tooltip on sunburst', async () => {
+      await common.expectChartWithMouseAtUrlToMatchScreenshot(
+        'http://localhost:9001/?path=/story/interactions--sunburst-slice-clicks',
+        {
+          x: 350,
+          y: 100,
+        },
+      );
+    });
   });
 });

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

@@ -22,8 +22,8 @@ import { $Values as Values } from 'utility-types';
 import { Color, ValueFormatter } from '../../../../utils/commons';
 
 export const PartitionLayout = Object.freeze({
-  sunburst: 'sunburst',
-  treemap: 'treemap',
+  sunburst: 'sunburst' as 'sunburst',
+  treemap: 'treemap' as 'treemap',
 });
 
 export type PartitionLayout = Values<typeof PartitionLayout>; // could use ValuesType<typeof HierarchicalChartTypes>

src/chart_types/partition_chart/state/chart_state.tsx

@@ -23,9 +23,21 @@ import { Partition } from '../renderer/canvas/partition';
 import { isTooltipVisibleSelector } from '../state/selectors/is_tooltip_visible';
 import { getTooltipInfoSelector } from '../state/selectors/tooltip';
 import { Tooltip } from '../../../components/tooltip';
+import { createOnElementClickCaller } from './selectors/on_element_click_caller';
+import { createOnElementOverCaller } from './selectors/on_element_over_caller';
+import { createOnElementOutCaller } from './selectors/on_element_out_caller';
 
 const EMPTY_MAP = new Map();
 export class PartitionState implements InternalChartState {
+  onElementClickCaller: (state: GlobalChartState) => void;
+  onElementOverCaller: (state: GlobalChartState) => void;
+  onElementOutCaller: (state: GlobalChartState) => void;
+
+  constructor() {
+    this.onElementClickCaller = createOnElementClickCaller();
+    this.onElementOverCaller = createOnElementOverCaller();
+    this.onElementOutCaller = createOnElementOutCaller();
+  }
   chartType = ChartTypes.Partition;
   isBrushAvailable() {
     return false;
@@ -67,4 +79,9 @@ export class PartitionState implements InternalChartState {
       y1: position.y,
     };
   }
+  eventCallbacks(globalState: GlobalChartState) {
+    this.onElementOverCaller(globalState);
+    this.onElementOutCaller(globalState);
+    this.onElementClickCaller(globalState);
+  }
 }

src/chart_types/partition_chart/state/selectors/on_element_click_caller.ts

@@ -0,0 +1,76 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+
+import createCachedSelector from 're-reselect';
+import { Selector } from 'reselect';
+import { GlobalChartState, PointerState } from '../../../../state/chart_state';
+import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
+import { SettingsSpec, LayerValue } from '../../../../specs';
+import { getPickedShapesLayerValues } from './picked_shapes';
+import { getPieSpecOrNull } from './pie_spec';
+import { ChartTypes } from '../../..';
+import { SeriesIdentifier } from '../../../xy_chart/utils/series';
+import { isClicking } from '../../../../state/utils';
+import { getLastClickSelector } from '../../../../state/selectors/get_last_click';
+
+/**
+ * Will call the onElementClick listener every time the following preconditions are met:
+ * - the onElementClick listener is available
+ * - we have at least one highlighted geometry
+ * - the pointer state goes from down state to up state
+ */
+export function createOnElementClickCaller(): (state: GlobalChartState) => void {
+  let prevClick: PointerState | null = null;
+  let selector: Selector<GlobalChartState, void> | null = null;
+  return (state: GlobalChartState) => {
+    if (selector === null && state.chartType === ChartTypes.Partition) {
+      selector = createCachedSelector(
+        [getPieSpecOrNull, getLastClickSelector, getSettingsSpecSelector, getPickedShapesLayerValues],
+        (pieSpec, lastClick: PointerState | null, settings: SettingsSpec, pickedShapes): void => {
+          if (!pieSpec) {
+            return;
+          }
+          if (!settings.onElementClick) {
+            return;
+          }
+          const nextPickedShapesLength = pickedShapes.length;
+          if (nextPickedShapesLength > 0 && isClicking(prevClick, lastClick)) {
+            if (settings && settings.onElementClick) {
+              const elements = pickedShapes.map<[Array<LayerValue>, SeriesIdentifier]>((values) => {
+                return [
+                  values,
+                  {
+                    specId: pieSpec.id,
+                    key: `spec{${pieSpec.id}}`,
+                  },
+                ];
+              });
+              settings.onElementClick(elements);
+            }
+          }
+          prevClick = lastClick;
+        },
+      )({
+        keySelector: (state: GlobalChartState) => state.chartId,
+      });
+    }
+    if (selector) {
+      selector(state);
+    }
+  };
+}

src/chart_types/partition_chart/state/selectors/on_element_out_caller.ts

@@ -0,0 +1,62 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License. */
+
+import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
+import createCachedSelector from 're-reselect';
+import { getPickedShapesLayerValues } from './picked_shapes';
+import { getPieSpecOrNull } from './pie_spec';
+import { GlobalChartState } from '../../../../state/chart_state';
+import { Selector } from 'react-redux';
+import { ChartTypes } from '../../../index';
+import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+
+/**
+ * Will call the onElementOut listener every time the following preconditions are met:
+ * - the onElementOut listener is available
+ * - the highlighted geometries list goes from a list of at least one object to an empty one
+ */
+export function createOnElementOutCaller(): (state: GlobalChartState) => void {
+  let prevPickedShapes: number | null = null;
+  let selector: Selector<GlobalChartState, void> | null = null;
+  return (state: GlobalChartState) => {
+    if (selector === null && state.chartType === ChartTypes.Partition) {
+      selector = createCachedSelector(
+        [getPieSpecOrNull, getPickedShapesLayerValues, getSettingsSpecSelector],
+        (pieSpec, pickedShapes, settings): void => {
+          if (!pieSpec) {
+            return;
+          }
+          if (!settings.onElementOut) {
+            return;
+          }
+          const nextPickedShapes = pickedShapes.length;
+
+          if (prevPickedShapes !== null && prevPickedShapes > 0 && nextPickedShapes === 0) {
+            settings.onElementOut();
+          }
+          prevPickedShapes = nextPickedShapes;
+        },
+      )({
+        keySelector: getChartIdSelector,
+      });
+    }
+    if (selector) {
+      selector(state);
+    }
+  };
+}