add odometerjs

package-lock.json

@@ -23,6 +23,7 @@
         "react-dropdown": "^1.11.0",
         "react-flip-numbers": "^3.0.8",
         "react-icons": "^4.10.1",
+        "react-odometerjs": "^3.1.0",
         "react-router-dom": "^6.14.2",
         "react-scripts": "5.0.1",
         "react-select": "^5.7.4",
@@ -14094,6 +14095,11 @@
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
     },
+    "node_modules/odometer": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/odometer/-/odometer-0.4.8.tgz",
+      "integrity": "sha512-bfKuAhWE/qMCiX9bwX90c5bTpt7MDVeq1e6YsOHQrYokNhv9jhS5JbR9kg6i+FeWmDgalf3VUtwNx1aVaZ8cgg=="
+    },
     "node_modules/on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -16116,6 +16122,18 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-odometerjs": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-odometerjs/-/react-odometerjs-3.1.0.tgz",
+      "integrity": "sha512-jHG1wyNgg3J7OYaJugixkQTPpUHK5ddfa13XSQlxs5YR5qIWIPwVtjlxSp8xD3UuXjUXjjGAyCyYZ9k3ar8aCg==",
+      "dependencies": {
+        "odometer": "^0.4.8"
+      },
+      "peerDependencies": {
+        "react": ">= 16.8.0",
+        "react-dom": ">= 16.8.0"
+      }
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
@@ -29388,6 +29406,11 @@
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
       "integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg=="
     },
+    "odometer": {
+      "version": "0.4.8",
+      "resolved": "https://registry.npmjs.org/odometer/-/odometer-0.4.8.tgz",
+      "integrity": "sha512-bfKuAhWE/qMCiX9bwX90c5bTpt7MDVeq1e6YsOHQrYokNhv9jhS5JbR9kg6i+FeWmDgalf3VUtwNx1aVaZ8cgg=="
+    },
     "on-finished": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/on-finished/-/on-finished-2.4.1.tgz",
@@ -30668,6 +30691,14 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "react-odometerjs": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/react-odometerjs/-/react-odometerjs-3.1.0.tgz",
+      "integrity": "sha512-jHG1wyNgg3J7OYaJugixkQTPpUHK5ddfa13XSQlxs5YR5qIWIPwVtjlxSp8xD3UuXjUXjjGAyCyYZ9k3ar8aCg==",
+      "requires": {
+        "odometer": "^0.4.8"
+      }
+    },
     "react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",

package.json

@@ -18,6 +18,7 @@
     "react-dropdown": "^1.11.0",
     "react-flip-numbers": "^3.0.8",
     "react-icons": "^4.10.1",
+    "react-odometerjs": "^3.1.0",
     "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
     "react-select": "^5.7.4",

src/components/Card.css

@@ -1,26 +0,0 @@
-.odometer {
-    display: inline-block;
-    overflow: hidden;
-    font-size: 1em; /* Set the font size as needed */
-  }
-  
-  .odometer > div {
-    transition: transform 0.3s ease-out;
-  }
-  
-  .odometer-enter {
-    transform: translateY(1em);
-  }
-  
-  .odometer-enter-active {
-    transform: translateY(0);
-  }
-  
-  .odometer-exit {
-    transform: translateY(0);
-  }
-  
-  .odometer-exit-active {
-    transform: translateY(-1em);
-  }
-  

src/components/Card.js

@@ -1,5 +1,8 @@
 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);
@@ -39,9 +42,11 @@ const Card = ({ title, counter, color, backgroundColor }) => {
     <div className='numeric-card' style={{ color, backgroundColor }}>
       <div className='card-title'>{title}</div>
       <div className='card-data'>
-        <div className='odometer'>
+        {/* <div className='odometer'>
           <div>{animatedCounter}</div>
-        </div>
+        </div> */}
+
+        <Odometer value={counter} style={{ cursor: 'pointer' }} />
       </div>
     </div>
   );