Focus and tooltip placement around unsafe are

Shopify · Feb 5, 2025 · da1eac7 · da1eac7
1 parent 1ba736d
commit da1eac7
Show file tree

Hide file tree

Showing 24 changed files with 507 additions and 605 deletions.
diff --git a/packages/polaris-viz-core/src/utilities/getColorVisionEventAttrs.ts b/packages/polaris-viz-core/src/utilities/getColorVisionEventAttrs.ts
@@ -11,6 +11,5 @@ export function getColorVisionEventAttrs({type, index, watch = true}: Props) {
     [`${COLOR_VISION_EVENT.dataAttribute}-watch`]: watch,
     [`${COLOR_VISION_EVENT.dataAttribute}-type`]: type,
     [`${COLOR_VISION_EVENT.dataAttribute}-index`]: index,
-    ['data-tooltip-type']: 'blah',
   };
 }
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,6 +1,7 @@
 import type {GradientStop} from '@shopify/polaris-viz-core';
 import {Fragment} from 'react';
 
+import {getTooltipDataAttr} from '../TooltipWrapper';
 import {createCSSConicGradient} from '../../utilities';
 
 export interface ConicGradientWithStopsProps {
@@ -34,8 +35,9 @@ export function ConicGradientWithStops({
         />
       </foreignObject>
       <rect
-        data-tooltip-type="donut"
-        data-tooltip-index={index}
+        {...getTooltipDataAttr({
+          index,
+        })}
         width={width}
         height={height}
         x={x}

diff --git a/packages/polaris-viz/src/components/DonutChart/Chart.tsx b/packages/polaris-viz/src/components/DonutChart/Chart.tsx
@@ -11,7 +11,6 @@ import {
   THIN_ARC_CORNER_THICKNESS,
   isInfinity,
   InternalChartType,
-  DataType,
 } from '@shopify/polaris-viz-core';
 import type {
   DataPoint,
@@ -20,7 +19,7 @@ import type {
   Direction,
 } from '@shopify/polaris-viz-core';
 
-import {TooltipWrapperNext} from '../../components/TooltipWrapper/TooltipWrapperNext';
+import {TooltipWrapperNext} from '../../components/TooltipWrapper';
 import {getAnimationDelayForItems} from '../../utilities/getAnimationDelayForItems';
 import {getContainerAlignmentForLegend} from '../../utilities';
 import type {ComparisonMetricProps} from '../ComparisonMetric';
@@ -319,7 +318,6 @@ export function Chart({
       )}
       <TooltipWrapperNext
         chartType={InternalChartType.Donut}
-        focusElementDataType={DataType.Point}
         getMarkup={getTooltipMarkup}
         parentElement={svgRef}
       />

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,
@@ -19,7 +18,7 @@ import type {
 } from '@shopify/polaris-viz-core';
 import {animated} from '@react-spring/web';
 
-import {TooltipWrapperNext} from '../TooltipWrapper/TooltipWrapperNext';
+import {TooltipWrapperNext} from '../TooltipWrapper';
 import {ChartElements} from '../ChartElements';
 import {checkAvailableAnnotations} from '../../components/Annotations';
 import {useFormattedLabels} from '../../hooks/useFormattedLabels';
@@ -286,7 +285,6 @@ export function Chart({
       {highestValueForSeries.length !== 0 && (
         <TooltipWrapperNext
           chartType={InternalChartType.HorizontalBar}
-          focusElementDataType={DataType.BarGroup}
           getMarkup={getTooltipMarkup}
           parentElement={svgRef}
         />

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,7 +16,6 @@ import type {
   XAxisOptions,
   YAxisOptions,
   LineChartDataSeriesWithDefaults,
-  BoundingRect,
   LabelFormatter,
 } from '@shopify/polaris-viz-core';
 
@@ -53,7 +51,10 @@ import {VisuallyHiddenRows} from '../VisuallyHiddenRows';
 import {YAxis} from '../YAxis';
 import {HorizontalGridLines} from '../HorizontalGridLines';
 import {ChartElements} from '../ChartElements';
-import {TooltipWrapperNext} from '../../components/TooltipWrapper/TooltipWrapperNext';
+import {
+  getTooltipDataAttr,
+  TooltipWrapperNext,
+} from '../../components/TooltipWrapper';
 
 import {useLineChartTooltipContent} from './hooks/useLineChartTooltipContent';
 import {PointsAndCrosshair} from './components';
@@ -297,20 +298,23 @@ export function Chart({
           })}
 
           {[...Array(longestSeriesLength + 1).keys()].map((_, index) => {
+            const x =
+              index * (drawableWidth / longestSeriesLength) -
+              drawableWidth / longestSeriesLength / 2;
+            const width = drawableWidth / longestSeriesLength;
+
             return (
               <rect
                 key={`${index}-tooltip-area`}
+                {...getTooltipDataAttr({
+                  index,
+                  x: containerBounds.x + chartXPosition + x + width,
+                  y: containerBounds.y + Number(scrollY) + chartYPosition,
+                })}
                 height={drawableHeight}
-                width={drawableWidth / longestSeriesLength}
-                x={
-                  index * (drawableWidth / longestSeriesLength) -
-                  drawableWidth / longestSeriesLength / 2
-                }
+                width={width}
+                x={x}
                 fill="rgba(255,0,0,0.2)"
-                data-tooltip-type="line"
-                data-tooltip-index={index}
-                data-tooltip-x={xScale(index)}
-                data-tooltip-y={yScale(index)}
               />
             );
           })}
@@ -384,7 +388,6 @@ export function Chart({
       {longestSeriesLength !== -1 && (
         <TooltipWrapperNext
           chartType={InternalChartType.Line}
-          focusElementDataType={DataType.Point}
           getMarkup={getTooltipMarkup}
           id={tooltipId.current}
           onIndexChange={(index) => {

diff --git a/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx b/packages/polaris-viz/src/components/SimpleBarChart/Chart.tsx
@@ -6,7 +6,6 @@ import {
   useAriaLabel,
   useChartContext,
   InternalChartType,
-  DataType,
 } from '@shopify/polaris-viz-core';
 import type {
   ChartType,
@@ -16,7 +15,7 @@ import type {
 } from '@shopify/polaris-viz-core';
 import {animated} from '@react-spring/web';
 
-import {TooltipWrapperNext} from '../TooltipWrapper/TooltipWrapperNext';
+import {TooltipWrapperNext} from '../TooltipWrapper';
 import {getFontSize} from '../../utilities/getFontSize';
 import {ChartElements} from '../ChartElements';
 import {LegendContainer, useLegend} from '../../components/LegendContainer';
@@ -221,7 +220,6 @@ export function Chart({
       {highestValueForSeries.length !== 0 && (
         <TooltipWrapperNext
           chartType={InternalChartType.HorizontalBar}
-          focusElementDataType={DataType.BarGroup}
           getMarkup={getTooltipMarkup}
           parentElement={svgRef}
         />

diff --git a/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx b/packages/polaris-viz/src/components/StackedAreaChart/Chart.tsx
@@ -11,7 +11,6 @@ import type {
 import {
   useUniqueId,
   curveStepRounded,
-  DataType,
   useYScale,
   COLOR_VISION_SINGLE_ITEM,
   useChartPositions,
@@ -21,7 +20,7 @@ import {
   useChartContext,
 } from '@shopify/polaris-viz-core';
 
-import {TooltipWrapperNext} from '../TooltipWrapper/TooltipWrapperNext';
+import {getTooltipDataAttr, TooltipWrapperNext} from '../TooltipWrapper';
 import {ChartElements} from '../ChartElements';
 import {
   Annotations,
@@ -304,6 +303,11 @@ export function Chart({
             return (
               <rect
                 key={`${index}-tooltip-area`}
+                {...getTooltipDataAttr({
+                  index,
+                  x: xScale(index),
+                  y: yScale(index),
+                })}
                 height={drawableHeight}
                 width={drawableWidth / longestSeriesLength}
                 x={
@@ -312,10 +316,6 @@ export function Chart({
                 }
                 stroke="blue"
                 fill="rgba(255,0,0,0.2)"
-                data-tooltip-type="line"
-                data-tooltip-index={index}
-                data-tooltip-x={xScale(index)}
-                data-tooltip-y={yScale(index)}
               />
             );
           })}
@@ -387,7 +387,6 @@ export function Chart({
       {longestSeriesLength !== -1 && (
         <TooltipWrapperNext
           chartType={InternalChartType.Line}
-          focusElementDataType={DataType.Point}
           getMarkup={getTooltipMarkup}
           id={tooltipId}
           onIndexChange={(index) =>