From abdd5e08a659c8ea014946cd5bcd89cb984deb85 Mon Sep 17 00:00:00 2001
From: jialin <jialinkuang@126.com>
Date: Fri, 27 Jun 2025 16:27:30 +0800
Subject: [PATCH] fix(style): top users bar name too long

---
 src/components/echarts/h-bar.tsx                    | 13 ++++++++++++-
 src/global.less                                     |  3 +++
 .../dashboard/components/usage-inner/index.tsx      |  3 ++-
 3 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/src/components/echarts/h-bar.tsx b/src/components/echarts/h-bar.tsx
index 9da1d089..3719d1c9 100644
--- a/src/components/echarts/h-bar.tsx
+++ b/src/components/echarts/h-bar.tsx
@@ -41,7 +41,18 @@ const BarChart: React.FC<ChartProps> = (props) => {
           formatter: labelFormatter
         }
       },
-      yAxis,
+      yAxis: {
+        ...yAxis,
+        axisLabel: {
+          ...yAxis.axisLabel,
+          formatter(value: string) {
+            if (value.length > 10) {
+              return `${value.slice(0, 10)}...`;
+            }
+            return value;
+          }
+        }
+      },
       legend: {
         ...legend,
         data: []
diff --git a/src/global.less b/src/global.less
index fe46a0fc..b39fc1bc 100644
--- a/src/global.less
+++ b/src/global.less
@@ -765,6 +765,9 @@ body {
   .tooltip-x-name {
     font-size: var(--font-size-small);
     color: var(--ant-color-text-tertiary);
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
   }
 
   .tooltip-item {
diff --git a/src/pages/dashboard/components/usage-inner/index.tsx b/src/pages/dashboard/components/usage-inner/index.tsx
index 29606c3a..4bd6be92 100644
--- a/src/pages/dashboard/components/usage-inner/index.tsx
+++ b/src/pages/dashboard/components/usage-inner/index.tsx
@@ -33,7 +33,8 @@ const UsageInner: FC<{ maxWidth: number }> = ({ maxWidth }) => {
     });
 
   const topUserData = useMemo(() => {
-    const topUsers = model_usage?.top_users || [];
+    // top 10 users
+    const topUsers = model_usage?.top_users?.slice(0, 10) || [];
 
     const topUserPrompt: any = {
       name: 'Prompt tokens',