[优化] 格式化

openflare_server/web/components/data/rank-chart.tsx

@@ -31,101 +31,102 @@ function getChartValue(params: unknown) {
 }
 
 export function RankChart({
-                            items,
-                            color,
-                            valueFormatter = defaultFormatter,
-                            emptyMessage = '暂无分布数据',
-                          }: RankChartProps) {
+  items,
+  color,
+  valueFormatter = defaultFormatter,
+  emptyMessage = '暂无分布数据',
+}: RankChartProps) {
   const option = useMemo<EChartsOption>(
-      () => ({
-        animationDuration: 400,
-        grid: {
-          left: 16,
-          right: 24,
-          top: 12,
-          bottom: 12,
-          containLabel: true,
+    () => ({
+      animationDuration: 400,
+      grid: {
+        left: 16,
+        right: 24,
+        top: 12,
+        bottom: 12,
+        containLabel: true,
+      },
+      tooltip: {
+        trigger: 'axis',
+        axisPointer: {
+          type: 'shadow',
         },
-        tooltip: {
-          trigger: 'axis',
-          axisPointer: {
-            type: 'shadow',
+        backgroundColor: 'rgba(15, 23, 42, 0.92)',
+        borderWidth: 0,
+        textStyle: {
+          color: '#e2e8f0',
+          fontSize: 12,
+        },
+        formatter: (params: unknown) => {
+          const item = Array.isArray(params) ? params[0] : params;
+          const data = item as { name?: string; value?: number };
+          return `${data.name ?? ''}<br/>${valueFormatter(data.value ?? 0)}`;
+        },
+      },
+      xAxis: {
+        type: 'value',
+        axisLabel: {
+          color: '#94a3b8',
+        },
+        splitLine: {
+          lineStyle: {
+            color: 'rgba(148, 163, 184, 0.16)',
+            type: 'dashed',
           },
-          backgroundColor: 'rgba(15, 23, 42, 0.92)',
-          borderWidth: 0,
-          textStyle: {
+        },
+      },
+      yAxis: {
+        type: 'category',
+        data: items.map((item) => item.label),
+        axisTick: { show: false },
+        axisLine: { show: false },
+        axisLabel: {
+          color: '#cbd5e1',
+          width: 120,
+          overflow: 'truncate',
+        },
+      },
+      series: [
+        {
+          type: 'bar',
+          data: items.map((item) => item.value),
+          barWidth: 12,
+          showBackground: true,
+          backgroundStyle: {
+            color: 'rgba(148, 163, 184, 0.12)',
+            borderRadius: 999,
+          },
+          itemStyle: {
+            color,
+            borderRadius: 999,
+          },
+          label: {
+            show: true,
+            position: 'right',
             color: '#e2e8f0',
-            fontSize: 12,
-          },
-          formatter: (params: unknown) => {
-            const item = Array.isArray(params) ? params[0] : params;
-            const data = item as { name?: string; value?: number };
-            return `${data.name ?? ''}<br/>${valueFormatter(data.value ?? 0)}`;
+            formatter: (params: unknown) =>
+              valueFormatter(getChartValue(params)),
           },
         },
-        xAxis: {
-          type: 'value',
-          axisLabel: {
-            color: '#94a3b8',
-          },
-          splitLine: {
-            lineStyle: {
-              color: 'rgba(148, 163, 184, 0.16)',
-              type: 'dashed',
-            },
-          },
-        },
-        yAxis: {
-          type: 'category',
-          data: items.map((item) => item.label),
-          axisTick: { show: false },
-          axisLine: { show: false },
-          axisLabel: {
-            color: '#cbd5e1',
-            width: 120,
-            overflow: 'truncate',
-          },
-        },
-        series: [
-          {
-            type: 'bar',
-            data: items.map((item) => item.value),
-            barWidth: 12,
-            showBackground: true,
-            backgroundStyle: {
-              color: 'rgba(148, 163, 184, 0.12)',
-              borderRadius: 999,
-            },
-            itemStyle: {
-              color,
-              borderRadius: 999,
-            },
-            label: {
-              show: true,
-              position: 'right',
-              color: '#e2e8f0',
-              formatter: (params: unknown) => valueFormatter(getChartValue(params)),
-            },
-          },
-        ],
-      }),
-      [color, items, valueFormatter],
+      ],
+    }),
+    [color, items, valueFormatter],
   );
 
   if (items.length === 0) {
     return (
-        <div className="flex h-[220px] items-center justify-center rounded-3xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] text-sm text-[var(--foreground-secondary)]">
-          {emptyMessage}
-        </div>
+      <div className="flex h-[220px] items-center justify-center rounded-3xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] text-sm text-[var(--foreground-secondary)]">
+        {emptyMessage}
+      </div>
     );
   }
 
   return (
-      <ReactECharts
-          option={option}
-          notMerge
-          lazyUpdate
-          style={{ height: Math.max(220, items.length * 44), width: '100%' }}
-      />
+    <ReactECharts
+      option={option}
+      notMerge
+      lazyUpdate
+      style={{ height: Math.max(220, items.length * 44), width: '100%' }}
+    />
   );
 }

openflare_server/web/components/data/trend-chart.tsx

@@ -32,15 +32,15 @@ type TooltipParam = {
 const defaultFormatter = (value: number) => formatCompactNumber(value);
 
 export function TrendChart({
-                             labels,
-                             series,
-                             height = 220,
-                             yAxisValueFormatter,
-                           }: TrendChartProps) {
+  labels,
+  series,
+  height = 220,
+  yAxisValueFormatter,
+}: TrendChartProps) {
   const option = useMemo<EChartsOption>(() => {
     const axisFormatter = yAxisValueFormatter ?? defaultFormatter;
     const maxValue = calculateNiceAxisMax(
-        series.flatMap((item) => item.values),
+      series.flatMap((item) => item.values),
     );
 
     return {
@@ -70,17 +70,17 @@ export function TrendChart({
           const header = items[0]?.axisValueLabel ?? '';
           const rows = items.map((item) => {
             const matchedSeries = series.find(
-                (seriesItem) => seriesItem.label === item.seriesName,
+              (seriesItem) => seriesItem.label === item.seriesName,
             );
             const formatter =
-                matchedSeries?.valueFormatter ??
-                yAxisValueFormatter ??
-                defaultFormatter;
+              matchedSeries?.valueFormatter ??
+              yAxisValueFormatter ??
+              defaultFormatter;
             const rawValue = Array.isArray(item.value)
-                ? item.value[1]
-                : item.value;
+              ? item.value[1]
+              : item.value;
             const numericValue =
-                typeof rawValue === 'number' ? rawValue : Number(rawValue ?? 0);
+              typeof rawValue === 'number' ? rawValue : Number(rawValue ?? 0);
 
             return [
               '<span style="display:inline-flex;align-items:center;gap:8px;">',
@@ -145,11 +145,11 @@ export function TrendChart({
           color: item.color,
         },
         areaStyle:
-            item.variant === 'area'
-                ? {
-                  color: item.fillColor ?? `${item.color}33`,
-                }
-                : undefined,
+          item.variant === 'area'
+            ? {
+                color: item.fillColor ?? `${item.color}33`,
+              }
+            : undefined,
         emphasis: {
           focus: 'series',
           scale: true,
@@ -161,48 +161,48 @@ export function TrendChart({
 
   if (labels.length === 0 || series.length === 0) {
     return (
-        <div className="flex h-[220px] items-center justify-center rounded-3xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] text-sm text-[var(--foreground-secondary)]">
-          暂无趋势数据
-        </div>
+      <div className="flex h-[220px] items-center justify-center rounded-3xl border border-dashed border-[var(--border-default)] bg-[var(--surface-muted)] text-sm text-[var(--foreground-secondary)]">
+        暂无趋势数据
+      </div>
     );
   }
 
   return (
-      <div className="space-y-4">
-        <div className="flex flex-wrap gap-3">
-          {series.map((item) => {
-            const latestValue = item.values[item.values.length - 1] ?? 0;
-            const formatter = item.valueFormatter ?? defaultFormatter;
-            return (
-                <div
-                    key={item.label}
-                    className="min-w-[140px] rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3"
-                >
-                  <div className="flex items-center gap-2">
+    <div className="space-y-4">
+      <div className="flex flex-wrap gap-3">
+        {series.map((item) => {
+          const latestValue = item.values[item.values.length - 1] ?? 0;
+          const formatter = item.valueFormatter ?? defaultFormatter;
+          return (
+            <div
+              key={item.label}
+              className="min-w-[140px] rounded-2xl border border-[var(--border-default)] bg-[var(--surface-elevated)] px-4 py-3"
+            >
+              <div className="flex items-center gap-2">
                 <span
-                    className="h-2.5 w-2.5 rounded-full"
-                    style={{ backgroundColor: item.color }}
+                  className="h-2.5 w-2.5 rounded-full"
+                  style={{ backgroundColor: item.color }}
                 />
-                    <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
-                      {item.label}
-                    </p>
-                  </div>
-                  <p className="mt-2 text-lg font-semibold text-[var(--foreground-primary)]">
-                    {formatter(latestValue)}
-                  </p>
-                </div>
-            );
-          })}
-        </div>
-
-        <div className="overflow-hidden rounded-[28px] border border-[var(--border-default)] bg-[linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0))] px-4 py-4">
-          <ReactECharts
-              option={option}
-              notMerge
-              lazyUpdate
-              style={{ height, width: '100%' }}
-          />
-        </div>
+                <p className="text-xs tracking-[0.18em] text-[var(--foreground-muted)] uppercase">
+                  {item.label}
+                </p>
+              </div>
+              <p className="mt-2 text-lg font-semibold text-[var(--foreground-primary)]">
+                {formatter(latestValue)}
+              </p>
+            </div>
+          );
+        })}
       </div>
+
+      <div className="overflow-hidden rounded-[28px] border border-[var(--border-default)] bg-[linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0))] px-4 py-4">
+        <ReactECharts
+          option={option}
+          notMerge
+          lazyUpdate
+          style={{ height, width: '100%' }}
+        />
+      </div>
+    </div>
   );
 }