{Array.from({ length: 24 }).map((_, h) => (
{String(h).padStart(2, '0')}
))}
{data.map((row, d) => (
{days[d]}
{row.map((v, h) => (
e.currentTarget.style.transform = 'scale(1.4)'}
onMouseLeave={e => e.currentTarget.style.transform = 'scale(1)'}
/>
))}
))}
LOW
{[0.1, 0.3, 0.5, 0.7, 0.9].map(v => (
))}
HIGH
);
}
// ── Candlestick ──────────────────────────────────────────
function Candlestick({ data, width = 400, height = 180 }) {
const padL = 40, padR = 10, padT = 8, padB = 20;
const iw = width - padL - padR, ih = height - padT - padB;
const [hover, setHover] = useState(null);
const hi = Math.max(...data.map(d => d.h));
const lo = Math.min(...data.map(d => d.l));
const range = hi - lo;
const y = (v) => padT + ih - ((v - lo) / range) * ih;
const bw = iw / data.length * 0.7;
const gap = iw / data.length * 0.3;
const x = (i) => padL + i * (iw / data.length) + gap / 2;
const ticks = [lo, lo + range * 0.5, hi];
return (
{hover && (
Day -{data.length - 1 - hover.i}
Open${data[hover.i].o.toFixed(3)}
High${data[hover.i].h.toFixed(3)}
Low${data[hover.i].l.toFixed(3)}
Close${data[hover.i].c.toFixed(3)}
)}
);
}
// ── Histogram ────────────────────────────────────────────
// Distribution primitive. Accepts raw `values` (component bins them) or
// pre-computed `bins`. Bars can be value-weighted via `weight` so height
// reflects summed weight (e.g. USD) instead of raw count.
const fmtEdge = (n) => {
if (!isFinite(n)) return '∞';
if (Math.abs(n) >= 1000) return fmtNum(n, 1);
return Number.isInteger(n) ? String(n) : n.toFixed(2);
};
function Histogram({
values, bins: preBins, weight, binCount = 20, binWidth,
width = 480, height = 220, color = 'var(--chart-1)',
xLabel, yLabel, valueFormat = fmtUSD, clampRange, markers = [], colorBands = [],
}) {
const padL = 50, padR = 18, padT = 16, padB = 34;
const iw = width - padL - padR, ih = height - padT - padB;
const [hover, setHover] = useState(null); // bin index
const weighted = !!(weight && weight.length) || !!(preBins && preBins.some(b => b.weight != null));
const { bins, total } = useMemo(() => {
let bins;
if (preBins && preBins.length) {
bins = preBins.map(b => ({ x0: b.x0, x1: b.x1, count: b.count ?? 0, weight: b.weight ?? b.count ?? 0 }));
} else {
const vals = values || [];
let lo, hi;
if (clampRange) { lo = clampRange[0]; hi = clampRange[1]; }
else {
lo = vals.length ? Math.min(...vals) : 0;
hi = vals.length ? Math.max(...vals) : 1;
}
if (!isFinite(lo) || !isFinite(hi) || lo === hi) { lo = lo || 0; hi = lo + 1; }
let nBins, bw;
if (binWidth) { bw = binWidth; nBins = Math.max(1, Math.ceil((hi - lo) / bw)); }
else { nBins = Math.max(1, Math.round(binCount)); bw = (hi - lo) / nBins; }
bins = Array.from({ length: nBins }, (_, i) => ({ x0: lo + i * bw, x1: lo + (i + 1) * bw, count: 0, weight: 0 }));
vals.forEach((v, idx) => {
const w = weighted ? (weight[idx] ?? 0) : 1;
// Fold outliers into the end bins when a clampRange is given.
const cv = clampRange ? Math.max(lo, Math.min(hi - 1e-9, v)) : v;
let bi = Math.floor((cv - lo) / bw);
if (bi < 0) bi = 0;
if (bi >= nBins) bi = nBins - 1;
bins[bi].count += 1;
bins[bi].weight += w;
});
}
const total = bins.reduce((a, b) => a + (weighted ? b.weight : b.count), 0) || 1;
return { bins, total };
}, [values, preBins, weight, binCount, binWidth, clampRange, weighted]);
if (!bins.length) return null;
const metric = (b) => (weighted ? b.weight : b.count);
const maxY = (Math.max(...bins.map(metric)) || 1) * 1.1;
const x0v = bins[0].x0, x1v = bins[bins.length - 1].x1;
const span = (x1v - x0v) || 1;
const xPx = (v) => padL + ((v - x0v) / span) * iw;
const y = (v) => padT + ih - (v / maxY) * ih;
const bandColor = (b) => {
if (!colorBands.length) return color;
const c = (b.x0 + b.x1) / 2;
const band = colorBands.find(bd => c >= bd.from && c < bd.to);
return band ? band.color : color;
};
// y gridlines
const ticks = [0, 0.25, 0.5, 0.75, 1].map(t => maxY * t);
// x edge ticks, thinned so they stay legible with many bins
const edgeStep = Math.max(1, Math.ceil(bins.length / 8));
const edges = bins.filter((_, i) => i % edgeStep === 0).map(b => b.x0).concat([x1v]);
return (
{hover != null && (() => {
const b = bins[hover];
const cx = (xPx(b.x0) + xPx(b.x1)) / 2;
const share = (metric(b) / total) * 100;
return (
{fmtEdge(b.x0)} – {fmtEdge(b.x1)}
Count{b.count}
{weighted && (
{yLabel || 'Value'}{valueFormat(b.weight, 2)}
)}
Share{share.toFixed(1)}%
);
})()}
);
}
// ── HealthFactorHistogram ────────────────────────────────
// Preset wrapper over Histogram for health-factor distributions.
// mode 'usd' weights bars by debtUsd (dollars at risk); 'count' counts positions.
function HealthFactorHistogram({
positions = [], mode = 'usd', width = 480, height = 220, binCount = 24,
clampRange = [0, 3], showThreshold = true, markers, colorBands,
}) {
const weighted = mode === 'usd';
const values = positions.map(p => p.hf);
const weight = weighted ? positions.map(p => p.debtUsd ?? 0) : undefined;
const defaultMarkers = [{ value: 1.0, label: 'Liquidation', color: 'var(--red)' }];
if (showThreshold) defaultMarkers.push({ value: 1.5, label: '1.5', color: 'var(--yellow)' });
const defaultBands = [
{ from: 0, to: 1.0, color: 'var(--red)' },
{ from: 1.0, to: 1.5, color: 'var(--yellow)' },
{ from: 1.5, to: Infinity, color: 'var(--green)' },
];
return (
fmtNum(n, 0))}
markers={markers || defaultMarkers}
colorBands={colorBands || defaultBands}
xLabel="Health Factor"
yLabel={weighted ? 'Debt at risk' : 'Positions'}
/>
);
}
Object.assign(window, { AreaChart, StackedBarChart, Treemap, Sparkline, Leaderboard, Heatmap, Candlestick, Histogram, HealthFactorHistogram });