fix(partition): add get cursor pointer over slices (#1428)

packages/charts/src/chart_types/partition_chart/state/chart_state.tsx

@@ -9,14 +9,14 @@
 import { RefObject } from 'react';
 
 import { ChartType } from '../..';
-import { DEFAULT_CSS_CURSOR } from '../../../common/constants';
 import { BackwardRef, GlobalChartState, InternalChartState } from '../../../state/chart_state';
 import { InitStatus } from '../../../state/selectors/get_internal_is_intialized';
 import { DebugState } from '../../../state/types';
 import { Dimensions } from '../../../utils/dimensions';
 import { render } from '../renderer/dom/layered_partition_chart';
 import { computeLegendSelector } from './selectors/compute_legend';
 import { getChartTypeDescriptionSelector } from './selectors/get_chart_type_description';
+import { getPointerCursorSelector } from './selectors/get_cursor_pointer';
 import { getDebugStateSelector } from './selectors/get_debug_state';
 import { getLegendItemsExtra } from './selectors/get_legend_items_extra';
 import { getLegendItemsLabels } from './selectors/get_legend_items_labels';
@@ -76,8 +76,8 @@ export class PartitionState implements InternalChartState {
     return render(containerRef, forwardStageRef);
   }
 
-  getPointerCursor() {
-    return DEFAULT_CSS_CURSOR;
+  getPointerCursor(globalState: GlobalChartState) {
+    return getPointerCursorSelector(globalState);
   }
 
   isTooltipVisible(globalState: GlobalChartState) {

packages/charts/src/chart_types/partition_chart/state/selectors/get_cursor_pointer.ts

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { DEFAULT_CSS_CURSOR } from '../../../../common/constants';
+import { createCustomCachedSelector } from '../../../../state/create_selector';
+import { getSettingsSpecSelector } from '../../../../state/selectors/get_settings_specs';
+import { getPickedShapes } from './picked_shapes';
+
+/** @internal */
+export const getPointerCursorSelector = createCustomCachedSelector(
+  [getPickedShapes, getSettingsSpecSelector],
+  (pickedShapes, { onElementClick, onElementOver }) => {
+    return Array.isArray(pickedShapes) && pickedShapes.length > 0 && (onElementClick || onElementOver)
+      ? 'pointer'
+      : DEFAULT_CSS_CURSOR;
+  },
+);

storybook/stories/sunburst/2_value_formatted.story.tsx

@@ -6,7 +6,8 @@
  * Side Public License, v 1.
  */
 
-import { number } from '@storybook/addon-knobs';
+import { action } from '@storybook/addon-actions';
+import { boolean, number } from '@storybook/addon-knobs';
 import React from 'react';
 
 import { Chart, Datum, Partition, Settings } from '@elastic/charts';
@@ -16,43 +17,52 @@ import { mocks } from '@elastic/charts/src/mocks/hierarchical';
 import { useBaseTheme } from '../../use_base_theme';
 import { indexInterpolatedFillColor, interpolatorTurbo, productLookup } from '../utils/utils';
 
-export const Example = () => (
-  <Chart>
-    <Settings baseTheme={useBaseTheme()} />
-    <Partition
-      id="spec_1"
-      data={mocks.pie}
-      valueAccessor={(d: Datum) => d.exportVal as number}
-      valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`}
-      layers={[
-        {
-          groupByRollup: (d: Datum) => d.sitc1,
-          nodeLabel: (d: Datum) => productLookup[d].name,
-          fillLabel: {
-            fontWeight: 100,
-            fontStyle: 'italic',
-            valueFont: {
-              fontFamily: 'Menlo',
-              fontStyle: 'normal',
-              fontWeight: 900,
+export const Example = () => {
+  const onElementClick = boolean('onElementClick listener', true);
+  const onElementOver = boolean('onElementOver listener', true);
+
+  return (
+    <Chart>
+      <Settings
+        baseTheme={useBaseTheme()}
+        onElementClick={onElementClick ? action('onElementClick') : undefined}
+        onElementOver={onElementOver ? action('onElementOver') : undefined}
+      />
+      <Partition
+        id="spec_1"
+        data={mocks.pie}
+        valueAccessor={(d: Datum) => d.exportVal as number}
+        valueFormatter={(d: number) => `$${config.fillLabel.valueFormatter(Math.round(d / 1000000000))}\u00A0Bn`}
+        layers={[
+          {
+            groupByRollup: (d: Datum) => d.sitc1,
+            nodeLabel: (d: Datum) => productLookup[d].name,
+            fillLabel: {
+              fontWeight: 100,
+              fontStyle: 'italic',
+              valueFont: {
+                fontFamily: 'Menlo',
+                fontStyle: 'normal',
+                fontWeight: 900,
+              },
+            },
+            shape: {
+              fillColor: indexInterpolatedFillColor(interpolatorTurbo),
             },
           },
-          shape: {
-            fillColor: indexInterpolatedFillColor(interpolatorTurbo),
+        ]}
+        config={{
+          outerSizeRatio: 0.9,
+          linkLabel: {
+            fontStyle: 'italic',
+            valueFont: { fontWeight: 900 },
+            maxTextLength: number('maxTextLength', 20, { range: true, min: 1, max: 100 }),
           },
-        },
-      ]}
-      config={{
-        outerSizeRatio: 0.9,
-        linkLabel: {
-          fontStyle: 'italic',
-          valueFont: { fontWeight: 900 },
-          maxTextLength: number('maxTextLength', 20, { range: true, min: 1, max: 100 }),
-        },
-      }}
-    />
-  </Chart>
-);
+        }}
+      />
+    </Chart>
+  );
+};
 
 Example.parameters = {
   background: { default: 'white' },