Refactor tooltips to use data attributes

Shopify · Feb 5, 2025 · 76fa457 · 76fa457
1 parent a81b589
commit 76fa457
Show file tree

Hide file tree

Showing 43 changed files with 1,103 additions and 1,878 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/BarChart/stories/data.tsx b/packages/polaris-viz/src/components/BarChart/stories/data.tsx
@@ -12,7 +12,7 @@ export const DEFAULT_DATA: DataSeries[] = [
   {
     name: 'Breakfast',
     data: [
-      {key: 'Monday', value: 3},
+      {key: 'Monday', value: 20},
       {key: 'Tuesday', value: -7},
       {key: 'Wednesday', value: -7},
       {key: 'Thursday', value: -8},

diff --git a/packages/polaris-viz/src/components/BarChart/stories/playground/ExternalTooltip.stories.tsx b/packages/polaris-viz/src/components/BarChart/stories/playground/ExternalTooltip.stories.tsx
@@ -4,14 +4,31 @@ import type {BarChartProps} from '../../BarChart';
 import {BarChart} from '../../BarChart';
 import {META} from '../meta';
 import {useState} from 'react';
+import {LineChart} from '../../../LineChart';
+import {DonutChart} from '../../../DonutChart';
+import {SimpleBarChart} from '../../../SimpleBarChart';
 
 export default {
   ...META,
   title: `${META.title}/Playground`,
   decorators: [],
 };
 
-function Card(args: BarChartProps) {
+const CHART_TYPES = {
+  BarChart: BarChart,
+  LineChart: LineChart,
+  DonutChart: DonutChart,
+  HorizontalBarChart: BarChart,
+  SimpleBarChart: SimpleBarChart,
+};
+
+interface CardProps extends BarChartProps {
+  chartType?: string;
+}
+
+function Card(args: CardProps) {
+  const Chart = CHART_TYPES[args.chartType ?? 'BarChart'];
+
   return (
     <div
       style={{
@@ -22,20 +39,34 @@ function Card(args: BarChartProps) {
         padding: 10,
       }}
     >
-      <BarChart {...args} />
+      <Chart
+        {...args}
+        direction={args.chartType === 'BarChart' ? 'vertical' : 'horizontal'}
+      />
     </div>
   );
 }
 
 const Template: Story<BarChartProps> = (args: BarChartProps) => {
+  const [chartType, setChartType] = useState<string>('BarChart');
+
   return (
     <div style={{overflow: 'auto'}}>
-      <Card {...args} />
+      <div style={{position: 'fixed', top: 0, right: 0}}>
+        <select onChange={(e) => setChartType(e.target.value)}>
+          <option>BarChart</option>
+          <option>LineChart</option>
+          <option>DonutChart</option>
+          <option>HorizontalBarChart</option>
+          <option>SimpleBarChart</option>
+        </select>
+      </div>
+      <Card {...args} chartType={chartType} />
       <div style={{height: 700, width: 10}} />
       <div style={{display: 'flex', justifyContent: 'space-between'}}>
-        <Card {...args} />
-        <Card {...args} />
-        <Card {...args} />
+        <Card {...args} chartType={chartType} />
+        <Card {...args} chartType={chartType} />
+        <Card {...args} chartType={chartType} />
       </div>
     </div>
   );

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,18 @@ 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 {TooltipWrapperNext} from '../../components/TooltipWrapper';
 import {getAnimationDelayForItems} from '../../utilities/getAnimationDelayForItems';
 import {getContainerAlignmentForLegend} from '../../utilities';
-import {useDonutChartTooltipContents} from '../../hooks/useDonutChartTooltipContents';
-import {TooltipWrapper} from '../../components/TooltipWrapper';
 import type {ComparisonMetricProps} from '../ComparisonMetric';
 import {LegendContainer, useLegend} from '../../components/LegendContainer';
 import {
@@ -46,6 +42,7 @@ import {ChartSkeleton} from '../../components/ChartSkeleton';
 
 import styles from './DonutChart.scss';
 import {InnerValue, LegendValues} from './components';
+import {useDonutChartTooltipContent} from './hooks/useDonutChartToolltipContent';
 
 const FULL_CIRCLE = Math.PI * 2;
 const RADIUS_PADDING = 20;
@@ -55,6 +52,7 @@ export interface ChartProps {
   data: DataSeries[];
   labelFormatter: LabelFormatter;
   legendPosition: LegendPosition;
+  renderTooltipContent: (data: RenderTooltipContentData) => ReactNode;
   seriesNameFormatter: LabelFormatter;
   showLegend: boolean;
   showLegendValues: boolean;
@@ -67,7 +65,6 @@ export interface ChartProps {
   renderInnerValueContent?: RenderInnerValueContent;
   renderLegendContent?: RenderLegendContent;
   renderHiddenLegendLabel?: RenderHiddenLegendLabel;
-  renderTooltipContent?: (data: RenderTooltipContentData) => ReactNode;
   total?: number;
 }
 
@@ -86,8 +83,8 @@ export function Chart({
   renderInnerValueContent,
   renderLegendContent,
   renderHiddenLegendLabel,
-  seriesNameFormatter,
   renderTooltipContent,
+  seriesNameFormatter,
   total,
 }: ChartProps) {
   const {shouldAnimate, containerBounds} = useChartContext();
@@ -103,19 +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,
-    seriesColors: seriesColor,
-  });
-
   const legendDirection: Direction =
     legendPosition === 'right' || legendPosition === 'left'
       ? 'vertical'
@@ -146,6 +130,13 @@ export function Chart({
     },
   });
 
+  const getTooltipMarkup = useDonutChartTooltipContent({
+    renderTooltipContent,
+    data,
+    seriesColors: seriesColor,
+    seriesNameFormatter,
+  });
+
   if (!width || !height) {
     return null;
   }
@@ -320,15 +311,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/DonutChart/DonutChart.tsx b/packages/polaris-viz/src/components/DonutChart/DonutChart.tsx
@@ -34,6 +34,7 @@ export type DonutChartProps = {
   renderHiddenLegendLabel?: RenderHiddenLegendLabel;
   renderBucketLegendLabel?: () => string;
   seriesNameFormatter?: LabelFormatter;
+  tooltipOptions?: TooltipOptions;
 } & ChartProps;
 
 export function DonutChart(props: DonutChartProps) {
@@ -60,6 +61,7 @@ export function DonutChart(props: DonutChartProps) {
     renderHiddenLegendLabel,
     renderBucketLegendLabel,
     seriesNameFormatter = (value) => `${value}`,
+    tooltipOptions,
   } = {
     ...DEFAULT_CHART_PROPS,
     ...props,
@@ -73,7 +75,10 @@ export function DonutChart(props: DonutChartProps) {
     tooltipOptions,
     theme,
     data,
+<<<<<<< HEAD
     ignoreColorVisionEvents: true,
+=======
+>>>>>>> 1ba736da (More broken, but good)
   });
 
   return (
@@ -98,6 +103,7 @@ export function DonutChart(props: DonutChartProps) {
         renderInnerValueContent={renderInnerValueContent}
         renderLegendContent={renderLegendContent}
         renderHiddenLegendLabel={renderHiddenLegendLabel}
+        renderTooltipContent={renderTooltip}
         seriesNameFormatter={seriesNameFormatter}
         renderTooltipContent={renderTooltip}
         theme={theme}