From af776ae40f1e94b72789d3a0cac670f1855d49a0 Mon Sep 17 00:00:00 2001 From: Rachel Shen Date: Wed, 20 Oct 2021 07:41:13 -0600 Subject: [PATCH] fix(partition): add get cursor pointer over slices (#1428) --- .../partition_chart/state/chart_state.tsx | 6 +- .../state/selectors/get_cursor_pointer.ts | 22 +++++ .../sunburst/2_value_formatted.story.tsx | 80 +++++++++++-------- 3 files changed, 70 insertions(+), 38 deletions(-) create mode 100644 packages/charts/src/chart_types/partition_chart/state/selectors/get_cursor_pointer.ts diff --git a/packages/charts/src/chart_types/partition_chart/state/chart_state.tsx b/packages/charts/src/chart_types/partition_chart/state/chart_state.tsx index 9fd999bcfc..58fc675161 100644 --- a/packages/charts/src/chart_types/partition_chart/state/chart_state.tsx +++ b/packages/charts/src/chart_types/partition_chart/state/chart_state.tsx @@ -9,7 +9,6 @@ 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'; @@ -17,6 +16,7 @@ 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) { diff --git a/packages/charts/src/chart_types/partition_chart/state/selectors/get_cursor_pointer.ts b/packages/charts/src/chart_types/partition_chart/state/selectors/get_cursor_pointer.ts new file mode 100644 index 0000000000..37511a93b8 --- /dev/null +++ b/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; + }, +); diff --git a/storybook/stories/sunburst/2_value_formatted.story.tsx b/storybook/stories/sunburst/2_value_formatted.story.tsx index cd05fd0a02..212273ff72 100644 --- a/storybook/stories/sunburst/2_value_formatted.story.tsx +++ b/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 = () => ( - - - 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 ( + + + 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 }), - }, - }} - /> - -); + }} + /> + + ); +}; Example.parameters = { background: { default: 'white' },