62: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 63: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/1bpgyrs5qflhu.js","/_next/static/immutable/chunks/0-6vu2ul1h6ld.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"] 64:T4d24,"use client"; import * as React from "react"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { clsx, type ClassValue } from "clsx"; import { twMerge } from "tailwind-merge"; function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } export interface CategoryMonth { month: string; values: Record; } export interface Category { id: string; label: string; budget: number; merchants: Record; } export interface SpendingByCategoryChartProps { categories?: Category[]; months?: CategoryMonth[]; currency?: string; theme?: "dark" | "light"; className?: string; } // Categorical slots in fixed order, validated per mode (CVD + contrast). Color follows the category. const SERIES = { dark: ["#3987e5", "#d95926", "#199e70", "#c98500", "#d55181", "#9085e9"], light: ["#2a78d6", "#eb6834", "#1baf7a", "#eda100", "#e87ba4", "#6250d6"], }; const PALETTES = { dark: { bg: "#0A0A0A", text: "#F5F4F1", muted: "rgba(245,244,241,0.64)", faint: "rgba(245,244,241,0.38)", card: "#121212", well: "rgba(255,255,255,0.04)", border: "rgba(255,255,255,0.08)", track: "rgba(255,255,255,0.07)", on: "#F5F4F1", onText: "#0A0A0A", over: "#F87171", good: "#4ADE80", ring: "rgba(245,244,241,0.6)" }, light: { bg: "#FAFAF8", text: "#0A0A0A", muted: "rgba(10,10,10,0.64)", faint: "rgba(10,10,10,0.42)", card: "#FFFFFF", well: "rgba(10,10,10,0.03)", border: "rgba(10,10,10,0.09)", track: "rgba(10,10,10,0.07)", on: "#0A0A0A", onText: "#FAFAF8", over: "#DC2626", good: "#15803D", ring: "rgba(10,10,10,0.5)" }, }; const CATEGORIES: Category[] = [ { id: "housing", label: "Housing", budget: 1100, merchants: { Nov: [["Rent · Altbau Living", 980], ["Utilities · Stadtwerk", 112]], Oct: [["Rent · Altbau Living", 980], ["Utilities · Stadtwerk", 98]], Sep: [["Rent · Altbau Living", 980], ["Utilities · Stadtwerk", 91]] } }, { id: "food", label: "Groceries & dining", budget: 450, merchants: { Nov: [["Marktplatz Grocer", 214], ["Kornblume Bakery", 61], ["Osteria Lupo", 148], ["Noodle Bar 88", 96]], Oct: [["Marktplatz Grocer", 196], ["Osteria Lupo", 92], ["Kornblume Bakery", 54]], Sep: [["Marktplatz Grocer", 205], ["Noodle Bar 88", 64], ["Kornblume Bakery", 48]] } }, { id: "transport", label: "Transport", budget: 180, merchants: { Nov: [["City transit pass", 86], ["Velo Rides", 42], ["Fuel · Nordtank", 38]], Oct: [["City transit pass", 86], ["Velo Rides", 31]], Sep: [["City transit pass", 86], ["Skyline Air", 212]] } }, { id: "leisure", label: "Leisure", budget: 200, merchants: { Nov: [["Lumen Cinema", 48], ["Climbing Hall", 65], ["Bookshop Seiten", 34]], Oct: [["Climbing Hall", 65], ["Lumen Cinema", 24]], Sep: [["Harbor Hotel", 386], ["Climbing Hall", 65]] } }, { id: "subs", label: "Subscriptions", budget: 40, merchants: { Nov: [["Wavelength Music", 11], ["Cloudnest Storage", 3], ["Newsline Daily", 8], ["Fitloop", 20]], Oct: [["Wavelength Music", 11], ["Cloudnest Storage", 3], ["Newsline Daily", 8]], Sep: [["Wavelength Music", 11], ["Cloudnest Storage", 3], ["Newsline Daily", 8]] } }, { id: "health", label: "Health", budget: 80, merchants: { Nov: [["Apotheke am Park", 27], ["Physio Klinik", 45]], Oct: [["Apotheke am Park", 18]], Sep: [["Dental care", 120], ["Apotheke am Park", 14]] } }, ]; const sum = (l: [string, number][] = []) => l.reduce((a, [, v]) => a + v, 0); const MONTHS: CategoryMonth[] = ["Sep", "Oct", "Nov"].map((m) => ({ month: m, values: Object.fromEntries(CATEGORIES.map((c) => [c.id, sum(c.merchants[m])])) })); const LONG: Record = { Sep: "September", Oct: "October", Nov: "November" }; export function SpendingByCategoryChart({ categories = CATEGORIES, months = MONTHS, currency = "€", theme = "dark", className }: SpendingByCategoryChartProps) { const p = PALETTES[theme]; const colors = SERIES[theme]; const reduce = !!useReducedMotion(); const uid = React.useId(); const [mi, setMi] = React.useState(months.length - 1); const [hover, setHover] = React.useState(null); const [picked, setPicked] = React.useState(null); const [compare, setCompare] = React.useState(false); const [view, setView] = React.useState<"chart" | "table">("chart"); const month = months[mi]; const prev = months[mi - 1]; const total = categories.reduce((a, c) => a + (month.values[c.id] ?? 0), 0); const prevTotal = prev ? categories.reduce((a, c) => a + (prev.values[c.id] ?? 0), 0) : null; const budgetTotal = categories.reduce((a, c) => a + c.budget, 0); const money = (n: number) => `${currency}${Math.round(n).toLocaleString("en-US")}`; const colorOf = (id: string) => colors[categories.findIndex((c) => c.id === id) % colors.length]; const focusId = hover ?? picked; const focusCat = categories.find((c) => c.id === focusId) ?? null; const ranked = [...categories].sort((a, b) => (month.values[b.id] ?? 0) - (month.values[a.id] ?? 0)); const maxBar = Math.max(...categories.map((c) => Math.max(month.values[c.id] ?? 0, c.budget, compare && prev ? (prev.values[c.id] ?? 0) : 0))); // Donut: one circle per category, 2px surface gap between segments. const R = 70; const C = 2 * Math.PI * R; const GAP = 2.5; const lens = categories.map((c) => (total ? ((month.values[c.id] ?? 0) / total) * C : 0)); const arcs = categories.map((c, i) => ({ id: c.id, start: lens.slice(0, i).reduce((a, b) => a + b, 0), len: Math.max(0, lens[i] - GAP) })); const ring = { ["--tw-ring-color" as string]: p.ring, ["--tw-ring-offset-color" as string]: p.card } as React.CSSProperties; const focus = "outline-none focus-visible:ring-2 focus-visible:ring-offset-2"; const delta = prevTotal ? (total - prevTotal) / prevTotal : 0; return (

{/* Header + filters in one row */}

Spending by category

{money(total)}

{LONG[month.month] ?? month.month} · {money(Math.abs(budgetTotal - total))} {total <= budgetTotal ? "left in budget" : "over budget"} {prevTotal !== null && ( {" "} · {delta >= 0 ? "▲" : "▼"} {Math.abs(Math.round(delta * 100))}% vs {prev!.month} )}

{month.month}

{(["chart", "table"] as const).map((v) => ( ))}

{view === "table" ? ( {prev && ( )} {ranked.map((c) => ( {prev && ( )} ))}

Spending by category, {LONG[month.month]}
Category	Spent	Budget	Share	{prev.month}
{c.label}	{money(month.values[c.id] ?? 0)}	{money(c.budget)}	{total ? Math.round(((month.values[c.id] ?? 0) / total) * 100) : 0}%	{money(prev.values[c.id] ?? 0)}

) : (

{/* Donut */}

{focusCat ? focusCat.label : "Total spent"}

{money(focusCat ? (month.values[focusCat.id] ?? 0) : total)}

{focusCat ? `${Math.round(((month.values[focusCat.id] ?? 0) / total) * 100)}% of spend` : `${categories.length} categories`}

{/* Bars vs budget (legend + direct labels) */}

Budget {compare && prev && ( {prev.month} )}

)} {/* Drill-down */} {picked && view === "chart" && (

{categories.find((c) => c.id === picked)?.label} in {LONG[month.month]}

{name} {money(amt)}

)}

); } export default SpendingByCategoryChart; 61:["$","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","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","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":"motion"}]]}]}],["$","li","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}]]}],["$","$L62",null,{"namespace":"@reactframe","registryDependencies":[]}]]}],null]}],["$","$L63",null,{"files":[{"path":"registry/new-york/spending-by-category-chart/spending-by-category-chart.tsx","content":"$64","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]