Merge pull request #1667 from Shopify/envex/remount-related-areas

Remount RelatedAreas when data changes
Shopify · May 27, 2024 · dbae7a0 · dbae7a0
2 parents 6eea3d5 + 11671eb
commit dbae7a0
Show file tree

Hide file tree

Showing 4 changed files with 643 additions and 29 deletions.
diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
@@ -7,6 +7,14 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
 
+### Changed
+
+- Fixed issue where `<RelatedAreas />` would crash when the incoming data change had a different shape.
+
+### Removed
+
+- Removed animation from `<RelatedAreas />`.
+
 ### Added
 
 - Added support for bucketing data into a "Other" group for Bar chart and Donut charts

diff --git a/packages/polaris-viz/src/components/LineChartRelational/LineChartRelational.tsx b/packages/polaris-viz/src/components/LineChartRelational/LineChartRelational.tsx
@@ -1,3 +1,4 @@
+import type {DataSeries} from '@shopify/polaris-viz-core';
 import {
   DEFAULT_CHART_PROPS,
   DEFAULT_THEME_NAME,
@@ -45,6 +46,8 @@ export function LineChartRelational(props: LineChartRelationalProps) {
     };
   });
 
+  const relatedAreasKey = buildRelatedAreasKey(dataWithHiddenRelational);
+
   return (
     <LineChart
       annotations={annotations}
@@ -75,7 +78,13 @@ export function LineChartRelational(props: LineChartRelationalProps) {
           return (
             <Fragment>
               <MissingDataArea {...props} data={data} />
-              <RelatedAreas {...props} data={data} />
+              <RelatedAreas
+                data={data}
+                // remount the area otherwise it can't animate
+                // between areas that are differently sized
+                key={relatedAreasKey}
+                {...props}
+              />
             </Fragment>
           );
         },
@@ -88,3 +97,15 @@ export function LineChartRelational(props: LineChartRelationalProps) {
     />
   );
 }
+
+function buildRelatedAreasKey(data: DataSeries[]) {
+  const relatedSeries = data.find((series) => {
+    return series?.metadata?.relatedIndex != null;
+  });
+
+  if (relatedSeries == null) {
+    return '';
+  }
+
+  return relatedSeries.data.map(({value}) => value?.toString()).join(':');
+}
diff --git a/...s/polaris-viz/src/components/LineChartRelational/components/RelatedAreas/RelatedAreas.tsx b/...s/polaris-viz/src/components/LineChartRelational/components/RelatedAreas/RelatedAreas.tsx
@@ -1,13 +1,7 @@
 import {useState} from 'react';
 import type {DataPoint} from '@shopify/polaris-viz-core';
-import {
-  BASE_ANIMATION_DURATION,
-  useSpringConfig,
-  useChartContext,
-  curveStepRounded,
-} from '@shopify/polaris-viz-core';
+import {useChartContext, curveStepRounded} from '@shopify/polaris-viz-core';
 import {area as areaShape} from 'd3-shape';
-import {animated, useSpring} from '@react-spring/web';
 import type {LineChartSlotProps} from 'types';
 
 import {useExternalHideEvents, useWatchActiveSeries} from '../../../../hooks';
@@ -28,24 +22,7 @@ export function RelatedAreas({yScale, xScale, data}: RelatedAreaProps) {
   const percentileIndex = lineSeries.length + 1;
 
   const {hiddenIndexes} = useExternalHideEvents();
-  const {shouldAnimate, id} = useChartContext();
-
-  const springConfig = useSpringConfig({
-    animationDelay: shouldAnimate
-      ? BASE_ANIMATION_DURATION * (data.length + 1)
-      : 0,
-  });
-
-  const {opacity} = useSpring({
-    from: {
-      opacity: 0,
-    },
-    to: {
-      opacity: 1,
-    },
-    immediate: !shouldAnimate,
-    ...springConfig,
-  });
+  const {id} = useChartContext();
 
   useWatchActiveSeries(id ?? '', ({detail: {index}}) => {
     setActiveIndex(index);
@@ -75,7 +52,7 @@ export function RelatedAreas({yScale, xScale, data}: RelatedAreaProps) {
   }
 
   return (
-    <animated.g style={{opacity}}>
+    <g>
       {data.map((series, index) => {
         if (
           series.metadata?.relatedIndex == null ||
@@ -93,10 +70,10 @@ export function RelatedAreas({yScale, xScale, data}: RelatedAreaProps) {
             index={percentileIndex}
             key={index}
             series={series}
-            shouldAnimate={shouldAnimate}
+            shouldAnimate={false}
           />
         );
       })}
-    </animated.g>
+    </g>
   );
 }