51c8a86be4
Server Component met data-fetching via getSprintTokenHistory/getDayTokenData/ getPbiTokenAggregates. SprintTokenHistoryTable, TokenDayChart (Recharts LineChart), PbiTokenTable en TokenSelectors (client, URL-params). Link toegevoegd in insights/page.tsx. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
32 lines
1 KiB
TypeScript
32 lines
1 KiB
TypeScript
'use client'
|
|
|
|
import { LineChart, Line, XAxis, YAxis, Tooltip, ResponsiveContainer } from 'recharts'
|
|
import type { DayTokenRow } from '@/lib/insights/token-history'
|
|
|
|
interface Props {
|
|
data: DayTokenRow[]
|
|
}
|
|
|
|
export function TokenDayChart({ data }: Props) {
|
|
if (data.length === 0) {
|
|
return <p className="text-muted-foreground text-sm py-4 text-center">Geen dagdata voor deze sprint.</p>
|
|
}
|
|
|
|
return (
|
|
<ResponsiveContainer width="100%" height={220}>
|
|
<LineChart data={data}>
|
|
<XAxis dataKey="day" tick={{ fontSize: 11 }} tickFormatter={v => (v as string).slice(5)} />
|
|
<YAxis tick={{ fontSize: 11 }} tickFormatter={v => `$${(v as number).toFixed(3)}`} />
|
|
<Tooltip formatter={(v: unknown) => [`$${(v as number).toFixed(4)}`, 'Kosten (USD)']} />
|
|
<Line
|
|
type="monotone"
|
|
dataKey="totalCostUsd"
|
|
stroke="var(--primary)"
|
|
strokeWidth={2}
|
|
dot={false}
|
|
name="Kosten (USD)"
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
)
|
|
}
|