Remove tooltips

Shopify · Dec 18, 2024 · a46550c · a46550c
1 parent e8ae629
commit a46550c
Show file tree

Hide file tree

Showing 4 changed files with 3 additions and 118 deletions.
diff --git a/packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx b/packages/polaris-viz/src/components/FunnelChartNext/Chart.tsx
@@ -23,7 +23,6 @@ import {
   FunnelTooltip,
   TooltipWithPortal,
 } from './components';
-import type {FunnelChartNextProps} from './FunnelChartNext';
 import {
   TOOLTIP_WIDTH,
   LABELS_HEIGHT,
@@ -41,7 +40,6 @@ import {
 
 export interface ChartProps {
   data: DataSeries[];
-  tooltipLabels: FunnelChartNextProps['tooltipLabels'];
   seriesNameFormatter: LabelFormatter;
   labelFormatter: LabelFormatter;
   percentageFormatter?: (value: number) => string;
@@ -50,27 +48,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 +120,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 +175,6 @@ export function Chart({
                   barWidth={barWidth}
                   index={index}
                   isLast={isLast}
-                  onMouseEnter={(index) => setTooltipIndex(index)}
-                  onMouseLeave={() => setTooltipIndex(null)}
                   shouldApplyScaling={shouldApplyScaling}
                   x={x}
                 >
@@ -226,62 +205,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;
-    }
-  }
 }
diff --git 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) {
       ) : (
         <Chart
           data={data}
-          tooltipLabels={tooltipLabels}
           seriesNameFormatter={seriesNameFormatter}
           labelFormatter={labelFormatter}
           percentageFormatter={percentageFormatter}

diff --git 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('<Chart />', () => {
       text: 'Custom Step 1',
     });
   });
-
-  it('shows tooltip when hovering over a segment', () => {
-    const chart = mount(
-      <ChartContext.Provider value={mockContext}>
-        <Chart {...defaultProps} />
-      </ChartContext.Provider>,
-    );
-
-    const firstSegment = chart.find(FunnelChartSegment);
-    firstSegment?.trigger('onMouseEnter', 0);
-
-    expect(chart).toContainReactComponent(FunnelTooltip);
-  });
-
-  it('hides tooltip when mouse leaves a segment', () => {
-    const chart = mount(
-      <ChartContext.Provider value={mockContext}>
-        <Chart {...defaultProps} />
-      </ChartContext.Provider>,
-    );
-
-    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
@@ -10,8 +10,6 @@ import {act} from 'react-dom/test-utils';
 import {FunnelChartNext} from '../FunnelChartNext';
 import {Chart} from '../Chart';
 import {ChartSkeleton} from '../../ChartSkeleton';
-import {FunnelChartSegment} from '../../shared';
-import {FunnelConnector} from '../components';
 
 const mockData = [
   {