// Solkart — daily production curve // Shows the smoothed PV power curve from midnight Oslo through the end of // available forecast data, with a live "now" marker. Click a fylke on the // map to focus the chart on that fylke; click again to return to all of Norge. const { useEffect, useMemo, useRef, useState } = React; // Round a number up to a "nice" axis-friendly maximum. function niceCeil(v) { if (v <= 0) return 1; const exp = Math.floor(Math.log10(v)); const base = Math.pow(10, exp); const m = v / base; let nice; if (m <= 1) nice = 1; else if (m <= 1.5) nice = 1.5; else if (m <= 2) nice = 2; else if (m <= 3) nice = 3; else if (m <= 5) nice = 5; else if (m <= 7.5) nice = 7.5; else nice = 10; return nice * base; } function fmtPower(kW) { if (kW >= 1000) return (kW / 1000).toFixed(kW >= 10000 ? 0 : 1) + " MW"; return Math.round(kW).toLocaleString("nb-NO") + " kW"; } function fmtOsloHour(date) { return new Intl.DateTimeFormat("nb-NO", { timeZone: "Europe/Oslo", hour: "2-digit", minute: "2-digit", }).format(date); } // Sample the smooth area-preserving curve at a uniform step from midnight // over the next 24 h. Returns an array of { ms, kW }. function sampleCurve(midnightMs, fylkeId, stepMs) { const out = []; const endMs = midnightMs + 24 * 3600000; for (let ms = midnightMs; ms <= endMs; ms += stepMs) { const w = window.SOLKART_SIM.instantPower(new Date(ms), fylkeId || null); out.push({ ms, kW: w / 1000 }); } return out; } function ProductionChart({ now, selectedFylke, fylkeLabel, currentKW, onClear }) { // Logical SVG canvas — width-flexible via viewBox. const W = 1000, H = 280; const padL = 56, padR = 24, padT = 18, padB = 36; const innerW = W - padL - padR; const innerH = H - padT - padB; const midnight = window.SOLKART_SIM.osloMidnight(now); const midnightMs = midnight.getTime(); const dayEndMs = midnightMs + 24 * 3600000; // The curve is computed from forecast data (changes only when forecast // refreshes — every 15 min). Tie the memo to a coarse minute key so we // don't resample every second when `now` ticks. const minuteKey = Math.floor(now.getTime() / 60000); const samples = useMemo( () => sampleCurve(midnightMs, selectedFylke, 5 * 60 * 1000), [midnightMs, selectedFylke, minuteKey] ); // Hourly average values for picking out the day's peak. const hourlyKey = `${minuteKey}-${selectedFylke || ""}`; const hourly = useMemo( () => window.SOLKART_SIM.dailyEntries(selectedFylke || null) .filter(e => e.ms >= midnightMs && e.ms < dayEndMs), [hourlyKey, midnightMs, dayEndMs] ); // Y-axis max — leave a bit of headroom so the curve doesn't kiss the top. const peakKW = Math.max(0, ...samples.map(s => s.kW), ...hourly.map(h => h.kW)); const yMaxKW = niceCeil(Math.max(peakKW * 1.08, 1)); // Geometry helpers const xFor = (ms) => padL + ((ms - midnightMs) / (24 * 3600000)) * innerW; const yFor = (kW) => padT + innerH - (Math.min(kW, yMaxKW) / yMaxKW) * innerH; // Build the area + line paths const linePath = samples.length === 0 ? "" : samples .map((s, i) => `${i === 0 ? "M" : "L"} ${xFor(s.ms).toFixed(1)} ${yFor(s.kW).toFixed(1)}`) .join(" "); const areaPath = samples.length === 0 ? "" : `${linePath} L ${xFor(samples[samples.length - 1].ms).toFixed(1)} ${yFor(0).toFixed(1)} L ${xFor(samples[0].ms).toFixed(1)} ${yFor(0).toFixed(1)} Z`; // "Now" position const nowMs = now.getTime(); const inDay = nowMs >= midnightMs && nowMs <= dayEndMs; const nowX = inDay ? xFor(nowMs) : null; const nowY = inDay ? yFor(currentKW) : null; // Peak hour annotation const peak = hourly.length > 0 ? hourly.reduce((b, e) => (e.kW > b.kW ? e : b), hourly[0]) : null; // Hover state — read in viewBox coords, snap to nearest sample. const svgRef = useRef(null); const [hover, setHover] = useState(null); // { x, kW, ms } in viewBox coords function handleMove(e) { if (!svgRef.current || samples.length === 0) return; const rect = svgRef.current.getBoundingClientRect(); const px = (e.clientX - rect.left) * (W / rect.width); if (px < padL || px > W - padR) { setHover(null); return; } // Find nearest sample by x let bestI = 0, bestDx = Infinity; for (let i = 0; i < samples.length; i++) { const dx = Math.abs(xFor(samples[i].ms) - px); if (dx < bestDx) { bestDx = dx; bestI = i; } } const s = samples[bestI]; setHover({ x: xFor(s.ms), y: yFor(s.kW), kW: s.kW, ms: s.ms }); } function handleLeave() { setHover(null); } // Hour tick positions (every 3 h) const hourTicks = []; for (let h = 0; h <= 24; h += 3) { hourTicks.push({ h, x: xFor(midnightMs + h * 3600000) }); } // Y gridlines at 0, 25, 50, 75, 100% of yMax const yGrid = [0, 0.25, 0.5, 0.75, 1].map(f => ({ f, y: yFor(yMaxKW * f), label: fmtPower(yMaxKW * f), })); const title = selectedFylke ? `Solproduksjon i ${fylkeLabel} i dag` : "Solproduksjon i Norge i dag"; return (
Sanntidskurve

{title}

{peak && peak.kW > 0 && (
Topp i dag {fmtPower(peak.kW)} kl {fmtOsloHour(new Date(peak.ms + 1800000))}
)} {selectedFylke && ( )}
{ if (e.touches[0]) handleMove(e.touches[0]); }} onTouchEnd={handleLeave} > {/* Y gridlines + labels */} {yGrid.map((g, i) => ( {i === 0 ? "0" : g.label} ))} {/* Hour ticks */} {hourTicks.map(({ h, x }) => ( {String(h).padStart(2, "0")} ))} {/* Area + line */} {areaPath && } {linePath && } {/* Past/future divider — past is filled solid, future is faded */} {nowX != null && ( )} {/* Now line + dot */} {nowX != null && ( {/* "Now" pill */} )} {/* Hover crosshair */} {hover && ( )}
); } // Floating label near the "now" line. function NowPill({ x, y, kW, time, W, padR }) { const text = `${fmtPower(kW)} · kl ${time}`; const approxWidth = Math.min(220, 70 + text.length * 6.2); const flipLeft = x + approxWidth + 14 > W - padR; const px = flipLeft ? x - approxWidth - 8 : x + 8; return ( {text} ); } function HoverPill({ x, y, kW, time, W, padR, padL }) { const text = `${fmtPower(kW)} · kl ${time}`; const w = Math.min(200, 60 + text.length * 6.4); const tx = Math.max(padL, Math.min(W - padR - w, x - w / 2)); const ty = Math.max(20, y - 30); return ( {text} ); } function LivePulseInline() { return ( ); } window.ProductionChart = ProductionChart;