);
};
// Generic modal — used by hero spark, webcam, sensor tile chart drill-downs.
// Renders through a portal to document.body so it isn't trapped inside any
// widget's stacking/containing context (e.g. `.widget` has backdrop-filter,
// which would otherwise pin a fixed-positioned descendant to the widget box).
window.Modal = function Modal({ title, onClose, children, wide, kind, bodyClass }) {
useEffect(() => {
const onKey = (e) => { if (e.key === 'Escape') onClose(); };
document.addEventListener('keydown', onKey);
const prev = document.body.style.overflow;
document.body.style.overflow = 'hidden';
return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prev; };
}, [onClose]);
const cls = ['chart-modal', wide && 'wide', kind && `${kind}-modal`].filter(Boolean).join(' ');
const bodyCls = ['chart-modal-body', bodyClass].filter(Boolean).join(' ');
const node = (
{ if (e.target === e.currentTarget) onClose(); }}>
{title}
{children}
);
return ReactDOM.createPortal(node, document.body);
};
// toFixed (not Math.round) so trailing zeros are preserved — otherwise a
// whole-degree station reading like 12.0 °C renders as "12" with no decimals.
// Czech number format, same as the station page (/ms): decimal comma, a real
// minus sign and no "−0,0".
window.czNum = (n, d=0) => {
let s = Number(n).toFixed(d);
if (/^-0(?:\.0+)?$/.test(s)) s = s.slice(1);
return s.replace('.', ',').replace(/^-/, '−');
};
window.fmtTemp = (t, d=0) => (t == null || isNaN(t)) ? '—' : window.czNum(t, d) + '°';
window.fmtNum = (n, d=0) => (n == null || isNaN(n)) ? '—' : window.czNum(n, d);
// Smooth path through a sequence of [x, y] points using Catmull-Rom →
// cubic Bezier conversion. Unlike the simpler midpoint-Bezier approach
// (which forces a horizontal tangent at every datapoint and creates
// visible plateaus), this respects the slope formed by neighbours so the
// curve flows through the points naturally. `tension` 1 = standard, lower
// = flatter. Empty / single-point input degenerates to an empty path.
window.smoothPath = function smoothPath(pts, tension = 1) {
if (!pts || pts.length < 2) return pts && pts.length === 1 ? `M ${pts[0][0]} ${pts[0][1]}` : '';
let p = `M ${pts[0][0]} ${pts[0][1]}`;
for (let i = 0; i < pts.length - 1; i++) {
const p0 = pts[i - 1] || pts[i];
const p1 = pts[i];
const p2 = pts[i + 1];
const p3 = pts[i + 2] || p2;
const t = tension / 6;
const c1x = p1[0] + (p2[0] - p0[0]) * t;
const c1y = p1[1] + (p2[1] - p0[1]) * t;
const c2x = p2[0] - (p3[0] - p1[0]) * t;
const c2y = p2[1] - (p3[1] - p1[1]) * t;
p += ` C ${c1x} ${c1y}, ${c2x} ${c2y}, ${p2[0]} ${p2[1]}`;
}
return p;
};
// 16-point compass direction in Czech abbreviations (S, SSV, SV, VSV, …).
// The finer resolution catches intermediate headings — a 112° wind reads
// as "VJV" (východ-jihovýchod) instead of being rounded to plain "V".
window.windDir = function windDir(deg) {
if (deg == null || isNaN(deg)) return '';
const dirs = ['S','SSV','SV','VSV','V','VJV','JV','JJV','J','JJZ','JZ','ZJZ','Z','ZSZ','SZ','SSZ'];
const norm = ((deg % 360) + 360) % 360;
const idx = Math.round(norm / 22.5) % 16;
return dirs[idx];
};
// =========================================================
// Chart helpers shared by the data charts (Teplota ±24 h, Graf předpovědi).
// Charts draw in REAL pixels (viewBox = measured box) — no stretched text,
// no squashed icons — and follow the station page's chart language: solid
// hairline grid, labels in text colours, measured data solid, forecast
// (a projection) dashed only where it continues measured data.
// =========================================================
// Measured size of an element; re-measures on resize. The element must get
// its size from layout (flex/grid), not from what is drawn inside it.
// The same with a callback ref: `const [ref, box] = useBoxRef()` — also
// measures an element that appears only after the first render (a widget that
// shows a placeholder until its data arrive), which useBox(ref) would miss.
window.useBoxRef = function useBoxRef() {
const [box, setBox] = React.useState(null);
const ro = React.useRef(null);
const ref = React.useCallback((el) => {
if (ro.current) { ro.current.disconnect(); ro.current = null; }
if (!el) return;
const upd = () => {
const r = el.getBoundingClientRect();
const w = Math.round(r.width), h = Math.round(r.height);
setBox(b => (b && b.w === w && b.h === h) ? b : { w, h });
};
upd();
ro.current = new ResizeObserver(upd);
ro.current.observe(el);
}, []);
React.useEffect(() => () => ro.current && ro.current.disconnect(), []);
return [ref, box];
};
window.useBox = function useBox(ref) {
const [box, setBox] = React.useState(null);
React.useLayoutEffect(() => {
const el = ref.current;
if (!el) return undefined;
const upd = () => {
const r = el.getBoundingClientRect();
const w = Math.round(r.width), h = Math.round(r.height);
setBox(b => (b && b.w === w && b.h === h) ? b : { w, h });
};
upd();
const ro = new ResizeObserver(upd);
ro.observe(el);
return () => ro.disconnect();
}, []);
return box;
};
// "Nice" axis ticks (1 / 2 / 5 × 10^n steps) covering [min, max].
window.niceTicks = function niceTicks(min, max, count = 4) {
if (!isFinite(min) || !isFinite(max)) return { lo: 0, hi: 1, ticks: [0, 1] };
if (max - min < 1e-9) { min -= 1; max += 1; }
const raw = (max - min) / Math.max(1, count);
const mag = Math.pow(10, Math.floor(Math.log10(raw)));
const step = [1, 2, 2.5, 5, 10].map(m => m * mag).find(s => s >= raw) || 10 * mag;
const lo = Math.floor(min / step) * step, hi = Math.ceil(max / step) * step;
const ticks = [];
for (let v = lo; v <= hi + step / 2; v += step) ticks.push(+v.toFixed(6));
return { lo, hi, ticks, step };
};
// Clock-aligned time ticks every `stepH` hours between t0 and t1 (ms).
window.timeTicks = function timeTicks(t0, t1, stepH) {
const d = new Date(t0);
d.setMinutes(0, 0, 0);
while (d.getTime() < t0 || d.getHours() % stepH) d.setHours(d.getHours() + 1);
const out = [];
for (; d.getTime() <= t1; d.setHours(d.getHours() + stepH)) out.push(new Date(d));
return out;
};
// stops colouring a line/area by temperature along the y
// axis (same scale as the station page). y(v) maps °C to px.
window.TempGradient = function TempGradient({ id, y, lo, hi, dark, opacity = 1 }) {
const stops = [];
const n = 8;
for (let i = 0; i <= n; i++) {
const v = lo + (hi - lo) * (i / n);
stops.push();
}
return (
{stops}
);
};
window.hhmm = (d) => `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`;
window.isDarkTheme = () => document.documentElement.getAttribute('data-theme') !== 'light';
// Čas v tooltipech grafů — stejný na stanici i předpovědi.
window.fmtTipTime = function (d) {
const t = new Date(d), now = new Date();
const hm = t.toLocaleTimeString('cs-CZ', { hour: '2-digit', minute: '2-digit' });
const day = (x) => new Date(x.getFullYear(), x.getMonth(), x.getDate()).getTime();
const diff = Math.round((day(t) - day(now)) / 86400e3);
if (diff === 0) return `dnes ${hm}`;
if (diff === -1) return `včera ${hm}`;
if (diff === 1) return `zítra ${hm}`;
return `${['Ne', 'Po', 'Út', 'St', 'Čt', 'Pá', 'So'][t.getDay()]} ${t.getDate()}. ${t.getMonth() + 1}. ${hm}`;
};
// posuvník „Velikost písma“ (--fs) — grafy podle něj zvětší okraje pro popisky
window.fontScale = () => parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--font-scale')) || 1;
// ChartHover — the crosshair, value dots and tooltip as their OWN thin layer
// over a chart. Hover state lives here, so moving the pointer re-renders only
// this layer (a line, a few dots, a tooltip), never the chart's paths — the
// dots keep up with the cursor even on charts with hundreds of points.
// Pointer moves are coalesced to one update per animation frame.
// xs x position (px) of every data index, ascending
// marks(i) → [{ y, color }] dots at index i
// tip(i) → tooltip content for index i
// top / bottom vertical extent of the crosshair
// vb { w, h } when the chart is a uniformly scaled viewBox (xs, marks,
// top/bottom in viewBox units); otherwise everything is in px
// The tooltip sits BESIDE the crosshair (right of it, left near the right
// edge, centred only when neither fits), so it never covers the points read,
// and vertically just UNDER the pointer (above it when there's no room, and
// above a finger on touch). It follows the pointer without re-rendering.
window.ChartHover = function ChartHover({ W, H, xs, top = 0, bottom, marks, tip, vb }) {
const [i, setI] = React.useState(null);
const ref = React.useRef(null);
const tipRef = React.useRef(null);
const iRef = React.useRef(null);
const lastY = React.useRef(0);
const touch = React.useRef(false);
const place = () => {
const t = tipRef.current, el = ref.current, k = iRef.current;
if (!t || !el || k == null) return;
const r = el.getBoundingClientRect();
const cw = r.width, ch = r.height;
const px = vb ? (xs[k] / vb.w) * cw : xs[k];
const w = t.offsetWidth, h = t.offsetHeight, gap = 14;
let left = px + gap;
if (left + w > cw - 2) left = px - gap - w;
if (left < 2) left = Math.max(2, Math.min(cw - w - 2, px - w / 2));
const py = lastY.current - r.top;
let tp = touch.current ? py - h - 28 : py + 18;
if (tp + h > ch - 2) tp = py - h - 14;
tp = Math.max(2, Math.min(ch - h - 2, tp));
t.style.left = left + 'px';
t.style.top = tp + 'px';
t.style.visibility = 'visible';
};
const placeRef = React.useRef(place);
placeRef.current = place;
iRef.current = i;
React.useLayoutEffect(() => { place(); });
const raf = React.useRef(0);
const lastX = React.useRef(0);
const hideT = React.useRef(null);
React.useEffect(() => () => { cancelAnimationFrame(raf.current); clearTimeout(hideT.current); }, []);
const nearest = (mx) => {
let lo = 0, hi = xs.length - 1;
if (hi < 0) return null;
while (hi - lo > 1) { const mid = (lo + hi) >> 1; if (xs[mid] < mx) lo = mid; else hi = mid; }
return Math.abs(xs[lo] - mx) <= Math.abs(xs[hi] - mx) ? lo : hi;
};
const onMove = (e) => {
clearTimeout(hideT.current);
lastX.current = e.clientX;
lastY.current = e.clientY;
touch.current = e.pointerType !== 'mouse';
if (raf.current) return;
raf.current = requestAnimationFrame(() => {
raf.current = 0;
const el = ref.current;
if (!el) return;
const r = el.getBoundingClientRect();
const mx = lastX.current - r.left;
const k = nearest(vb ? (mx / Math.max(1, r.width)) * vb.w : mx);
if (k === iRef.current) placeRef.current(); // same point: only follow the pointer
else setI(k);
});
};
const onLeave = (e) => {
clearTimeout(hideT.current);
if (e.pointerType === 'mouse') setI(null);
else hideT.current = setTimeout(() => setI(null), 2500); // touch: let it be read
};
const x = i != null ? xs[i] : 0;
const m = i != null ? (marks(i) || []) : [];
return (