Focus and tooltip placement around unsafe are

Shopify · Feb 4, 2025 · 3856a1a · 3856a1a
1 parent 1ba736d
commit 3856a1a
Show file tree

Hide file tree

Showing 17 changed files with 212 additions and 536 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/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/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,7 @@ import {VisuallyHiddenRows} from '../VisuallyHiddenRows';
 import {YAxis} from '../YAxis';
 import {HorizontalGridLines} from '../HorizontalGridLines';
 import {ChartElements} from '../ChartElements';
-import {TooltipWrapperNext} from '../../components/TooltipWrapper/TooltipWrapperNext';
+import {TooltipWrapperNext} from '../../components/TooltipWrapper';
 
 import {useLineChartTooltipContent} from './hooks/useLineChartTooltipContent';
 import {PointsAndCrosshair} from './components';
@@ -297,20 +295,22 @@ 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`}
                 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)}
+                data-tooltip-x={containerBounds.x + chartXPosition + x + width}
+                data-tooltip-y={containerBounds.y + chartYPosition}
               />
             );
           })}
@@ -384,7 +384,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 {TooltipWrapperNext} from '../TooltipWrapper';
 import {ChartElements} from '../ChartElements';
 import {
   Annotations,
@@ -387,7 +386,6 @@ export function Chart({
       {longestSeriesLength !== -1 && (
         <TooltipWrapperNext
           chartType={InternalChartType.Line}
-          focusElementDataType={DataType.Point}
           getMarkup={getTooltipMarkup}
           id={tooltipId}
           onIndexChange={(index) =>