// Chart primitives for Reports
// All pure SVG, no libs. Accent-aware, theme-aware.
// Exposes window.Charts
(function() {
const { useMemo, useState } = React;
// ---------- helpers ----------
const fmt = {
money: (n, c='USD') => {
const abs = Math.abs(n);
const sign = n < 0 ? '−' : '';
if (c === 'BTC') return `${sign}₿${abs.toFixed(4)}`;
if (c === 'ETH') return `${sign}Ξ${abs.toFixed(3)}`;
if (abs >= 1e6) return `${sign}$${(abs/1e6).toFixed(2)}M`;
if (abs >= 1e3) return `${sign}$${(abs/1e3).toFixed(1)}k`;
return `${sign}$${abs.toFixed(0)}`;
},
pct: (n, d=1) => (n >= 0 ? '+' : '') + n.toFixed(d) + '%',
k: (n) => {
const abs = Math.abs(n);
if (abs >= 1e6) return (n/1e6).toFixed(1) + 'M';
if (abs >= 1e3) return (n/1e3).toFixed(0) + 'k';
return n.toFixed(0);
},
};
function niceTicks(min, max, count = 5) {
const span = max - min || 1;
const step0 = span / count;
const mag = Math.pow(10, Math.floor(Math.log10(step0)));
const norm = step0 / mag;
const step = (norm < 1.5 ? 1 : norm < 3 ? 2 : norm < 7 ? 5 : 10) * mag;
const lo = Math.floor(min / step) * step;
const hi = Math.ceil(max / step) * step;
const ticks = [];
for (let v = lo; v <= hi + step/2; v += step) ticks.push(+v.toFixed(10));
return { ticks, min: lo, max: hi };
}
// ---------- Sparkline (inline) ----------
function Spark({ data, w=120, h=28, color='var(--accent)', area=true, fill='var(--accent-bg)', thickness=1.2 }) {
const min = Math.min(...data), max = Math.max(...data);
const span = max - min || 1;
const step = w / (data.length - 1);
const pts = data.map((v, i) => [i * step, h - 2 - ((v - min)/span) * (h - 4)]);
const d = pts.map(([x,y], i) => (i?'L':'M') + x + ' ' + y).join(' ');
const fillD = d + ` L ${w} ${h} L 0 ${h} Z`;
return (
);
}
// ---------- Line / Area chart ----------
function LineChart({ series, w=640, h=260, padL=56, padR=16, padT=18, padB=28, labels=null, area=false, yFmt=fmt.k, grid=true, yZero=false, legend=true }) {
const allY = series.flatMap(s => s.data);
const minY0 = Math.min(...allY);
const maxY0 = Math.max(...allY);
const { min: yMin, max: yMax, ticks } = niceTicks(yZero ? Math.min(0, minY0) : minY0, maxY0, 5);
const span = yMax - yMin || 1;
const n = series[0].data.length;
const plotW = w - padL - padR;
const plotH = h - padT - padB;
const xOf = (i) => padL + (n <= 1 ? plotW/2 : (i/(n-1)) * plotW);
const yOf = (v) => padT + plotH - ((v - yMin)/span) * plotH;
return (
);
}
// ---------- Bar chart (vertical) ----------
function BarChart({ data, w=640, h=240, padL=48, padR=16, padT=14, padB=28, yFmt=fmt.k, color='var(--accent)', negColor='var(--neg)', labels=null, showValues=false }) {
const yMax0 = Math.max(...data, 0);
const yMin0 = Math.min(...data, 0);
const { min: yMin, max: yMax, ticks } = niceTicks(yMin0, yMax0, 4);
const span = yMax - yMin || 1;
const plotW = w - padL - padR;
const plotH = h - padT - padB;
const bw = plotW / data.length * 0.68;
const step = plotW / data.length;
const yOf = (v) => padT + plotH - ((v - yMin)/span) * plotH;
const zeroY = yOf(0);
return (
);
}
// ---------- Stacked bar chart ----------
function StackedBars({ groups, keys, colors, w=640, h=260, padL=48, padR=16, padT=14, padB=28, yFmt=fmt.k, labels=null }) {
const totals = groups.map(g => keys.reduce((s,k) => s + (g[k] || 0), 0));
const yMax0 = Math.max(...totals, 0);
const { min: yMin, max: yMax, ticks } = niceTicks(0, yMax0, 4);
const span = yMax - yMin || 1;
const plotW = w - padL - padR;
const plotH = h - padT - padB;
const bw = plotW / groups.length * 0.7;
const step = plotW / groups.length;
const yOf = (v) => padT + plotH - ((v - yMin)/span) * plotH;
return (
);
}
// ---------- Waterfall (cash flow) ----------
function Waterfall({ items, w=640, h=280, padL=64, padR=16, padT=20, padB=48, yFmt=fmt.k }) {
// items: [{label, value, type}] type: 'start'|'end'|'pos'|'neg'
let acc = 0;
const bars = items.map(it => {
if (it.type === 'start' || it.type === 'end') {
const from = 0, to = it.value;
acc = it.value;
return { ...it, from, to, total: true };
} else {
const from = acc;
acc += it.value;
return { ...it, from, to: acc };
}
});
const vals = bars.flatMap(b => [b.from, b.to, 0]);
const yMax0 = Math.max(...vals);
const yMin0 = Math.min(...vals);
const { min: yMin, max: yMax, ticks } = niceTicks(yMin0, yMax0, 5);
const span = yMax - yMin || 1;
const plotW = w - padL - padR;
const plotH = h - padT - padB;
const step = plotW / bars.length;
const bw = step * 0.65;
const yOf = (v) => padT + plotH - ((v - yMin)/span) * plotH;
return (
);
}
// ---------- Donut ----------
function Donut({ slices, w=240, h=240, inner=0.58, center=null }) {
const total = slices.reduce((a, s) => a + s.value, 0);
const cx = w/2, cy = h/2, r = Math.min(w,h)/2 - 2;
let a = -Math.PI/2;
const parts = slices.map(s => {
const frac = s.value/total;
const a2 = a + frac * Math.PI * 2;
const large = frac > 0.5 ? 1 : 0;
const x1 = cx + r * Math.cos(a), y1 = cy + r * Math.sin(a);
const x2 = cx + r * Math.cos(a2), y2 = cy + r * Math.sin(a2);
const ri = r * inner;
const xi1 = cx + ri * Math.cos(a2), yi1 = cy + ri * Math.sin(a2);
const xi2 = cx + ri * Math.cos(a), yi2 = cy + ri * Math.sin(a);
const d = `M ${x1} ${y1} A ${r} ${r} 0 ${large} 1 ${x2} ${y2} L ${xi1} ${yi1} A ${ri} ${ri} 0 ${large} 0 ${xi2} ${yi2} Z`;
a = a2;
return { ...s, d, frac };
});
return (
);
}
// ---------- Heatmap (cohort retention or day-of-week) ----------
function Heatmap({ rows, cols, values, w=640, h=280, pad=40, colorMin='var(--bg-2)', colorMax='var(--accent)', fmt=v=>v, title }) {
// values[rowIdx][colIdx]
const flat = values.flat().filter(v => v != null);
const mn = Math.min(...flat), mx = Math.max(...flat);
const cellW = (w - pad*2) / cols.length;
const cellH = (h - pad*2) / rows.length;
const mix = (v) => {
const t = mx === mn ? 0.5 : (v - mn)/(mx - mn);
return `color-mix(in oklch, ${colorMax} ${Math.round(t*100)}%, ${colorMin})`;
};
return (
);
}
// ---------- Treemap (simple binary splits) ----------
function Treemap({ items, w=520, h=280 }) {
// items: [{label, value, color}]
const total = items.reduce((a,x) => a + x.value, 0);
function layout(arr, x, y, w, h, horiz=true) {
if (!arr.length) return [];
if (arr.length === 1) return [{ ...arr[0], x, y, w, h }];
const sum = arr.reduce((a,i) => a + i.value, 0);
let acc = 0, results = [];
// split into two halves by mass
const half = sum/2;
let splitIdx = 0;
for (let i = 0; i < arr.length; i++) {
acc += arr[i].value;
if (acc >= half) { splitIdx = i + 1; break; }
}
if (splitIdx <= 0) splitIdx = 1;
if (splitIdx >= arr.length) splitIdx = arr.length - 1;
const left = arr.slice(0, splitIdx);
const right = arr.slice(splitIdx);
const leftSum = left.reduce((a,i) => a + i.value, 0);
const frac = leftSum / sum;
if (horiz) {
const w1 = w * frac;
return [
...layout(left, x, y, w1, h, !horiz),
...layout(right, x + w1, y, w - w1, h, !horiz),
];
} else {
const h1 = h * frac;
return [
...layout(left, x, y, w, h1, !horiz),
...layout(right, x, y + h1, w, h - h1, !horiz),
];
}
}
const sorted = [...items].sort((a,b) => b.value - a.value);
const rects = layout(sorted, 0, 0, w, h, w > h);
return (
);
}
// ---------- Candlestick ----------
function Candles({ data, w=640, h=220, padL=56, padR=16, padT=10, padB=28, labels=null }) {
// data: [{o,h,l,c}]
const allY = data.flatMap(d => [d.h, d.l]);
const { min: yMin, max: yMax, ticks } = niceTicks(Math.min(...allY), Math.max(...allY), 4);
const span = yMax - yMin || 1;
const plotW = w - padL - padR;
const plotH = h - padT - padB;
const step = plotW / data.length;
const bw = step * 0.58;
const yOf = v => padT + plotH - ((v - yMin)/span) * plotH;
return (
);
}
// ---------- Horizontal bars ----------
function HBars({ items, w=420, h=null, rowH=22, xFmt=fmt.money, barColor='var(--accent)', max=null }) {
const mx = max != null ? max : Math.max(...items.map(i => i.value));
const H = h || items.length * rowH + 8;
const labelW = 140;
const valW = 64;
const barArea = w - labelW - valW - 16;
return (
);
}
// ---------- Progress ring ----------
function Ring({ value, max=100, w=84, h=84, color='var(--accent)', track='var(--bg-3)', thickness=8, label, sublabel }) {
const cx = w/2, cy = h/2;
const r = Math.min(w,h)/2 - thickness/2 - 1;
const circ = 2 * Math.PI * r;
const pct = Math.min(1, value/max);
return (
);
}
// ---------- Sankey (simplified 2-column) ----------
function Sankey2({ left, right, flows, w=640, h=320 }) {
// left, right: [{id,label,color}]
// flows: [{from: leftId, to: rightId, value}]
const lTot = left.map(l => flows.filter(f => f.from === l.id).reduce((a,f) => a + f.value, 0));
const rTot = right.map(r => flows.filter(f => f.to === r.id).reduce((a,f) => a + f.value, 0));
const totL = lTot.reduce((a,v) => a + v, 0);
const totR = rTot.reduce((a,v) => a + v, 0);
const pad = 10;
const colW = 14;
const gap = (h - pad*2) * 0.04;
const lHeights = lTot.map(v => (v/totL) * (h - pad*2 - gap*(left.length-1)));
const rHeights = rTot.map(v => (v/totR) * (h - pad*2 - gap*(right.length-1)));
const lY = []; { let y = pad; lHeights.forEach(ht => { lY.push(y); y += ht + gap; }); }
const rY = []; { let y = pad; rHeights.forEach(ht => { rY.push(y); y += ht + gap; }); }
// cursors for where flows attach inside each node
const lCur = lY.map(() => 0);
const rCur = rY.map(() => 0);
return (
);
}
// ---------- Gauge ----------
function Gauge({ value, min=0, max=100, w=200, h=120, color='var(--accent)', label, sublabel }) {
const cx = w/2, cy = h - 12;
const r = Math.min(w,h*2)/2 - 16;
const t = Math.min(1, Math.max(0, (value - min)/(max - min)));
const a1 = Math.PI; // 180 left
const a2 = a1 + t * Math.PI; // sweep right
const x1 = cx + r * Math.cos(a1), y1 = cy + r * Math.sin(a1);
const x2 = cx + r * Math.cos(a2), y2 = cy + r * Math.sin(a2);
const xe = cx + r * Math.cos(2*Math.PI), ye = cy + r * Math.sin(2*Math.PI);
return (
);
}
window.Charts = { Spark, LineChart, BarChart, StackedBars, Waterfall, Donut, Heatmap, Treemap, Candles, HBars, Ring, Sankey2, Gauge, fmt };
})();