Align usage stats to sliding windows

src/components/usage/UsageSummaryCards.tsx

@@ -12,13 +12,7 @@ interface UsageSummaryCardsProps {
 export function UsageSummaryCards({ days }: UsageSummaryCardsProps) {
   const { t } = useTranslation();
 
-  const { startDate, endDate } = useMemo(() => {
-    const end = Math.floor(Date.now() / 1000);
-    const start = end - days * 24 * 60 * 60;
-    return { startDate: start, endDate: end };
-  }, [days]);
-
-  const { data: summary, isLoading } = useUsageSummary(startDate, endDate);
+  const { data: summary, isLoading } = useUsageSummary(days);
 
   const stats = useMemo(() => {
     const totalRequests = summary?.totalRequests ?? 0;

src/components/usage/UsageTrendChart.tsx

@@ -41,7 +41,12 @@ export function UsageTrendChart({ days }: UsageTrendChartProps) {
       return {
         rawDate: stat.date,
         label: isToday
-          ? pointDate.toLocaleTimeString(dateLocale, { hour: "2-digit" })
+          ? pointDate.toLocaleString(dateLocale, {
+              month: "2-digit",
+              day: "2-digit",
+              hour: "2-digit",
+              minute: "2-digit",
+            })
           : pointDate.toLocaleDateString(dateLocale, {
               month: "2-digit",
               day: "2-digit",
@@ -55,26 +60,7 @@ export function UsageTrendChart({ days }: UsageTrendChartProps) {
       };
     }) || [];
 
-  const hourlyData = (() => {
-    if (!isToday) return chartData;
-    const map = new Map<number, (typeof chartData)[number]>();
-    chartData.forEach((point) => {
-      map.set(point.hour ?? 0, point);
-    });
-    return Array.from({ length: 24 }, (_, hour) => {
-      const bucket = map.get(hour);
-      return {
-        label: `${hour.toString().padStart(2, "0")}:00`,
-        inputTokens: bucket?.inputTokens ?? 0,
-        outputTokens: bucket?.outputTokens ?? 0,
-        cacheCreationTokens: bucket?.cacheCreationTokens ?? 0,
-        cacheReadTokens: bucket?.cacheReadTokens ?? 0,
-        cost: bucket?.cost ?? 0,
-      };
-    });
-  })();
-
-  const displayData = isToday ? hourlyData : chartData;
+  const displayData = chartData;
 
   const CustomTooltip = ({ active, payload, label }: any) => {
     if (active && payload && payload.length) {

src/i18n/locales/en.json

@@ -423,7 +423,7 @@
     "cost": "Cost",
     "perMillion": "(per million)",
     "trends": "Usage Trends",
-    "rangeToday": "Today (hourly)",
+    "rangeToday": "Last 24 hours (hourly)",
     "rangeLast7Days": "Last 7 days",
     "rangeLast30Days": "Last 30 days",
     "totalTokens": "Total Tokens",

src/i18n/locales/ja.json

@@ -423,7 +423,7 @@
     "cost": "コスト",
     "perMillion": "(100万あたり)",
     "trends": "利用トレンド",
-    "rangeToday": "今日 (時間別)",
+    "rangeToday": "直近24時間 (時間別)",
     "rangeLast7Days": "過去7日間",
     "rangeLast30Days": "過去30日間",
     "totalTokens": "総トークン数",

src/i18n/locales/zh.json

@@ -423,7 +423,7 @@
     "cost": "成本",
     "perMillion": "(每百万)",
     "trends": "使用趋势",
-    "rangeToday": "今天 (按小时)",
+    "rangeToday": "过去 24 小时 (按小时)",
     "rangeLast7Days": "过去 7 天",
     "rangeLast30Days": "过去 30 天",
     "totalTokens": "总 Token 数",

src/lib/api/usage.ts

@@ -49,8 +49,11 @@ export const usageApi = {
     return invoke("get_usage_summary", { startDate, endDate });
   },
 
-  getUsageTrends: async (days: number): Promise<DailyStats[]> => {
-    return invoke("get_usage_trends", { days });
+  getUsageTrends: async (
+    startDate?: number,
+    endDate?: number,
+  ): Promise<DailyStats[]> => {
+    return invoke("get_usage_trends", { startDate, endDate });
   },
 
   getProviderStats: async (): Promise<ProviderStats[]> => {

src/lib/query/usage.ts

@@ -5,8 +5,7 @@ import type { LogFilters } from "@/types/usage";
 // Query keys
 export const usageKeys = {
   all: ["usage"] as const,
-  summary: (startDate?: number, endDate?: number) =>
-    [...usageKeys.all, "summary", startDate, endDate] as const,
+  summary: (days: number) => [...usageKeys.all, "summary", days] as const,
   trends: (days: number) => [...usageKeys.all, "trends", days] as const,
   providerStats: () => [...usageKeys.all, "provider-stats"] as const,
   modelStats: () => [...usageKeys.all, "model-stats"] as const,
@@ -19,11 +18,20 @@ export const usageKeys = {
     [...usageKeys.all, "limits", providerId, appType] as const,
 };
 
+const getWindow = (days: number) => {
+  const endDate = Math.floor(Date.now() / 1000);
+  const startDate = endDate - days * 24 * 60 * 60;
+  return { startDate, endDate };
+};
+
 // Hooks
-export function useUsageSummary(startDate?: number, endDate?: number) {
+export function useUsageSummary(days: number) {
   return useQuery({
-    queryKey: usageKeys.summary(startDate, endDate),
-    queryFn: () => usageApi.getUsageSummary(startDate, endDate),
+    queryKey: usageKeys.summary(days),
+    queryFn: () => {
+      const { startDate, endDate } = getWindow(days);
+      return usageApi.getUsageSummary(startDate, endDate);
+    },
     refetchInterval: 30000, // 每30秒自动刷新
     refetchIntervalInBackground: false, // 后台不刷新
   });
@@ -32,7 +40,10 @@ export function useUsageSummary(startDate?: number, endDate?: number) {
 export function useUsageTrends(days: number) {
   return useQuery({
     queryKey: usageKeys.trends(days),
-    queryFn: () => usageApi.getUsageTrends(days),
+    queryFn: () => {
+      const { startDate, endDate } = getWindow(days);
+      return usageApi.getUsageTrends(startDate, endDate);
+    },
     refetchInterval: 30000, // 每30秒自动刷新
     refetchIntervalInBackground: false,
   });