diff --git a/packages/polaris-viz/CHANGELOG.md b/packages/polaris-viz/CHANGELOG.md index a89efe941..2c2165de3 100644 --- a/packages/polaris-viz/CHANGELOG.md +++ b/packages/polaris-viz/CHANGELOG.md @@ -10,6 +10,7 @@ and adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.html). ### Changed - Fill missing values for SparkLine charts +- Made `` animation delay based on slice count, not a set `index * 100ms`. ## [12.4.1] - 2024-04-03 diff --git a/packages/polaris-viz/src/components/Arc/Arc.tsx b/packages/polaris-viz/src/components/Arc/Arc.tsx index f00e82ea3..1de745d92 100644 --- a/packages/polaris-viz/src/components/Arc/Arc.tsx +++ b/packages/polaris-viz/src/components/Arc/Arc.tsx @@ -29,12 +29,14 @@ export interface ArcProps { color: Color; cornerRadius: number; thickness: number; + animationDelay?: number; index?: number; isAnimated: boolean; activeIndex?: number; } export function Arc({ + animationDelay = 100, radius, width, height, @@ -52,7 +54,7 @@ export function Arc({ const gradient = getGradientFromColor(color); const springConfig = useSpringConfig({ - animationDelay: index * 100, + animationDelay: index * animationDelay, shouldAnimate: isAnimated, mountedSpringConfig: ARC_DATA_CHANGE_ANIMATION_CONFIG, unmountedSpringConfig: ARC_LOAD_ANIMATION_CONFIG, diff --git a/packages/polaris-viz/src/components/DonutChart/Chart.tsx b/packages/polaris-viz/src/components/DonutChart/Chart.tsx index f955488f5..9f5e1407f 100644 --- a/packages/polaris-viz/src/components/DonutChart/Chart.tsx +++ b/packages/polaris-viz/src/components/DonutChart/Chart.tsx @@ -17,6 +17,7 @@ import type { Direction, } from '@shopify/polaris-viz-core'; +import {getAnimationDelayForItems} from '../../utilities/getAnimationDelayForItems'; import {getContainerAlignmentForLegend} from '../../utilities'; import type {ComparisonMetricProps} from '../ComparisonMetric'; import {LegendContainer, useLegend} from '../../components/LegendContainer'; @@ -245,6 +246,9 @@ export function Chart({ > = (args: DonutChartProps) => { + return ; +}; + +export const AnimationSpeed = Template.bind({}); + +AnimationSpeed.args = { + data: [...Array(100).keys()].map((num) => { + return { + name: `${num}`, + data: [{key: 'april - march', value: 10}], + }; + }), +}; diff --git a/packages/polaris-viz/src/constants.ts b/packages/polaris-viz/src/constants.ts index 8692ab321..b40a26510 100644 --- a/packages/polaris-viz/src/constants.ts +++ b/packages/polaris-viz/src/constants.ts @@ -60,3 +60,4 @@ export const IS_TEST = process.env.NODE_ENV === 'test'; export const WARN_FOR_DEVELOPMENT = IS_DEVELOPMENT && !IS_TEST; export const HOVER_TARGET_ZONE = 48; export const CROSSHAIR_ID = 'Crosshair'; +export const DEFAULT_ANIMATION_DELAY = 100; diff --git a/packages/polaris-viz/src/utilities/getAnimationDelayForItems.ts b/packages/polaris-viz/src/utilities/getAnimationDelayForItems.ts new file mode 100644 index 000000000..4ff41818b --- /dev/null +++ b/packages/polaris-viz/src/utilities/getAnimationDelayForItems.ts @@ -0,0 +1,10 @@ +import {DEFAULT_ANIMATION_DELAY} from '../constants'; + +export function getAnimationDelayForItems(count: number) { + const scalingFactor = count * 0.1; + + return Math.min( + DEFAULT_ANIMATION_DELAY / scalingFactor, + DEFAULT_ANIMATION_DELAY, + ); +} diff --git a/packages/polaris-viz/src/utilities/tests/getAnimationDelayForItems.test.ts b/packages/polaris-viz/src/utilities/tests/getAnimationDelayForItems.test.ts new file mode 100644 index 000000000..b53068b6c --- /dev/null +++ b/packages/polaris-viz/src/utilities/tests/getAnimationDelayForItems.test.ts @@ -0,0 +1,14 @@ +import {getAnimationDelayForItems} from '../getAnimationDelayForItems'; + +describe('getAnimationDelayForItems()', () => { + it.each([ + {count: 1, expected: 100}, + {count: 10, expected: 100}, + {count: 50, expected: 20}, + {count: 100, expected: 10}, + {count: 250, expected: 4}, + {count: 1000, expected: 1}, + ])('generates a delay for $count items', ({count, expected}) => { + expect(getAnimationDelayForItems(count)).toBe(expected); + }); +});