add count up to user stats

ClippyCDN · Feb 28, 2025 · 8d69eed · 8d69eed
1 parent 2c9704a
commit 8d69eed
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 35 deletions.
diff --git a/bun.lock b/bun.lock
@@ -15,15 +15,15 @@
         "@radix-ui/react-tabs": "^1.1.3",
         "@radix-ui/react-tooltip": "^1.1.8",
         "@t3-oss/env-core": "^0.12.0",
-        "@tanstack/react-query": "^5.66.9",
-        "axios": "^1.7.9",
+        "@tanstack/react-query": "^5.66.11",
+        "axios": "^1.8.1",
         "better-auth": "^1.1.21",
         "bluebun": "^0.0.34",
         "class-variance-authority": "^0.7.1",
         "clsx": "^2.1.1",
         "date-fns": "^4.1.0",
         "dotenv": "^16.4.7",
-        "drizzle-kit": "^0.30.4",
+        "drizzle-kit": "^0.30.5",
         "drizzle-orm": "^0.40.0",
         "fluent-ffmpeg": "^2.1.3",
         "isbot": "^5.1.23",
@@ -34,6 +34,7 @@
         "next-themes": "^0.4.4",
         "pg": "^8.13.3",
         "react": "^19.0.0",
+        "react-countup": "^6.5.3",
         "react-dom": "^19.0.0",
         "react-file-icon": "^1.6.0",
         "react-hook-form": "^7.54.2",
@@ -47,7 +48,7 @@
       },
       "devDependencies": {
         "@eslint/eslintrc": "^3.3.0",
-        "@tailwindcss/postcss": "^4.0.8",
+        "@tailwindcss/postcss": "^4.0.9",
         "@types/fluent-ffmpeg": "^2.1.27",
         "@types/node": "^22.13.5",
         "@types/pg": "^8.11.11",
@@ -61,7 +62,7 @@
         "ieee754": "^1.2.1",
         "postcss": "^8.5.3",
         "prettier-plugin-organize-imports": "^4.1.0",
-        "tailwindcss": "^4.0.8",
+        "tailwindcss": "^4.0.9",
         "tsx": "^4.19.3",
         "typescript": "^5.7.3",
       },
@@ -514,6 +515,8 @@
 
     "concat-map": ["[email protected]", "", {}, "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg=="],
 
+    "countup.js": ["[email protected]", "", {}, "sha512-f7xEhX0awl4NOElHulrl4XRfKoNH3rB+qfNSZZyjSZhaAoUk6elvhH+MNxMmlmuUJ2/QNTWPSA7U4mNtIAKljQ=="],
+
     "cross-spawn": ["[email protected]", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
 
     "csstype": ["[email protected]", "", {}, "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="],
@@ -962,6 +965,8 @@
 
     "react": ["[email protected]", "", {}, "sha512-V8AVnmPIICiWpGfm6GLzCR/W5FXLchHop40W4nXBmdlEceh16rCN8O8LNWm5bh5XUX91fh7KpA+W0TgMKmgTpQ=="],
 
+    "react-countup": ["[email protected]", "", { "dependencies": { "countup.js": "^2.8.0" }, "peerDependencies": { "react": ">= 16.3.0" } }, "sha512-udnqVQitxC7QWADSPDOxVWULkLvKUWrDapn5i53HE4DPRVgs+Y5rr4bo25qEl8jSh+0l2cToJgGMx+clxPM3+w=="],
+
     "react-dom": ["[email protected]", "", { "dependencies": { "scheduler": "^0.25.0" }, "peerDependencies": { "react": "^19.0.0" } }, "sha512-4GV5sHFG0e/0AD4X+ySy6UJd3jVl1iNsNHdpad0qhABJ11twS3TTBnseqsKurKcsNqCEFeGL3uLpVChpIO3QfQ=="],
 
     "react-fast-compare": ["[email protected]", "", {}, "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ=="],

diff --git a/package.json b/package.json
@@ -42,6 +42,7 @@
     "next-themes": "^0.4.4",
     "pg": "^8.13.3",
     "react": "^19.0.0",
+    "react-countup": "^6.5.3",
     "react-dom": "^19.0.0",
     "react-file-icon": "^1.6.0",
     "react-hook-form": "^7.54.2",

diff --git a/src/components/dashboard/user/statistic/statistic.tsx b/src/components/dashboard/user/statistic/statistic.tsx
@@ -1,24 +1,33 @@
+"use client";
+
 import SimpleTooltip from "@/components/simple-tooltip";
+import { formatNumberWithCommas } from "@/lib/utils/number-utils";
+import { formatBytes } from "@/lib/utils/utils";
 import { ReactElement } from "react";
+import CountUp from "react-countup";
 
 type StatisticProps = {
   name: string;
-  value: unknown;
+  value: number;
+  format: "number" | "bytes";
   icon: ReactElement;
   tooltip?: string | ReactElement;
 };
 
-export default function UserStatistic({
-  name,
-  value,
-  icon,
-  tooltip,
-}: StatisticProps) {
+export default function UserStatistic({ name, value, format, icon, tooltip }: StatisticProps) {
   const base = (
     <div className="p-2 bg-secondary/90 flex justify-between rounded-md border">
       <div className="flex flex-col">
         <span className="font-semibold">{name}</span>
-        <span className="text-muted-foreground">{`${value}`}</span>
+        <span className="text-muted-foreground">
+          <CountUp
+            end={value}
+            duration={1.5}
+            formattingFn={
+              format == "bytes" ? formatBytes : formatNumberWithCommas
+            }
+          />
+        </span>
       </div>
       {icon}
     </div>

diff --git a/src/components/dashboard/user/statistic/statistics.tsx b/src/components/dashboard/user/statistic/statistics.tsx
@@ -59,27 +59,6 @@ const statistics: Statistic[] = [
   },
 ];
 
-/**
- * Formats the value for a statistic
- *
- * @param value the value to format
- * @param format the format to use
- * @returns the formatted value
- */
-function format(value: unknown, format: Format) {
-  switch (format) {
-    case "number": {
-      return formatNumberWithCommas(value as number);
-    }
-    case "bytes": {
-      return formatBytes(value as number);
-    }
-    default: {
-      return value;
-    }
-  }
-}
-
 export default async function UserStatistics() {
   const statisticsResponse = await request.get<UserStatisticsResponse>(
     `${env.NEXT_PUBLIC_WEBSITE_URL}/api/user/statistics`,
@@ -103,7 +82,8 @@ export default async function UserStatistics() {
             key={index}
             name={statistic.name}
             icon={statistic.icon}
-            value={format(value, statistic.format)}
+            format={statistic.format}
+            value={value}
             tooltip={statistic.tooltip && statistic.tooltip(statisticsResponse)}
           />
         );