import type { HTMLAttributes } from "react"; export type ExpenseOrbitItem = { label: string; value: number; color: string }; type ExpenseOrbitCardProps = HTMLAttributes & { title?: string; currency?: string; items: ExpenseOrbitItem[]; periodLabel?: string }; export function ExpenseOrbitCard({ title = "Weekly expense", currency = "USD", items, periodLabel, className = "", ...props }: ExpenseOrbitCardProps) { const total = items.reduce((sum, item) => sum + item.value, 0); const format = new Intl.NumberFormat("en-US", { style: "currency", currency, maximumFractionDigits: 0 }); const stops = items .reduce<{ offset: number; segments: string[] }>((result, item) => { const start = result.offset; const end = start + (total > 0 ? (item.value / total) * 100 : 0); return { offset: end, segments: [...result.segments, item.color + " " + start + "% " + end + "%"] }; }, { offset: 0, segments: [] }) .segments.join(", "); return (

{title}

{format.format(total)}

{periodLabel ? {periodLabel} : null}

item.label + " " + format.format(item.value)).join(", ")} className="relative mx-auto size-32 rounded-full" style={{ background: "conic-gradient(" + (stops || "#d4d4d8 0 100%") + ")" }} >

); }

September operating costs

September operating costs