hpos-web/src/components/Card.js

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;