fix(style): top users bar name too long

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: []

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 {

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',