From 9a4d77e8690447c02198e76c62c58bebdb8983cd Mon Sep 17 00:00:00 2001
From: michelia <michelia@seal.io>
Date: Wed, 3 Jun 2026 13:17:44 +0800
Subject: [PATCH] style(usage): tune shared bar/pie charts for the usage views

- bar-chart: barMinWidth so hour-granularity bars stay visible with gaps.
- pie-chart: single legend-beside-pie layout, value (percent%) tooltip,
  2-decimal rounding for the Summary donut.
---
 src/pages/_components/bar-chart/index.tsx |  6 +++-
 src/pages/_components/pie-chart/index.tsx | 43 ++++++++++-------------
 2 files changed, 24 insertions(+), 25 deletions(-)

diff --git a/src/pages/_components/bar-chart/index.tsx b/src/pages/_components/bar-chart/index.tsx
index 34bd8649..235e4f57 100644
--- a/src/pages/_components/bar-chart/index.tsx
+++ b/src/pages/_components/bar-chart/index.tsx
@@ -100,7 +100,11 @@ const BarChart: React.FC<BarChartProps> = (props) => {
         data: processedData,
         type: 'bar',
         barMaxWidth: 20,
-        barMinWidth: 8,
+        // Keep a small floor only — a large barMinWidth would force wide bars
+        // when there are many categories (e.g. hourly buckets), squeezing out
+        // the category gap so bars look fused. A low floor lets barCategoryGap
+        // win, so even dense hourly views keep visible gaps.
+        barMinWidth: 2,
         barGap: '30%',
         barCategoryGap: '50%',
         ...(stack === false || stack === undefined ? {} : { stack }),
diff --git a/src/pages/_components/pie-chart/index.tsx b/src/pages/_components/pie-chart/index.tsx
index 83acfcf5..6ec30c2f 100644
--- a/src/pages/_components/pie-chart/index.tsx
+++ b/src/pages/_components/pie-chart/index.tsx
@@ -19,6 +19,11 @@ interface PieChartProps {
   totalLabel?: string;
 }
 
+// Donut sits on the left; a vertical legend hugs it just to the right and
+// scrolls when there are many entries.
+const CENTER_X = '32%';
+const round2 = (n: number) => Math.round((Number(n) || 0) * 100) / 100;
+
 const PieChart: React.FC<PieChartProps> = ({
   data,
   height = 300,
@@ -51,7 +56,7 @@ const PieChart: React.FC<PieChartProps> = ({
                 <span class="tooltip-item-dot" style="border-radius:50%;background-color:${params.color};"></span>
                 <span class="tooltip-item-title">${params.name}</span>:
               </span>
-              <span class="tooltip-value">${formatLargeNumber(params.value)}</span>
+              <span class="tooltip-value">${formatLargeNumber(round2(params.value))} (${params.percent}%)</span>
             </span>
           </div>`;
         }
@@ -59,18 +64,18 @@ const PieChart: React.FC<PieChartProps> = ({
       legend: {
         type: 'scroll',
         orient: 'vertical',
-        right: 0,
-        top: 18,
-        bottom: 18,
+        left: '56%',
+        top: 'middle',
         itemWidth: 8,
         itemHeight: 8,
-        itemGap: 12,
+        itemGap: 10,
         textStyle: {
           color: token.colorTextTertiary,
           overflow: 'truncate',
-          width: 180
+          width: 120
         },
         pageTextStyle: { color: token.colorTextTertiary },
+        pageIconSize: 10,
         pageIconColor: token.colorTextTertiary,
         pageIconInactiveColor: token.colorTextDisabled,
         data: data.map((item) => item.name),
@@ -79,24 +84,14 @@ const PieChart: React.FC<PieChartProps> = ({
       series: [
         {
           type: 'pie',
-          radius: ['52%', '72%'],
-          center: ['34%', '50%'],
+          radius: ['54%', '78%'],
+          center: [CENTER_X, '50%'],
           avoidLabelOverlap: true,
-          label: {
-            show: false
-          },
-          emphasis: {
-            label: {
-              show: true,
-              formatter: (params: any) => `${params.percent}%`,
-              fontSize: 16,
-              fontWeight: 600,
-              color: token.colorText
-            }
-          },
-          labelLine: {
-            show: false
-          },
+          // No on-arc label — the percentage lives in the tooltip instead, so
+          // hovering shows value + percent in one place.
+          label: { show: false },
+          emphasis: { label: { show: false }, scale: false },
+          labelLine: { show: false },
           data
         }
       ]
@@ -137,7 +132,7 @@ const PieChart: React.FC<PieChartProps> = ({
       <div
         style={{
           position: 'absolute',
-          left: '34%',
+          left: CENTER_X,
           top: '50%',
           transform: 'translate(-50%, -50%)',
           display: 'flex',