);
}
// ─── PairedBars — this year vs last year, per month (the floor tracker) ─
function PairedBars({ data = [], aLabel = 'Last Year', bLabel = 'This Year', format = (v) => v, height = 140 }) {
if (!data.length) return null;
const max = Math.max(...data.flatMap(d => [d.a || 0, d.b || 0]), 1);
return (
{data.map((d, i) => (
{d.label}
))}
{aLabel}
{bLabel}
Below floor
);
}
// ─── AreaCurve — demand curve over the day (step interpolation) ───────
function AreaCurve({ points = [], xTicks = [], height = 120, color = 'var(--forest)', width = 480 }) {
if (!points.length) return null;
const maxY = Math.max(...points.map(p => p.y), 1);
const minX = Math.min(...points.map(p => p.x));
const maxX = Math.max(...points.map(p => p.x));
const spanX = maxX - minX || 1;
const px = (x) => ((x - minX) / spanX) * (width - 8) + 4;
const py = (y) => height - 18 - (y / maxY) * (height - 30);
let d = `M ${px(points[0].x)} ${py(points[0].y)}`;
for (let i = 1; i < points.length; i++) {
d += ` L ${px(points[i].x)} ${py(points[i - 1].y)} L ${px(points[i].x)} ${py(points[i].y)}`;
}
const area = `${d} L ${px(maxX)} ${height - 18} L ${px(minX)} ${height - 18} Z`;
return (
);
}
// ─── Dial — semicircle gauge for a 0..1 rate ──────────────────────────
// Built with stroke-dasharray on a full rather than a hand-rolled
// elliptical-arc — the previous version computed its own arc
// endpoint/large-arc-flag via trig and rendered as a broken/fragmented arc
// once a nonzero value was drawn on top of the track. A circle's dash
// pattern always starts at its own 3-o'clock point and runs clockwise, by
// spec, in every browser — rotating the whole circle 180° turns that into
// "start at 9 o'clock (left), sweep over the top, end at 3 o'clock
// (right)", which is exactly the semicircle-gauge behavior we want, with
// no per-value math that can go wrong.
function Dial({ value = 0, label, size = 120, color = 'var(--forest)', track = 'rgba(28,73,42,0.12)', textColor = 'currentColor' }) {
const v = Math.min(1, Math.max(0, Number(value) || 0));
const strokeW = Math.max(6, size * 0.08);
const pad = strokeW / 2 + 2;
const r = size / 2 - pad;
const cx = size / 2, cy = size / 2 + pad * 0.4;
const vbHeight = size / 2 + pad * 2 + 6;
const circumference = 2 * Math.PI * r;
const half = circumference / 2;
const rotate = `rotate(180 ${cx} ${cy})`;
return (
// Fixed pixel width, not width:100% — a percentage width here depends on
// the parent flex/grid item already having a resolved width, which isn't
// guaranteed (a flex item with no explicit width/basis sizes off ITS
// content, which is this 100%-wide div — a circular reference some
// browsers resolve very wrong). Explicit width+height on the