Fix bar animation when sign changes

Shopify · Dec 13, 2024 · d4ed8b3 · d4ed8b3
1 parent 5c8bc0f
commit d4ed8b3
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md
@@ -7,6 +7,10 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html).
 
 ## Unreleased
 
+### Fixed
+
+- Bar chart animation when value goes from positive to negative or vice versa
+
 ### Added
 
 - Added support for responsive legends in `<LineChartRelational />`

diff --git a/packages/polaris-viz/src/components/VerticalBarChart/components/VerticalBar/VerticalBar.tsx b/packages/polaris-viz/src/components/VerticalBarChart/components/VerticalBar/VerticalBar.tsx
@@ -4,6 +4,7 @@ import {
   DataType,
   getRoundedRectPath,
   useTheme,
+  usePrevious,
 } from '@shopify/polaris-viz-core';
 
 import {useBarSpringConfig} from '../../../../hooks/useBarSpringConfig';
@@ -69,15 +70,31 @@ export const VerticalBar = memo(function Bar({
   const springConfig = useBarSpringConfig({animationDelay});
   const rotate = `${treatAsNegative ? 'rotate(180)' : 'rotate(0)'}`;
 
+  const prevValue = usePrevious(rawValue);
+  const signIsChanging =
+    prevValue == null ? false : Math.sign(prevValue) !== Math.sign(rawValue);
+
   const {pathD, transform} = useSpring({
     from: {
       pathD: getPath(1, width),
       transform: `translate(0 ${zeroPosition}) ${rotate}`,
     },
-    to: {
-      pathD: getPath(height, width),
-      transform: `translate(0 ${yPosition}) ${rotate}`,
-    },
+    to: signIsChanging
+      ? [
+          {
+            pathD: getPath(0, width),
+            transform: `translate(0 ${zeroPosition}) ${rotate}`,
+            immediate: true,
+          },
+          {
+            pathD: getPath(height, width),
+            transform: `translate(0 ${yPosition}) ${rotate}`,
+          },
+        ]
+      : {
+          pathD: getPath(height, width),
+          transform: `translate(0 ${yPosition}) ${rotate}`,
+        },
     ...springConfig,
   });