76 lines
2.8 KiB
JavaScript
76 lines
2.8 KiB
JavaScript
// Pure helpers for the Safe-to-Spend card. No DOM, no React — unit-testable.
|
|
|
|
/**
|
|
* Convert the server's cashflow timeline into SVG step-path geometry.
|
|
* Returns { line, area, points, zeroY } or null when there is nothing to draw.
|
|
*
|
|
* - X spreads entries across actual day positions (not even spacing), so a
|
|
* bill due tomorrow sits visually close to today.
|
|
* - Y maps balances; the domain always includes 0 so the zero line is honest.
|
|
* - Step shape: balance holds flat until a bill's day, then drops.
|
|
*/
|
|
export function buildTimelineGeometry(timeline, width, height, pad = 4) {
|
|
if (!Array.isArray(timeline) || timeline.length < 2) return null;
|
|
|
|
const t0 = Date.parse(timeline[0].date);
|
|
const t1 = Date.parse(timeline[timeline.length - 1].date);
|
|
const span = Math.max(t1 - t0, 1);
|
|
|
|
const balances = timeline.map(t => Number(t.balance) || 0);
|
|
const start = Number(timeline[0].balance) || 0;
|
|
// Domain: [min(0, lowest), max(starting, highest, smallest positive head-room)]
|
|
const lo = Math.min(0, ...balances);
|
|
const hi = Math.max(start, ...balances, 1);
|
|
const range = Math.max(hi - lo, 1);
|
|
|
|
const x = (date) => pad + ((Date.parse(date) - t0) / span) * (width - pad * 2);
|
|
const y = (bal) => pad + (1 - ((bal - lo) / range)) * (height - pad * 2);
|
|
|
|
const points = timeline.map((t, i) => ({
|
|
x: x(t.date),
|
|
y: y(Number(t.balance) || 0),
|
|
date: t.date,
|
|
balance: Number(t.balance) || 0,
|
|
bills: t.bills || [],
|
|
isDrop: (t.bills || []).length > 0,
|
|
isPayday: !!t.payday,
|
|
isLast: i === timeline.length - 1,
|
|
}));
|
|
|
|
// Step path: horizontal to each next x, then vertical drop.
|
|
let line = `M ${points[0].x.toFixed(2)} ${points[0].y.toFixed(2)}`;
|
|
for (let i = 1; i < points.length; i++) {
|
|
line += ` H ${points[i].x.toFixed(2)} V ${points[i].y.toFixed(2)}`;
|
|
}
|
|
|
|
const baseY = y(Math.min(0, lo) === lo && lo < 0 ? lo : 0);
|
|
const area = `${line} V ${baseY.toFixed(2)} H ${points[0].x.toFixed(2)} Z`;
|
|
|
|
return { line, area, points, zeroY: y(0) };
|
|
}
|
|
|
|
/** "5 days" / "tomorrow" / "today" */
|
|
export function daysUntilLabel(days) {
|
|
const n = Number(days);
|
|
if (!Number.isFinite(n) || n <= 0) return 'today';
|
|
if (n === 1) return 'tomorrow';
|
|
return `${n} days`;
|
|
}
|
|
|
|
/** "Jul 1" from "2026-07-01" — no Date parsing, no timezone traps. */
|
|
export function shortDate(dateStr) {
|
|
if (!dateStr || typeof dateStr !== 'string') return '';
|
|
const [, m, d] = dateStr.split('-');
|
|
const MONTHS = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
|
|
return `${MONTHS[parseInt(m, 10) - 1]} ${parseInt(d, 10)}`;
|
|
}
|
|
|
|
/** Split upcoming bills into the visible few plus an overflow count. */
|
|
export function splitUpcoming(upcoming, maxVisible = 4) {
|
|
const list = Array.isArray(upcoming) ? upcoming : [];
|
|
return {
|
|
visible: list.slice(0, maxVisible),
|
|
overflow: Math.max(0, list.length - maxVisible),
|
|
};
|
|
}
|