From 7b02d4d5cf1ad1e019337fcf2555c516a5509b96 Mon Sep 17 00:00:00 2001 From: xyfer17 Date: Wed, 23 Oct 2024 19:09:46 +0530 Subject: [PATCH 1/5] chore: downgrade axios version --- web-server/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web-server/package.json b/web-server/package.json index 40c0c1f9..8b8e6345 100644 --- a/web-server/package.json +++ b/web-server/package.json @@ -29,7 +29,7 @@ "@reduxjs/toolkit": "1.8.0", "@svgr/webpack": "^6.2.1", "@types/jest": "^29.5.4", - "axios": "0.28.1", + "axios": "0.26.1", "axios-hooks": "^3.0.1", "axios-retry": "^3.8.1", "chart.js": "^3.9.1", From a6fb8f151f1946377aef1b929132207b234f7204 Mon Sep 17 00:00:00 2001 From: xyfer17 Date: Wed, 23 Oct 2024 19:10:22 +0530 Subject: [PATCH 2/5] feat: add count-up hook --- web-server/src/hooks/useCountUp.ts | 31 ++++++++++++++++++++++++++++++ 1 file changed, 31 insertions(+) create mode 100644 web-server/src/hooks/useCountUp.ts diff --git a/web-server/src/hooks/useCountUp.ts b/web-server/src/hooks/useCountUp.ts new file mode 100644 index 00000000..7aca15ae --- /dev/null +++ b/web-server/src/hooks/useCountUp.ts @@ -0,0 +1,31 @@ +import { useState, useEffect } from 'react'; + +export const useCountUp = ( + targetValue: number, + duration: number = 1000, + decimalPlaces: number = 0 +): number => { + const [count, setCount] = useState(0); + + useEffect(() => { + let start = 0; + const increment = targetValue / (duration / 16); + + 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; +}; From a503252916d5cbc2b8c1e4b82a46c2a2a14b654d Mon Sep 17 00:00:00 2001 From: xyfer17 Date: Wed, 23 Oct 2024 19:11:18 +0530 Subject: [PATCH 3/5] feat: add the count-up animation in Dora Cards --- .../DoraMetrics/DoraCards/ChangeFailureRateCard.tsx | 9 ++++++++- .../src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx | 5 ++++- .../DoraMetrics/DoraCards/MeanTimeToRestoreCard.tsx | 8 +++++++- .../DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx | 8 +++++++- 4 files changed, 26 insertions(+), 4 deletions(-) diff --git a/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx index 928d7287..0155def4 100644 --- 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, + 2 + ); + const series = useMemo( () => [ { @@ -195,7 +202,7 @@ export const ChangeFailureRateCard = () => { lineHeight={1} > {changeFailureRateProps.count ? ( - `${Number(changeFailureRateProps.count.toFixed(2))}%` + `${Number(changeFailureRateCount.toFixed(2))}%` ) : ( { [activeModeProps.backgroundColor, mergedLeadTimeTrends] ); + const leadTimeDuration = useCountUp(activeModeProps.count || 0, 1500); + return ( { @@ -293,7 +296,7 @@ export const ChangeTimeCard = () => { color={activeModeProps.color} sx={{ fontSize: '3em' }} > - {getDurationString(activeModeProps.count) || 0} + {getDurationString(leadTimeDuration) || 0} {Boolean(activeModeProps.count || prevChangeTime) && ( { ] ); + const meanTimeToRestoreCount = useCountUp( + meanTimeToRestoreProps.count || 0, + 1500 + ); + const { addPage } = useOverlayPage(); return ( @@ -168,7 +174,7 @@ export const MeanTimeToRestoreCard = () => { lineHeight={1} > {meanTimeToRestoreProps.count ? ( - getDurationString(meanTimeToRestoreProps.count) + getDurationString(meanTimeToRestoreCount) ) : ( )} diff --git a/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx index b5fb861d..812ca258 100644 --- 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,11 @@ export const WeeklyDeliveryVolumeCard = () => { const dateRangeLabel = useCurrentDateRangeLabel(); const deploymentFrequencyProps = useAvgIntervalBasedDeploymentFrequency(); + const deploymentFrequencyCount = useCountUp( + deploymentFrequencyProps.count || 0, + 1500 + ); + const { addPage } = useOverlayPage(); const deploymentsConfigured = true; const isCodeProviderIntegrationEnabled = integrationSet.has( @@ -205,7 +211,7 @@ export const WeeklyDeliveryVolumeCard = () => { sx={{ fontSize: '3em' }} > {deploymentFrequencyProps.count ? ( - `${deploymentFrequencyProps.count}` + `${deploymentFrequencyCount}` ) : ( No Deployments )} From 04d83c7dd1eefc4a9bb03a6d2e92a668222e142b Mon Sep 17 00:00:00 2001 From: xyfer17 Date: Mon, 28 Oct 2024 19:19:24 +0530 Subject: [PATCH 4/5] refactor: update code as per review comment --- .../content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx | 4 ++-- .../src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx | 2 +- .../content/DoraMetrics/DoraCards/MeanTimeToRestoreCard.tsx | 5 +---- .../DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx | 3 +-- web-server/src/hooks/useCountUp.ts | 6 ++++-- 5 files changed, 9 insertions(+), 11 deletions(-) diff --git a/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx index 0155def4..ca7cf1a1 100644 --- a/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx +++ b/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx @@ -83,8 +83,8 @@ export const ChangeFailureRateCard = () => { const changeFailureRateCount = useCountUp( changeFailureRateProps.count || 0, - 1500, - 2 + 1500, // animation duration + 2 // decimal place ); const series = useMemo( diff --git a/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx index d9b0bc4c..ac9acaab 100644 --- a/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx +++ b/web-server/src/content/DoraMetrics/DoraCards/ChangeTimeCard.tsx @@ -101,7 +101,7 @@ export const ChangeTimeCard = () => { [activeModeProps.backgroundColor, mergedLeadTimeTrends] ); - const leadTimeDuration = useCountUp(activeModeProps.count || 0, 1500); + const leadTimeDuration = useCountUp(activeModeProps.count || 0); return ( { ] ); - const meanTimeToRestoreCount = useCountUp( - meanTimeToRestoreProps.count || 0, - 1500 - ); + const meanTimeToRestoreCount = useCountUp(meanTimeToRestoreProps.count || 0); const { addPage } = useOverlayPage(); diff --git a/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx index 812ca258..791d490a 100644 --- a/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx +++ b/web-server/src/content/DoraMetrics/DoraCards/WeeklyDeliveryVolumeCard.tsx @@ -57,8 +57,7 @@ export const WeeklyDeliveryVolumeCard = () => { const deploymentFrequencyProps = useAvgIntervalBasedDeploymentFrequency(); const deploymentFrequencyCount = useCountUp( - deploymentFrequencyProps.count || 0, - 1500 + deploymentFrequencyProps.count || 0 ); const { addPage } = useOverlayPage(); diff --git a/web-server/src/hooks/useCountUp.ts b/web-server/src/hooks/useCountUp.ts index 7aca15ae..89893fc5 100644 --- a/web-server/src/hooks/useCountUp.ts +++ b/web-server/src/hooks/useCountUp.ts @@ -1,15 +1,17 @@ import { useState, useEffect } from 'react'; +const FRAME_DURATION_MS = 16; // Average frame duration for 60fps + export const useCountUp = ( targetValue: number, - duration: number = 1000, + duration: number = 1500, decimalPlaces: number = 0 ): number => { const [count, setCount] = useState(0); useEffect(() => { let start = 0; - const increment = targetValue / (duration / 16); + const increment = targetValue / (duration / FRAME_DURATION_MS); const animateCount = () => { start += increment; From d98b04df96b1becbccbfb5e781747291cf4ab9db Mon Sep 17 00:00:00 2001 From: xyfer17 Date: Mon, 28 Oct 2024 19:27:41 +0530 Subject: [PATCH 5/5] fix: linting issue --- .../src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx b/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx index ca7cf1a1..96a3c407 100644 --- a/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx +++ b/web-server/src/content/DoraMetrics/DoraCards/ChangeFailureRateCard.tsx @@ -84,7 +84,7 @@ export const ChangeFailureRateCard = () => { const changeFailureRateCount = useCountUp( changeFailureRateProps.count || 0, 1500, // animation duration - 2 // decimal place + 2 // decimal place ); const series = useMemo(