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

.eslintrc.js

@@ -93,7 +93,7 @@ module.exports = {
         'under the License.',
       ],
       'block',
-      ['-\\*-(.*)-\\*-', 'eslint(.*)'],
+      ['-\\*-(.*)-\\*-', 'eslint(.*)', '@jest-environment'],
     ],
   },
   settings: {

.playground/playground.tsx

@@ -22,51 +22,57 @@ import {
   ScaleType,
   Position,
   Axis,
-  LineSeries,
-  LineAnnotation,
-  RectAnnotation,
-  AnnotationDomainTypes,
-  LineAnnotationDatum,
-  RectAnnotationDatum,
+  Settings,
+  PartitionElementEvent,
+  XYChartElementEvent,
+  BarSeries,
 } from '../src';
-import { SeededDataGenerator } from '../src/mocks/utils';
 
 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}
-              xAccessor="x"
-              yAccessors={['y']}
-              splitSeriesAccessors={['g']}
-              data={data}
+          <Chart size={[300, 200]}>
+            <Settings
+              onElementClick={this.onClick}
+              rotation={90}
+              theme={{
+                barSeriesStyle: {
+                  displayValue: {
+                    fontSize: 15,
+                    fill: 'black',
+                    offsetX: 5,
+                    offsetY: -8,
+                  },
+                },
+              }}
             />
-            <LineSeries
-              id="line2"
-              groupId="g2"
-              xScaleType={ScaleType.Linear}
+            <Axis id="y1" position={Position.Left} />
+            <BarSeries
+              id="amount"
+              xScaleType={ScaleType.Ordinal}
               xAccessor="x"
-              yAccessors={['y1']}
-              splitSeriesAccessors={['g']}
-              data={data}
+              yAccessors={['y']}
+              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} $`;
+                },
+              }}
             />
-            <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);
+    }
+  };
+}

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

@@ -0,0 +1,95 @@
+/*
+ * 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 { LayerValue } from '../../../../specs';
+import { GlobalChartState } from '../../../../state/chart_state';
+import { Selector } from 'react-redux';
+import { ChartTypes } from '../../../index';
+import { getChartIdSelector } from '../../../../state/selectors/get_chart_id';
+import { getPieSpecOrNull } from './pie_spec';
+import { getPickedShapesLayerValues } from './picked_shapes';
+import { SeriesIdentifier } from '../../../xy_chart/utils/series';
+
+function isOverElement(prevPickedShapes: Array<Array<LayerValue>> = [], nextPickedShapes: Array<Array<LayerValue>>) {
+  if (nextPickedShapes.length === 0) {
+    return;
+  }
+  if (nextPickedShapes.length !== prevPickedShapes.length) {
+    return true;
+  }
+  return !nextPickedShapes.every((nextPickedShapeValues, index) => {
+    const prevPickedShapeValues = prevPickedShapes[index];
+    if (prevPickedShapeValues === null) {
+      return false;
+    }
+    if (prevPickedShapeValues.length !== nextPickedShapeValues.length) {
+      return false;
+    }
+    return nextPickedShapeValues.every((layerValue, i) => {
+      const prevPickedValue = prevPickedShapeValues[i];
+      if (!prevPickedValue) {
+        return false;
+      }
+      return layerValue.value === prevPickedValue.value && layerValue.groupByRollup === prevPickedValue.groupByRollup;
+    });
+  });
+}
+
+/**
+ * Will call the onElementOver listener every time the following preconditions are met:
+ * - the onElementOver listener is available
+ * - we have a new set of highlighted geometries on our state
+ */
+export function createOnElementOverCaller(): (state: GlobalChartState) => void {
+  let prevPickedShapes: Array<Array<LayerValue>> = [];
+  let selector: Selector<GlobalChartState, void> | null = null;
+  return (state: GlobalChartState) => {
+    if (selector === null && state.chartType === ChartTypes.Partition) {
+      selector = createCachedSelector(
+        [getPieSpecOrNull, getPickedShapesLayerValues, getSettingsSpecSelector],
+        (pieSpec, nextPickedShapes, settings): void => {
+          if (!pieSpec) {
+            return;
+          }
+          if (!settings.onElementOver) {
+            return;
+          }
+
+          if (isOverElement(prevPickedShapes, nextPickedShapes)) {
+            const elements = nextPickedShapes.map<[Array<LayerValue>, SeriesIdentifier]>((values) => [
+              values,
+              {
+                specId: pieSpec.id,
+                key: `spec{${pieSpec.id}}`,
+              },
+            ]);
+            settings.onElementOver(elements);
+          }
+          prevPickedShapes = nextPickedShapes;
+        },
+      )({
+        keySelector: getChartIdSelector,
+      });
+    }
+    if (selector) {
+      selector(state);
+    }
+  };
+}