From 66e61ef51b46f48981cdba0b899d211ff58851da Mon Sep 17 00:00:00 2001
From: wxj <wxj@qx002575.com>
Date: Tue, 30 Jun 2026 11:21:10 +0800
Subject: [PATCH] =?UTF-8?q?Token=20=E4=BD=BF=E7=94=A8=E8=B6=8B=E5=8A=BF?=
 =?UTF-8?q?=E6=8A=98=E7=BA=BF=E5=9B=BE=E6=9B=BF=E6=8D=A2=E4=B8=BA=E6=9F=B1?=
 =?UTF-8?q?=E7=8A=B6=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/dashboard/BarChart.jsx   | 43 +++++++++++++++++++++
 web/src/components/dashboard/BentoTrend.jsx |  4 +-
 2 files changed, 45 insertions(+), 2 deletions(-)
 create mode 100644 web/src/components/dashboard/BarChart.jsx

diff --git a/web/src/components/dashboard/BarChart.jsx b/web/src/components/dashboard/BarChart.jsx
new file mode 100644
index 0000000..ca3c1cc
--- /dev/null
+++ b/web/src/components/dashboard/BarChart.jsx
@@ -0,0 +1,43 @@
+import React from 'react';
+
+const BarChart = ({ data = [], width = 400, height = 80, color = 'currentColor' }) => {
+  if (!data || data.length === 0) return null;
+
+  const max = Math.max(...data, 1);
+  const barCount = data.length;
+  const gap = 4;
+  const totalGap = (barCount - 1) * gap;
+  const barWidth = Math.max(8, (width - totalGap) / barCount);
+  const totalUsed = barCount * barWidth + totalGap;
+  const offsetX = (width - totalUsed) / 2;
+
+  return (
+    <svg
+      width='100%'
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      preserveAspectRatio='none'
+    >
+      {data.map((v, i) => {
+        const barH = Math.max(2, (v / max) * (height - 4));
+        const x = offsetX + i * (barWidth + gap);
+        const y = height - barH;
+        const rx = Math.min(3, barWidth / 3);
+        return (
+          <rect
+            key={i}
+            x={x}
+            y={y}
+            width={barWidth}
+            height={barH}
+            rx={rx}
+            fill={color}
+            opacity={0.85}
+          />
+        );
+      })}
+    </svg>
+  );
+};
+
+export default BarChart;
diff --git a/web/src/components/dashboard/BentoTrend.jsx b/web/src/components/dashboard/BentoTrend.jsx
index ae8f3ad..666198f 100644
--- a/web/src/components/dashboard/BentoTrend.jsx
+++ b/web/src/components/dashboard/BentoTrend.jsx
@@ -19,7 +19,7 @@ For commercial licensing, please contact support@quantumnous.com
 
 import React, { useMemo, useState, useRef, useEffect } from 'react';
 import { TrendingUp, RefreshCw, ChevronDown } from 'lucide-react';
-import Sparkline from './Sparkline';
+import BarChart from './BarChart';
 import { renderQuota } from '../../helpers';
 
 const formatMD = (d) => {
@@ -224,7 +224,7 @@ const BentoTrend = ({
       </div>
 
       <div className='flex min-h-[80px] flex-1 items-end text-blue-500'>
-        <Sparkline data={counts} width={400} height={80} />
+        <BarChart data={counts} width={400} height={80} />
       </div>
 
       <div className='flex items-center justify-between text-[11px]'>