From 884225bc4274828be542fb6db0ec067b16866868 Mon Sep 17 00:00:00 2001 From: Michael Nesen Date: Wed, 18 Dec 2024 21:34:58 +0000 Subject: [PATCH] Remove tooltips --- packages/polaris-viz/CHANGELOG.md | 6 +- .../src/components/FunnelChartNext/Chart.tsx | 93 +----------------- .../FunnelChartNext/FunnelChartNext.tsx | 7 +- .../components/Tooltip/Tooltip.scss | 33 ------- .../components/Tooltip/Tooltip.tsx | 96 ------------------- .../components/Tooltip/index.ts | 1 - .../FunnelChartNext/components/index.ts | 1 - .../stories/Default.stories.tsx | 4 - .../FunnelChartNext.chromatic.stories.tsx | 4 - .../stories/Playground.stories.tsx | 4 - .../FunnelChartNext/tests/Chart.test.tsx | 32 ------- .../tests/FunnelChartNext.test.tsx | 9 +- 12 files changed, 11 insertions(+), 279 deletions(-) delete mode 100644 packages/polaris-viz/src/components/FunnelChartNext/components/Tooltip/Tooltip.scss delete mode 100644 packages/polaris-viz/src/components/FunnelChartNext/components/Tooltip/Tooltip.tsx delete mode 100644 packages/polaris-viz/src/components/FunnelChartNext/components/Tooltip/index.ts diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md index 627d6950d..c6deb3925 100644 --- a/packages/polaris-viz/CHANGELOG.md +++ b/packages/polaris-viz/CHANGELOG.md @@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file. The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/) and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). - +## Unreleased + +### Changed + +- Removed funnel segment tooltips from ``. ## [15.6.0] - 2024-12-18 diff --git a/packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx b/packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx index 214685fc8..8bf4e2092 100644 --- a/packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx +++ b/packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx @@ -1,5 +1,5 @@ import type {ReactNode} from 'react'; -import {Fragment, useMemo, useState} from 'react'; +import {Fragment, useMemo} from 'react'; import {scaleBand, scaleLinear} from 'd3-scale'; import type {DataSeries, LabelFormatter} from '@shopify/polaris-viz-core'; import { @@ -17,15 +17,8 @@ import {FunnelChartSegment} from '../shared'; import {SingleTextLine} from '../Labels'; import {ChartElements} from '../ChartElements'; +import {FunnelChartLabels} from './components'; import { - FunnelChartLabels, - Tooltip, - FunnelTooltip, - TooltipWithPortal, -} from './components'; -import type {FunnelChartNextProps} from './FunnelChartNext'; -import { - TOOLTIP_WIDTH, LABELS_HEIGHT, PERCENTAGE_SUMMARY_HEIGHT, LINE_GRADIENT, @@ -33,15 +26,11 @@ import { LINE_OFFSET, LINE_WIDTH, GAP, - SHORT_TOOLTIP_HEIGHT, - TOOLTIP_HEIGHT, SEGMENT_WIDTH_RATIO, - TOOLTIP_HORIZONTAL_OFFSET, } from './constants'; export interface ChartProps { data: DataSeries[]; - tooltipLabels: FunnelChartNextProps['tooltipLabels']; seriesNameFormatter: LabelFormatter; labelFormatter: LabelFormatter; percentageFormatter?: (value: number) => string; @@ -50,7 +39,6 @@ export interface ChartProps { export function Chart({ data, - tooltipLabels, seriesNameFormatter, labelFormatter, percentageFormatter = (value: number) => { @@ -58,19 +46,12 @@ export function Chart({ }, renderScaleIconTooltipContent, }: ChartProps) { - const [tooltipIndex, setTooltipIndex] = useState(null); const {containerBounds} = useChartContext(); - const dataSeries = data[0].data; const xValues = dataSeries.map(({key}) => key) as string[]; const yValues = dataSeries.map(({value}) => value) as [number, number]; - const { - width: drawableWidth, - height: drawableHeight, - x: chartX, - y: chartY, - } = containerBounds ?? { + const {width: drawableWidth, height: drawableHeight} = containerBounds ?? { width: 0, height: 0, x: 0, @@ -130,18 +111,9 @@ export function Chart({ calculatePercentage(lastPoint?.value ?? 0, firstPoint?.value ?? 0), ); - const handleChartBlur = (event: React.FocusEvent) => { - const currentTarget = event.currentTarget; - const relatedTarget = event.relatedTarget as Node; - - if (!currentTarget.contains(relatedTarget)) { - setTooltipIndex(null); - } - }; - return ( - + setTooltipIndex(index)} - onMouseLeave={() => setTooltipIndex(null)} shouldApplyScaling={shouldApplyScaling} x={x} > @@ -226,62 +196,7 @@ export function Chart({ ); })} - - {getTooltipMarkup()} ); - - function getTooltipMarkup() { - if (tooltipIndex == null) { - return null; - } - - const tooltipHeight = - tooltipIndex === dataSeries.length - 1 - ? SHORT_TOOLTIP_HEIGHT - : TOOLTIP_HEIGHT; - - const activeDataSeries = dataSeries[tooltipIndex]; - - if (activeDataSeries == null) { - return null; - } - - const xPosition = getXPosition(); - const yPosition = getYPosition(); - - return ( - - - - ); - - function getXPosition() { - if (tooltipIndex === 0) { - return chartX + barWidth + TOOLTIP_HORIZONTAL_OFFSET; - } - - const xOffset = (barWidth - TOOLTIP_WIDTH) / 2; - return chartX + (xScale(activeDataSeries.key.toString()) ?? 0) + xOffset; - } - - function getYPosition() { - const barHeight = getBarHeight(activeDataSeries.value ?? 0); - const yPosition = chartY + drawableHeight - barHeight; - - if (tooltipIndex === 0) { - return yPosition; - } - - return yPosition - tooltipHeight; - } - } } diff --git a/packages/polaris-viz/src/components/FunnelChartNext/FunnelChartNext.tsx b/packages/polaris-viz/src/components/FunnelChartNext/FunnelChartNext.tsx index 8d37ad657..e29c8689e 100644 --- a/packages/polaris-viz/src/components/FunnelChartNext/FunnelChartNext.tsx +++ b/packages/polaris-viz/src/components/FunnelChartNext/FunnelChartNext.tsx @@ -12,10 +12,6 @@ import {ChartSkeleton} from '../'; import {Chart} from './Chart'; export type FunnelChartNextProps = { - tooltipLabels: { - reached: string; - dropped: string; - }; seriesNameFormatter?: LabelFormatter; labelFormatter?: LabelFormatter; renderScaleIconTooltipContent?: () => ReactNode; @@ -34,7 +30,7 @@ export function FunnelChartNext(props: FunnelChartNextProps) { isAnimated, state, errorText, - tooltipLabels, + seriesNameFormatter = DEFAULT_LABEL_FORMATTER, labelFormatter = DEFAULT_LABEL_FORMATTER, percentageFormatter, @@ -63,7 +59,6 @@ export function FunnelChartNext(props: FunnelChartNextProps) { ) : ( string; -} - -interface Data { - key: string; - value: string; - color: Color; - percent: number; -} - -export function Tooltip({ - activeIndex, - dataSeries, - isLast, - tooltipLabels, - labelFormatter, - percentageFormatter, -}: TooltipContentProps) { - const point = dataSeries[activeIndex]; - const nextPoint = dataSeries[activeIndex + 1]; - - const dropOffPercentage = Math.abs( - calculateDropOff(point?.value ?? 0, nextPoint?.value ?? 0), - ); - - const data: Data[] = [ - { - key: tooltipLabels.reached, - value: labelFormatter(point.value), - color: FUNNEL_CHART_SEGMENT_FILL, - percent: 100 - dropOffPercentage, - }, - ]; - - if (!isLast) { - data.push({ - key: tooltipLabels.dropped, - value: labelFormatter(nextPoint?.value ?? 0 * dropOffPercentage), - percent: dropOffPercentage, - color: FUNNEL_CHART_CONNECTOR_GRADIENT, - }); - } - - return ( - - {() => ( - - {point.key} -
- {data.map(({key, value, color, percent}, index) => { - return ( -
-
- - {key} -
-
- {value} - {!isLast && ( - - {percentageFormatter(percent)} - - )} -
-
- ); - })} -
- - )} - - ); -} diff --git a/packages/polaris-viz/src/components/FunnelChartNext/components/Tooltip/index.ts b/packages/polaris-viz/src/components/FunnelChartNext/components/Tooltip/index.ts deleted file mode 100644 index f53bae244..000000000 --- a/packages/polaris-viz/src/components/FunnelChartNext/components/Tooltip/index.ts +++ /dev/null @@ -1 +0,0 @@ -export {Tooltip} from './Tooltip'; diff --git a/packages/polaris-viz/src/components/FunnelChartNext/components/index.ts b/packages/polaris-viz/src/components/FunnelChartNext/components/index.ts index 2df703edb..e7c2c36f3 100644 --- a/packages/polaris-viz/src/components/FunnelChartNext/components/index.ts +++ b/packages/polaris-viz/src/components/FunnelChartNext/components/index.ts @@ -1,5 +1,4 @@ export {FunnelChartLabels} from './FunnelChartLabels'; -export {Tooltip} from './Tooltip'; export {FunnelTooltip} from './FunnelTooltip'; export {TooltipWithPortal} from './TooltipWithPortal'; export {ScaleIcon} from './ScaleIcon'; diff --git a/packages/polaris-viz/src/components/FunnelChartNext/stories/Default.stories.tsx b/packages/polaris-viz/src/components/FunnelChartNext/stories/Default.stories.tsx index 9920bd39d..560268acc 100644 --- a/packages/polaris-viz/src/components/FunnelChartNext/stories/Default.stories.tsx +++ b/packages/polaris-viz/src/components/FunnelChartNext/stories/Default.stories.tsx @@ -22,10 +22,6 @@ Default.args = { data: DEFAULT_DATA, labelFormatter, percentageFormatter, - tooltipLabels: { - reached: 'Reached this step', - dropped: 'Dropped off', - }, renderScaleIconTooltipContent: () => (
Truncated Sessions
{' '} diff --git a/packages/polaris-viz/src/components/FunnelChartNext/stories/FunnelChartNext.chromatic.stories.tsx b/packages/polaris-viz/src/components/FunnelChartNext/stories/FunnelChartNext.chromatic.stories.tsx index cddd91139..4042c9a36 100644 --- a/packages/polaris-viz/src/components/FunnelChartNext/stories/FunnelChartNext.chromatic.stories.tsx +++ b/packages/polaris-viz/src/components/FunnelChartNext/stories/FunnelChartNext.chromatic.stories.tsx @@ -25,8 +25,4 @@ const labelFormatter = (value) => { Default.args = { data: DEFAULT_DATA, labelFormatter, - tooltipLabels: { - reached: 'Reached this step', - dropped: 'Dropped off', - }, }; diff --git a/packages/polaris-viz/src/components/FunnelChartNext/stories/Playground.stories.tsx b/packages/polaris-viz/src/components/FunnelChartNext/stories/Playground.stories.tsx index 644743155..60ce842ea 100644 --- a/packages/polaris-viz/src/components/FunnelChartNext/stories/Playground.stories.tsx +++ b/packages/polaris-viz/src/components/FunnelChartNext/stories/Playground.stories.tsx @@ -44,8 +44,4 @@ ZeroValues.args = { }, ], labelFormatter, - tooltipLabels: { - reached: 'Reached this step', - dropped: 'Dropped off', - }, }; diff --git a/packages/polaris-viz/src/components/FunnelChartNext/tests/Chart.test.tsx b/packages/polaris-viz/src/components/FunnelChartNext/tests/Chart.test.tsx index 8c8fc3e84..f9975e7df 100644 --- a/packages/polaris-viz/src/components/FunnelChartNext/tests/Chart.test.tsx +++ b/packages/polaris-viz/src/components/FunnelChartNext/tests/Chart.test.tsx @@ -5,7 +5,6 @@ import React from 'react'; import {Chart} from '../Chart'; import {FunnelChartConnector, FunnelChartSegment} from '../../shared'; -import {FunnelTooltip} from '../components'; import {SingleTextLine} from '../../Labels'; const mockData: DataSeries[] = [ @@ -30,10 +29,6 @@ const mockContext = { const defaultProps = { data: mockData, - tooltipLabels: { - dropoff: 'Dropoff', - total: 'Total', - }, seriesNameFormatter: (value: string) => `$${value}`, labelFormatter: (value: string) => `$${value}`, }; @@ -75,31 +70,4 @@ describe('', () => { text: 'Custom Step 1', }); }); - - it('shows tooltip when hovering over a segment', () => { - const chart = mount( - - - , - ); - - const firstSegment = chart.find(FunnelChartSegment); - firstSegment?.trigger('onMouseEnter', 0); - - expect(chart).toContainReactComponent(FunnelTooltip); - }); - - it('hides tooltip when mouse leaves a segment', () => { - const chart = mount( - - - , - ); - - const firstSegment = chart.find(FunnelChartSegment); - firstSegment?.trigger('onMouseEnter', 0); - firstSegment?.trigger('onMouseLeave'); - - expect(chart).not.toContainReactComponent(FunnelTooltip); - }); }); diff --git a/packages/polaris-viz/src/components/FunnelChartNext/tests/FunnelChartNext.test.tsx b/packages/polaris-viz/src/components/FunnelChartNext/tests/FunnelChartNext.test.tsx index 45cd8cc9d..c280dd340 100644 --- a/packages/polaris-viz/src/components/FunnelChartNext/tests/FunnelChartNext.test.tsx +++ b/packages/polaris-viz/src/components/FunnelChartNext/tests/FunnelChartNext.test.tsx @@ -1,17 +1,10 @@ import React from 'react'; import {mount} from '@shopify/react-testing'; -import { - ChartState, - ChartContext, - DEFAULT_THEME_NAME, -} from '@shopify/polaris-viz-core'; -import {act} from 'react-dom/test-utils'; +import {ChartState, DEFAULT_THEME_NAME} from '@shopify/polaris-viz-core'; import {FunnelChartNext} from '../FunnelChartNext'; import {Chart} from '../Chart'; import {ChartSkeleton} from '../../ChartSkeleton'; -import {FunnelChartSegment} from '../../shared'; -import {FunnelConnector} from '../components'; const mockData = [ {