diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md index 829a05a54..8a9074875 100644 --- 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 `` diff --git a/packages/polaris-viz/src/components/VerticalBarChart/components/VerticalBar/VerticalBar.tsx b/packages/polaris-viz/src/components/VerticalBarChart/components/VerticalBar/VerticalBar.tsx index 848f94bb6..96fbfe7c1 100644 --- 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, });