56 lines
1.7 KiB
JavaScript
56 lines
1.7 KiB
JavaScript
import React, { useEffect, useState } from 'react';
|
|
import Odometer from 'react-odometerjs';
|
|
|
|
import './Card.css'; // Import your CSS file
|
|
import 'odometer/themes/odometer-theme-default.css';
|
|
|
|
const Card = ({ title, counter, color, backgroundColor }) => {
|
|
const [animatedCounter, setAnimatedCounter] = useState(0);
|
|
|
|
useEffect(() => {
|
|
const updateCounter = () => {
|
|
// Set the maximum number of iterations for the animation
|
|
const maxIterations = 50;
|
|
|
|
// Calculate the step value for each iteration
|
|
const step = Math.ceil(counter / maxIterations);
|
|
|
|
// Use setInterval to increment the counter gradually
|
|
const intervalId = setInterval(() => {
|
|
setAnimatedCounter((prevCounter) => {
|
|
const newCounter = prevCounter + step;
|
|
|
|
// Stop the animation when the counter reaches its final value
|
|
if (newCounter >= counter) {
|
|
clearInterval(intervalId);
|
|
return counter;
|
|
}
|
|
|
|
return newCounter;
|
|
});
|
|
}, 30); // Adjust the duration of each iteration as needed
|
|
|
|
// Clear the interval when the component is unmounted
|
|
return () => clearInterval(intervalId);
|
|
};
|
|
|
|
// Call the updateCounter function when the component mounts or the counter value changes
|
|
updateCounter();
|
|
}, [counter]);
|
|
|
|
return (
|
|
<div className='numeric-card' style={{ color, backgroundColor }}>
|
|
<div className='card-title'>{title}</div>
|
|
<div className='card-data'>
|
|
{/* <div className='odometer'>
|
|
<div>{animatedCounter}</div>
|
|
</div> */}
|
|
|
|
<Odometer value={counter} style={{ cursor: 'pointer' }} />
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Card;
|