Refactor tooltips to use data attributes

Shopify · Feb 6, 2025 · d66a912 · d66a912
1 parent a81b589
commit d66a912
Show file tree

Hide file tree

Showing 50 changed files with 1,262 additions and 1,911 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/ChartElements/ChartSVG.tsx b/packages/polaris-viz/src/components/ChartElements/ChartSVG.tsx
@@ -1,6 +1,8 @@
 import type {AriaRole, Dispatch, ReactNode, SetStateAction} from 'react';
 import {XMLNS} from '@shopify/polaris-viz-core';
 
+import {getTooltipDataAttr} from '../TooltipWrapper';
+
 import styles from './ChartElements.scss';
 
 interface ChartSVGProps {
@@ -33,6 +35,13 @@ export function ChartSVG({
       aria-label={emptyState ? emptyStateText : undefined}
       ref={setRef}
     >
+      <rect
+        height={height}
+        width={width}
+        {...getTooltipDataAttr({
+          index: -1,
+        })}
+      />
       {children}
     </svg>
   );

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,22 @@ 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 {
+  getTooltipDataAttr,
+  TooltipWrapperNext,
+} from '../../components/TooltipWrapper';
 import type {ComparisonMetricProps} from '../ComparisonMetric';
 import {LegendContainer, useLegend} from '../../components/LegendContainer';
 import {
@@ -103,13 +103,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,
@@ -232,6 +225,17 @@ export function Chart({
               ref={setSvgRef}
             >
               <g className={styles.DonutChart}>
+                <rect
+                  x={minX}
+                  y={minY}
+                  width={viewBoxDimensions.width}
+                  height={viewBoxDimensions.height}
+                  {...getTooltipDataAttr({
+                    index: -1,
+                    x: 0,
+                    y: 0,
+                  })}
+                />
                 {emptyState ? (
                   <g aria-hidden>
                     <Arc
@@ -320,15 +324,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: [
@@ -108,25 +105,13 @@ export function Chart({
 
   const {allNumbers, longestLabel, areAllNegative} = useDataForHorizontalChart({
     data,
-    isSimple: false,
+    isSimple: xAxisOptions.hide,
     isStacked,
     labelFormatter: xAxisOptions.labelFormatter,
   });
 
   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({
@@ -143,21 +128,21 @@ export function Chart({
       stackedMin,
       stackedMax,
       isStacked,
-      maxWidth: width - longestLabel.negative - longestLabel.positive,
+      maxWidth: width,
       labelFormatter: xAxisOptions.labelFormatter,
       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;
 
@@ -174,15 +159,9 @@ export function Chart({
     chartXPosition,
   });
 
-  const zeroPosition = longestLabel.negative + xScale(0);
+  const zeroPosition = xScale(0);
 
   const labelWidth = drawableWidth / ticks.length;
-  const chartBounds: BoundingRect = {
-    width,
-    height,
-    x: chartXPosition,
-    y: 0,
-  };
 
   const {hasXAxisAnnotations, hasYAxisAnnotations} = checkAvailableAnnotations(
     annotationsLookupTable,
@@ -247,13 +226,17 @@ export function Chart({
                   areAllNegative={areAllNegative}
                   ariaLabel={ariaLabel}
                   barHeight={barHeight}
+                  chartXPosition={chartXPosition}
+                  chartYPosition={chartYPosition}
                   containerWidth={width}
                   data={data}
                   groupHeight={groupHeight}
+                  highestValueForSeries={highestValueForSeries}
                   id={id}
                   index={index}
                   isSimple={false}
                   isStacked={isStacked}
+                  longestLabel={longestLabel}
                   name={name}
                   stackedValues={stackedValues}
                   xAxisOptions={xAxisOptions}
@@ -291,21 +274,11 @@ export function Chart({
         )}
       </ChartElements.Svg>
 
-      {highestValueForSeries.length !== 0 && (
-        <TooltipWrapper
-          bandwidth={groupBarsAreaHeight}
-          chartBounds={chartBounds}
-          chartType={InternalChartType.HorizontalBar}
-          data={data}
-          focusElementDataType={DataType.BarGroup}
-          getMarkup={getTooltipMarkup}
-          margin={ChartMargin}
-          parentElement={svgRef}
-          longestSeriesIndex={longestSeriesIndex}
-          xScale={xScale}
-          type={type}
-        />
-      )}
+      <TooltipWrapperNext
+        chartType={InternalChartType.HorizontalBar}
+        getMarkup={getTooltipMarkup}
+        parentElement={svgRef}
+      />
 
       {showLegend && (
         <LegendContainer