Rework LineChartPredictive to use in chart LineSeries

Shopify · Jan 10, 2024 · ebe88dc · ebe88dc
1 parent cdbf157
commit ebe88dc
Show file tree

Hide file tree

Showing 15 changed files with 652 additions and 103 deletions.
diff --git a/packages/polaris-viz-core/src/components/LineSeries/LineSeries.tsx b/packages/polaris-viz-core/src/components/LineSeries/LineSeries.tsx
@@ -177,7 +177,7 @@ export function LineSeries({
                   style={{
                     ...getColorVisionStylesForActiveIndex({
                       activeIndex: activeLineIndex,
-                      index,
+                      index: data?.metadata?.relatedIndex ?? index,
                     }),
                     strokeDasharray,
                     strokeLinecap: 'round',
@@ -228,7 +228,7 @@ export function LineSeries({
           fill="none"
           {...getColorVisionEventAttrs({
             type: COLOR_VISION_SINGLE_ITEM,
-            index,
+            index: data?.metadata?.relatedIndex ?? index,
           })}
         />
       </AnimatedGroup>

diff --git a/packages/polaris-viz/src/components/LineChartPredictive/LineChartPredictive.tsx b/packages/polaris-viz/src/components/LineChartPredictive/LineChartPredictive.tsx
@@ -1,14 +1,18 @@
+import type {DataSeries} from '@shopify/polaris-viz-core';
 import {
   DEFAULT_CHART_PROPS,
   DEFAULT_THEME_NAME,
   useTheme,
   useThemeSeriesColors,
 } from '@shopify/polaris-viz-core';
+import {useMemo} from 'react';
+import type {RenderTooltipContentData} from 'types';
 
 import {LineChart} from '../LineChart';
 
 import type {LineChartPredictiveProps} from './types';
-import {CustomLegend, PredictiveLineSeries} from './components';
+import {CustomLegend, PredictiveLinePoints} from './components';
+import {renderLinearPredictiveTooltipContent} from './utilities/renderLinearPredictiveTooltipContent';
 
 export function LineChartPredictive(props: LineChartPredictiveProps) {
   const {
@@ -22,7 +26,7 @@ export function LineChartPredictive(props: LineChartPredictiveProps) {
     skipLinkText,
     state,
     theme,
-    tooltipOptions,
+    tooltipOptions: initialTooltipOptions,
     xAxisOptions,
     yAxisOptions,
   } = {
@@ -41,19 +45,44 @@ export function LineChartPredictive(props: LineChartPredictiveProps) {
     }
   }
 
+  const selectedTheme = useTheme(theme);
+  const seriesColors = useThemeSeriesColors(nonPredictiveData, selectedTheme);
+
   const predictiveSeriesNames = predictiveData
     .map(({metadata}) => {
       return data[metadata?.relatedIndex ?? -1].name;
     })
     .filter((value) => value != null) as string[];
 
-  const selectedTheme = useTheme(theme);
-  const seriesColors = useThemeSeriesColors(nonPredictiveData, selectedTheme);
+  const dataWithColors: DataSeries[] = [];
+  let index = -1;
+
+  for (const series of data) {
+    if (series.metadata?.relatedIndex == null) {
+      index += 1;
+    }
+
+    dataWithColors.push({
+      ...series,
+      color: seriesColors[index],
+    });
+  }
+
+  const tooltipOptions = useMemo(() => {
+    function renderTooltipContent(tooltipData: RenderTooltipContentData) {
+      return renderLinearPredictiveTooltipContent(tooltipData);
+    }
+
+    return {
+      ...initialTooltipOptions,
+      renderTooltipContent,
+    };
+  }, [initialTooltipOptions]);
 
   return (
     <LineChart
       annotations={annotations}
-      data={nonPredictiveData}
+      data={dataWithColors}
       emptyStateText={emptyStateText}
       errorText={errorText}
       id={id}
@@ -63,11 +92,10 @@ export function LineChartPredictive(props: LineChartPredictiveProps) {
       slots={{
         chart: ({xScale, yScale, drawableHeight, drawableWidth, theme}) => {
           return (
-            <PredictiveLineSeries
-              data={predictiveData}
+            <PredictiveLinePoints
+              data={dataWithColors}
               drawableHeight={drawableHeight}
               drawableWidth={drawableWidth}
-              seriesColors={seriesColors}
               theme={theme}
               xScale={xScale}
               yScale={yScale}
@@ -89,8 +117,7 @@ export function LineChartPredictive(props: LineChartPredictiveProps) {
             getColorVisionStyles={getColorVisionStyles}
             getColorVisionEventAttrs={getColorVisionEventAttrs}
             predictiveSeriesNames={predictiveSeriesNames}
-            data={nonPredictiveData}
-            seriesColors={seriesColors}
+            data={dataWithColors}
             theme={theme ?? DEFAULT_THEME_NAME}
           />
         );

diff --git a/.../polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.scss b/.../polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.scss
@@ -4,11 +4,3 @@
   flex-wrap: wrap;
   list-style: none;
 }
-
-.IconContainer {
-  display: flex;
-  align-items: center;
-  justify-items: center;
-  height: 12px;
-  width: 20px;
-}
diff --git a/...s/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.tsx b/...s/polaris-viz/src/components/LineChartPredictive/components/CustomLegend/CustomLegend.tsx
@@ -1,25 +1,16 @@
-import {
-  LinearGradientWithStops,
-  changeGradientOpacity,
-  isGradientType,
-  uniqueId,
-} from '@shopify/polaris-viz-core';
-import type {Color} from '@shopify/polaris-viz-core';
+import {uniqueId} from '@shopify/polaris-viz-core';
 import {useMemo} from 'react';
 
 import type {LineChartPredictiveDataSeries} from '../../../../components/LineChartPredictive/types';
 import type {ColorVisionInteractionMethods} from '../../../../types';
-import {getLineChartDataWithDefaults} from '../../../../utilities/getLineChartDataWithDefaults';
 import {LegendItem} from '../../../../components/Legend';
+import {SeriesIcon} from '../SeriesIcon';
 
 import styles from './CustomLegend.scss';
 
 interface Props extends ColorVisionInteractionMethods {
   data: LineChartPredictiveDataSeries[];
   predictiveSeriesNames: string[];
-  getColorVisionEventAttrs: any;
-  getColorVisionStyles: any;
-  seriesColors: Color[];
   theme: string;
 }
 
@@ -28,20 +19,17 @@ export function CustomLegend({
   predictiveSeriesNames,
   getColorVisionEventAttrs,
   getColorVisionStyles,
-  seriesColors,
   theme,
 }: Props) {
-  const id = useMemo(() => uniqueId('CustomLegen'), []);
-
-  const dataWithDefaults = getLineChartDataWithDefaults(data, seriesColors);
-
   return (
     <ul className={styles.Container}>
-      {dataWithDefaults.map(({color, name, isComparison}, index) => {
-        const gradientId = `${id}-${index}`;
+      {data.map(({color, name, isComparison, metadata}, index) => {
+        if (metadata?.isPredictive) {
+          return null;
+        }
 
         function renderSeriesIcon() {
-          return <SeriesIcon color={color} gradientId={gradientId} />;
+          return <SeriesIcon color={color!} />;
         }
 
         return (
@@ -71,35 +59,3 @@ export function CustomLegend({
     </ul>
   );
 }
-
-function SeriesIcon({color, gradientId}: {color: Color; gradientId: string}) {
-  return (
-    <div className={styles.IconContainer}>
-      <svg
-        width="19"
-        height="4"
-        viewBox="0 0 19 4"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <path
-          fill-rule="evenodd"
-          clip-rule="evenodd"
-          d="M8 2C8 0.89543 8.89543 0 10 0C11.1046 0 12 0.89543 12 2C12 3.10457 11.1046 4 10 4C8.89543 4 8 3.10457 8 2ZM7.17071 1C7.06015 1.31278 7 1.64936 7 2C7 2.35064 7.06015 2.68722 7.17071 3H1C0.447715 3 0 2.55228 0 2C0 1.44772 0.447715 1 1 1H7.17071ZM13 2C13 2.55228 13.4477 3 14 3H14.4C14.9523 3 15.4 2.55228 15.4 2C15.4 1.44772 14.9523 1 14.4 1H14C13.4477 1 13 1.44772 13 2ZM17.6 1C17.0477 1 16.6 1.44772 16.6 2C16.6 2.55228 17.0477 3 17.6 3H18C18.5523 3 19 2.55228 19 2C19 1.44772 18.5523 1 18 1H17.6Z"
-          fill={`url(#${gradientId})`}
-        />
-        {isGradientType(color) ? (
-          <defs>
-            <LinearGradientWithStops
-              id={gradientId}
-              gradient={changeGradientOpacity(color)}
-              gradientUnits="userSpaceOnUse"
-              y1="100%"
-              y2="0%"
-            />
-          </defs>
-        ) : null}
-      </svg>
-    </div>
-  );
-}
diff --git a/...ictiveLineSeries/PredictiveLineSeries.tsx → ...ictiveLinePoints/PredictiveLinePoints.tsx b/...ictiveLineSeries/PredictiveLineSeries.tsx → ...ictiveLinePoints/PredictiveLinePoints.tsx
@@ -1,7 +1,6 @@
 import type {Color} from '@shopify/polaris-viz-core';
 import {
   COLOR_VISION_SINGLE_ITEM,
-  LineSeries,
   LinearGradientWithStops,
   changeColorOpacity,
   changeGradientOpacity,
@@ -11,65 +10,49 @@ import {
 import {Fragment, useMemo, useState} from 'react';
 import type {LineChartSlotProps} from 'types';
 
-import {Point} from '../../../../components/Point';
+import {Point} from '../../../Point';
 import {useWatchColorVisionEvents} from '../../../../hooks';
-import {getLineChartDataWithDefaults} from '../../../../utilities/getLineChartDataWithDefaults';
 import type {LineChartPredictiveProps} from '../../types';
 
-interface PredictiveLinesProps extends LineChartSlotProps {
+interface PredictiveLinePointsProps extends LineChartSlotProps {
   data: LineChartPredictiveProps['data'];
-  seriesColors: Color[];
-  theme: string;
 }
 
-export function PredictiveLineSeries({
+export function PredictiveLinePoints({
   data,
-  drawableHeight,
-  drawableWidth,
-  seriesColors,
-  theme,
   xScale,
   yScale,
-}: PredictiveLinesProps) {
+}: PredictiveLinePointsProps) {
   const [activeLineIndex, setActiveLineIndex] = useState(-1);
-  const id = useMemo(() => uniqueId('PredictiveLines'), []);
+  const id = useMemo(() => uniqueId('PredictiveLinePoints'), []);
 
   useWatchColorVisionEvents({
     type: COLOR_VISION_SINGLE_ITEM,
     onIndexChange: ({detail}) => setActiveLineIndex(detail.index),
   });
 
-  const dataWithDefaults = getLineChartDataWithDefaults(data, seriesColors);
-
   return (
     <Fragment>
-      {dataWithDefaults.map((series, index) => {
+      {data.map((series, seriesIndex) => {
+        if (series.metadata?.isPredictive == null) {
+          return false;
+        }
+
+        const index = series.metadata?.relatedIndex ?? seriesIndex;
         const pointGradientId = `${id}-point-${index}`;
 
         const predictiveStartIndex = series.data.findIndex(
           ({key}) => key === series.metadata?.startKey,
         );
 
-        const color = series.color;
+        const color = series.color!;
 
         const pointColor = isGradientType(color)
           ? `url(#${pointGradientId})`
           : changeColorOpacity(color);
 
         return (
           <Fragment key={`${series.name}-${index}`}>
-            <LineSeries
-              activeLineIndex={activeLineIndex}
-              data={series}
-              index={index}
-              svgDimensions={{
-                height: drawableHeight,
-                width: drawableWidth,
-              }}
-              xScale={xScale}
-              yScale={yScale}
-              theme={theme}
-            />
             {isGradientType(color) ? (
               <defs>
                 <LinearGradientWithStops

diff --git a/...s/polaris-viz/src/components/LineChartPredictive/components/PredictiveLinePoints/index.ts b/...s/polaris-viz/src/components/LineChartPredictive/components/PredictiveLinePoints/index.ts
@@ -0,0 +1 @@
+export {PredictiveLinePoints} from './PredictiveLinePoints';
diff --git a/...s/polaris-viz/src/components/LineChartPredictive/components/PredictiveLineSeries/index.ts b/...s/polaris-viz/src/components/LineChartPredictive/components/PredictiveLineSeries/index.ts
diff --git a/...ages/polaris-viz/src/components/LineChartPredictive/components/SeriesIcon/SeriesIcon.scss b/...ages/polaris-viz/src/components/LineChartPredictive/components/SeriesIcon/SeriesIcon.scss
@@ -0,0 +1,7 @@
+.IconContainer {
+  display: flex;
+  align-items: center;
+  justify-items: center;
+  height: 12px;
+  width: 20px;
+}
diff --git a/packages/polaris-viz/src/components/LineChartPredictive/components/SeriesIcon/SeriesIcon.tsx b/packages/polaris-viz/src/components/LineChartPredictive/components/SeriesIcon/SeriesIcon.tsx
@@ -0,0 +1,44 @@
+import type {Color} from '@shopify/polaris-viz-core';
+import {
+  isGradientType,
+  LinearGradientWithStops,
+  changeGradientOpacity,
+  uniqueId,
+} from '@shopify/polaris-viz-core';
+import {useMemo} from 'react';
+
+import styles from './SeriesIcon.scss';
+
+export function SeriesIcon({color}: {color: Color}) {
+  const id = useMemo(() => uniqueId('SeriesIcon'), []);
+
+  return (
+    <div className={styles.IconContainer}>
+      <svg
+        width="19"
+        height="4"
+        viewBox="0 0 19 4"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M8 2C8 0.89543 8.89543 0 10 0C11.1046 0 12 0.89543 12 2C12 3.10457 11.1046 4 10 4C8.89543 4 8 3.10457 8 2ZM7.17071 1C7.06015 1.31278 7 1.64936 7 2C7 2.35064 7.06015 2.68722 7.17071 3H1C0.447715 3 0 2.55228 0 2C0 1.44772 0.447715 1 1 1H7.17071ZM13 2C13 2.55228 13.4477 3 14 3H14.4C14.9523 3 15.4 2.55228 15.4 2C15.4 1.44772 14.9523 1 14.4 1H14C13.4477 1 13 1.44772 13 2ZM17.6 1C17.0477 1 16.6 1.44772 16.6 2C16.6 2.55228 17.0477 3 17.6 3H18C18.5523 3 19 2.55228 19 2C19 1.44772 18.5523 1 18 1H17.6Z"
+          fill={`url(#${id})`}
+        />
+        {isGradientType(color) ? (
+          <defs>
+            <LinearGradientWithStops
+              id={id}
+              gradient={changeGradientOpacity(color)}
+              gradientUnits="userSpaceOnUse"
+              y1="100%"
+              y2="0%"
+            />
+          </defs>
+        ) : null}
+      </svg>
+    </div>
+  );
+}
diff --git a/packages/polaris-viz/src/components/LineChartPredictive/components/SeriesIcon/index.ts b/packages/polaris-viz/src/components/LineChartPredictive/components/SeriesIcon/index.ts
@@ -0,0 +1 @@
+export {SeriesIcon} from './SeriesIcon';
diff --git a/packages/polaris-viz/src/components/LineChartPredictive/components/index.ts b/packages/polaris-viz/src/components/LineChartPredictive/components/index.ts
@@ -1,2 +1,3 @@
-export {PredictiveLineSeries} from './PredictiveLineSeries';
+export {PredictiveLinePoints} from './PredictiveLinePoints';
 export {CustomLegend} from './CustomLegend';
+export {SeriesIcon} from './SeriesIcon';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		export {PredictiveLinePoints} from './PredictiveLinePoints';