Broken

Author: envex

Diff for: packages/polaris-viz-core/src/types.ts

@@ -316,6 +316,7 @@ export enum InternalChartType {
   HorizontalBar = 'HorizontalBar',
   Combo = 'Combo',
   Line = 'Line',
+  Donut = 'Donut',
 }
 
 export enum Hue {

Diff for: packages/polaris-viz-core/src/utilities/getColorVisionEventAttrs.ts

@@ -11,5 +11,6 @@ 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 for: packages/polaris-viz/src/components/Arc/Arc.tsx

@@ -140,6 +140,7 @@ export function Arc({
           height={radius * 4}
           width={radius * 4}
           gradient={gradient}
+          index={index}
         />
       </g>
     </Fragment>

Diff for: packages/polaris-viz/src/components/ConicGradientWithStops/ConicGradientWithStops.tsx

@@ -1,4 +1,5 @@
 import type {GradientStop} from '@shopify/polaris-viz-core';
+import {Fragment} from 'react';
 
 import {createCSSConicGradient} from '../../utilities';
 
@@ -16,18 +17,30 @@ 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
+        data-tooltip-type="donut"
+        data-tooltip-index={index}
+        width={width}
+        height={height}
+        x={x}
+        y={y}
+        fill="transparent"
       />
-    </foreignObject>
+    </Fragment>
   );
 }

Diff for: packages/polaris-viz/src/components/DonutChart/Chart.tsx

@@ -9,6 +9,8 @@ import {
   useChartContext,
   THIN_ARC_CORNER_THICKNESS,
   isInfinity,
+  InternalChartType,
+  DataType,
 } from '@shopify/polaris-viz-core';
 import type {
   DataPoint,
@@ -17,6 +19,7 @@ import type {
   Direction,
 } from '@shopify/polaris-viz-core';
 
+import {TooltipWrapperNext} from '../../components/TooltipWrapper/TooltipWrapperNext';
 import {getAnimationDelayForItems} from '../../utilities/getAnimationDelayForItems';
 import {getContainerAlignmentForLegend} from '../../utilities';
 import type {ComparisonMetricProps} from '../ComparisonMetric';
@@ -84,6 +87,7 @@ export function Chart({
   const chartId = useUniqueId('Donut');
   const [activeIndex, setActiveIndex] = useState<number>(-1);
   const selectedTheme = useTheme();
+  const [svgRef, setSvgRef] = useState<SVGSVGElement | null>(null);
 
   const seriesCount = clamp({
     amount: data.length,
@@ -208,6 +212,7 @@ export function Chart({
               viewBox={`${minX} ${minY} ${viewBoxDimensions.width} ${viewBoxDimensions.height}`}
               height={diameter}
               width={diameter}
+              ref={setSvgRef}
             >
               {isLegendMounted && (
                 <g className={styles.DonutChart}>
@@ -300,6 +305,14 @@ export function Chart({
           }
         />
       )}
+      <TooltipWrapperNext
+        chartType={InternalChartType.Donut}
+        focusElementDataType={DataType.Point}
+        getMarkup={(index) => {
+          return <div>Tooltip {index}</div>;
+        }}
+        parentElement={svgRef}
+      />
     </div>
   );
 }

Diff for: packages/polaris-viz/src/components/LineChart/Chart.tsx

@@ -55,6 +55,7 @@ import {VisuallyHiddenRows} from '../VisuallyHiddenRows';
 import {YAxis} from '../YAxis';
 import {HorizontalGridLines} from '../HorizontalGridLines';
 import {ChartElements} from '../ChartElements';
+import {TooltipWrapperNext} from '../../components/TooltipWrapper/TooltipWrapperNext';
 
 import {useLineChartTooltipContent} from './hooks/useLineChartTooltipContent';
 import {PointsAndCrosshair} from './components';
@@ -242,6 +243,8 @@ export function Chart({
 
   const halfXAxisLabelWidth = xAxisDetails.labelWidth / 2;
 
+  console.log({longestSeriesLength});
+
   return (
     <Fragment>
       <ChartElements.Svg
@@ -304,6 +307,24 @@ export function Chart({
             theme,
           })}
 
+          {[...Array(longestSeriesLength).keys()].map((series, index) => {
+            return (
+              <rect
+                height={drawableHeight}
+                width={drawableWidth / longestSeriesLength}
+                x={
+                  index * (drawableWidth / longestSeriesLength) -
+                  drawableWidth / longestSeriesLength / 2
+                }
+                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.map((singleSeries, index) => {
             if (singleSeries.metadata?.isVisuallyHidden === true) {
               return null;
@@ -371,15 +392,11 @@ 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 +405,6 @@ export function Chart({
             }
           }}
           parentElement={svgRef}
-          usePortal
-          xScale={xScale}
-          yScale={yScale}
         />
       )}