Generate delay based on item count

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 `<DonutChart />` animation delay based on slice count, not a set `index * 100ms`.
 
 ## [12.4.1] - 2024-04-03
 

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,

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({
                           >
                             <Arc
                               isAnimated={shouldAnimate}
+                              animationDelay={getAnimationDelayForItems(
+                                pieChartData.length,
+                              )}
                               index={index}
                               activeIndex={activeIndex}
                               width={diameter}

packages/polaris-viz/src/components/DonutChart/stories/playground/AnimationSpeed.stories.tsx

@@ -0,0 +1,24 @@
+import type {Story} from '@storybook/react';
+
+import {DonutChart, DonutChartProps} from '../../../../components';
+import {META} from '../meta';
+
+export default {
+  ...META,
+  title: `${META.title}/Playground`,
+};
+
+const Template: Story<DonutChartProps> = (args: DonutChartProps) => {
+  return <DonutChart {...args} />;
+};
+
+export const AnimationSpeed = Template.bind({});
+
+AnimationSpeed.args = {
+  data: [...Array(100).keys()].map((num) => {
+    return {
+      name: `${num}`,
+      data: [{key: 'april - march', value: 10}],
+    };
+  }),
+};

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;

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

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