first commit
This commit is contained in:
Beyhan Oğur
244
ui/app/workspace/dashboard/components/charts/modelUsageChart.tsx
Normal file
244
ui/app/workspace/dashboard/components/charts/modelUsageChart.tsx
Normal file
@@ -0,0 +1,244 @@
|
||||
import type { ModelHistogramResponse } from "@/lib/types/logs";
|
||||
import { useMemo } from "react";
|
||||
import { Area, AreaChart, Bar, BarChart, CartesianGrid, ResponsiveContainer, Tooltip, XAxis, YAxis } from "recharts";
|
||||
import { CHART_COLORS, formatFullTimestamp, formatTimestamp, getModelColor } from "../../utils/chartUtils";
|
||||
import { ChartErrorBoundary } from "./chartErrorBoundary";
|
||||
import type { ChartType } from "./chartTypeToggle";
|
||||
|
||||
// Sanitize model names to avoid Recharts interpreting dots/brackets as path separators
|
||||
function sanitizeModelKey(model: string): string {
|
||||
return model.replace(/[.\[\]]/g, "_");
|
||||
}
|
||||
|
||||
interface ModelUsageChartProps {
|
||||
data: ModelHistogramResponse | null;
|
||||
chartType: ChartType;
|
||||
startTime: number;
|
||||
endTime: number;
|
||||
selectedModel: string;
|
||||
}
|
||||
|
||||
function CustomTooltip({ active, payload, selectedModel, models }: any) {
|
||||
if (!active || !payload || !payload.length) return null;
|
||||
|
||||
const data = payload[0]?.payload;
|
||||
if (!data) return null;
|
||||
|
||||
return (
|
||||
<div className="rounded-sm border border-zinc-200 bg-white px-3 py-2 shadow-lg dark:border-zinc-700 dark:bg-zinc-900">
|
||||
<div className="mb-1 text-xs text-zinc-500">{formatFullTimestamp(data.timestamp)}</div>
|
||||
<div className="space-y-1 text-sm">
|
||||
{selectedModel === "all" ? (
|
||||
<>
|
||||
{models.map((model: string, idx: number) => {
|
||||
const stats = data.by_model?.[model];
|
||||
if (!stats || stats.total === 0) return null;
|
||||
return (
|
||||
<div key={model} className="flex items-center justify-between gap-4">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="h-2 w-2 rounded-full" style={{ backgroundColor: getModelColor(idx) }} />
|
||||
<span className="max-w-[120px] truncate text-zinc-600 dark:text-zinc-400">{model}</span>
|
||||
</span>
|
||||
<span className="font-medium">{stats.total.toLocaleString()}</span>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="h-2 w-2 rounded-full bg-emerald-500" />
|
||||
<span className="text-zinc-600 dark:text-zinc-400">Success</span>
|
||||
</span>
|
||||
<span className="font-medium text-emerald-600 dark:text-emerald-400">
|
||||
{(data.by_model?.[selectedModel]?.success || 0).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-4">
|
||||
<span className="flex items-center gap-1.5">
|
||||
<span className="h-2 w-2 rounded-full bg-red-500" />
|
||||
<span className="text-zinc-600 dark:text-zinc-400">Error</span>
|
||||
</span>
|
||||
<span className="font-medium text-red-600 dark:text-red-400">
|
||||
{(data.by_model?.[selectedModel]?.error || 0).toLocaleString()}
|
||||
</span>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export function ModelUsageChart({ data, chartType, startTime, endTime, selectedModel }: ModelUsageChartProps) {
|
||||
const { chartData, displayModels } = useMemo(() => {
|
||||
if (!data?.buckets || !data.bucket_size_seconds) {
|
||||
return { chartData: [], displayModels: [] };
|
||||
}
|
||||
|
||||
const models = data.models;
|
||||
|
||||
const processed = data.buckets.map((bucket, index) => {
|
||||
const item: any = {
|
||||
...bucket,
|
||||
index,
|
||||
formattedTime: formatTimestamp(bucket.timestamp, data.bucket_size_seconds),
|
||||
};
|
||||
|
||||
if (selectedModel === "all") {
|
||||
// For "all", show total per model
|
||||
models.forEach((model) => {
|
||||
const safeKey = sanitizeModelKey(model);
|
||||
item[`model_${safeKey}`] = bucket.by_model?.[model]?.total || 0;
|
||||
});
|
||||
} else {
|
||||
// For specific model, show success/error breakdown
|
||||
const stats = bucket.by_model?.[selectedModel];
|
||||
item.success = stats?.success || 0;
|
||||
item.error = stats?.error || 0;
|
||||
}
|
||||
return item;
|
||||
});
|
||||
|
||||
return { chartData: processed, displayModels: models };
|
||||
}, [data, selectedModel]);
|
||||
|
||||
if (!data?.buckets || chartData.length === 0) {
|
||||
return <div className="text-muted-foreground flex h-full items-center justify-center text-sm">No data available</div>;
|
||||
}
|
||||
|
||||
const commonProps = {
|
||||
data: chartData,
|
||||
margin: { top: 6, right: 4, left: 4, bottom: 0 },
|
||||
};
|
||||
|
||||
return (
|
||||
<ChartErrorBoundary resetKey={`${startTime}-${endTime}-${chartData.length}-${selectedModel}`}>
|
||||
<ResponsiveContainer width="100%" height="100%">
|
||||
{chartType === "bar" ? (
|
||||
<BarChart {...commonProps} barCategoryGap={1}>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
|
||||
<XAxis
|
||||
dataKey="index"
|
||||
type="number"
|
||||
domain={[-0.5, chartData.length - 0.5]}
|
||||
tick={{ fontSize: 11, className: "fill-zinc-500", dy: 5 }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
|
||||
interval="preserveStartEnd"
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 11, className: "fill-zinc-500" }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
width={40}
|
||||
tickFormatter={(v) => v.toLocaleString()}
|
||||
domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
|
||||
allowDataOverflow={false}
|
||||
/>
|
||||
<Tooltip
|
||||
content={<CustomTooltip selectedModel={selectedModel} models={displayModels} />}
|
||||
cursor={{ fill: "#8c8c8f", fillOpacity: 0.15 }}
|
||||
/>
|
||||
{selectedModel === "all" ? (
|
||||
displayModels.map((model, idx) => (
|
||||
<Bar
|
||||
isAnimationActive={false}
|
||||
key={model}
|
||||
dataKey={`model_${sanitizeModelKey(model)}`}
|
||||
stackId="models"
|
||||
fill={getModelColor(idx)}
|
||||
fillOpacity={0.9}
|
||||
barSize={30}
|
||||
radius={idx === displayModels.length - 1 ? [2, 2, 0, 0] : [0, 0, 0, 0]}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<>
|
||||
<Bar
|
||||
isAnimationActive={false}
|
||||
dataKey="success"
|
||||
stackId="status"
|
||||
fill={CHART_COLORS.success}
|
||||
fillOpacity={0.9}
|
||||
radius={[0, 0, 0, 0]}
|
||||
barSize={30}
|
||||
/>
|
||||
<Bar
|
||||
isAnimationActive={false}
|
||||
dataKey="error"
|
||||
stackId="status"
|
||||
fill={CHART_COLORS.error}
|
||||
fillOpacity={0.9}
|
||||
radius={[2, 2, 0, 0]}
|
||||
barSize={30}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</BarChart>
|
||||
) : (
|
||||
<AreaChart {...commonProps}>
|
||||
<CartesianGrid strokeDasharray="3 3" vertical={false} className="stroke-zinc-200 dark:stroke-zinc-700" />
|
||||
<XAxis
|
||||
dataKey="index"
|
||||
type="number"
|
||||
domain={[-0.5, chartData.length - 0.5]}
|
||||
tick={{ fontSize: 11, className: "fill-zinc-500" }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
tickFormatter={(idx) => chartData[Math.round(idx)]?.formattedTime || ""}
|
||||
interval="preserveStartEnd"
|
||||
/>
|
||||
<YAxis
|
||||
tick={{ fontSize: 11, className: "fill-zinc-500" }}
|
||||
tickLine={false}
|
||||
axisLine={false}
|
||||
width={40}
|
||||
tickFormatter={(v) => v.toLocaleString()}
|
||||
domain={[0, (dataMax: number) => Math.max(dataMax, 1)]}
|
||||
allowDataOverflow={false}
|
||||
/>
|
||||
<Tooltip content={<CustomTooltip selectedModel={selectedModel} models={displayModels} />} />
|
||||
{selectedModel === "all" ? (
|
||||
displayModels.map((model, idx) => (
|
||||
<Area
|
||||
isAnimationActive={false}
|
||||
key={model}
|
||||
type="monotone"
|
||||
dataKey={`model_${sanitizeModelKey(model)}`}
|
||||
stackId="1"
|
||||
stroke={getModelColor(idx)}
|
||||
fill={getModelColor(idx)}
|
||||
fillOpacity={0.7}
|
||||
/>
|
||||
))
|
||||
) : (
|
||||
<>
|
||||
<Area
|
||||
isAnimationActive={false}
|
||||
type="monotone"
|
||||
dataKey="success"
|
||||
stackId="1"
|
||||
stroke={CHART_COLORS.success}
|
||||
fill={CHART_COLORS.success}
|
||||
fillOpacity={0.7}
|
||||
/>
|
||||
<Area
|
||||
isAnimationActive={false}
|
||||
type="monotone"
|
||||
dataKey="error"
|
||||
stackId="1"
|
||||
stroke={CHART_COLORS.error}
|
||||
fill={CHART_COLORS.error}
|
||||
fillOpacity={0.7}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
</AreaChart>
|
||||
)}
|
||||
</ResponsiveContainer>
|
||||
</ChartErrorBoundary>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user