Implement design changes to LineChartRelational

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

Hide file tree

Showing 13 changed files with 146 additions and 25 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/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,
@@ -35,7 +39,19 @@ export function LineChartRelational(props: LineChartProps) {
       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/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx b/packages/polaris-viz/src/components/LineChartRelational/stories/data.tsx
@@ -1,6 +1,7 @@
 import type {Story} from '@storybook/react';
 import type {RenderTooltipContentData} from 'types';
 import type {DataSeries} from '@shopify/polaris-viz-core';
+import {UPLIFT_THEME} from '@shopify/polaris-viz-core';
 import type {LineChartProps} from 'components/LineChart/LineChart';
 
 import {LineChartRelational} from '../LineChartRelational';
@@ -80,10 +81,7 @@ export const DEFAULT_DATA: DataSeries[] = [
       {value: 849, key: '2020-03-13T12:00:00'},
       {value: 129, key: '2020-03-14T12:00:00'},
     ],
-    color: [
-      {offset: 0, color: 'rgba(149, 101, 255, 1)'},
-      {offset: 100, color: 'rgba(75, 146, 229, 1)'},
-    ],
+    color: UPLIFT_THEME.seriesColors.upToEight[0],
   },
   {
     name: '75th Percentile',
@@ -103,14 +101,16 @@ export const DEFAULT_DATA: DataSeries[] = [
       {value: 773, key: '2020-03-13T12:00:00'},
       {value: 171, key: '2020-03-14T12:00:00'},
     ],
-    color: 'rgba(103, 197, 228, 1)',
+    color: 'rgba(218, 182, 242, 1)',
     metadata: {
       relatedIndex: 2,
-      areaColor: 'rgba(103, 197, 228, 0.1)',
+      areaColor: 'rgba(218, 182, 242, 0.2)',
+      isVisuallyHidden: true,
+      legendLabel: '75th - 25th percentile',
     },
     styleOverride: {
-      line: {
-        hasArea: false,
+      tooltip: {
+        shape: 'Bar',
       },
     },
   },
@@ -132,11 +132,7 @@ export const DEFAULT_DATA: DataSeries[] = [
       {value: 623, key: '2020-03-13T12:00:00'},
       {value: 21, key: '2020-03-14T12:00:00'},
     ],
-    color: 'rgba(40, 106, 123, 1)',
-    metadata: {
-      relatedIndex: 3,
-      areaColor: 'rgba(47, 175, 218, 0.2)',
-    },
+    color: UPLIFT_THEME.seriesColors.upToEight[5],
     styleOverride: {
       line: {
         hasArea: false,
@@ -162,10 +158,16 @@ export const DEFAULT_DATA: DataSeries[] = [
       {value: 473, key: '2020-03-13T12:00:00'},
       {value: 0, key: '2020-03-14T12:00:00'},
     ],
-    color: 'rgba(103, 197, 228, 1)',
+    color: 'rgba(218, 182, 242, 1)',
+    metadata: {
+      relatedIndex: 2,
+      areaColor: 'rgba(218, 182, 242, 0.2)',
+      isVisuallyHidden: true,
+      legendLabel: '75th - 25th percentile',
+    },
     styleOverride: {
-      line: {
-        hasArea: false,
+      tooltip: {
+        shape: 'Bar',
       },
     },
   },

diff --git a/packages/polaris-viz/src/utilities/renderLinearTooltipContent.tsx b/packages/polaris-viz/src/utilities/renderLinearTooltipContent.tsx
@@ -51,7 +51,7 @@ export function renderLinearTooltipContent(
   };
 
   function renderSeriesIcon(color, styleOverride): ReactNode {
-    if (styleOverride == null) {
+    if (styleOverride?.line == null) {
       return null;
     }
 
@@ -110,7 +110,7 @@ export function renderLinearTooltipContent(
                   renderSeriesIcon={() =>
                     renderSeriesIcon(color, styleOverride)
                   }
-                  shape="Line"
+                  shape={styleOverride?.tooltip?.shape ?? 'Line'}
                   value={formatters.valueFormatter(item.value ?? 0)}
                 />
               );