Top models
- Weekly {METRIC_LABELS[shown]} across your gateway
+
+ {GRANULARITY_LABELS[granularity]} {METRIC_LABELS[shown]} across your gateway
+
setMetric(value as Metric)}>
@@ -224,6 +235,15 @@ export default function ModelInsightsView({ accessToken }: { accessToken: string
))}
+ setGranularity(value as Granularity)}>
+
+ {GRANULARITIES.map((value) => (
+
+ {GRANULARITY_LABELS[value]}
+
+ ))}
+
+
setScale(value as Scale)}>
{SCALES.map((value) => (
@@ -248,7 +268,15 @@ export default function ModelInsightsView({ accessToken }: { accessToken: string
axisLine={false}
tickFormatter={(value) => formatMetric(Number(value), shown)}
/>
- } />
+
+ `${label} ยท Gateway total ${formatMetric(bucketTotals.get(String(label)) ?? 0, shown)}`
+ }
+ />
+ }
+ />
{models.map((model, index) => (
): DailyMetric => ({
model_group: "a",
@@ -16,7 +16,7 @@ const row = (over: Partial): DailyMetric => ({
...over,
});
-describe("buildWeeklySeries", () => {
+describe("buildSeries", () => {
const range = { start: "2026-01-01", end: "2026-01-15" };
it("sums days into 7-day buckets per model", () => {
@@ -26,7 +26,7 @@ describe("buildWeeklySeries", () => {
row({ date: "2026-01-08", requests: 4 }),
row({ date: "2026-01-02", model_group: "b", requests: 8 }),
];
- expect(buildWeeklySeries(rows, ["a", "b"], "requests", range)).toEqual([
+ expect(buildSeries(rows, ["a", "b"], "requests", { ...range, granularity: "week" })).toEqual([
{ date: "2026-01-01", a: 3, b: 8 },
{ date: "2026-01-08", a: 4, b: 0 },
{ date: "2026-01-15", a: 0, b: 0 },
@@ -35,12 +35,58 @@ describe("buildWeeklySeries", () => {
it("keeps weeks with no usage as zero instead of dropping them", () => {
const rows = [row({ date: "2026-01-01", requests: 1 }), row({ date: "2026-01-15", requests: 2 })];
- expect(buildWeeklySeries(rows, ["a"], "requests", range).map((week) => [week.date, week.a])).toEqual([
+ expect(
+ buildSeries(rows, ["a"], "requests", { ...range, granularity: "week" }).map((week) => [week.date, week.a]),
+ ).toEqual([
["2026-01-01", 1],
["2026-01-08", 0],
["2026-01-15", 2],
]);
});
+
+ it("gives every day its own bucket with that day's token total", () => {
+ const rows = [
+ row({ date: "2026-01-01", prompt_tokens: 100, completion_tokens: 50 }),
+ row({ date: "2026-01-01", prompt_tokens: 10, completion_tokens: 5 }),
+ row({ date: "2026-01-03", prompt_tokens: 7, completion_tokens: 3 }),
+ ];
+ const daily = buildSeries(rows, ["a"], "tokens", { start: "2026-01-01", end: "2026-01-03", granularity: "day" });
+ expect(daily).toEqual([
+ { date: "2026-01-01", a: 165 },
+ { date: "2026-01-02", a: 0 },
+ { date: "2026-01-03", a: 10 },
+ ]);
+ });
+});
+
+describe("buildBucketTotals", () => {
+ const total = (date: string, prompt_tokens: number) => ({
+ date,
+ spend: 0,
+ prompt_tokens,
+ completion_tokens: 1,
+ requests: 0,
+ });
+ const totals = [total("2026-01-01", 9), total("2026-01-03", 4), total("2026-01-08", 99)];
+
+ it("keys each day's gateway-wide total by its own date", () => {
+ const daily = buildBucketTotals(totals, "tokens", { start: "2026-01-01", end: "2026-01-08", granularity: "day" });
+ expect([...daily]).toEqual([
+ ["2026-01-01", 10],
+ ["2026-01-03", 5],
+ ["2026-01-08", 100],
+ ]);
+ });
+
+ it("sums days into the same week start used by the chart's x-axis", () => {
+ const window = { start: "2026-01-01", end: "2026-01-08", granularity: "week" } as const;
+ const weekly = buildBucketTotals(totals, "tokens", window);
+ expect([...weekly]).toEqual([
+ ["2026-01-01", 15],
+ ["2026-01-08", 100],
+ ]);
+ expect([...weekly.keys()]).toEqual(buildSeries([], [], "tokens", window).map((bucket) => bucket.date));
+ });
});
describe("modelOrder", () => {
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/model-insights/_components/modelInsightsData.ts b/ui/litellm-dashboard/src/app/(dashboard)/model-insights/_components/modelInsightsData.ts
index 3cadf0dc95c..e4e83d24362 100644
--- a/ui/litellm-dashboard/src/app/(dashboard)/model-insights/_components/modelInsightsData.ts
+++ b/ui/litellm-dashboard/src/app/(dashboard)/model-insights/_components/modelInsightsData.ts
@@ -12,10 +12,13 @@ export type ModelMetric = {
failed_requests: number;
};
export type DailyMetric = ModelMetric & { date: string };
+type Usage = Pick;
+export type DailyTotal = Usage & { date: string };
export type ModelInsightsResponse = {
start_date: string;
end_date: string;
daily: DailyMetric[];
+ daily_totals: DailyTotal[];
top_models: ModelMetric[];
};
export type TaskSummary = {
@@ -30,10 +33,12 @@ export type TaskSummary = {
export type ModelInsightTasksResponse = { start_date: string; end_date: string; tasks: TaskSummary[] };
export type RankedModel = { model_group: string; provider: string; share: number; delta: number };
-const DAY_MS = 86_400_000;
-const WEEK_DAYS = 7;
+export type Granularity = "day" | "week";
-export const metricValue = (row: ModelMetric, metric: Metric) => {
+const DAY_MS = 86_400_000;
+const BUCKET_DAYS: Record = { day: 1, week: 7 };
+
+export const metricValue = (row: Usage, metric: Metric) => {
if (metric === "requests") return row.requests;
if (metric === "spend") return row.spend;
return row.prompt_tokens + row.completion_tokens;
@@ -66,21 +71,34 @@ export const modelOrder = (rows: DailyMetric[], metric: Metric) => {
return [...totals.entries()].sort((a, b) => b[1] - a[1]).map(([model]) => model);
};
-export const buildWeeklySeries = (rows: DailyMetric[], models: string[], metric: Metric, range: DateRange) => {
- const weekMs = WEEK_DAYS * DAY_MS;
- const origin = toDay(range.start);
- const weekCount = Math.floor((toDay(range.end) - origin) / weekMs) + 1;
- const buckets = Array.from({ length: weekCount }, (_, week) => ({
- date: isoDay(origin + week * weekMs),
+export type SeriesWindow = DateRange & { granularity: Granularity };
+
+export const buildSeries = (rows: DailyMetric[], models: string[], metric: Metric, window: SeriesWindow) => {
+ const bucketMs = BUCKET_DAYS[window.granularity] * DAY_MS;
+ const origin = toDay(window.start);
+ const bucketCount = Math.floor((toDay(window.end) - origin) / bucketMs) + 1;
+ const buckets = Array.from({ length: bucketCount }, (_, index) => ({
+ date: isoDay(origin + index * bucketMs),
...Object.fromEntries(models.map((model) => [model, 0])),
})) as Record[];
for (const row of rows) {
- const bucket = buckets[Math.floor((toDay(row.date) - origin) / weekMs)];
+ const bucket = buckets[Math.floor((toDay(row.date) - origin) / bucketMs)];
if (bucket) bucket[row.model_group] = Number(bucket[row.model_group] ?? 0) + metricValue(row, metric);
}
return buckets;
};
+export const buildBucketTotals = (totals: DailyTotal[], metric: Metric, window: SeriesWindow) => {
+ const bucketMs = BUCKET_DAYS[window.granularity] * DAY_MS;
+ const origin = toDay(window.start);
+ const byBucket = new Map();
+ for (const row of totals) {
+ const bucket = isoDay(origin + Math.floor((toDay(row.date) - origin) / bucketMs) * bucketMs);
+ byBucket.set(bucket, (byBucket.get(bucket) ?? 0) + metricValue(row, metric));
+ }
+ return byBucket;
+};
+
const shareByModel = (rows: { model_group: string; provider: string }[], values: number[]) => {
const totals = new Map();
rows.forEach((row, index) => {
diff --git a/ui/litellm-dashboard/src/lib/http/schema.d.ts b/ui/litellm-dashboard/src/lib/http/schema.d.ts
index a80e997719b..fcb2805c767 100644
--- a/ui/litellm-dashboard/src/lib/http/schema.d.ts
+++ b/ui/litellm-dashboard/src/lib/http/schema.d.ts
@@ -37160,6 +37160,19 @@ export interface components {
/** Successful Requests */
successful_requests: number;
};
+ /** ModelInsightDailyTotal */
+ ModelInsightDailyTotal: {
+ /** Completion Tokens */
+ completion_tokens: number;
+ /** Date */
+ date: string;
+ /** Prompt Tokens */
+ prompt_tokens: number;
+ /** Requests */
+ requests: number;
+ /** Spend */
+ spend: number;
+ };
/** ModelInsightMetric */
ModelInsightMetric: {
/** Completion Tokens */
@@ -37211,6 +37224,8 @@ export interface components {
ModelInsightsResponse: {
/** Daily */
daily: components["schemas"]["ModelInsightDailyMetric"][];
+ /** Daily Totals */
+ daily_totals: components["schemas"]["ModelInsightDailyTotal"][];
/** End Date */
end_date: string;
/** Start Date */