smiuser/hpos-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add odometerjs

Browse Source
This commit is contained in:
Pritimay Sarkar
2023-12-18 23:46:55 +05:30
parent 1a883a6711
commit cb0eb3a163
4 changed files with 39 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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",

26
src/components/Card.css
View File

@@ -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);
}

9
src/components/Card.js
View File

@@ -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>
);