Refactor tooltips to use data attributes

Shopify · Feb 5, 2025 · 470a485 · 470a485
1 parent a81b589
commit 470a485
Show file tree

Hide file tree

Showing 43 changed files with 1,043 additions and 1,875 deletions.
diff --git a/packages/polaris-viz-core/src/types.ts b/packages/polaris-viz-core/src/types.ts
@@ -39,7 +39,7 @@ export interface DataGroup {
   yAxisOptions?: YAxisOptions;
 }
 
-export type Shape = 'Line' | 'Bar' | 'Donut';
+export type Shape = 'Line' | 'Bar' | 'Default';
 
 export type LineStyle = 'solid' | 'dotted' | 'dashed';
 

diff --git a/packages/polaris-viz/src/components/Arc/Arc.tsx b/packages/polaris-viz/src/components/Arc/Arc.tsx
@@ -147,6 +147,7 @@ export function Arc({
           height={radius * 4}
           width={radius * 4}
           gradient={gradient}
+          index={index}
         />
       </g>
     </Fragment>

diff --git a/packages/polaris-viz/src/components/ComboChart/Chart.tsx b/packages/polaris-viz/src/components/ComboChart/Chart.tsx
@@ -1,13 +1,10 @@
 import {useState} from 'react';
 import * as React from 'react';
 import {
-  ChartMargin,
-  DataType,
   COLOR_VISION_SINGLE_ITEM,
   useTheme,
   useChartPositions,
   LINE_HEIGHT,
-  InternalChartType,
 } from '@shopify/polaris-viz-core';
 import type {
   DataGroup,
@@ -23,7 +20,6 @@ import {
   checkAvailableAnnotations,
   YAxisAnnotations,
 } from '../Annotations';
-import {TooltipWrapper} from '../TooltipWrapper';
 import type {
   AnnotationLookupTable,
   RenderLegendContent,
@@ -317,21 +313,6 @@ export function Chart({
         )}
       </ChartElements.Svg>
 
-      <TooltipWrapper
-        bandwidth={labelWidth}
-        chartBounds={chartBounds}
-        chartType={InternalChartType.Bar}
-        data={barChartData.series}
-        focusElementDataType={DataType.BarGroup}
-        getMarkup={getTooltipMarkup}
-        longestSeriesIndex={0}
-        margin={ChartMargin}
-        onIndexChange={(index) => setActiveIndex(index)}
-        parentElement={svgRef}
-        xScale={barXScale}
-        yScale={barYScale}
-      />
-
       {showLegend && (
         <LegendContainer
           colorVisionType={COLOR_VISION_SINGLE_ITEM}

diff --git a/packages/polaris-viz/src/components/ConicGradientWithStops/ConicGradientWithStops.tsx b/packages/polaris-viz/src/components/ConicGradientWithStops/ConicGradientWithStops.tsx
@@ -1,11 +1,14 @@
 import type {GradientStop} from '@shopify/polaris-viz-core';
+import {Fragment} from 'react';
 
+import {getTooltipDataAttr} from '../TooltipWrapper';
 import {createCSSConicGradient} from '../../utilities';
 
 export interface ConicGradientWithStopsProps {
   gradient: GradientStop[];
   height: number;
   width: number;
+  index: number;
   x?: number;
   y?: number;
 }
@@ -16,18 +19,31 @@ export function ConicGradientWithStops({
   width,
   x = 0,
   y = 0,
+  index,
 }: ConicGradientWithStopsProps) {
   const conicGradientValue = createCSSConicGradient(gradient);
 
   return (
-    <foreignObject x={x} y={y} width={width} height={height}>
-      <div
-        style={{
-          width: `${width}px`,
-          height: `${height}px`,
-          backgroundImage: conicGradientValue,
-        }}
+    <Fragment>
+      <foreignObject x={x} y={y} width={width} height={height}>
+        <div
+          style={{
+            width: `${width}px`,
+            height: `${height}px`,
+            backgroundImage: conicGradientValue,
+          }}
+        />
+      </foreignObject>
+      <rect
+        {...getTooltipDataAttr({
+          index,
+        })}
+        width={width}
+        height={height}
+        x={x}
+        y={y}
+        fill="transparent"
       />
-    </foreignObject>
+    </Fragment>
   );
 }
diff --git a/packages/polaris-viz/src/components/DonutChart/Chart.tsx b/packages/polaris-viz/src/components/DonutChart/Chart.tsx
@@ -10,22 +10,19 @@ import {
   useChartContext,
   THIN_ARC_CORNER_THICKNESS,
   isInfinity,
-  DataType,
-  ChartMargin,
   InternalChartType,
 } from '@shopify/polaris-viz-core';
 import type {
   DataPoint,
   DataSeries,
   LabelFormatter,
   Direction,
-  BoundingRect,
 } from '@shopify/polaris-viz-core';
 
 import {getAnimationDelayForItems} from '../../utilities/getAnimationDelayForItems';
 import {getContainerAlignmentForLegend} from '../../utilities';
 import {useDonutChartTooltipContents} from '../../hooks/useDonutChartTooltipContents';
-import {TooltipWrapper} from '../../components/TooltipWrapper';
+import {TooltipWrapperNext} from '../../components/TooltipWrapper';
 import type {ComparisonMetricProps} from '../ComparisonMetric';
 import {LegendContainer, useLegend} from '../../components/LegendContainer';
 import {
@@ -103,13 +100,6 @@ export function Chart({
 
   const seriesColor = getSeriesColors(seriesCount, selectedTheme);
 
-  const chartBounds: BoundingRect = {
-    width: containerBounds.width,
-    height: containerBounds.height,
-    x: 0,
-    y: 0,
-  };
-
   const getTooltipMarkup = useDonutChartTooltipContents({
     renderTooltipContent,
     data,
@@ -320,15 +310,10 @@ export function Chart({
           }
         />
       )}
-      <TooltipWrapper
-        chartBounds={chartBounds}
+      <TooltipWrapperNext
         chartType={InternalChartType.Donut}
-        focusElementDataType={DataType.Arc}
-        forceActiveIndex={activeIndex}
         getMarkup={getTooltipMarkup}
-        margin={ChartMargin}
         parentElement={svgRef}
-        usePortal
       />
     </div>
   );

diff --git a/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx b/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx
@@ -2,7 +2,6 @@ import type {ReactNode} from 'react';
 import {useMemo, useState} from 'react';
 import {
   uniqueId,
-  DataType,
   COLOR_VISION_SINGLE_ITEM,
   HORIZONTAL_SPACE_BETWEEN_CHART_AND_AXIS,
   useAriaLabel,
@@ -15,11 +14,12 @@ import type {
   ChartType,
   XAxisOptions,
   YAxisOptions,
-  BoundingRect,
   LabelFormatter,
 } from '@shopify/polaris-viz-core';
 import {animated} from '@react-spring/web';
 
+import {getHighestValueForSeries} from '../../utilities/getHighestValueForSeries';
+import {TooltipWrapperNext} from '../TooltipWrapper';
 import {ChartElements} from '../ChartElements';
 import {checkAvailableAnnotations} from '../../components/Annotations';
 import {useFormattedLabels} from '../../hooks/useFormattedLabels';
@@ -44,8 +44,6 @@ import {
   useTheme,
 } from '../../hooks';
 import {ChartMargin, ANNOTATIONS_LABELS_OFFSET} from '../../constants';
-import {formatDataIntoGroups} from '../../utilities';
-import {TooltipWrapper} from '../TooltipWrapper';
 
 import {
   VerticalGridLines,
@@ -91,8 +89,7 @@ export function Chart({
   const [xAxisHeight, setXAxisHeight] = useState(LINE_HEIGHT);
   const [annotationsHeight, setAnnotationsHeight] = useState(0);
 
-  const {longestSeriesCount, seriesColors, longestSeriesIndex} =
-    useHorizontalSeriesColors(data);
+  const {longestSeriesCount, seriesColors} = useHorizontalSeriesColors(data);
 
   const {legend, setLegendDimensions, height, width} = useLegend({
     data: [
@@ -114,19 +111,7 @@ export function Chart({
   });
 
   const highestValueForSeries = useMemo(() => {
-    const groups = formatDataIntoGroups(data);
-
-    const maxes = groups.map((numbers) => {
-      const values = numbers.map((value) => value).filter(Boolean) as number[];
-
-      if (values.length === 0) {
-        return 0;
-      }
-
-      return areAllNegative ? Math.min(...values) : Math.max(...values);
-    });
-
-    return maxes;
+    return getHighestValueForSeries(data, areAllNegative);
   }, [data, areAllNegative]);
 
   const {stackedValues, stackedMin, stackedMax} = useHorizontalStackedValues({
@@ -148,15 +133,14 @@ export function Chart({
       longestLabel,
     });
 
-  const {barHeight, chartHeight, groupBarsAreaHeight, groupHeight} =
-    useHorizontalBarSizes({
-      chartDimensions: {width: drawableWidth, height: drawableHeight},
-      isSimple: xAxisOptions.hide,
-      isStacked,
-      seriesLength: longestSeriesCount,
-      singleBarCount: data.length,
-      xAxisHeight,
-    });
+  const {barHeight, chartHeight, groupHeight} = useHorizontalBarSizes({
+    chartDimensions: {width: drawableWidth, height: drawableHeight},
+    isSimple: xAxisOptions.hide,
+    isStacked,
+    seriesLength: longestSeriesCount,
+    singleBarCount: data.length,
+    xAxisHeight,
+  });
 
   const annotationsDrawableHeight =
     chartYPosition + chartHeight + ANNOTATIONS_LABELS_OFFSET;
@@ -177,12 +161,6 @@ export function Chart({
   const zeroPosition = longestLabel.negative + xScale(0);
 
   const labelWidth = drawableWidth / ticks.length;
-  const chartBounds: BoundingRect = {
-    width,
-    height,
-    x: chartXPosition,
-    y: 0,
-  };
 
   const {hasXAxisAnnotations, hasYAxisAnnotations} = checkAvailableAnnotations(
     annotationsLookupTable,
@@ -250,6 +228,7 @@ export function Chart({
                   containerWidth={width}
                   data={data}
                   groupHeight={groupHeight}
+                  highestValueForSeries={highestValueForSeries}
                   id={id}
                   index={index}
                   isSimple={false}
@@ -292,18 +271,10 @@ export function Chart({
       </ChartElements.Svg>
 
       {highestValueForSeries.length !== 0 && (
-        <TooltipWrapper
-          bandwidth={groupBarsAreaHeight}
-          chartBounds={chartBounds}
+        <TooltipWrapperNext
           chartType={InternalChartType.HorizontalBar}
-          data={data}
-          focusElementDataType={DataType.BarGroup}
           getMarkup={getTooltipMarkup}
-          margin={ChartMargin}
           parentElement={svgRef}
-          longestSeriesIndex={longestSeriesIndex}
-          xScale={xScale}
-          type={type}
         />
       )}
 

diff --git a/packages/polaris-viz/src/components/LineChart/Chart.tsx b/packages/polaris-viz/src/components/LineChart/Chart.tsx
@@ -2,7 +2,6 @@ import type {ReactNode} from 'react';
 import {useState, useRef, Fragment} from 'react';
 import {
   uniqueId,
-  DataType,
   useYScale,
   LineSeries,
   COLOR_VISION_SINGLE_ITEM,
@@ -17,10 +16,10 @@ import type {
   XAxisOptions,
   YAxisOptions,
   LineChartDataSeriesWithDefaults,
-  BoundingRect,
   LabelFormatter,
 } from '@shopify/polaris-viz-core';
 
+import {LineChartTooltipTriggers} from '../LineChartTooltipTriggers';
 import {useExternalHideEvents} from '../../hooks/ExternalEvents';
 import {useIndexForLabels} from '../../hooks/useIndexForLabels';
 import {
@@ -38,15 +37,13 @@ import type {
 import {useFormattedLabels} from '../../hooks/useFormattedLabels';
 import {XAxis} from '../XAxis';
 import {useLegend, LegendContainer} from '../LegendContainer';
-import {TooltipWrapper} from '../../components/TooltipWrapper';
 import {
   useTheme,
   useColorVisionEvents,
   useWatchColorVisionEvents,
   useLinearLabelsAndDimensions,
 } from '../../hooks';
 import {
-  ChartMargin,
   ANNOTATIONS_LABELS_OFFSET,
   Y_AXIS_LABEL_OFFSET,
   CROSSHAIR_ID,
@@ -55,6 +52,7 @@ import {VisuallyHiddenRows} from '../VisuallyHiddenRows';
 import {YAxis} from '../YAxis';
 import {HorizontalGridLines} from '../HorizontalGridLines';
 import {ChartElements} from '../ChartElements';
+import {TooltipWrapperNext} from '../../components/TooltipWrapper';
 
 import {useLineChartTooltipContent} from './hooks/useLineChartTooltipContent';
 import {PointsAndCrosshair} from './components';
@@ -229,13 +227,6 @@ export function Chart({
     );
   }
 
-  const chartBounds: BoundingRect = {
-    width,
-    height,
-    x: chartXPosition,
-    y: chartYPosition,
-  };
-
   const {hasXAxisAnnotations, hasYAxisAnnotations} = checkAvailableAnnotations(
     annotationsLookupTable,
   );
@@ -304,6 +295,15 @@ export function Chart({
             theme,
           })}
 
+          <LineChartTooltipTriggers
+            chartXPosition={chartXPosition}
+            chartYPosition={chartYPosition}
+            containerBounds={containerBounds}
+            drawableHeight={drawableHeight}
+            drawableWidth={drawableWidth}
+            longestSeriesLength={longestSeriesLength}
+          />
+
           {data.map((singleSeries, index) => {
             if (singleSeries.metadata?.isVisuallyHidden === true) {
               return null;
@@ -371,15 +371,10 @@ export function Chart({
       </ChartElements.Svg>
 
       {longestSeriesLength !== -1 && (
-        <TooltipWrapper
-          chartBounds={chartBounds}
+        <TooltipWrapperNext
           chartType={InternalChartType.Line}
-          focusElementDataType={DataType.Point}
           getMarkup={getTooltipMarkup}
-          data={data}
-          longestSeriesIndex={longestSeriesIndex}
           id={tooltipId.current}
-          margin={ChartMargin}
           onIndexChange={(index) => {
             if (index != null && isPerformanceImpacted) {
               moveCrosshair(index);
@@ -388,9 +383,6 @@ export function Chart({
             }
           }}
           parentElement={svgRef}
-          usePortal
-          xScale={xScale}
-          yScale={yScale}
         />
       )}