From 59e19003a84b0257f6df4930aee2bd39b9fdce4e Mon Sep 17 00:00:00 2001 From: Sergio Betanzos Date: Wed, 18 May 2022 14:49:36 +0200 Subject: [PATCH] F #5422: Reformat dashboard info component (#2053) --- .../client/components/Charts/CircleChart.js | 2 +- .../client/components/NumberEasing/index.js | 42 ++++++++++++------- .../Widgets/TotalProviders/index.js | 4 +- .../Widgets/TotalProvisionsByState/index.js | 2 +- .../containers/Dashboard/Provision/index.js | 5 +-- .../containers/Dashboard/Sunstone/index.js | 5 +-- 6 files changed, 34 insertions(+), 26 deletions(-) diff --git a/src/fireedge/src/client/components/Charts/CircleChart.js b/src/fireedge/src/client/components/Charts/CircleChart.js index a302245f4a..79c93c2578 100644 --- a/src/fireedge/src/client/components/Charts/CircleChart.js +++ b/src/fireedge/src/client/components/Charts/CircleChart.js @@ -93,7 +93,7 @@ const CircleChart = memo( sx={{ cursor: 'pointer' }} {...labelProps} > - + diff --git a/src/fireedge/src/client/components/NumberEasing/index.js b/src/fireedge/src/client/components/NumberEasing/index.js index 972c2a2aae..d53f244a0f 100644 --- a/src/fireedge/src/client/components/NumberEasing/index.js +++ b/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' diff --git a/src/fireedge/src/client/components/Widgets/TotalProviders/index.js b/src/fireedge/src/client/components/Widgets/TotalProviders/index.js index d3cdb69a5e..d6c52e946b 100644 --- a/src/fireedge/src/client/components/Widgets/TotalProviders/index.js +++ b/src/fireedge/src/client/components/Widgets/TotalProviders/index.js @@ -55,7 +55,7 @@ const TotalProviders = () => {
{chartData?.map(({ title: titleLegend, value, color }) => ( - + {titleLegend} @@ -90,7 +90,7 @@ const TotalProviders = () => { {isLoading ? ( ) : ( - + )} {T.Providers} diff --git a/src/fireedge/src/client/components/Widgets/TotalProvisionsByState/index.js b/src/fireedge/src/client/components/Widgets/TotalProvisionsByState/index.js index ed6b272b25..2ebc891ccc 100644 --- a/src/fireedge/src/client/components/Widgets/TotalProvisionsByState/index.js +++ b/src/fireedge/src/client/components/Widgets/TotalProvisionsByState/index.js @@ -53,7 +53,7 @@ const TotalProvisionsByState = () => { {isLoading ? ( ) : ( - + )} {T.Provisions} diff --git a/src/fireedge/src/client/containers/Dashboard/Provision/index.js b/src/fireedge/src/client/containers/Dashboard/Provision/index.js index 59cbd441d3..4e5883a9b3 100644 --- a/src/fireedge/src/client/containers/Dashboard/Provision/index.js +++ b/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 ( @@ -99,7 +98,7 @@ const ResourceWidget = memo(({ resource, ...props }) => { isLoading ? ( ) : ( - + ) } {...props} diff --git a/src/fireedge/src/client/containers/Dashboard/Sunstone/index.js b/src/fireedge/src/client/containers/Dashboard/Sunstone/index.js index 083acd4cd7..3bfb57c5af 100644 --- a/src/fireedge/src/client/containers/Dashboard/Sunstone/index.js +++ b/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 ( @@ -109,7 +108,7 @@ const ResourceWidget = memo(({ query, ...props }) => { isLoading ? ( ) : ( - + ) } {...props}