95 lines
2.7 KiB
TypeScript
95 lines
2.7 KiB
TypeScript
// Chart utility functions for the dashboard
|
|
|
|
// Format timestamp based on bucket size
|
|
export function formatTimestamp(timestamp: string, bucketSizeSeconds: number): string {
|
|
const date = new Date(timestamp);
|
|
|
|
if (bucketSizeSeconds >= 86400) {
|
|
// Daily buckets: "Jan 20"
|
|
return date.toLocaleDateString("en-US", { month: "short", day: "numeric" });
|
|
} else if (bucketSizeSeconds >= 3600) {
|
|
// Hourly buckets: "10:00"
|
|
return date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false });
|
|
} else {
|
|
// Sub-hourly: "10:15"
|
|
return date.toLocaleTimeString("en-US", { hour: "2-digit", minute: "2-digit", hour12: false });
|
|
}
|
|
}
|
|
|
|
// Format full timestamp for tooltip
|
|
export function formatFullTimestamp(timestamp: string): string {
|
|
const date = new Date(timestamp);
|
|
return date.toLocaleString("en-US", {
|
|
month: "short",
|
|
day: "numeric",
|
|
hour: "2-digit",
|
|
minute: "2-digit",
|
|
hour12: false,
|
|
});
|
|
}
|
|
|
|
// Format cost values
|
|
export function formatCost(cost: number): string {
|
|
if (cost < 0.01) {
|
|
return `$${cost.toFixed(4)}`;
|
|
}
|
|
return `$${cost.toFixed(2)}`;
|
|
}
|
|
|
|
// Format token values
|
|
export function formatTokens(tokens: number): string {
|
|
if (tokens >= 1000000) {
|
|
return `${(tokens / 1000000).toFixed(1)}M`;
|
|
}
|
|
if (tokens >= 1000) {
|
|
return `${(tokens / 1000).toFixed(1)}K`;
|
|
}
|
|
return tokens.toLocaleString();
|
|
}
|
|
|
|
// Color palette for models
|
|
export const MODEL_COLORS = [
|
|
"#10b981", // emerald-500
|
|
"#3b82f6", // blue-500
|
|
"#f59e0b", // amber-500
|
|
"#ef4444", // red-500
|
|
"#8b5cf6", // violet-500
|
|
"#ec4899", // pink-500
|
|
"#06b6d4", // cyan-500
|
|
"#84cc16", // lime-500
|
|
];
|
|
|
|
// Get color for a model by index
|
|
export function getModelColor(index: number): string {
|
|
return MODEL_COLORS[index % MODEL_COLORS.length];
|
|
}
|
|
|
|
// Format latency values
|
|
export function formatLatency(ms: number): string {
|
|
if (ms >= 1000) return `${(ms / 1000).toFixed(2)}s`;
|
|
return `${ms.toFixed(0)}ms`;
|
|
}
|
|
|
|
// Latency chart color palette
|
|
export const LATENCY_COLORS = {
|
|
avg: "#06b6d4", // cyan-500
|
|
p90: "#3b82f6", // blue-500
|
|
p95: "#f59e0b", // amber-500
|
|
p99: "#ef4444", // red-500
|
|
};
|
|
|
|
// Shared CSS class constants for chart card headers
|
|
export const CHART_HEADER_ACTIONS_CLASS = "flex min-w-0 w-full flex-col-reverse gap-2";
|
|
export const CHART_HEADER_LEGEND_CLASS = "flex min-h-5 min-w-0 flex-wrap items-center gap-2 pl-2 text-xs";
|
|
export const CHART_HEADER_CONTROLS_CLASS = "flex items-center justify-end gap-2";
|
|
|
|
// Chart colors
|
|
export const CHART_COLORS = {
|
|
success: "#10b981", // emerald-500
|
|
error: "#ef4444", // red-500
|
|
promptTokens: "#3b82f6", // blue-500
|
|
completionTokens: "#10b981", // emerald-500
|
|
totalTokens: "#8b5cf6", // violet-500
|
|
cost: "#f59e0b", // amber-500
|
|
cachedReadTokens: "#06b6d4", // cyan-500
|
|
}; |