4f:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 50:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 51:T1e35,import { AreaChart as RAreaChart, BarChart as RBarChart, LineChart as RLineChart, PieChart as RPieChart, Area, Bar, Line, Pie, Cell, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, } from 'recharts' import type { ValueType } from 'recharts/types/component/DefaultTooltipContent' import type { Tone } from './tone' /* ------------------------------------------------------------------ */ /* Shared */ /* ------------------------------------------------------------------ */ interface ChartSeries { key: string label?: string tone?: Tone } interface ChartTooltipEntry { color?: string name?: string value?: ValueType } function PoufTooltip({ active, payload, label }: { active?: boolean; payload?: ChartTooltipEntry[]; label?: string }) { if (!active || !payload?.length) return null return (

{label &&

{label}

} {payload.map((entry: ChartTooltipEntry, i: number) => (

{entry.name}: {typeof entry.value === 'number' ? entry.value.toLocaleString() : entry.value}

))}

) } /** Maps a Tone to a corresponding chart color, falling back to --purple. */ function chartColor(tone?: Tone): string { const m: Record = { purple: '#c9a8ff', pink: '#ffb3d1', blue: '#9ec8ff', mint: '#a8f0d0', yellow: '#ffe58a', orange: '#ffb38a', up: '#a8f0d0', down: '#ffb3d1', warn: '#ffe58a', info: '#9ec8ff', idle: '#c9a8ff', } return m[tone ?? 'purple'] ?? m.purple! } /* ------------------------------------------------------------------ */ /* Area Chart */ /* ------------------------------------------------------------------ */ interface AreaChartProps { data: Record[] dataKey: string series: ChartSeries[] height?: number stacked?: boolean } export function AreaChart({ data, dataKey, series, height = 300, stacked }: AreaChartProps) { return (

} /> {series.map((s) => ( ))}

) } /* ------------------------------------------------------------------ */ /* Bar Chart */ /* ------------------------------------------------------------------ */ interface BarChartProps { data: Record[] dataKey: string series: ChartSeries[] height?: number stacked?: boolean /** Name of a per-datum field holding a Tone. When set (single series only), * each bar takes its own datum's tone — e.g. mint for a region above target, * pink for one below — instead of the series-wide colour. */ toneKey?: string } export function BarChart({ data, dataKey, series, height = 300, stacked, toneKey }: BarChartProps) { return (

} /> {series.map((s) => ( {toneKey && series.length === 1 && data.map((d, i) => )} ))}

) } /* ------------------------------------------------------------------ */ /* Line Chart */ /* ------------------------------------------------------------------ */ interface LineChartProps { data: Record[] dataKey: string series: ChartSeries[] height?: number } export function LineChart({ data, dataKey, series, height = 300 }: LineChartProps) { return (

} /> {series.map((s) => ( ))}

) } /* ------------------------------------------------------------------ */ /* Pie / Donut Chart */ /* ------------------------------------------------------------------ */ interface PieSlice { key: string label: string value: number tone?: Tone } interface PieChartProps { data: PieSlice[] height?: number /** Renders a donut when true, a full pie when false. */ donut?: boolean /** Show label on each slice. */ labelled?: boolean } export function PieChart({ data, height = 280, donut = true, labelled }: PieChartProps) { return (

} /> `${name} (${value})` : undefined} > {data.map((slice) => ( ))}

) } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","recharts",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/recharts","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"recharts"}]]}]}]]}],["$","$L4f",null,{"namespace":"@1st-pouf","registryDependencies":["https://1st-pouf.worksonmy.dev/r/base.json","https://1st-pouf.worksonmy.dev/r/tone.json"]}]]}],null]}],["$","$L50",null,{"files":[{"path":"registry/pouf/charts.tsx","content":"$51","type":"registry:ui","target":"components/pouf/charts.tsx"}],"className":"h-[70svh] min-h-80"}]]}]