/* NINA — hand-built animated SVG charts.
Bars grow from base, donut sweeps, line draws (stroke-dashoffset),
gauge fills. All gated on useInView so they animate once on entry,
and respect prefers-reduced-motion. */
const CHART_COLORS = ['#FF7A59', '#FBBF24', '#34D399', '#0EA5E9', '#A78BFA', '#FB7185', '#2DD4BF', '#F472B6'];
const REDUCED = () => window.matchMedia && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
/* ---------------- Horizontal bars by category ---------------- */
function BarsByCategory({ data }) {
const [ref, seen] = useInView();
const max = Math.max(...data.map((d) => d.cents), 1);
return (
{data.map((d, i) => {
const pct = (d.cents / max) * 100;
return (
{d.emoji}{d.name}
{d.fmt}
);
})}
{centerLabel}
{centerValue}
{segs.map((s, i) => (
{s.label}
{Math.round(s.frac * 100)}%
))}
);
}
/* ---------------- Trend line (30d) — draws + area fill + hover ---------------- */
function TrendLine({ data, height = 220 }) {
const [ref, seen] = useInView();
const [hover, setHover] = useState(null);
const W = 720, H = height, padX = 8, padY = 24;
const maxE = Math.max(...data.map((d) => Math.max(d.expenseCents, d.incomeCents)), 1);
const x = (i) => padX + (i / (data.length - 1)) * (W - padX * 2);
const y = (c) => H - padY - (c / maxE) * (H - padY * 2);
const linePath = (key) => data.map((d, i) => `${i === 0 ? 'M' : 'L'} ${x(i).toFixed(1)} ${y(d[key]).toFixed(1)}`).join(' ');
const areaPath = `${data.map((d, i) => `${i === 0 ? 'M' : 'L'} ${x(i).toFixed(1)} ${y(d.expenseCents).toFixed(1)}`).join(' ')} L ${x(data.length - 1)} ${H - padY} L ${x(0)} ${H - padY} Z`;
const drawn = (seen && !REDUCED()) || REDUCED();
return (
{/* hover tooltip */}
{hover != null && (
{data[hover].label}
Gasto {data[hover].expenseFmt}
)}
{/* x labels */}
{data[0].label}
{data[Math.floor(data.length / 2)].label}
{data[data.length - 1].label}
);
}
/* ---------------- Card limit gauge (semicircle) ---------------- */
function CardGauge({ pct, color }) {
const [ref, seen] = useInView();
const R = 54, C = Math.PI * R; // semicircle length
const clamped = Math.min(100, pct);
const drawn = (seen && !REDUCED()) || REDUCED();
const len = (clamped / 100) * C;
return (
);
}
/* ---------------- Mini sparkline (cards mini-usage) ---------------- */
function Sparkline({ values, color }) {
const W = 100, H = 32;
const max = Math.max(...values, 1);
const pts = values.map((v, i) => `${(i / (values.length - 1)) * W},${H - (v / max) * (H - 4) - 2}`).join(' ');
return (
);
}
/* ---------------- Vertical bars (daily counts) ---------------- */
function VBars({ data, height = 140, color }) {
const [ref, seen] = useInView();
const max = Math.max(...data.map((d) => d.count), 1);
const drawn = (seen && !REDUCED()) || REDUCED();
return (
{data.map((d, i) => {
const h = (d.count / max) * 100;
return (
);
})}
{hover != null &&
{data[hover].label} · {fmt ? fmt(data[hover].cents) : data[hover].cents}
}
{data.map((d, i) => {d.label})}
);
}
/* ---------------- Calendar heatmap (gastos por dia) ---------------- */
function CalHeatmap({ data, fmt }) {
const [ref, seen] = useInView();
const max = Math.max(...data.map((d) => d.cents), 1);
// group into weeks (columns), 7 rows (dow)
const weeks = [];
let cur = null;
data.forEach((d, i) => {
if (i === 0 || d.dow === 0) { cur = []; weeks.push(cur); }
cur.push(d);
});
const color = (c) => {
if (c === 0) return 'var(--surface-warm)';
const t = c / max;
if (t < 0.25) return 'color-mix(in srgb, var(--coral) 25%, white)';
if (t < 0.5) return 'color-mix(in srgb, var(--coral) 50%, white)';
if (t < 0.75) return 'color-mix(in srgb, var(--coral) 75%, white)';
return 'var(--coral-strong)';
};
return (
{weeks.map((w, wi) => (
{Array.from({ length: 7 }).map((_, dow) => {
const cell = w.find((x) => x.dow === dow);
if (!cell) return
;
const idx = wi * 7 + dow;
return
;
})}
))}
menos
{['var(--surface-warm)', 'color-mix(in srgb, var(--coral) 25%, white)', 'color-mix(in srgb, var(--coral) 50%, white)', 'color-mix(in srgb, var(--coral) 75%, white)', 'var(--coral-strong)'].map((c, i) => )}
mais
);
}
/* ---------------- Multi-series line (categoria no tempo) ---------------- */
function MultiLine({ months, series, height = 220, fmt }) {
const [ref, seen] = useInView();
const [hover, setHover] = useState(null);
const W = 720, H = height, padX = 8, padY = 22;
const all = series.flatMap((s) => s.values);
const max = Math.max(...all, 1);
const x = (i) => padX + (i / (months.length - 1)) * (W - padX * 2);
const y = (c) => H - padY - (c / max) * (H - padY * 2);
const drawn = (seen && !REDUCED()) || REDUCED();
return (
{series.map((s, i) => {s.emoji} {s.name})}
{months.map((m, i) => {m})}
);
}
Object.assign(window, { BarsByCategory, DonutByMethod, TrendLine, CardGauge, Sparkline, VBars, AreaTrend, CalHeatmap, MultiLine, CHART_COLORS });