// ============================================================================
// components.jsx — shared atoms + formatting helpers + the energy palette
// ============================================================================
const COLORS = {
pv: '#3ddc84', // solar green
batt: '#a78bfa', // battery purple
grid: '#facc15', // grid yellow
load: '#f87171', // load red
soc: '#22d3ee' // SOC (state of charge) cyan
};
// ---- formatting -------------------------------------------------------------
// Live power: whole watts under 1 kW ("450 W"), kilowatts from there ("1.25 kW") (SOLAR-24).
// Power is never kWh; that is energy. Chart axes keep kW throughout, one unit per axis.
function fmtPowerParts(w) {
if (w == null || isNaN(w)) return ['—', ''];
if (Math.abs(w) < 999.5) return [String(Math.round(w) || 0), 'W'];
return [(w / 1000).toFixed(2), 'kW'];
}
function fmtPower(w) {
const [v, u] = fmtPowerParts(w);
return u ? v + ' ' + u : v;
}
// Battery power as shown everywhere: + = the house is using the battery, − = charging.
// There is no setting for it (SOLAR-71). Within ±5 W it is idle and shows 0, never −0.00.
function battShown(w) {
if (w == null || isNaN(w)) return w;
return Math.abs(w) <= 5 ? 0 : w;
}
// The hour it is AT THE PLANT, not on the viewer's device. An owner abroad, or a
// plant in another country, must see "typical at this hour" for the plant's hour.
function plantHour(tz, d = new Date()) {
try {
if (tz) return Number(new Intl.DateTimeFormat('en-GB', { timeZone: tz, hour: '2-digit', hour12: false }).format(d)) % 24;
} catch (e) {}
return d.getHours();
}
function fmtPlantTime(d, tz) {
try { return d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit', timeZone: tz || undefined }); }
catch (e) { return d.toLocaleTimeString('en-GB', { hour: '2-digit', minute: '2-digit' }); }
}
function fmtKwh(k) {
if (k == null || isNaN(k)) return '—';
return (Math.round(k * 10) / 10).toLocaleString('en', { minimumFractionDigits: 1, maximumFractionDigits: 1 }) + ' kWh';
}
// compact energy: switches to MWh above 1,000 kWh so big totals stay short
function fmtEnergySmart(k) {
if (k == null || isNaN(k)) return '—';
if (Math.abs(k) >= 1000) return (k / 1000).toLocaleString('en', { minimumFractionDigits: 2, maximumFractionDigits: 2 }) + ' MWh';
return fmtKwh(k);
}
// energy as [number, unit] for big stat tiles (kWh, or MWh above 1,000)
function fmtEnergyParts(k) {
if (k == null || isNaN(k)) return ['—', ''];
if (Math.abs(k) >= 1000) return [(k / 1000).toLocaleString('en', { minimumFractionDigits: 2, maximumFractionDigits: 2 }), 'MWh'];
return [(Math.round(k * 10) / 10).toLocaleString('en', { minimumFractionDigits: 1, maximumFractionDigits: 1 }), 'kWh'];
}
// Money in the plant's currency. Intl handles symbol, placement and decimals for
// any ISO code, so a UK plant shows £ and an Irish one € with nothing else changing.
const _moneyFmt = {};
// The currency's home locale, so R / £ / € / A$ render as their owners expect rather
// than as "ZAR 12" in a browser set to another language.
const CURRENCY_LOCALE = { ZAR: 'en-ZA', GBP: 'en-GB', EUR: 'en-IE', AUD: 'en-AU', NZD: 'en-NZ', USD: 'en-US', KES: 'en-KE', NGN: 'en-NG', ZMW: 'en-ZM', BWP: 'en-BW', NAD: 'en-NA', MZN: 'pt-MZ', INR: 'en-IN', PKR: 'en-PK', BRL: 'pt-BR' };
function moneyFormatter(dp) {
const cur = window.PLANT_CURRENCY || 'ZAR';
const key = cur + ':' + dp;
if (!_moneyFmt[key]) {
try {
_moneyFmt[key] = new Intl.NumberFormat(CURRENCY_LOCALE[cur] || navigator.language || 'en', { style: 'currency', currency: cur, minimumFractionDigits: dp, maximumFractionDigits: dp });
} catch (e) {
_moneyFmt[key] = { format: (v) => cur + '\u2009' + v.toFixed(dp) };
}
}
return _moneyFmt[key];
}
// No space after a leading symbol: "R57", not the "R 57" en-ZA (and pt-BR) prints. Only the
// space straight after the symbol goes; thousands spaces and a symbol written after the
// amount ("12 MTn") are left alone.
function moneyText(dp, v) {
const f = moneyFormatter(dp);
if (!f.formatToParts) return f.format(v);
const parts = f.formatToParts(v);
return parts.filter((p, i) => !(p.type === 'literal' && /^\s+$/.test(p.value) && i > 0 && parts[i - 1].type === 'currency')).map(p => p.value).join('');
}
function fmtMoney(v, dp = 2) {
if (v == null || isNaN(v)) return '—';
return moneyText(dp, v);
}
// compact: switches to k above 10,000
function fmtMoneySmart(v) {
if (v == null || isNaN(v)) return '—';
if (Math.abs(v) >= 10000) return moneyText(1, v / 1000) + 'k';
return fmtMoney(v, 0);
}
// the symbol alone, for labels like "R/kWh"
function moneySymbol() {
try { return moneyFormatter(0).formatToParts(0).find(p => p.type === 'currency')?.value || window.PLANT_CURRENCY; }
catch (e) { return window.PLANT_CURRENCY || ''; }
}
const fmtRand = fmtMoney, fmtRandSmart = fmtMoneySmart;
function fmtTime(d) {
return d.toLocaleTimeString('en', { hour: '2-digit', minute: '2-digit', hour12: false });
}
// bad-sensor guard (e.g. battery temp -100°C per API caveat)
function cleanTemp(t) {return t == null || t <= -50 || t > 120 ? null : t;}
// ---- Card -------------------------------------------------------------------
// No coloured left edge: on a tab where every tile is the same subject it was six identical
// strips saying nothing, and where subjects differ the number already carries the colour.
function Card({ children, className = '', style = {}, ...rest }) {
return (
{children}
);
}
// ---- Big number stat tile (the "4 tabs" the user liked) ---------------------
function StatTile({ label, value, unit, accent, sub, bar, loading }) {
return (
{label}
{/* The placeholder is sized in the number's own font, so it is 44px on a desktop
and 34px on a phone, like the number that replaces it. */}
{loading
?
:
{value}{unit && {unit}}
}
{bar != null &&
}
{sub &&
{sub}
}
);
}
// ---- Small label / readout row ---------------------------------------------
function Metric({ label, value, unit, accent, mono = true }) {
return (
{label}
{value}
{unit && {unit}}
);
}
// ---- Badge ------------------------------------------------------------------
function Badge({ tone = 'neutral', children, dot }) {
return {dot && }{children};
}
// ---- Segmented control ------------------------------------------------------
function Segmented({ options, value, onChange, size = 'md' }) {
return (
{options.map((o) => {
const val = typeof o === 'string' ? o : o.value;
const lab = typeof o === 'string' ? o : o.label;
return (
);
})}
);
}
// ---- Toggle (switch) --------------------------------------------------------
function Toggle({ checked, onChange, label, hint }) {
return (
);
}
// ---- Legend chip (clickable series toggle) ----------------------------------
function LegendChip({ color, label, value, active, onClick }) {
const valStyle = active ? { color } : {};
return (
);
}
// ---- tiny inline sparkline --------------------------------------------------
function Sparkline({ data, color, width = 120, height = 32, fill = true }) {
const vals = data.filter((v) => v != null);
if (!vals.length) return ;
const max = Math.max(...vals, 1),min = Math.min(...vals, 0);
const rng = max - min || 1;
const step = width / (data.length - 1);
let d = '',area = '';
data.forEach((v, i) => {
if (v == null) return;
const x = i * step,y = height - (v - min) / rng * (height - 4) - 2;
d += (d ? 'L' : 'M') + x.toFixed(1) + ' ' + y.toFixed(1) + ' ';
area += (area ? 'L' : 'M') + x.toFixed(1) + ' ' + y.toFixed(1) + ' ';
});
area += `L ${width} ${height} L 0 ${height} Z`;
const gid = 'sg' + color.replace('#', '');
return (
);
}
// ---- Info tooltip dot -------------------------------------------------------
// Skeleton placeholder. A shimmering block standing in for content that hasn't
// arrived, so the page keeps its shape instead of collapsing to a spinner.
function Skeleton({ w = '100%', h = 14, r = 7, style = {}, className = '' }) {
return ;
}
// A stat tile's worth of skeleton — label line, value line, matching the real card so
// nothing jumps when the data lands.
// The LABEL is static text, so it renders for real — only the value shimmers. Heights
// are measured off the live card (.mini-label 14px, .mini-value 26px) so the tile lands
// at the same 95px either way and nothing shifts when the number arrives.
function SkeletonTile({ label }) {
return (
{label}
);
}
function InfoDot({ text }) {
// aria-describedby ties the bubble to the dot, so a screen reader on the dot hears the
// explanation instead of an unnamed note.
const id = React.useId();
// On open, shift the 210px bubble so it stays 8px inside the window (SOLAR-26).
const place = (e) => {
const r = e.currentTarget.getBoundingClientRect(), half = 105, mid = r.left + r.width / 2;
const shift = Math.max(8 + half - mid, Math.min(0, window.innerWidth - 8 - half - mid));
e.currentTarget.style.setProperty('--shift', Math.round(shift) + 'px');
};
return (
{text});
}
// ---- Section heading --------------------------------------------------------
function SectionTitle({ children, right }) {
return (