F #5422: Reformat dashboard info component (#2053)

src/fireedge/src/client/components/Charts/CircleChart.js

@@ -93,7 +93,7 @@ const CircleChart = memo(
           sx={{ cursor: 'pointer' }}
           {...labelProps}
         >
-          <NumberEasing value={label} />
+          <NumberEasing value={+label} />
         </Typography>
       </Box>
     </Box>

src/fireedge/src/client/components/NumberEasing/index.js

@@ -16,40 +16,50 @@
 import { useState, useEffect } from 'react'
 import PropTypes from 'prop-types'
 
+const TOTAL_PROGRESS = 1
+
 /**
  * React component for fancy number transitions.
  *
  * @param {object} props - Props
- * @param {string} props.value - The value to display at the end of the animation
- * @param {number} [props.speed] - Duration of animation effect in ms
+ * @param {string|number} props.value - The value to display at the end of the animation
+ * @param {number} [props.start] - The value to display at the start of the animation
+ * @param {number} [props.duration] - Duration of animation effect in ms
  * @returns {string} Returns a count number
  */
-const NumberEasing = ({ value = '0', speed = 200 }) => {
-  const [count, setCount] = useState('0')
+const NumberEasing = ({ value = 0, start = 0, duration = 2000 }) => {
+  const [count, setCount] = useState(start)
 
   useEffect(() => {
-    let start = 0
-    const end = parseInt(String(value).substring(0, 3))
+    let startTimestamp = null
+    let animation = null
 
-    if (start === end) return
+    const step = (timestamp) => {
+      if (!startTimestamp) startTimestamp = timestamp
 
-    const timer = setInterval(() => {
-      start += 1
+      const leftTime = (timestamp - startTimestamp) / duration
 
-      setCount(String(start) + String(value).substring(3))
+      // Math.min() is used here to make sure
+      // the element stops animating when the duration is reached
+      const progress = Math.min(leftTime, TOTAL_PROGRESS)
 
-      if (start === end) clearInterval(timer)
-    }, speed)
+      setCount(Math.floor(progress * (value - start) + start))
 
-    return () => clearInterval(timer)
-  }, [value, speed])
+      if (progress < 1) animation = window.requestAnimationFrame(step)
+    }
+
+    animation = window.requestAnimationFrame(step)
+
+    return () => window.cancelAnimationFrame(animation)
+  }, [])
 
   return count
 }
 
 NumberEasing.propTypes = {
-  value: PropTypes.string,
-  speed: PropTypes.number,
+  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  start: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  duration: PropTypes.number,
 }
 
 NumberEasing.displayName = 'NumberEasing'

src/fireedge/src/client/components/Widgets/TotalProviders/index.js

@@ -55,7 +55,7 @@ const TotalProviders = () => {
       <div>
         {chartData?.map(({ title: titleLegend, value, color }) => (
           <TypographyWithPoint key={titleLegend} pointColor={color}>
-            <NumberEasing value={`${value}`} />
+            <NumberEasing value={+value} />
             <span className={classes.legendSecondary} title={titleLegend}>
               {titleLegend}
             </span>
@@ -90,7 +90,7 @@ const TotalProviders = () => {
           {isLoading ? (
             <CircularProgress size={20} />
           ) : (
-            <NumberEasing value={`${totalProviders}`} />
+            <NumberEasing value={totalProviders} />
           )}
           <span>{T.Providers}</span>
         </Typography>

src/fireedge/src/client/components/Widgets/TotalProvisionsByState/index.js

@@ -53,7 +53,7 @@ const TotalProvisionsByState = () => {
           {isLoading ? (
             <CircularProgress size={20} />
           ) : (
-            <NumberEasing value={`${totalProvisions}`} />
+            <NumberEasing value={totalProvisions} />
           )}
           <span>{T.Provisions}</span>
         </Typography>

src/fireedge/src/client/containers/Dashboard/Provision/index.js

@@ -89,8 +89,7 @@ function ProvisionDashboard() {
 }
 
 const ResourceWidget = memo(({ resource, ...props }) => {
-  const { data, isLoading } = useGetProvisionResourceQuery({ resource })
-  const total = `${data?.length ?? 0}`
+  const { data = [], isLoading } = useGetProvisionResourceQuery({ resource })
 
   return (
     <Grid item xs={12} sm={6} md={3} data-cy={`widget-total-${resource}`}>
@@ -99,7 +98,7 @@ const ResourceWidget = memo(({ resource, ...props }) => {
           isLoading ? (
             <CircularProgress size={20} />
           ) : (
-            <NumberEasing value={total} />
+            <NumberEasing value={data?.length} />
           )
         }
         {...props}

src/fireedge/src/client/containers/Dashboard/Sunstone/index.js

@@ -99,8 +99,7 @@ function SunstoneDashboard() {
 }
 
 const ResourceWidget = memo(({ query, ...props }) => {
-  const { data, isLoading } = query()
-  const total = `${data?.length ?? 0}`
+  const { data = [], isLoading } = query()
 
   return (
     <Grid item xs={12} sm={6} md={3}>
@@ -109,7 +108,7 @@ const ResourceWidget = memo(({ query, ...props }) => {
           isLoading ? (
             <CircularProgress size={20} />
           ) : (
-            <NumberEasing value={total} />
+            <NumberEasing value={data?.length} />
           )
         }
         {...props}