fix(usage): compact trend token axis labels (#7016)

Co-authored-by: thisTom <19346741+thisTom@users.noreply.github.com>

src/components/usage/UsageTrendChart.tsx

@@ -135,6 +135,26 @@ export function formatUsageTrendTickLabel(
   return point?.label ?? xKey;
 }
 
+export function createUsageTrendTokenTickFormatter(
+  locale: string,
+): Intl.NumberFormat {
+  return new Intl.NumberFormat(locale, {
+    notation: "compact",
+    compactDisplay: "short",
+    maximumFractionDigits: 1,
+  });
+}
+
+export function formatUsageTrendTokenTickLabel(
+  value: unknown,
+  formatter: Intl.NumberFormat,
+): string {
+  const num = parseFiniteNumber(value);
+  if (num == null) return "--";
+
+  return formatter.format(num);
+}
+
 export function UsageTrendChart({
   range,
   rangeLabel,
@@ -157,6 +177,10 @@ export function UsageTrendChart({
   const isHourly = durationSeconds <= 24 * 60 * 60;
   const language = i18n.resolvedLanguage || i18n.language || "en";
   const dateLocale = getLocaleFromLanguage(language);
+  const tokenTickFormatter = useMemo(
+    () => createUsageTrendTokenTickFormatter(dateLocale),
+    [dateLocale],
+  );
 
   const chartData = useMemo(
     () =>
@@ -266,16 +290,22 @@ export function UsageTrendChart({
             />
             <YAxis
               yAxisId="tokens"
+              width={72}
               axisLine={false}
               tickLine={false}
+              tickMargin={8}
               tick={{ fill: "hsl(var(--muted-foreground))", fontSize: 12 }}
-              tickFormatter={(value) => `${(value / 1000).toFixed(0)}k`}
+              tickFormatter={(value) =>
+                formatUsageTrendTokenTickLabel(value, tokenTickFormatter)
+              }
             />
             <YAxis
               yAxisId="cost"
               orientation="right"
+              width={56}
               axisLine={false}
               tickLine={false}
+              tickMargin={8}
               tick={{ fill: "hsl(var(--muted-foreground))", fontSize: 12 }}
               tickFormatter={(value) => `$${value}`}
             />

tests/components/UsageTrendChart.test.ts

@@ -1,6 +1,8 @@
 import { describe, expect, it } from "vitest";
 import {
   buildUsageTrendChartData,
+  createUsageTrendTokenTickFormatter,
+  formatUsageTrendTokenTickLabel,
   formatUsageTrendTickLabel,
 } from "@/components/usage/UsageTrendChart";
 
@@ -115,3 +117,39 @@ describe("formatUsageTrendTickLabel", () => {
     );
   });
 });
+
+describe("formatUsageTrendTokenTickLabel", () => {
+  it("uses localized compact units for large token axis ticks", () => {
+    const zhFormatter = createUsageTrendTokenTickFormatter("zh-CN");
+    const zhTwFormatter = createUsageTrendTokenTickFormatter("zh-TW");
+    const enFormatter = createUsageTrendTokenTickFormatter("en-US");
+
+    expect(formatUsageTrendTokenTickLabel(600_000_000, zhFormatter)).toBe(
+      "6亿",
+    );
+    expect(formatUsageTrendTokenTickLabel(1_950_000_000, zhFormatter)).toBe(
+      "19.5亿",
+    );
+    expect(formatUsageTrendTokenTickLabel(65_000_000, zhTwFormatter)).toBe(
+      "6500萬",
+    );
+    expect(formatUsageTrendTokenTickLabel(600_000_000, enFormatter)).toBe(
+      "600M",
+    );
+  });
+
+  it("keeps zero and small-thousand token ticks readable", () => {
+    expect(
+      formatUsageTrendTokenTickLabel(
+        0,
+        createUsageTrendTokenTickFormatter("zh-CN"),
+      ),
+    ).toBe("0");
+    expect(
+      formatUsageTrendTokenTickLabel(
+        1500,
+        createUsageTrendTokenTickFormatter("en-US"),
+      ),
+    ).toBe("1.5K");
+  });
+});