// Chart primitives — tiny SVG components, no external deps.
// Usage: pass series, width, height. Interactivity via inline handlers.
const { useState, useRef, useMemo, useEffect, useCallback } = React;
// ── Helpers ──────────────────────────────────────────────
const fmtUSD = (v, digits = 2) => {
if (v >= 1e9) return `$${(v / 1e9).toFixed(digits)}B`;
if (v >= 1e6) return `$${(v / 1e6).toFixed(digits)}M`;
if (v >= 1e3) return `$${(v / 1e3).toFixed(digits)}K`;
return `$${v.toFixed(digits)}`;
};
const fmtNum = (v, d = 2) => {
if (v >= 1e9) return `${(v / 1e9).toFixed(d)}B`;
if (v >= 1e6) return `${(v / 1e6).toFixed(d)}M`;
if (v >= 1e3) return `${(v / 1e3).toFixed(d)}K`;
return v.toFixed(d);
};
const fmtPct = (v, d = 2) => `${v.toFixed(d)}%`;
const daysAgoLabel = (offsetFromNow, totalDays) => {
const ago = totalDays - 1 - offsetFromNow;
if (ago === 0) return 'Today';
if (ago === 1) return 'Yesterday';
return `${ago}d ago`;
};
window.fmtUSD = fmtUSD; window.fmtNum = fmtNum; window.fmtPct = fmtPct;
// ── AreaChart ────────────────────────────────────────────
// ── Chart watermark ─────────────────────────────────────
function ChartWatermark({ x, y }) {
return (
DATUM LABS · AETHER
);
}
// series: [{ name, color, values: number[] }, ...]
// stacked: boolean
// markerX: optional data-index (0..len-1) at which to draw a vertical reference
// line — used e.g. for the current-utilization marker on the IRM curve
// (required by §6 of the analysis standard: every chart shows a current-state
// marker where one exists).
// markerLabel: optional short label rendered above the marker line.
function AreaChart({ series, stacked = false, width = 800, height = 280, formatter = fmtUSD, valueSuffix = '', overlayCompare = null, markerX = null, markerLabel = null, xTickFormatter = null }) {
const padL = 54, padR = 18, padT = 12, padB = 28;
const w = width, h = height;
const iw = w - padL - padR, ih = h - padT - padB;
// hover carries: i (data index), x (svg x of the data point), my (raw mouse y in
// SVG-space) so the tooltip can follow the cursor vertically. The previous
// version pinned the tooltip at top:10 which sat on top of the data near the
// peak of the chart. Tracking my fixes that.
const [hover, setHover] = useState(null);
const len = series[0]?.values.length || 0;
if (!len) return null;
// Stack if needed
const stacked_vals = useMemo(() => {
if (!stacked) return series.map(s => s.values);
const stacks = series.map(() => new Array(len).fill(0));
for (let i = 0; i < len; i++) {
let acc = 0;
for (let s = 0; s < series.length; s++) {
acc += series[s].values[i];
stacks[s][i] = acc;
}
}
return stacks;
}, [series, stacked, len]);
const maxY = useMemo(() => {
let m = 0;
if (stacked) {
for (let i = 0; i < len; i++) m = Math.max(m, stacked_vals[stacked_vals.length - 1][i]);
} else {
series.forEach(s => s.values.forEach(v => m = Math.max(m, v)));
if (overlayCompare) overlayCompare.forEach(s => s.values.forEach(v => m = Math.max(m, v)));
}
return m * 1.1;
}, [series, stacked, len, overlayCompare]);
const x = (i) => padL + (i / (len - 1)) * iw;
const y = (v) => padT + ih - (v / maxY) * ih;
// Build paths
const paths = series.map((s, si) => {
const vals = stacked ? stacked_vals[si] : s.values;
const prev = stacked && si > 0 ? stacked_vals[si - 1] : null;
let d = `M ${x(0)} ${y(vals[0])}`;
for (let i = 1; i < len; i++) d += ` L ${x(i)} ${y(vals[i])}`;
let area = d;
if (prev) {
for (let i = len - 1; i >= 0; i--) area += ` L ${x(i)} ${y(prev[i])}`;
area += ' Z';
} else {
area += ` L ${x(len - 1)} ${y(0)} L ${x(0)} ${y(0)} Z`;
}
return { d, area, color: s.color };
});
const overlayPaths = (overlayCompare || []).map(s => {
let d = `M ${x(0)} ${y(s.values[0])}`;
for (let i = 1; i < s.values.length; i++) d += ` L ${x(i)} ${y(s.values[i])}`;
return { d, color: s.color, name: s.name, values: s.values };
});
// Y ticks
const ticks = [0, 0.25, 0.5, 0.75, 1].map(t => maxY * t);
const onMove = (e) => {
const rect = e.currentTarget.getBoundingClientRect();
// Convert client coords → svg viewBox coords (rect width may differ from
// viewBox `w` because the SVG is `width="100%"`). Scaling both axes by the
// same factor keeps the cursor-following tooltip honest across breakpoints.
const sx = w / rect.width;
const sy = h / rect.height;
const mx = (e.clientX - rect.left) * sx;
const my = (e.clientY - rect.top) * sy;
const rel = (mx - padL) / iw;
if (rel < -0.02 || rel > 1.02) { setHover(null); return; }
const i = Math.max(0, Math.min(len - 1, Math.round(rel * (len - 1))));
setHover({ i, x: x(i), my });
};
return (
{hover && (() => {
// Convert tooltip x/y from svg-space back to css px so absolute
// positioning lines up with the rendered chart at any width. Right-edge
// clamp keeps the tooltip readable; vertical clamp avoids the tooltip
// hanging off the bottom of the panel.
const cssX = Math.min((hover.x + 14) / w * 100, 100 - 22);
const cssY = Math.max(2, Math.min((hover.my - 12) / h * 100, 100 - 30));
const total = series.reduce((s, ser) => s + ser.values[hover.i], 0);
return (
))}
{/* Total row — only meaningful for stacked charts (otherwise it'd
be the sum of unrelated series). Keeps the tooltip honest about
what's an aggregate vs. a slice. */}
{stacked && series.length > 1 && (
TOTAL{formatter(total, 2)}{valueSuffix}
)}
);
})()}
);
}
// ── StackedBarChart ──────────────────────────────────────
//
// Daily Flows uses this. Hover behaviour notes:
// - hit-detection on the WHOLE inner chart area (not per-bar onMouseEnter)
// so the tooltip doesn't flicker off in the gap between thin bars
// - coords are converted from client px → svg viewBox units before
// positioning the tooltip, so the cursor-following position is honest
// across responsive widths (svg renders at width="100%" but uses a
// fixed viewBox)
// - vertical indicator line + circle-on-cursor mark the hovered column
// - keyLabels prop pretty-prints raw stack keys ("supply" → "Supply")
//
function StackedBarChart({ data, keys, colors, width = 800, height = 220, formatter = fmtUSD, keyLabels }) {
const padL = 54, padR = 18, padT = 12, padB = 26;
const w = width, h = height;
const iw = w - padL - padR, ih = h - padT - padB;
// hover: { i: data index, x: svg-x of column center, my: svg-y of cursor }
const [hover, setHover] = useState(null);
const totals = data.map(d => keys.reduce((a, k) => a + d[k], 0));
const maxY = Math.max(...totals) * 1.1;
const n = data.length;
const colW = iw / n; // total column width (bar + gap)
const bw = colW * 0.7;
const gap = colW * 0.3;
const x = (i) => padL + i * colW + gap / 2;
const y = (v) => padT + ih - (v / maxY) * ih;
const ticks = [0, 0.25, 0.5, 0.75, 1].map(t => maxY * t);
// Translate cursor position → which column it falls in. Works in the gap
// between bars too, so the tooltip stays glued to the nearest column
// instead of flickering on/off as the cursor crosses gaps.
const onMove = (e) => {
const rect = e.currentTarget.getBoundingClientRect();
const sx = w / rect.width;
const sy = h / rect.height;
const mx = (e.clientX - rect.left) * sx;
const my = (e.clientY - rect.top) * sy;
if (mx < padL - 4 || mx > padL + iw + 4) { setHover(null); return; }
const idx = Math.max(0, Math.min(n - 1, Math.floor((mx - padL) / colW)));
setHover({ i: idx, x: x(idx) + bw / 2, my });
};
return (
{hover && (() => {
// Convert svg-space hover position → CSS percentages so absolute
// positioning over the SVG holds at any rendered width. Vertical
// clamp keeps the tip from hanging off the panel.
const cssX = Math.min((hover.x + 14) / w * 100, 100 - 24);
const cssY = Math.max(2, Math.min((hover.my - 12) / h * 100, 100 - 36));
return (
{/* Optional methodology note — surfaces when a tile's headline TVL
comes from a different source than the protocol's own UI (e.g.
Bucket displayed using DefiLlama's published number while
Bucket's own UI shows a slightly lower figure). Renders as a
small wrapped note under the totals. */}
{r.note && (
{r.note}
)}
);
})()}
);
}
// ── Sparkline ────────────────────────────────────────────
function Sparkline({ values, color = 'var(--orange)', width = 90, height = 32, filled = true }) {
const min = Math.min(...values), max = Math.max(...values);
const range = max - min || 1;
const d = values.map((v, i) => {
const x = (i / (values.length - 1)) * width;
const y = height - ((v - min) / range) * height;
return `${i === 0 ? 'M' : 'L'} ${x.toFixed(1)} ${y.toFixed(1)}`;
}).join(' ');
return (
);
}
// ── Horizontal bar leaderboard ───────────────────────────
function Leaderboard({ items, color = 'var(--orange)', format = fmtUSD }) {
const max = Math.max(...items.map(i => i.value));
return (