Fix bar chart animation when sign changes

Shopify · Dec 11, 2024 · db0931e · db0931e
1 parent 4adc8b1
commit db0931e
Show file tree

Hide file tree

Showing 2 changed files with 44 additions and 5 deletions.
diff --git a/packages/polaris-viz/src/components/BarChart/stories/data.tsx b/packages/polaris-viz/src/components/BarChart/stories/data.tsx
@@ -1,3 +1,4 @@
+import React, {useState} from 'react';
 import type {DataSeries} from '@shopify/polaris-viz-core';
 import type {Story} from '@storybook/react';
 
@@ -7,7 +8,28 @@ import type {BarChartProps} from '../BarChart';
 import {BarChart} from '../BarChart';
 
 export const Template: Story<BarChartProps> = (args: BarChartProps) => {
-  return <BarChart {...args} />;
+  const [firstValNegative, setFirstValNegative] = useState(false);
+  const data = [
+    {
+      name: 'Breakfast',
+      data: [
+        {key: 'Monday', value: firstValNegative ? -20 : 3},
+        {key: 'Tuesday', value: firstValNegative ? -100 : 50},
+        {key: 'Wednesday', value: firstValNegative ? 100 : 3},
+        {key: 'Thursday', value: 8},
+        {key: 'Friday', value: 50},
+        {key: 'Saturday', value: 0},
+        {key: 'Sunday', value: 0.1},
+      ],
+    },
+  ];
+
+  return (
+    <React.Fragment>
+      <button onClick={() => setFirstValNegative(!firstValNegative)}>change data</button>
+      <BarChart {...args} data={data} />
+    </React.Fragment>
+  );
 };
 
 export const TOOLTIP_CONTENT = {

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,
   });