Remove tooltips

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 -->
+## Unreleased
+
+### Changed
+
+- Removed tooltip labels from `<FunnelChartNext />`.
 
 ## [15.6.0] - 2024-12-18
 

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,31 +17,20 @@ 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,
   PERCENTAGE_COLOR,
   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,27 +39,19 @@ export interface ChartProps {
 
 export function Chart({
   data,
-  tooltipLabels,
   seriesNameFormatter,
   labelFormatter,
   percentageFormatter = (value: number) => {
     return labelFormatter(value);
   },
   renderScaleIconTooltipContent,
 }: ChartProps) {
-  const [tooltipIndex, setTooltipIndex] = useState<number | null>(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 (
     <ChartElements.Svg height={drawableHeight} width={drawableWidth}>
-      <g onBlur={handleChartBlur}>
+      <g>
         <FunnelChartConnectorGradient />
 
         <LinearGradientWithStops
@@ -194,8 +166,6 @@ export function Chart({
                   barWidth={barWidth}
                   index={index}
                   isLast={isLast}
-                  onMouseEnter={(index) => setTooltipIndex(index)}
-                  onMouseLeave={() => setTooltipIndex(null)}
                   shouldApplyScaling={shouldApplyScaling}
                   x={x}
                 >
@@ -226,62 +196,7 @@ export function Chart({
             </Fragment>
           );
         })}
-
-        <TooltipWithPortal>{getTooltipMarkup()}</TooltipWithPortal>
       </g>
     </ChartElements.Svg>
   );
-
-  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 (
-      <FunnelTooltip x={xPosition} y={yPosition}>
-        <Tooltip
-          activeIndex={tooltipIndex}
-          dataSeries={dataSeries}
-          isLast={tooltipIndex === dataSeries.length - 1}
-          tooltipLabels={tooltipLabels}
-          labelFormatter={labelFormatter}
-          percentageFormatter={percentageFormatter}
-        />
-      </FunnelTooltip>
-    );
-
-    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;
-    }
-  }
 }

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) {
       ) : (
         <Chart
           data={data}
-          tooltipLabels={tooltipLabels}
           seriesNameFormatter={seriesNameFormatter}
           labelFormatter={labelFormatter}
           percentageFormatter={percentageFormatter}

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';

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: () => (
     <Fragment>
       <div>Truncated Sessions</div>{' '}

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',
-  },
 };

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',
-  },
 };