/* Shared primitives: KPI tiles, sparklines, gauges, chip styles */
const { useEffect, useRef, useState } = React;
/* Small label */
function Lbl({ children, ...rest }) {
return {children}
;
}
/* Chip with semantic state */
function Chip({ tone = "info", children }) {
return (
{children}
);
}
/* Live pulse chip */
function LiveChip({ label = "LIVE" }) {
return (
{label}
);
}
/* Big numeric readout: value w/ unit */
function Readout({ value, unit, size = "lg", tone, fmt = (v) => v.toFixed(1) }) {
const cls = { xl: "readout-xl", lg: "readout-lg", md: "readout-md", sm: "readout-sm" }[size] || "readout-lg";
const colorVar = tone ? `var(--${tone})` : "var(--fg-0)";
return (
{typeof value === "number" ? fmt(value) : value}
{unit && {unit}}
);
}
/* Delta indicator */
function Delta({ v, fmt = (x) => (x > 0 ? "+" : "") + x.toFixed(1), unit = "%" }) {
const tone = v > 0 ? "ok" : v < 0 ? "err" : "fg-2";
const arrow = v > 0 ? "▲" : v < 0 ? "▼" : "–";
return (
{arrow} {fmt(v)}{unit}
);
}
/* KPI Tile */
function KpiTile({ label, value, unit, tone, delta, footer, fmt, size = "md" }) {
return (
{label}
{delta !== undefined &&
}
{footer &&
{footer}
}
);
}
/* Sparkline (compact) */
function Sparkline({ data, color = "var(--solar)", fill = true, height = 36, width = 120, showDot = false }) {
if (!data || !data.length) return null;
const min = Math.min(...data, 0);
const max = Math.max(...data);
const range = max - min || 1;
const step = width / (data.length - 1 || 1);
const points = data.map((v, i) => [i * step, height - ((v - min) / range) * (height - 4) - 2]);
const path = points.map(([x, y], i) => (i ? `L ${x} ${y}` : `M ${x} ${y}`)).join(" ");
const area = `${path} L ${width} ${height} L 0 ${height} Z`;
return (
);
}
/* Horizontal gauge bar (battery SoC, etc.) */
function GaugeBar({ value, max = 100, color = "var(--battery)", height = 8, ticks = 10 }) {
const pct = Math.max(0, Math.min(100, (value / max) * 100));
return (
{Array.from({ length: ticks - 1 }).map((_, i) => (
))}
);
}
/* Radial gauge (battery SoC etc.) */
function RadialGauge({ value, max = 100, size = 140, color = "var(--battery)", label, sub }) {
const pct = Math.max(0, Math.min(1, value / max));
const stroke = 8;
const r = (size - stroke) / 2;
const c = 2 * Math.PI * r;
const off = c * (1 - pct * 0.75); // 3/4 arc
const rot = 135; // start bottom-left
return (
{Math.round(value)}%
{label &&
{label}
}
{sub &&
{sub}
}
);
}
/* ZA load-shedding stage pill */
function LoadShedStage({ stage }) {
const color = stage === 0 ? "var(--ok)" : stage <= 2 ? "var(--warn)" : stage <= 4 ? "var(--load)" : "var(--err)";
const label = stage === 0 ? "NO LOAD SHED" : `STAGE ${stage}`;
return (
{label}
);
}
/* Timestamp (e.g. 15:42:08 SAST) */
function Clock({ baseHour = 12.5 }) {
const [s, setS] = useState(0);
useEffect(() => {
const id = setInterval(() => setS((x) => x + 1), 1000);
return () => clearInterval(id);
}, []);
const totalSec = baseHour * 3600 + s;
const hh = Math.floor(totalSec / 3600) % 24;
const mm = Math.floor((totalSec / 60) % 60);
const ss = Math.floor(totalSec % 60);
const pad = (n) => String(n).padStart(2, "0");
return {pad(hh)}:{pad(mm)}:{pad(ss)} SAST;
}
/* Data row */
function Row({ label, value, tone, mono = true }) {
return (
{label}
{value}
);
}
Object.assign(window, { Lbl, Chip, LiveChip, Readout, Delta, KpiTile, Sparkline, GaugeBar, RadialGauge, LoadShedStage, Clock, Row });