// Quark Finance — charts.jsx
// Specialized data-viz: net worth curve, sankey, risk radar, insights graph, sparkline,
// forecast cone, twin scenarios, donut, sankey-light, mission ring.
const { useMemo: useMemo2, useEffect: useEffect2, useState: useState2, useRef: useRef2 } = React;
// ─────────────────────────────────────────────────────────────
// 1. Net worth / patrimony — animated area chart with grid
// ─────────────────────────────────────────────────────────────
function QNetWorthChart({ height = 220, points, forecastFrom = 0.7 }) {
const w = 600, h = height;
const pad = { l: 12, r: 12, t: 18, b: 22 };
const innerW = w - pad.l - pad.r;
const innerH = h - pad.t - pad.b;
const min = Math.min(...points), max = Math.max(...points);
const range = max - min || 1;
const xs = points.map((_, i) => pad.l + (i / (points.length - 1)) * innerW);
const ys = points.map(p => pad.t + innerH - ((p - min) / range) * innerH);
let d = `M ${xs[0]} ${ys[0]}`;
for (let i = 1; i < xs.length; i++) {
const cx = (xs[i - 1] + xs[i]) / 2;
d += ` Q ${cx} ${ys[i - 1]} ${xs[i]} ${ys[i]}`;
}
const splitIdx = Math.floor(points.length * forecastFrom);
const realD = (() => {
let r = `M ${xs[0]} ${ys[0]}`;
for (let i = 1; i <= splitIdx; i++) {
const cx = (xs[i - 1] + xs[i]) / 2;
r += ` Q ${cx} ${ys[i - 1]} ${xs[i]} ${ys[i]}`;
}
return r;
})();
const forecastD = (() => {
let r = `M ${xs[splitIdx]} ${ys[splitIdx]}`;
for (let i = splitIdx + 1; i < points.length; i++) {
const cx = (xs[i - 1] + xs[i]) / 2;
r += ` Q ${cx} ${ys[i - 1]} ${xs[i]} ${ys[i]}`;
}
return r;
})();
const fillD = realD + ` L ${xs[splitIdx]} ${pad.t + innerH} L ${xs[0]} ${pad.t + innerH} Z`;
const months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
return (
);
}
// ─────────────────────────────────────────────────────────────
// 2. Cash flow sankey-light
// ─────────────────────────────────────────────────────────────
function QCashFlowSankey({ height = 200 }) {
const sources = [
{ id: 'salary', label: 'Salary', amount: 8400, color: '#9D4DFF' },
{ id: 'free', label: 'Freelance', amount: 1850, color: '#C084FF' },
{ id: 'inv', label: 'Investments',amount: 720, color: '#6DF3FF' },
];
const targets = [
{ id: 'rent', label: 'Housing', amount: 2400, color: '#7B2EFF' },
{ id: 'food', label: 'Food', amount: 1180, color: '#9D4DFF' },
{ id: 'sub', label: 'Subscript.', amount: 340, color: '#D946EF' },
{ id: 'transp', label: 'Transport', amount: 580, color: '#B266FF' },
{ id: 'save', label: 'Savings', amount: 4200, color: '#4ADE9B' },
{ id: 'other', label: 'Other', amount: 2270, color: '#8B7AA8' },
];
const totalIn = sources.reduce((s, x) => s + x.amount, 0);
const totalOut = targets.reduce((s, x) => s + x.amount, 0);
const w = 600, h = height;
const colW = 14;
const gap = 4;
// stack heights
let yIn = 10;
const sIn = sources.map(s => {
const sh = ((s.amount / totalIn) * (h - 20));
const o = { ...s, y: yIn, h: sh };
yIn += sh + gap;
return o;
});
let yOut = 10;
const sOut = targets.map(t => {
const sh = ((t.amount / totalOut) * (h - 20));
const o = { ...t, y: yOut, h: sh };
yOut += sh + gap;
return o;
});
// flows: each source distributes to each target proportionally
const flows = [];
sIn.forEach(s => {
let sOff = 0;
sOut.forEach(t => {
const flowAmt = (s.amount / totalIn) * t.amount;
const flowH = (flowAmt / totalIn) * (h - 20);
flows.push({
s, t,
sy: s.y + sOff,
ty: t.y + (t.h * (s.amount / totalIn)) * 0,
h: flowH,
});
sOff += flowH;
});
});
// recompute target stacking offsets
const tOffsets = {};
sOut.forEach(t => { tOffsets[t.id] = 0; });
flows.forEach(f => {
f.ty = f.t.y + tOffsets[f.t.id];
tOffsets[f.t.id] += f.h;
});
return (
);
}
// ─────────────────────────────────────────────────────────────
// 3. Risk Radar — orbital radar
// ─────────────────────────────────────────────────────────────
function QRiskRadar({ size = 360 }) {
const cx = size / 2, cy = size / 2;
const rings = [0.25, 0.5, 0.75, 1.0];
const items = [
{ angle: 25, dist: 0.35, label: 'Streaming bundle', severity: 'low', amount: '$48/mo', kind: 'subscription' },
{ angle: 75, dist: 0.55, label: 'Forgotten gym', severity: 'low', amount: '$29/mo', kind: 'subscription' },
{ angle: 130, dist: 0.85, label: 'Cloud storage 2TB · 14m unused', severity: 'high', amount: '$120/mo', kind: 'leak' },
{ angle: 185, dist: 0.42, label: 'Coffee streak ↑37%', severity: 'med', amount: '$184/mo', kind: 'pattern' },
{ angle: 245, dist: 0.62, label: 'FX fee · intl txn', severity: 'med', amount: '$22/mo', kind: 'fee' },
{ angle: 305, dist: 0.78, label: 'Loan rate change Q3', severity: 'high', amount: '+$310/mo', kind: 'risk' },
{ angle: 355, dist: 0.30, label: 'Insurance overlap', severity: 'low', amount: '$67/mo', kind: 'overlap' },
];
const sevColor = { low: '#6DF3FF', med: '#FFB547', high: '#FF5A6E' };
const maxR = size * 0.45;
return (
);
}
function QRiskRadarPanel({ size = 360 }) {
const items = [
{ label: 'Loan rate change Q3', sev: 'high', delta: '+$310/mo', cat: 'rate-risk' },
{ label: 'Cloud storage · 14m unused', sev: 'high', delta: '$120/mo', cat: 'leak' },
{ label: 'Coffee streak ↑37%', sev: 'med', delta: '$184/mo', cat: 'pattern' },
{ label: 'FX fee · intl txns', sev: 'med', delta: '$22/mo', cat: 'fee' },
{ label: 'Streaming bundle overlap', sev: 'low', delta: '$48/mo', cat: 'subs' },
];
const sevColor = { low: '#6DF3FF', med: '#FFB547', high: '#FF5A6E' };
return (
7 SIGNALS · TRACKING
{items.map((it, i) => (
{it.label}
{it.delta}
))}
);
}
// ─────────────────────────────────────────────────────────────
// 4. Quantum Insights — neural graph
// ─────────────────────────────────────────────────────────────
function QInsightsGraph({ width = 720, height = 420 }) {
const nodes = [
{ id: 'salary', x: 0.10, y: 0.30, label: 'Salary', w: 1.3, type: 'income' },
{ id: 'freelance', x: 0.10, y: 0.70, label: 'Freelance', w: 0.7, type: 'income' },
{ id: 'savings', x: 0.32, y: 0.18, label: 'Savings rate', w: 1.0, type: 'metric' },
{ id: 'food', x: 0.30, y: 0.50, label: 'Food', w: 0.8, type: 'spend' },
{ id: 'subs', x: 0.32, y: 0.82, label: 'Subscriptions', w: 0.5, type: 'spend' },
{ id: 'mood', x: 0.55, y: 0.32, label: 'Stress index', w: 0.9, type: 'signal' },
{ id: 'goal', x: 0.55, y: 0.65, label: 'Down payment', w: 1.1, type: 'goal' },
{ id: 'risk', x: 0.78, y: 0.20, label: 'Liquidity risk', w: 0.9, type: 'risk' },
{ id: 'invest', x: 0.78, y: 0.50, label: 'Index DCA', w: 1.0, type: 'asset' },
{ id: 'twin', x: 0.78, y: 0.80, label: 'Digital twin', w: 1.1, type: 'ai' },
];
const edges = [
['salary', 'savings', 'strong'],
['salary', 'food', 'med'],
['freelance', 'subs', 'med'],
['freelance', 'savings', 'weak'],
['food', 'mood', 'weak'],
['subs', 'mood', 'med'],
['savings', 'goal', 'strong'],
['savings', 'invest', 'strong'],
['mood', 'risk', 'strong'],
['goal', 'twin', 'med'],
['invest', 'twin', 'strong'],
['risk', 'twin', 'strong'],
];
const typeColor = {
income: '#6DF3FF', metric: '#C084FF', spend: '#FF7AE6', signal: '#FFB547',
goal: '#4ADE9B', risk: '#FF5A6E', asset: '#9D4DFF', ai: '#FFFFFF',
};
const w = width, h = height;
const nodeMap = Object.fromEntries(nodes.map(n => [n.id, { ...n, px: n.x * w, py: n.y * h }]));
const eW = { strong: 1.6, med: 0.9, weak: 0.5 };
const eO = { strong: 0.8, med: 0.45, weak: 0.25 };
return (
);
}
// ─────────────────────────────────────────────────────────────
// 5. Spending donut
// ─────────────────────────────────────────────────────────────
function QDonut({ size = 200, items, centerLabel, centerValue }) {
const total = items.reduce((s, x) => s + x.value, 0);
const cx = size / 2, cy = size / 2;
const r = size * 0.4, sw = size * 0.10;
let acc = 0;
return (
);
}
// ─────────────────────────────────────────────────────────────
// 6. Forecast cone
// ─────────────────────────────────────────────────────────────
function QForecastCone({ height = 260, basePoints, scenarios }) {
const w = 600, h = height;
const pad = { l: 10, r: 80, t: 14, b: 22 };
const innerW = w - pad.l - pad.r;
const innerH = h - pad.t - pad.b;
const all = [...basePoints, ...scenarios.flatMap(s => s.points)];
const min = Math.min(...all), max = Math.max(...all);
const range = max - min || 1;
const N = basePoints.length;
const xAt = (i) => pad.l + (i / (N - 1)) * innerW;
const yAt = (v) => pad.t + innerH - ((v - min) / range) * innerH;
const splitAt = Math.floor(N * 0.4);
const path = (pts) => {
let d = `M ${xAt(0)} ${yAt(pts[0])}`;
for (let i = 1; i < pts.length; i++) {
const cx = (xAt(i - 1) + xAt(i)) / 2;
d += ` Q ${cx} ${yAt(pts[i - 1])} ${xAt(i)} ${yAt(pts[i])}`;
}
return d;
};
const conePath = (() => {
const top = scenarios[0].points;
const bot = scenarios[scenarios.length - 1].points;
let d = `M ${xAt(splitAt)} ${yAt(top[splitAt])}`;
for (let i = splitAt + 1; i < N; i++) {
const cx = (xAt(i - 1) + xAt(i)) / 2;
d += ` Q ${cx} ${yAt(top[i - 1])} ${xAt(i)} ${yAt(top[i])}`;
}
for (let i = N - 1; i >= splitAt; i--) {
const cx = (xAt(i + 1) + xAt(i)) / 2;
d += ` L ${xAt(i)} ${yAt(bot[i])}`;
}
return d + ' Z';
})();
return (
);
}
Object.assign(window, {
QNetWorthChart, QCashFlowSankey, QRiskRadar, QRiskRadarPanel,
QInsightsGraph, QDonut, QForecastCone,
});