From b027f31dde5664695c2434c8a463f5388b5e3615 Mon Sep 17 00:00:00 2001
From: Matt Vickers <matthew.vickers@shopify.com>
Date: Wed, 3 Apr 2024 16:10:28 -0500
Subject: [PATCH] Generate delay based on item count

---
 packages/polaris-viz/CHANGELOG.md             |  1 +
 .../polaris-viz/src/components/Arc/Arc.tsx    |  4 +++-
 .../src/components/DonutChart/Chart.tsx       |  4 ++++
 .../playground/AnimationSpeed.stories.tsx     | 24 +++++++++++++++++++
 packages/polaris-viz/src/constants.ts         |  1 +
 .../utilities/getAnimationDelayForItems.ts    | 10 ++++++++
 .../tests/getAnimationDelayForItems.test.ts   | 14 +++++++++++
 7 files changed, 57 insertions(+), 1 deletion(-)
 create mode 100644 packages/polaris-viz/src/components/DonutChart/stories/playground/AnimationSpeed.stories.tsx
 create mode 100644 packages/polaris-viz/src/utilities/getAnimationDelayForItems.ts
 create mode 100644 packages/polaris-viz/src/utilities/tests/getAnimationDelayForItems.test.ts

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 `<DonutChart />` 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({
                           >
                             <Arc
                               isAnimated={shouldAnimate}
+                              animationDelay={getAnimationDelayForItems(
+                                pieChartData.length,
+                              )}
                               index={index}
                               activeIndex={activeIndex}
                               width={diameter}
diff --git a/packages/polaris-viz/src/components/DonutChart/stories/playground/AnimationSpeed.stories.tsx b/packages/polaris-viz/src/components/DonutChart/stories/playground/AnimationSpeed.stories.tsx
new file mode 100644
index 000000000..412281ac9
--- /dev/null
+++ b/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}],
+    };
+  }),
+};
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);
+  });
+});