);
}
// ─── Bar row (horizontal bars, ranked list) ────────────────────────────────
function BarRow({ items, max, valueFmt = (v) => v + '%', barColor = '#1a1a18' }) {
const m = max || Math.max(...items.map(i => i.value));
return (
{items.map((it, i) => (
{it.label}{valueFmt(it.value)}
))}
);
}
// ─── Donut ─────────────────────────────────────────────────────────────────
function Donut({ segments, size = 160, thickness = 18, centerLabel, centerValue }) {
const total = segments.reduce((s, x) => s + x.value, 0);
const r = (size - thickness) / 2;
const c = 2 * Math.PI * r;
let offset = 0;
return (
{centerLabel !== undefined && (
{centerLabel}
{centerValue !== undefined &&
{centerValue}
}
)}
);
}
// ─── Heatgrid (24h active hours) ───────────────────────────────────────────
function HeatStrip({ data, max }) {
const m = max || Math.max(...data);
return (
{data.map((v, h) => {
const alpha = v / m;
return (
{(h === 0 || h === 6 || h === 12 || h === 18) && (
{h === 0 ? '12a' : h === 12 ? '12p' : h < 12 ? h + 'a' : (h - 12) + 'p'}
);
}
// ─── Trend pill ────────────────────────────────────────────────────────────
function TrendPill({ value }) {
const positive = value >= 0;
return (
{positive ? '↑' : '↓'}{fmtDelta(value)}
);
}
// ─── Daily trend (small multiples) ─────────────────────────────────────────
// Views, product clicks and clicks-to-store over time.
//
// Three facets rather than three coloured lines on one plot: modaBoard's
// palette is a single ink, so there is no categorical ramp to tell three
// series apart, and inventing one would fight the rest of the Studio. Each
// facet carries one series and names it, so identity never rests on colour.
//
// They share ONE y-scale. Independent scales would let 2 views and 200 clicks
// draw the same peak — the small-multiples version of the dual-axis mistake.
// mb_events_by_day() only returns days that have events. Drawing that directly
// would join across gaps and imply activity that never happened, so fill the
// range with explicit zeros first.
function fillDailySeries(rows, from, to) {
const byDay = new Map();
(rows || []).forEach(r => {
const key = String(r.day).slice(0, 10);
byDay.set(key, {
views: Number(r.views || 0),
productClicks: Number(r.product_clicks || 0),
outboundClicks: Number(r.outbound_clicks || 0),
});
});
const out = [];
const cur = new Date(Date.UTC(from.getUTCFullYear(), from.getUTCMonth(), from.getUTCDate()));
const end = new Date(Date.UTC(to.getUTCFullYear(), to.getUTCMonth(), to.getUTCDate()));
// Guard against a pathological range producing an unbounded loop.
let guard = 0;
while (cur <= end && guard++ < 800) {
const key = cur.toISOString().slice(0, 10);
out.push(Object.assign({ day: key }, byDay.get(key) || { views: 0, productClicks: 0, outboundClicks: 0 }));
cur.setUTCDate(cur.getUTCDate() + 1);
}
return out;
}
function DailyTrend({ days, height = 68 }) {
const ref = useRefC(null);
const [w, setW] = useStateC(640);
const [hover, setHover] = useStateC(null);
useEffectC(() => {
if (!ref.current) return;
const ro = new ResizeObserver(([e]) => setW(e.contentRect.width));
ro.observe(ref.current);
return () => ro.disconnect();
}, []);
const SERIES = [
{ key: 'views', label: 'Outfit views' },
{ key: 'productClicks', label: 'Product clicks' },
{ key: 'outboundClicks', label: 'Clicks to store' },
];
const pad = { l: 10, r: 10, t: 8, b: 6 };
const innerW = Math.max(1, w - pad.l - pad.r);
const innerH = Math.max(1, height - pad.t - pad.b);
const n = Math.max(1, days.length);
const stepX = n > 1 ? innerW / (n - 1) : innerW;
// Shared across all three facets so the panels are comparable.
const max = Math.max(1, ...days.map(d => Math.max(d.views, d.productClicks, d.outboundClicks)));
const xAt = (i) => pad.l + i * stepX;
const yAt = (v) => pad.t + innerH - (v / max) * innerH;
const onMove = (e) => {
const rect = ref.current.getBoundingClientRect();
let idx = Math.round((e.clientX - rect.left - pad.l) / stepX);
setHover(Math.max(0, Math.min(n - 1, idx)));
};
const fmtDay = (key) => {
const d = new Date(key + 'T00:00:00Z');
return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric', timeZone: 'UTC' });
};
return (