import { useTranslation } from "react-i18next";
import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
ResponsiveContainer,
Legend,
} from "recharts";
import { useUsageTrends } from "@/lib/query/usage";
interface UsageTrendChartProps {
days: number;
}
export function UsageTrendChart({ days }: UsageTrendChartProps) {
const { t } = useTranslation();
const { data: trends, isLoading } = useUsageTrends(days);
if (isLoading) {
return ;
}
const isToday = days === 1;
const chartData =
trends?.map((stat) => {
const pointDate = new Date(stat.date);
return {
rawDate: stat.date,
label: isToday
? pointDate.toLocaleTimeString("zh-CN", { hour: "2-digit" })
: pointDate.toLocaleDateString("zh-CN", {
month: "2-digit",
day: "2-digit",
}),
hour: pointDate.getHours(),
inputTokens: stat.totalInputTokens,
outputTokens: stat.totalOutputTokens,
cacheCreationTokens: stat.totalCacheCreationTokens,
cacheReadTokens: stat.totalCacheReadTokens,
cost: parseFloat(stat.totalCost),
};
}) || [];
const hourlyData = (() => {
if (!isToday) return chartData;
const map = new Map();
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 rangeLabel = isToday
? t("usage.rangeToday", "今天 (按小时)")
: days === 7
? t("usage.rangeLast7Days", "过去 7 天")
: t("usage.rangeLast30Days", "过去 30 天");
return (
{t("usage.trends", "使用趋势")}
{rangeLabel}
);
}