More broken, but good

Shopify · Feb 4, 2025 · bd524f0 · bd524f0
1 parent cdbfbd9
commit bd524f0
Show file tree

Hide file tree

Showing 17 changed files with 322 additions and 160 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';
+export type Shape = 'Line' | 'Bar' | 'Default';
 
 export type LineStyle = 'solid' | 'dotted' | 'dashed';
 

diff --git a/packages/polaris-viz/src/components/ConicGradientWithStops/ConicGradientWithStops.tsx b/packages/polaris-viz/src/components/ConicGradientWithStops/ConicGradientWithStops.tsx
@@ -7,6 +7,7 @@ export interface ConicGradientWithStopsProps {
   gradient: GradientStop[];
   height: number;
   width: number;
+  index: number;
   x?: number;
   y?: number;
 }

diff --git a/packages/polaris-viz/src/components/DonutChart/Chart.tsx b/packages/polaris-viz/src/components/DonutChart/Chart.tsx
@@ -1,3 +1,4 @@
+import type {ReactNode} from 'react';
 import {Fragment, useState} from 'react';
 import {pie} from 'd3-shape';
 import {
@@ -36,11 +37,13 @@ import type {
   RenderHiddenLegendLabel,
   RenderInnerValueContent,
   RenderLegendContent,
+  RenderTooltipContentData,
 } from '../../types';
 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;
@@ -62,6 +65,7 @@ export interface ChartProps {
   renderInnerValueContent?: RenderInnerValueContent;
   renderLegendContent?: RenderLegendContent;
   renderHiddenLegendLabel?: RenderHiddenLegendLabel;
+  renderTooltipContent(data: RenderTooltipContentData): ReactNode;
   total?: number;
 }
 
@@ -80,6 +84,7 @@ export function Chart({
   renderInnerValueContent,
   renderLegendContent,
   renderHiddenLegendLabel,
+  renderTooltipContent,
   seriesNameFormatter,
   total,
 }: ChartProps) {
@@ -129,6 +134,13 @@ export function Chart({
     },
   });
 
+  const getTooltipMarkup = useDonutChartTooltipContent({
+    renderTooltipContent,
+    data,
+    seriesColors: seriesColor,
+    seriesNameFormatter,
+  });
+
   if (!width || !height) {
     return null;
   }
@@ -308,9 +320,7 @@ export function Chart({
       <TooltipWrapperNext
         chartType={InternalChartType.Donut}
         focusElementDataType={DataType.Point}
-        getMarkup={(index) => {
-          return <div>Tooltip {index}</div>;
-        }}
+        getMarkup={getTooltipMarkup}
         parentElement={svgRef}
       />
     </div>

diff --git a/packages/polaris-viz/src/components/DonutChart/DonutChart.tsx b/packages/polaris-viz/src/components/DonutChart/DonutChart.tsx
@@ -4,13 +4,15 @@ import {
   usePolarisVizContext,
 } from '@shopify/polaris-viz-core';
 
+import {getTooltipContentRenderer} from '../../utilities/getTooltipContentRenderer';
 import {ChartContainer} from '../ChartContainer';
 import type {ComparisonMetricProps} from '../ComparisonMetric';
 import type {
   LegendPosition,
   RenderHiddenLegendLabel,
   RenderInnerValueContent,
   RenderLegendContent,
+  TooltipOptions,
 } from '../../types';
 import {bucketDataSeries} from '../../utilities/bucketDataSeries';
 
@@ -31,6 +33,7 @@ export type DonutChartProps = {
   renderHiddenLegendLabel?: RenderHiddenLegendLabel;
   renderBucketLegendLabel?: () => string;
   seriesNameFormatter?: LabelFormatter;
+  tooltipOptions?: TooltipOptions;
 } & ChartProps;
 
 export function DonutChart(props: DonutChartProps) {
@@ -56,6 +59,7 @@ export function DonutChart(props: DonutChartProps) {
     renderHiddenLegendLabel,
     renderBucketLegendLabel,
     seriesNameFormatter = (value) => `${value}`,
+    tooltipOptions,
   } = {
     ...DEFAULT_CHART_PROPS,
     ...props,
@@ -65,6 +69,12 @@ export function DonutChart(props: DonutChartProps) {
     ? bucketDataSeries({dataSeries, maxSeries, renderBucketLegendLabel})
     : dataSeries;
 
+  const renderTooltip = getTooltipContentRenderer({
+    tooltipOptions,
+    theme,
+    data,
+  });
+
   return (
     <ChartContainer
       skeletonType="Donut"
@@ -87,6 +97,7 @@ export function DonutChart(props: DonutChartProps) {
         renderInnerValueContent={renderInnerValueContent}
         renderLegendContent={renderLegendContent}
         renderHiddenLegendLabel={renderHiddenLegendLabel}
+        renderTooltipContent={renderTooltip}
         seriesNameFormatter={seriesNameFormatter}
         theme={theme}
       />

diff --git a/packages/polaris-viz/src/components/DonutChart/hooks/useDonutChartToolltipContent.tsx b/packages/polaris-viz/src/components/DonutChart/hooks/useDonutChartToolltipContent.tsx
@@ -0,0 +1,58 @@
+import type {ReactNode} from 'react';
+import {useCallback} from 'react';
+import type {
+  Color,
+  DataSeries,
+  LabelFormatter,
+} from '@shopify/polaris-viz-core';
+import {useChartContext} from '@shopify/polaris-viz-core';
+
+import type {RenderTooltipContentData} from '../../../types';
+
+export interface Props {
+  data: DataSeries[];
+  seriesColors: Color[];
+  renderTooltipContent: (data: RenderTooltipContentData) => ReactNode;
+  seriesNameFormatter: LabelFormatter;
+}
+
+export function useDonutChartTooltipContent({
+  data,
+  renderTooltipContent,
+  seriesColors,
+  seriesNameFormatter,
+}: Props) {
+  const {theme} = useChartContext();
+
+  return useCallback(
+    (activeIndex: number) => {
+      if (activeIndex === -1) {
+        return null;
+      }
+
+      const {name, data: seriesData, color} = data[activeIndex];
+      const {value} = seriesData[0];
+
+      const tooltipData: RenderTooltipContentData['data'] = [
+        {
+          shape: 'Default',
+          data: [
+            {
+              key: `${seriesNameFormatter(name ?? '')}`,
+              value,
+              color: color ?? seriesColors[activeIndex],
+            },
+          ],
+        },
+      ];
+
+      return renderTooltipContent({
+        data: tooltipData,
+        activeIndex,
+        dataSeries: data,
+        theme,
+      });
+    },
+    [data, seriesColors, theme, renderTooltipContent, seriesNameFormatter],
+  );
+}
diff --git a/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx b/packages/polaris-viz/src/components/HorizontalBarChart/Chart.tsx
@@ -15,11 +15,11 @@ import type {
   ChartType,
   XAxisOptions,
   YAxisOptions,
-  BoundingRect,
   LabelFormatter,
 } from '@shopify/polaris-viz-core';
 import {animated} from '@react-spring/web';
 
+import {TooltipWrapperNext} from '../TooltipWrapper/TooltipWrapperNext';
 import {ChartElements} from '../ChartElements';
 import {checkAvailableAnnotations} from '../../components/Annotations';
 import {useFormattedLabels} from '../../hooks/useFormattedLabels';
@@ -45,7 +45,6 @@ import {
 } from '../../hooks';
 import {ChartMargin, ANNOTATIONS_LABELS_OFFSET} from '../../constants';
 import {formatDataIntoGroups} from '../../utilities';
-import {TooltipWrapper} from '../TooltipWrapper';
 
 import {
   VerticalGridLines,
@@ -91,8 +90,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: [
@@ -148,15 +146,14 @@ export function Chart({
       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;
@@ -177,12 +174,6 @@ export function Chart({
   const zeroPosition = longestLabel.negative + xScale(0);
 
   const labelWidth = drawableWidth / ticks.length;
-  const chartBounds: BoundingRect = {
-    width,
-    height,
-    x: chartXPosition,
-    y: 0,
-  };
 
   const {hasXAxisAnnotations, hasYAxisAnnotations} = checkAvailableAnnotations(
     annotationsLookupTable,
@@ -250,6 +241,7 @@ export function Chart({
                   containerWidth={width}
                   data={data}
                   groupHeight={groupHeight}
+                  highestValueForSeries={highestValueForSeries}
                   id={id}
                   index={index}
                   isSimple={false}
@@ -292,18 +284,11 @@ export function Chart({
       </ChartElements.Svg>
 
       {highestValueForSeries.length !== 0 && (
-        <TooltipWrapper
-          bandwidth={groupBarsAreaHeight}
-          chartBounds={chartBounds}
+        <TooltipWrapperNext
           chartType={InternalChartType.HorizontalBar}
-          data={data}
           focusElementDataType={DataType.BarGroup}
           getMarkup={getTooltipMarkup}
-          margin={ChartMargin}
           parentElement={svgRef}
-          longestSeriesIndex={longestSeriesIndex}
-          xScale={xScale}
-          type={type}
         />
       )}
 

diff --git a/packages/polaris-viz/src/components/LineChart/Chart.tsx b/packages/polaris-viz/src/components/LineChart/Chart.tsx
@@ -38,15 +38,13 @@ import type {
 import {useFormattedLabels} from '../../hooks/useFormattedLabels';
 import {XAxis} from '../XAxis';
 import {useLegend, LegendContainer} from '../LegendContainer';
-import {TooltipWrapper} from '../../components/TooltipWrapper';
 import {
   useTheme,
   useColorVisionEvents,
   useWatchColorVisionEvents,
   useLinearLabelsAndDimensions,
 } from '../../hooks';
 import {
-  ChartMargin,
   ANNOTATIONS_LABELS_OFFSET,
   Y_AXIS_LABEL_OFFSET,
   CROSSHAIR_ID,
@@ -230,21 +228,12 @@ export function Chart({
     );
   }
 
-  const chartBounds: BoundingRect = {
-    width,
-    height,
-    x: chartXPosition,
-    y: chartYPosition,
-  };
-
   const {hasXAxisAnnotations, hasYAxisAnnotations} = checkAvailableAnnotations(
     annotationsLookupTable,
   );
 
   const halfXAxisLabelWidth = xAxisDetails.labelWidth / 2;
 
-  console.log({longestSeriesLength});
-
   return (
     <Fragment>
       <ChartElements.Svg
@@ -307,9 +296,10 @@ export function Chart({
             theme,
           })}
 
-          {[...Array(longestSeriesLength).keys()].map((series, index) => {
+          {[...Array(longestSeriesLength + 1).keys()].map((_, index) => {
             return (
               <rect
+                key={`${index}-tooltip-area`}
                 height={drawableHeight}
                 width={drawableWidth / longestSeriesLength}
                 x={