Feature number-count animation for DORA-cards

* chore: downgrade axios version * feat: add count-up hook * feat: add the count-up animation in Dora Cards * refactor: update code as per review comment * fix: linting issue
middlewarehq · Oct 30, 2024 · e625e8e · e625e8e
1 parent 2b7ec16
commit e625e8e
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 4 deletions.
diff --git a/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx
@@ -13,6 +13,7 @@ import {
   NoDataImg
 } from '@/content/DoraMetrics/DoraCards/sharedComponents';
 import { useAuth } from '@/hooks/useAuth';
+import { useCountUp } from '@/hooks/useCountUp';
 import { useDoraMetricsGraph } from '@/hooks/useDoraMetricsGraph';
 import {
   useStateDateConfig,
@@ -80,6 +81,12 @@ export const ChangeFailureRateCard = () => {
         .incident_count
   );
 
+  const changeFailureRateCount = useCountUp(
+    changeFailureRateProps.count || 0,
+    1500, // animation duration
+    2 // decimal place
+  );
+
   const series = useMemo(
     () => [
       {
@@ -195,7 +202,7 @@ export const ChangeFailureRateCard = () => {
                     lineHeight={1}
                   >
                     {changeFailureRateProps.count ? (
-                      `${Number(changeFailureRateProps.count.toFixed(2))}%`
+                      `${Number(changeFailureRateCount.toFixed(2))}%`
                     ) : (
                       <NoIncidentsLabel
                         deploymentsCount={

diff --git a/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx
@@ -19,6 +19,7 @@ import {
 } from '@/content/DoraMetrics/DoraCards/sharedComponents';
 import { usePropsForChangeTimeCard } from '@/content/DoraMetrics/DoraCards/sharedHooks';
 import { useAuth } from '@/hooks/useAuth';
+import { useCountUp } from '@/hooks/useCountUp';
 import { useSelector } from '@/store';
 import { ChangeTimeModes } from '@/types/resources';
 import { merge } from '@/utils/datatype';
@@ -100,6 +101,8 @@ export const ChangeTimeCard = () => {
     [activeModeProps.backgroundColor, mergedLeadTimeTrends]
   );
 
+  const leadTimeDuration = useCountUp(activeModeProps.count || 0);
+
   return (
     <CardRoot
       onClick={() => {
@@ -293,7 +296,7 @@ export const ChangeTimeCard = () => {
                     color={activeModeProps.color}
                     sx={{ fontSize: '3em' }}
                   >
-                    {getDurationString(activeModeProps.count) || 0}
+                    {getDurationString(leadTimeDuration) || 0}
                   </Line>
                   {Boolean(activeModeProps.count || prevChangeTime) && (
                     <DoraMetricsComparisonPill

diff --git a/web-server/src/content/DoraMetrics/DoraCards/MeanTimeToRestoreCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/MeanTimeToRestoreCard.tsx
@@ -12,6 +12,7 @@ import {
   CardRoot,
   NoDataImg
 } from '@/content/DoraMetrics/DoraCards/sharedComponents';
+import { useCountUp } from '@/hooks/useCountUp';
 import { useDoraMetricsGraph } from '@/hooks/useDoraMetricsGraph';
 import { getDurationString } from '@/utils/date';
 
@@ -76,6 +77,8 @@ export const MeanTimeToRestoreCard = () => {
     ]
   );
 
+  const meanTimeToRestoreCount = useCountUp(meanTimeToRestoreProps.count || 0);
+
   const { addPage } = useOverlayPage();
 
   return (
@@ -168,7 +171,7 @@ export const MeanTimeToRestoreCard = () => {
                     lineHeight={1}
                   >
                     {meanTimeToRestoreProps.count ? (
-                      getDurationString(meanTimeToRestoreProps.count)
+                      getDurationString(meanTimeToRestoreCount)
                     ) : (
                       <NoIncidentsLabel />
                     )}

diff --git a/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx
@@ -12,6 +12,7 @@ import {
   NoDataImg
 } from '@/content/DoraMetrics/DoraCards/sharedComponents';
 import { useAuth } from '@/hooks/useAuth';
+import { useCountUp } from '@/hooks/useCountUp';
 import {
   useCurrentDateRangeLabel,
   useStateDateConfig
@@ -55,6 +56,10 @@ export const WeeklyDeliveryVolumeCard = () => {
   const dateRangeLabel = useCurrentDateRangeLabel();
   const deploymentFrequencyProps = useAvgIntervalBasedDeploymentFrequency();
 
+  const deploymentFrequencyCount = useCountUp(
+    deploymentFrequencyProps.count || 0
+  );
+
   const { addPage } = useOverlayPage();
   const deploymentsConfigured = true;
   const isCodeProviderIntegrationEnabled = integrationSet.has(
@@ -205,7 +210,7 @@ export const WeeklyDeliveryVolumeCard = () => {
                     sx={{ fontSize: '3em' }}
                   >
                     {deploymentFrequencyProps.count ? (
-                      `${deploymentFrequencyProps.count}`
+                      `${deploymentFrequencyCount}`
                     ) : (
                       <Line>No Deployments</Line>
                     )}

diff --git a/web-server/src/hooks/useCountUp.ts b/web-server/src/hooks/useCountUp.ts
@@ -0,0 +1,33 @@
+import { useState, useEffect } from 'react';
+
+const FRAME_DURATION_MS = 16; // Average frame duration for 60fps
+
+export const useCountUp = (
+  targetValue: number,
+  duration: number = 1500,
+  decimalPlaces: number = 0
+): number => {
+  const [count, setCount] = useState<number>(0);
+
+  useEffect(() => {
+    let start = 0;
+    const increment = targetValue / (duration / FRAME_DURATION_MS);
+
+    const animateCount = () => {
+      start += increment;
+
+      if (start >= targetValue) {
+        setCount(parseFloat(targetValue.toFixed(decimalPlaces)));
+      } else {
+        setCount(parseFloat(start.toFixed(decimalPlaces)));
+        requestAnimationFrame(animateCount);
+      }
+    };
+
+    animateCount();
+
+    return () => {};
+  }, [targetValue, duration, decimalPlaces]);
+
+  return count;
+};