b2bde6934e
TokenDayChart: CartesianGrid, height 280, DD/MM formatter, var(--color-primary). SprintTokenHistoryTable: 'use client' + useRouter click naar ?sprint=<id>. PbiTokenTable: 'use client' + useState/useMemo kostensort. index.ts barrel export toegevoegd. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
33 lines
1.1 KiB
TypeScript
33 lines
1.1 KiB
TypeScript
'use client'
|
|
|
|
import { LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid, 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">Geen dag-data beschikbaar</p>
|
|
}
|
|
|
|
return (
|
|
<ResponsiveContainer width="100%" height={280}>
|
|
<LineChart data={data}>
|
|
<CartesianGrid strokeDasharray="3 3" stroke="var(--border)" />
|
|
<XAxis dataKey="day" tick={{ fontSize: 11 }} tickFormatter={v => (v as string).slice(5).replace('-', '/')} />
|
|
<YAxis tick={{ fontSize: 11 }} tickFormatter={v => `$${(v as number).toFixed(3)}`} />
|
|
<Tooltip formatter={(v: unknown) => [`$${Number(v).toFixed(4)}`, 'Kosten']} />
|
|
<Line
|
|
type="monotone"
|
|
dataKey="totalCostUsd"
|
|
stroke="var(--color-primary)"
|
|
strokeWidth={2}
|
|
dot={false}
|
|
name="Kosten (USD)"
|
|
/>
|
|
</LineChart>
|
|
</ResponsiveContainer>
|
|
)
|
|
}
|