Implement design changes to LineChartRelational

Shopify · Mar 20, 2024 · 2712166 · 2712166
1 parent 7ba2aff
commit 2712166
Show file tree

Hide file tree

Showing 18 changed files with 179 additions and 87 deletions.
diff --git a/packages/polaris-viz-core/src/types.ts b/packages/polaris-viz-core/src/types.ts
@@ -27,6 +27,9 @@ interface StyleOverride {
     width?: number;
     strokeDasharray?: string;
   };
+  tooltip?: {
+    shape?: Shape;
+  };
 }
 
 export interface DataGroup {

diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
@@ -5,7 +5,18 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/en/1.0.0/)
 and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
-<!-- ## Unreleased -->
+## Unreleased
+
+### Added
+
+- Added `tooltip.shape` override value to `DataSeries.styleOverride`.
+- **Breaking change** Added custom legend to `<LineChartRelational />`.
+
+
+### Changed
+
+- **Breaking change** `<LineChartRelational />` no longer renders all lines in the `DataSeries[]`. Any `DataSeries` with `metadata.relatedIndex` will only render the area in the chart.
+- **Breaking change** `metadata.relatedIndex` should now refer to the single "median" index and not the next index to draw the area to.
 
 ## [11.1.0] - 2024-03-19
 

diff --git a/packages/polaris-viz/src/components/LineChart/Chart.tsx b/packages/polaris-viz/src/components/LineChart/Chart.tsx
@@ -342,6 +342,10 @@ export function Chart({
           })}
 
           {data.map((singleSeries, index) => {
+            if (singleSeries.metadata?.isVisuallyHidden === true) {
+              return null;
+            }
+
             return (
               <LineSeries
                 activeLineIndex={activeLineIndex}

diff --git a/packages/polaris-viz/src/components/LineChart/components/Points/Points.tsx b/packages/polaris-viz/src/components/LineChart/components/Points/Points.tsx
@@ -65,6 +65,10 @@ export function Points({
   return (
     <Fragment>
       {data.map((singleSeries, seriesIndex) => {
+        if (singleSeries?.metadata?.isVisuallyHidden === true) {
+          return null;
+        }
+
         const index = singleSeries.metadata?.relatedIndex ?? seriesIndex;
 
         if (hiddenIndexes.includes(index)) {

diff --git a/packages/polaris-viz/src/components/LineChartRelational/LineChartRelational.tsx b/packages/polaris-viz/src/components/LineChartRelational/LineChartRelational.tsx
@@ -1,20 +1,24 @@
-import {DEFAULT_CHART_PROPS} from '@shopify/polaris-viz-core';
+import {
+  DEFAULT_CHART_PROPS,
+  DEFAULT_THEME_NAME,
+} from '@shopify/polaris-viz-core';
 import {Fragment} from 'react';
 
 import type {LineChartProps} from '../LineChart';
 import {LineChart} from '../LineChart';
 
-import {RelatedAreas, MissingDataArea} from './components';
+import {RelatedAreas, MissingDataArea, CustomLegend} from './components';
 
-export function LineChartRelational(props: LineChartProps) {
+export function LineChartRelational(
+  props: Omit<LineChartProps, 'renderLegendContent'>,
+) {
   const {
     annotations = [],
     data,
     errorText,
     emptyStateText,
     id,
     isAnimated,
-    renderLegendContent,
     showLegend = true,
     skipLinkText,
     state,
@@ -27,15 +31,37 @@ export function LineChartRelational(props: LineChartProps) {
     ...props,
   };
 
+  const dataWithHiddenRelational = data.map((series) => {
+    return {
+      ...series,
+      metadata: {
+        ...series.metadata,
+        isVisuallyHidden: series.metadata?.relatedIndex != null,
+      },
+    };
+  });
+
   return (
     <LineChart
       annotations={annotations}
-      data={data}
+      data={dataWithHiddenRelational}
       emptyStateText={emptyStateText}
       errorText={errorText}
       id={id}
       isAnimated={isAnimated}
-      renderLegendContent={renderLegendContent}
+      renderLegendContent={({
+        getColorVisionStyles,
+        getColorVisionEventAttrs,
+      }) => {
+        return (
+          <CustomLegend
+            getColorVisionStyles={getColorVisionStyles}
+            getColorVisionEventAttrs={getColorVisionEventAttrs}
+            data={data}
+            theme={theme ?? DEFAULT_THEME_NAME}
+          />
+        );
+      }}
       showLegend={showLegend}
       skipLinkText={skipLinkText}
       slots={{

diff --git a/packages/polaris-viz/src/components/LineChartRelational/components/Area/Area.tsx b/packages/polaris-viz/src/components/LineChartRelational/components/Area/Area.tsx
@@ -57,7 +57,7 @@ export function Area({
       style={{
         ...getColorVisionStylesForActiveIndex({
           activeIndex,
-          index: -1,
+          index,
           fadedOpacity: 0.2,
         }),
       }}

diff --git a/.../polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.scss b/.../polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.scss
@@ -0,0 +1,6 @@
+.Container {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+  list-style: none;
+}
diff --git a/...s/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.tsx b/...s/polaris-viz/src/components/LineChartRelational/components/CustomLegend/CustomLegend.tsx
@@ -0,0 +1,76 @@
+import type {DataSeries} from '@shopify/polaris-viz-core';
+
+import type {ColorVisionInteractionMethods} from '../../../../types';
+import {LegendItem} from '../../../../components/Legend';
+
+import styles from './CustomLegend.scss';
+
+interface Props extends ColorVisionInteractionMethods {
+  data: DataSeries[];
+  theme: string;
+}
+
+export function CustomLegend({
+  data,
+  getColorVisionEventAttrs,
+  getColorVisionStyles,
+  theme,
+}: Props) {
+  const lineSeries = data.filter(
+    (series) => series?.metadata?.relatedIndex == null,
+  );
+
+  const percentileItems = data.filter(
+    (series) => series?.metadata?.relatedIndex != null,
+  );
+
+  const percentileIndex = lineSeries.length + 1;
+
+  return (
+    <ul className={styles.Container}>
+      {lineSeries.map(({color, name, isComparison, metadata}) => {
+        if (metadata?.isPredictive) {
+          return null;
+        }
+
+        const index = data.findIndex((series) => series.name === name);
+
+        return (
+          <li
+            key={index}
+            style={{
+              ...getColorVisionStyles(index),
+            }}
+            {...getColorVisionEventAttrs(index)}
+          >
+            <LegendItem
+              color={color!}
+              index={index}
+              isComparison={isComparison}
+              name={name!}
+              shape="Line"
+              theme={theme}
+            />
+          </li>
+        );
+      })}
+      <li
+        key={percentileIndex}
+        style={{
+          ...getColorVisionStyles(percentileIndex),
+        }}
+        {...getColorVisionEventAttrs(percentileIndex)}
+      >
+        <LegendItem
+          color={
+            percentileItems[0].color ?? percentileItems[0]?.metadata?.areaColor
+          }
+          index={percentileIndex}
+          name={percentileItems[0]?.metadata?.legendLabel}
+          shape="Bar"
+          theme={theme}
+        />
+      </li>
+    </ul>
+  );
+}
diff --git a/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/index.ts b/packages/polaris-viz/src/components/LineChartRelational/components/CustomLegend/index.ts
@@ -0,0 +1 @@
+export {CustomLegend} from './CustomLegend';
diff --git a/...s/polaris-viz/src/components/LineChartRelational/components/RelatedAreas/RelatedAreas.tsx b/...s/polaris-viz/src/components/LineChartRelational/components/RelatedAreas/RelatedAreas.tsx
@@ -21,6 +21,12 @@ export interface RelatedAreaProps extends LineChartSlotProps {
 export function RelatedAreas({yScale, xScale, data}: RelatedAreaProps) {
   const [activeIndex, setActiveIndex] = useState(-1);
 
+  const lineSeries = data.filter(
+    (series) => series?.metadata?.relatedIndex == null,
+  );
+
+  const percentileIndex = lineSeries.length + 1;
+
   const {hiddenIndexes} = useExternalHideEvents();
   const {shouldAnimate, id} = useChartContext();
 
@@ -84,7 +90,7 @@ export function RelatedAreas({yScale, xScale, data}: RelatedAreaProps) {
             fill={series.metadata?.areaColor}
             getAreaGenerator={getAreaGenerator}
             hiddenIndexes={hiddenIndexes}
-            index={index}
+            index={percentileIndex}
             key={index}
             series={series}
             shouldAnimate={shouldAnimate}

diff --git a/packages/polaris-viz/src/components/LineChartRelational/components/index.ts b/packages/polaris-viz/src/components/LineChartRelational/components/index.ts
@@ -1,3 +1,4 @@
 export {Area} from './Area';
 export {MissingDataArea} from './MissingDataArea';
 export {RelatedAreas} from './RelatedAreas';
+export {CustomLegend} from './CustomLegend';
diff --git a/packages/polaris-viz/src/components/LineChartRelational/stories/Default.stories.tsx b/packages/polaris-viz/src/components/LineChartRelational/stories/Default.stories.tsx
@@ -11,4 +11,6 @@ Default.args = {
   ...DEFAULT_PROPS,
   data: DEFAULT_DATA,
   isAnimated: false,
+  showLegend: true,
+  theme: 'Uplift',
 };
diff --git a/...polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-end-data.js b/...polaris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-end-data.js
@@ -40,16 +40,10 @@ export const MISSING_END_DATA = [
       {value: null, key: '2020-03-13T12:00:00'},
       {value: null, key: '2020-03-14T12:00:00'},
     ],
-    color: 'rgba(103, 197, 228, 1)',
     metadata: {
       relatedIndex: 2,
       areaColor: 'rgba(103, 197, 228, 0.1)',
     },
-    styleOverride: {
-      line: {
-        hasArea: false,
-      },
-    },
   },
   {
     name: 'Median',
@@ -70,10 +64,6 @@ export const MISSING_END_DATA = [
       {value: null, key: '2020-03-14T12:00:00'},
     ],
     color: 'rgba(40, 106, 123, 1)',
-    metadata: {
-      relatedIndex: 3,
-      areaColor: 'rgba(47, 175, 218, 0.2)',
-    },
     styleOverride: {
       line: {
         hasArea: false,
@@ -99,11 +89,9 @@ export const MISSING_END_DATA = [
       {value: null, key: '2020-03-13T12:00:00'},
       {value: null, key: '2020-03-14T12:00:00'},
     ],
-    color: 'rgba(103, 197, 228, 1)',
-    styleOverride: {
-      line: {
-        hasArea: false,
-      },
+    metadata: {
+      relatedIndex: 2,
+      areaColor: 'rgba(103, 197, 228, 0.1)',
     },
   },
 ];
diff --git a/...aris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-middle-data.js b/...aris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-middle-data.js
@@ -40,16 +40,10 @@ export const MISSING_MIDDLE_DATA = [
       {value: 773, key: '2020-03-13T12:00:00'},
       {value: 171, key: '2020-03-14T12:00:00'},
     ],
-    color: 'rgba(103, 197, 228, 1)',
     metadata: {
       relatedIndex: 2,
       areaColor: 'rgba(103, 197, 228, 0.1)',
     },
-    styleOverride: {
-      line: {
-        hasArea: false,
-      },
-    },
   },
   {
     name: 'Median',
@@ -70,10 +64,6 @@ export const MISSING_MIDDLE_DATA = [
       {value: 21, key: '2020-03-14T12:00:00'},
     ],
     color: 'rgba(40, 106, 123, 1)',
-    metadata: {
-      relatedIndex: 3,
-      areaColor: 'rgba(47, 175, 218, 0.2)',
-    },
     styleOverride: {
       line: {
         hasArea: false,
@@ -99,11 +89,9 @@ export const MISSING_MIDDLE_DATA = [
       {value: 473, key: '2020-03-13T12:00:00'},
       {value: 0, key: '2020-03-14T12:00:00'},
     ],
-    color: 'rgba(103, 197, 228, 1)',
-    styleOverride: {
-      line: {
-        hasArea: false,
-      },
+    metadata: {
+      relatedIndex: 2,
+      areaColor: 'rgba(103, 197, 228, 0.1)',
     },
   },
 ];
diff --git a/...aris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-random-data.js b/...aris-viz/src/components/LineChartRelational/stories/chromatic/data/missing-random-data.js
@@ -40,16 +40,10 @@ export const MISSING_RANDOM_DATA = [
       {value: 773, key: '2020-03-13T12:00:00'},
       {value: 171, key: '2020-03-14T12:00:00'},
     ],
-    color: 'rgba(103, 197, 228, 1)',
     metadata: {
       relatedIndex: 2,
       areaColor: 'rgba(103, 197, 228, 0.1)',
     },
-    styleOverride: {
-      line: {
-        hasArea: false,
-      },
-    },
   },
   {
     name: 'Median',
@@ -70,10 +64,6 @@ export const MISSING_RANDOM_DATA = [
       {value: 21, key: '2020-03-14T12:00:00'},
     ],
     color: 'rgba(40, 106, 123, 1)',
-    metadata: {
-      relatedIndex: 3,
-      areaColor: 'rgba(47, 175, 218, 0.2)',
-    },
     styleOverride: {
       line: {
         hasArea: false,
@@ -99,11 +89,9 @@ export const MISSING_RANDOM_DATA = [
       {value: 473, key: '2020-03-13T12:00:00'},
       {value: 0, key: '2020-03-14T12:00:00'},
     ],
-    color: 'rgba(103, 197, 228, 1)',
-    styleOverride: {
-      line: {
-        hasArea: false,
-      },
+    metadata: {
+      relatedIndex: 2,
+      areaColor: 'rgba(103, 197, 228, 0.1)',
     },
   },
 ];