From 316fec8ac8b405d21ad68bbf2ef5a945c0e2d90a Mon Sep 17 00:00:00 2001
From: wxj <wxj@qx002575.com>
Date: Tue, 30 Jun 2026 12:29:43 +0800
Subject: [PATCH] =?UTF-8?q?=E6=94=B9=E5=9B=9E=E6=8A=98=E7=BA=BF=E5=9B=BE?=
 =?UTF-8?q?=EF=BC=9A=E6=95=B0=E6=8D=AE=E7=82=B9=E4=B8=8E=E6=97=A5=E6=9C=9F?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E7=B2=BE=E7=A1=AE=E5=AF=B9=E9=BD=90=EF=BC=8C?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=9C=86=E5=9C=88=E6=A0=87=E8=AE=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/src/components/dashboard/BentoTrend.jsx |  4 +-
 web/src/components/dashboard/Sparkline.jsx  | 65 +++++++++------------
 2 files changed, 31 insertions(+), 38 deletions(-)

diff --git a/web/src/components/dashboard/BentoTrend.jsx b/web/src/components/dashboard/BentoTrend.jsx
index c93d94e..0654d08 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 BarChart from './BarChart';
+import Sparkline from './Sparkline';
 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'>
-        <BarChart data={counts} height={80} barW={26} />
+        <Sparkline data={counts} height={80} />
       </div>
 
       <div className='flex items-center justify-between text-[11px]'>
diff --git a/web/src/components/dashboard/Sparkline.jsx b/web/src/components/dashboard/Sparkline.jsx
index 1b7929a..56eed71 100644
--- a/web/src/components/dashboard/Sparkline.jsx
+++ b/web/src/components/dashboard/Sparkline.jsx
@@ -1,68 +1,61 @@
-/*
-Copyright (C) 2025 QuantumNous
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU Affero General Public License as
-published by the Free Software Foundation, either version 3 of the
-License, or (at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU Affero General Public License for more details.
-
-You should have received a copy of the GNU Affero General Public License
-along with this program. If not, see <https://www.gnu.org/licenses/>.
-
-For commercial licensing, please contact support@quantumnous.com
-*/
-
 import React from 'react';
 
-const Sparkline = ({
-  data = [],
-  width = 200,
-  height = 40,
-  stroke = 'currentColor',
-  className = '',
-}) => {
+const Sparkline = ({ data = [], height = 80, stroke = 'currentColor' }) => {
   if (!data || data.length === 0) return null;
+
   const max = Math.max(...data, 1);
-  const step = data.length > 1 ? width / (data.length - 1) : 0;
+  const n = data.length;
+  const w = 400;
+
   const points = data
     .map((v, i) => {
-      const x = i * step;
-      const y = height - (v / max) * (height - 4) - 2;
+      const x = n > 1 ? (i / (n - 1)) * w : w / 2;
+      const y = height - (v / max) * (height - 8) - 4;
       return `${x.toFixed(1)},${y.toFixed(1)}`;
     })
     .join(' ');
 
-  const areaPoints = `0,${height} ${points} ${width},${height}`;
+  const areaPoints = `0,${height} ${points} ${w},${height}`;
 
   return (
     <svg
       width='100%'
       height={height}
-      viewBox={`0 0 ${width} ${height}`}
+      viewBox={`0 0 ${w} ${height}`}
       preserveAspectRatio='none'
-      className={className}
     >
       <defs>
-        <linearGradient id='sparkline-gradient' x1='0%' y1='0%' x2='0%' y2='100%'>
-          <stop offset='0%' stopColor={stroke} stopOpacity='0.18' />
+        <linearGradient id='sg' x1='0%' y1='0%' x2='0%' y2='100%'>
+          <stop offset='0%' stopColor={stroke} stopOpacity='0.15' />
           <stop offset='100%' stopColor={stroke} stopOpacity='0' />
         </linearGradient>
       </defs>
-      <polygon points={areaPoints} fill='url(#sparkline-gradient)' />
+      <polygon points={areaPoints} fill='url(#sg)' />
       <polyline
         points={points}
         fill='none'
         stroke={stroke}
-        strokeWidth='2'
+        strokeWidth='2.5'
         strokeLinecap='round'
         strokeLinejoin='round'
         vectorEffect='non-scaling-stroke'
       />
+      {data.map((v, i) => {
+        const x = n > 1 ? (i / (n - 1)) * w : w / 2;
+        const y = height - (v / max) * (height - 8) - 4;
+        return (
+          <circle
+            key={i}
+            cx={x.toFixed(1)}
+            cy={y.toFixed(1)}
+            r='3'
+            fill='white'
+            stroke={stroke}
+            strokeWidth='2'
+            vectorEffect='non-scaling-stroke'
+          />
+        );
+      })}
     </svg>
   );
 };