|
|
/**
|
|
|
* SolarPanel Component
|
|
|
* Cycles between: Solar Image → Solar Indices → X-Ray Flux Chart → Lunar Phase
|
|
|
*/
|
|
|
import React, { useState, useEffect, useCallback, useMemo } from 'react';
|
|
|
import { getMoonPhase } from '../utils/geo.js';
|
|
|
|
|
|
const MODES = ['image', 'indices', 'xray', 'lunar'];
|
|
|
const MODE_LABELS = { image: 'SOLAR', indices: 'SOLAR INDICES', xray: 'X-RAY FLUX', lunar: 'LUNAR' };
|
|
|
const MODE_ICONS = { image: '◫', indices: '⊞', xray: '☽', lunar: '☼' };
|
|
|
const MODE_TITLES = { image: 'Show solar indices', indices: 'Show X-ray flux', xray: 'Show lunar phase', lunar: 'Show solar image' };
|
|
|
|
|
|
// Flare class from flux value (W/m²)
|
|
|
const getFlareClass = (flux) => {
|
|
|
if (!flux || flux <= 0) return { letter: '?', color: '#666', level: 0 };
|
|
|
if (flux >= 1e-4) return { letter: 'X', color: '#ff0000', level: 4 };
|
|
|
if (flux >= 1e-5) return { letter: 'M', color: '#ff6600', level: 3 };
|
|
|
if (flux >= 1e-6) return { letter: 'C', color: '#ffcc00', level: 2 };
|
|
|
if (flux >= 1e-7) return { letter: 'B', color: '#00cc88', level: 1 };
|
|
|
return { letter: 'A', color: '#4488ff', level: 0 };
|
|
|
};
|
|
|
|
|
|
// Format flux value for display
|
|
|
const formatFlux = (flux) => {
|
|
|
if (!flux || flux <= 0) return '--';
|
|
|
const cls = getFlareClass(flux);
|
|
|
const base = flux >= 1e-4 ? flux / 1e-4 :
|
|
|
flux >= 1e-5 ? flux / 1e-5 :
|
|
|
flux >= 1e-6 ? flux / 1e-6 :
|
|
|
flux >= 1e-7 ? flux / 1e-7 : flux / 1e-8;
|
|
|
return `${cls.letter}${base.toFixed(1)}`;
|
|
|
};
|
|
|
|
|
|
export const SolarPanel = ({ solarIndices }) => {
|
|
|
const [mode, setMode] = useState(() => {
|
|
|
try {
|
|
|
const saved = localStorage.getItem('openhamclock_solarPanelMode');
|
|
|
if (MODES.includes(saved)) return saved;
|
|
|
// Migrate old boolean format
|
|
|
if (saved === 'indices') return 'indices';
|
|
|
return 'image';
|
|
|
} catch (e) { return 'image'; }
|
|
|
});
|
|
|
const [imageType, setImageType] = useState(() => {
|
|
|
try { return localStorage.getItem('openhamclock_solarImageType') || '0193'; } catch { return '0193'; }
|
|
|
});
|
|
|
const [xrayData, setXrayData] = useState(null);
|
|
|
const [xrayLoading, setXrayLoading] = useState(false);
|
|
|
|
|
|
const cycleMode = () => {
|
|
|
const nextIdx = (MODES.indexOf(mode) + 1) % MODES.length;
|
|
|
const next = MODES[nextIdx];
|
|
|
setMode(next);
|
|
|
try { localStorage.setItem('openhamclock_solarPanelMode', next); } catch (e) {}
|
|
|
};
|
|
|
|
|
|
// Fetch X-ray data when xray mode is active
|
|
|
const fetchXray = useCallback(async () => {
|
|
|
try {
|
|
|
setXrayLoading(true);
|
|
|
const res = await fetch('/api/noaa/xray');
|
|
|
if (res.ok) {
|
|
|
const data = await res.json();
|
|
|
// Filter to 0.1-0.8nm (long wavelength, standard for flare classification)
|
|
|
const filtered = data.filter(d => d.energy === '0.1-0.8nm' && d.flux > 0);
|
|
|
setXrayData(filtered);
|
|
|
}
|
|
|
} catch (err) {
|
|
|
console.error('X-ray fetch error:', err);
|
|
|
} finally {
|
|
|
setXrayLoading(false);
|
|
|
}
|
|
|
}, []);
|
|
|
|
|
|
useEffect(() => {
|
|
|
if (mode === 'xray') {
|
|
|
fetchXray();
|
|
|
const interval = setInterval(fetchXray, 5 * 60 * 1000); // 5 min refresh
|
|
|
return () => clearInterval(interval);
|
|
|
}
|
|
|
}, [mode, fetchXray]);
|
|
|
|
|
|
const imageTypes = {
|
|
|
'0193': { name: 'AIA 193Å', desc: 'Corona' },
|
|
|
'0304': { name: 'AIA 304Å', desc: 'Chromosphere' },
|
|
|
'0171': { name: 'AIA 171Å', desc: 'Quiet Corona' },
|
|
|
'0094': { name: 'AIA 94Å', desc: 'Flaring' },
|
|
|
'HMIIC': { name: 'HMI Int', desc: 'Visible' }
|
|
|
};
|
|
|
|
|
|
const timestamp = Math.floor(Date.now() / 900000) * 900000;
|
|
|
const imageUrl = `https://sdo.gsfc.nasa.gov/assets/img/latest/latest_256_${imageType}.jpg?t=${timestamp}`;
|
|
|
|
|
|
const getKpColor = (value) => {
|
|
|
if (value >= 7) return '#ff0000';
|
|
|
if (value >= 5) return '#ff6600';
|
|
|
if (value >= 4) return '#ffcc00';
|
|
|
if (value >= 3) return '#88cc00';
|
|
|
return '#00ff88';
|
|
|
};
|
|
|
|
|
|
const kpData = solarIndices?.data?.kp || solarIndices?.data?.kIndex;
|
|
|
|
|
|
// X-Ray flux chart renderer
|
|
|
const renderXrayChart = () => {
|
|
|
if (xrayLoading && !xrayData) {
|
|
|
return <div style={{ textAlign: 'center', color: 'var(--text-muted)', padding: '20px' }}>Loading X-ray data...</div>;
|
|
|
}
|
|
|
if (!xrayData || xrayData.length === 0) {
|
|
|
return <div style={{ textAlign: 'center', color: 'var(--text-muted)', padding: '20px' }}>No X-ray data available</div>;
|
|
|
}
|
|
|
|
|
|
// Use last ~360 points (~6 hours at 1-min resolution)
|
|
|
const points = xrayData.slice(-360);
|
|
|
const currentFlux = points[points.length - 1]?.flux;
|
|
|
const currentClass = getFlareClass(currentFlux);
|
|
|
const peakFlux = Math.max(...points.map(p => p.flux));
|
|
|
const peakClass = getFlareClass(peakFlux);
|
|
|
|
|
|
// Chart dimensions
|
|
|
const W = 280, H = 130;
|
|
|
const padL = 28, padR = 6, padT = 8, padB = 18;
|
|
|
const chartW = W - padL - padR;
|
|
|
const chartH = H - padT - padB;
|
|
|
|
|
|
// Log scale: 1e-8 (A1.0) to 1e-3 (X10)
|
|
|
const logMin = -8, logMax = -3;
|
|
|
const logRange = logMax - logMin;
|
|
|
|
|
|
const fluxToY = (flux) => {
|
|
|
if (!flux || flux <= 0) return padT + chartH;
|
|
|
const log = Math.log10(flux);
|
|
|
const clamped = Math.max(logMin, Math.min(logMax, log));
|
|
|
return padT + chartH - ((clamped - logMin) / logRange) * chartH;
|
|
|
};
|
|
|
|
|
|
// Build SVG path
|
|
|
const pathD = points.map((p, i) => {
|
|
|
const x = padL + (i / (points.length - 1)) * chartW;
|
|
|
const y = fluxToY(p.flux);
|
|
|
return `${i === 0 ? 'M' : 'L'}${x.toFixed(1)},${y.toFixed(1)}`;
|
|
|
}).join(' ');
|
|
|
|
|
|
// Gradient fill path
|
|
|
const fillD = pathD + ` L${(padL + chartW).toFixed(1)},${(padT + chartH).toFixed(1)} L${padL},${(padT + chartH).toFixed(1)} Z`;
|
|
|
|
|
|
// Flare class threshold lines
|
|
|
const thresholds = [
|
|
|
{ flux: 1e-7, label: 'B', color: '#00cc88' },
|
|
|
{ flux: 1e-6, label: 'C', color: '#ffcc00' },
|
|
|
{ flux: 1e-5, label: 'M', color: '#ff6600' },
|
|
|
{ flux: 1e-4, label: 'X', color: '#ff0000' }
|
|
|
];
|
|
|
|
|
|
// Time labels
|
|
|
const firstTime = new Date(points[0]?.time_tag);
|
|
|
const lastTime = new Date(points[points.length - 1]?.time_tag);
|
|
|
const midTime = new Date((firstTime.getTime() + lastTime.getTime()) / 2);
|
|
|
const fmt = (d) => `${String(d.getUTCHours()).padStart(2, '0')}:${String(d.getUTCMinutes()).padStart(2, '0')}`;
|
|
|
|
|
|
return (
|
|
|
<div>
|
|
|
{/* Current level display */}
|
|
|
<div style={{
|
|
|
display: 'flex',
|
|
|
justifyContent: 'space-between',
|
|
|
alignItems: 'center',
|
|
|
marginBottom: '6px',
|
|
|
padding: '4px 8px',
|
|
|
background: 'var(--bg-tertiary)',
|
|
|
borderRadius: '6px'
|
|
|
}}>
|
|
|
<div>
|
|
|
<span style={{ fontSize: '10px', color: 'var(--text-muted)' }}>Current </span>
|
|
|
<span style={{
|
|
|
fontSize: '18px', fontWeight: '700', color: currentClass.color,
|
|
|
fontFamily: 'Orbitron, monospace'
|
|
|
}}>
|
|
|
{formatFlux(currentFlux)}
|
|
|
</span>
|
|
|
</div>
|
|
|
<div>
|
|
|
<span style={{ fontSize: '10px', color: 'var(--text-muted)' }}>6h Peak </span>
|
|
|
<span style={{
|
|
|
fontSize: '14px', fontWeight: '600', color: peakClass.color,
|
|
|
fontFamily: 'Orbitron, monospace'
|
|
|
}}>
|
|
|
{formatFlux(peakFlux)}
|
|
|
</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* SVG Chart */}
|
|
|
<svg width="100%" viewBox={`0 0 ${W} ${H}`} preserveAspectRatio="xMidYMid meet"
|
|
|
style={{ background: 'var(--bg-tertiary)', borderRadius: '6px' }}>
|
|
|
|
|
|
{/* Flare class background bands */}
|
|
|
{thresholds.map((t, i) => {
|
|
|
const y1 = fluxToY(t.flux);
|
|
|
const y0 = i === 0 ? padT + chartH : fluxToY(thresholds[i - 1].flux);
|
|
|
return (
|
|
|
<rect key={t.label} x={padL} y={y1} width={chartW} height={y0 - y1}
|
|
|
fill={t.color} opacity={0.06} />
|
|
|
);
|
|
|
})}
|
|
|
{/* X class band to top */}
|
|
|
<rect x={padL} y={padT} width={chartW}
|
|
|
height={fluxToY(1e-4) - padT} fill="#ff0000" opacity={0.06} />
|
|
|
|
|
|
{/* Threshold lines */}
|
|
|
{thresholds.map(t => {
|
|
|
const y = fluxToY(t.flux);
|
|
|
return (
|
|
|
<g key={t.label}>
|
|
|
<line x1={padL} y1={y} x2={padL + chartW} y2={y}
|
|
|
stroke={t.color} strokeWidth="0.5" strokeDasharray="3,3" opacity={0.5} />
|
|
|
<text x={padL + 2} y={y - 2} fill={t.color} fontSize="8" fontWeight="600"
|
|
|
fontFamily="JetBrains Mono, monospace">{t.label}</text>
|
|
|
</g>
|
|
|
);
|
|
|
})}
|
|
|
|
|
|
{/* Gradient fill under curve */}
|
|
|
<defs>
|
|
|
<linearGradient id="xrayGrad" x1="0" y1="0" x2="0" y2="1">
|
|
|
<stop offset="0%" stopColor={currentClass.color} stopOpacity="0.4" />
|
|
|
<stop offset="100%" stopColor={currentClass.color} stopOpacity="0.05" />
|
|
|
</linearGradient>
|
|
|
</defs>
|
|
|
<path d={fillD} fill="url(#xrayGrad)" />
|
|
|
|
|
|
{/* Flux line */}
|
|
|
<path d={pathD} fill="none" stroke={currentClass.color} strokeWidth="1.5" />
|
|
|
|
|
|
{/* Time axis labels */}
|
|
|
<text x={padL} y={H - 2} fill="var(--text-muted, #888)" fontSize="8"
|
|
|
fontFamily="JetBrains Mono, monospace">{fmt(firstTime)}</text>
|
|
|
<text x={padL + chartW / 2} y={H - 2} fill="var(--text-muted, #888)" fontSize="8"
|
|
|
fontFamily="JetBrains Mono, monospace" textAnchor="middle">{fmt(midTime)}</text>
|
|
|
<text x={padL + chartW} y={H - 2} fill="var(--text-muted, #888)" fontSize="8"
|
|
|
fontFamily="JetBrains Mono, monospace" textAnchor="end">{fmt(lastTime)} UTC</text>
|
|
|
</svg>
|
|
|
|
|
|
<div style={{ fontSize: '9px', color: 'var(--text-muted)', marginTop: '3px', textAlign: 'center' }}>
|
|
|
GOES • 0.1–0.8nm • 6hr
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
// Lunar phase renderer
|
|
|
const renderLunar = () => {
|
|
|
const now = new Date();
|
|
|
const phase = getMoonPhase(now); // 0-1, 0=new, 0.5=full
|
|
|
const illumination = Math.round((1 - Math.cos(phase * 2 * Math.PI)) / 2 * 100);
|
|
|
|
|
|
// Phase name
|
|
|
let phaseName = 'New Moon';
|
|
|
if (phase >= 0.0625 && phase < 0.1875) phaseName = 'Waxing Crescent';
|
|
|
else if (phase >= 0.1875 && phase < 0.3125) phaseName = 'First Quarter';
|
|
|
else if (phase >= 0.3125 && phase < 0.4375) phaseName = 'Waxing Gibbous';
|
|
|
else if (phase >= 0.4375 && phase < 0.5625) phaseName = 'Full Moon';
|
|
|
else if (phase >= 0.5625 && phase < 0.6875) phaseName = 'Waning Gibbous';
|
|
|
else if (phase >= 0.6875 && phase < 0.8125) phaseName = 'Last Quarter';
|
|
|
else if (phase >= 0.8125 && phase < 0.9375) phaseName = 'Waning Crescent';
|
|
|
|
|
|
// Find next full moon & new moon by scanning forward
|
|
|
const findNextPhase = (targetPhase, label) => {
|
|
|
const d = new Date(now);
|
|
|
for (let i = 1; i <= 35; i++) {
|
|
|
d.setDate(d.getDate() + 1);
|
|
|
const p = getMoonPhase(d);
|
|
|
const diff = Math.abs(p - targetPhase);
|
|
|
if (diff < 0.018 || diff > 0.982) {
|
|
|
return d.toLocaleDateString(undefined, { month: 'short', day: 'numeric' });
|
|
|
}
|
|
|
}
|
|
|
return '—';
|
|
|
};
|
|
|
const nextFull = findNextPhase(0.5, 'Full');
|
|
|
const nextNew = findNextPhase(0.0, 'New');
|
|
|
|
|
|
// SVG moon — uses a crescent/gibbous mask technique
|
|
|
// phase 0=new(dark), 0.25=first quarter(right lit), 0.5=full(all lit), 0.75=last quarter(left lit)
|
|
|
const R = 60; // moon radius
|
|
|
const CX = 70, CY = 70;
|
|
|
|
|
|
// The terminator curve is an ellipse whose x-radius varies with phase
|
|
|
// At new moon (0): fully dark. At full (0.5): fully lit.
|
|
|
// phase 0-0.5: right side lit (waxing), 0.5-1: left side lit (waning)
|
|
|
const angle = phase * 2 * Math.PI;
|
|
|
const terminatorX = R * Math.cos(angle); // ranges from R (new) through 0 (quarter) to -R (full) and back
|
|
|
|
|
|
// Build the lit area path
|
|
|
// Right half arc (from top to bottom) is always an arc of radius R
|
|
|
// Left boundary (terminator) is an ellipse with rx = |terminatorX|
|
|
|
const buildMoonPath = () => {
|
|
|
// Lit portion: we draw two arcs — the outer limb and the terminator
|
|
|
// For waxing (0 < phase < 0.5): right side is lit
|
|
|
// For waning (0.5 < phase < 1): left side is lit
|
|
|
|
|
|
if (phase < 0.01 || phase > 0.99) {
|
|
|
// New moon — no lit area
|
|
|
return null;
|
|
|
}
|
|
|
if (phase > 0.49 && phase < 0.51) {
|
|
|
// Full moon — entire circle lit
|
|
|
return `M${CX},${CY - R} A${R},${R} 0 1,1 ${CX},${CY + R} A${R},${R} 0 1,1 ${CX},${CY - R}`;
|
|
|
}
|
|
|
|
|
|
const absTermX = Math.abs(terminatorX);
|
|
|
|
|
|
if (phase < 0.5) {
|
|
|
// Waxing — right side lit
|
|
|
// Outer arc: top to bottom along right limb (sweep=1, clockwise)
|
|
|
// Terminator: bottom to top (elliptical arc)
|
|
|
const sweepTerminator = phase < 0.25 ? 1 : 0; // concave before quarter, convex after
|
|
|
return `M${CX},${CY - R} A${R},${R} 0 0,1 ${CX},${CY + R} A${absTermX},${R} 0 0,${sweepTerminator} ${CX},${CY - R}`;
|
|
|
} else {
|
|
|
// Waning — left side lit
|
|
|
// Outer arc: top to bottom along left limb (sweep=0, counter-clockwise)
|
|
|
// Terminator: bottom to top
|
|
|
const sweepTerminator = phase > 0.75 ? 1 : 0;
|
|
|
return `M${CX},${CY - R} A${R},${R} 0 0,0 ${CX},${CY + R} A${absTermX},${R} 0 0,${sweepTerminator} ${CX},${CY - R}`;
|
|
|
}
|
|
|
};
|
|
|
|
|
|
const litPath = buildMoonPath();
|
|
|
|
|
|
return (
|
|
|
<div>
|
|
|
{/* Moon SVG */}
|
|
|
<div style={{ textAlign: 'center', marginBottom: '6px' }}>
|
|
|
<svg width="140" height="140" viewBox="0 0 140 140" style={{ display: 'block', margin: '0 auto' }}>
|
|
|
<defs>
|
|
|
{/* Crater texture */}
|
|
|
<radialGradient id="moonSurface" cx="40%" cy="35%" r="60%">
|
|
|
<stop offset="0%" stopColor="#e8e4d8" />
|
|
|
<stop offset="100%" stopColor="#c8c0ae" />
|
|
|
</radialGradient>
|
|
|
<radialGradient id="crater1" cx="50%" cy="50%" r="50%">
|
|
|
<stop offset="0%" stopColor="#b0a898" />
|
|
|
<stop offset="100%" stopColor="#c4bca8" />
|
|
|
</radialGradient>
|
|
|
{/* Clip to circle */}
|
|
|
<clipPath id="moonClip">
|
|
|
<circle cx={CX} cy={CY} r={R} />
|
|
|
</clipPath>
|
|
|
</defs>
|
|
|
|
|
|
{/* Dark side (always full circle, dark) */}
|
|
|
<circle cx={CX} cy={CY} r={R} fill="#1a1a2e" stroke="#333" strokeWidth="1.5" />
|
|
|
|
|
|
{/* Lit surface with craters — clipped to lit path */}
|
|
|
{litPath && (
|
|
|
<g clipPath="url(#moonClip)">
|
|
|
<path d={litPath} fill="url(#moonSurface)" />
|
|
|
{/* Mare (dark patches) */}
|
|
|
<ellipse cx={CX - 12} cy={CY - 8} rx="18" ry="14" fill="#b8b0a0" opacity="0.5" clipPath="url(#moonClip)" />
|
|
|
<ellipse cx={CX + 15} cy={CY + 10} rx="12" ry="10" fill="#b0a898" opacity="0.4" clipPath="url(#moonClip)" />
|
|
|
<ellipse cx={CX - 5} cy={CY + 20} rx="14" ry="8" fill="#ada598" opacity="0.35" clipPath="url(#moonClip)" />
|
|
|
{/* Craters */}
|
|
|
<circle cx={CX + 20} cy={CY - 20} r="6" fill="url(#crater1)" opacity="0.5" />
|
|
|
<circle cx={CX - 25} cy={CY + 5} r="4" fill="url(#crater1)" opacity="0.4" />
|
|
|
<circle cx={CX + 8} cy={CY + 25} r="5" fill="url(#crater1)" opacity="0.45" />
|
|
|
<circle cx={CX - 10} cy={CY - 25} r="3.5" fill="url(#crater1)" opacity="0.35" />
|
|
|
<circle cx={CX + 25} cy={CY + 5} r="3" fill="url(#crater1)" opacity="0.3" />
|
|
|
</g>
|
|
|
)}
|
|
|
|
|
|
{/* Subtle glow */}
|
|
|
<circle cx={CX} cy={CY} r={R + 3} fill="none" stroke="rgba(200,200,180,0.1)" strokeWidth="4" />
|
|
|
</svg>
|
|
|
</div>
|
|
|
|
|
|
{/* Phase info */}
|
|
|
<div style={{ textAlign: 'center', marginBottom: '8px' }}>
|
|
|
<div style={{ fontSize: '14px', fontWeight: '700', color: 'var(--text-primary)' }}>{phaseName}</div>
|
|
|
<div style={{ fontSize: '12px', color: 'var(--accent-amber)', fontFamily: 'Orbitron, monospace', marginTop: '2px' }}>
|
|
|
{illumination}% illuminated
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* Next phases */}
|
|
|
<div style={{
|
|
|
display: 'flex', gap: '8px', justifyContent: 'center',
|
|
|
fontSize: '10px', fontFamily: 'JetBrains Mono, monospace',
|
|
|
}}>
|
|
|
<div style={{
|
|
|
background: 'var(--bg-tertiary)', borderRadius: '4px', padding: '4px 8px', textAlign: 'center',
|
|
|
}}>
|
|
|
<div style={{ color: 'var(--text-muted)' }}>● New</div>
|
|
|
<div style={{ color: 'var(--text-secondary)', fontWeight: '600' }}>{nextNew}</div>
|
|
|
</div>
|
|
|
<div style={{
|
|
|
background: 'var(--bg-tertiary)', borderRadius: '4px', padding: '4px 8px', textAlign: 'center',
|
|
|
}}>
|
|
|
<div style={{ color: 'var(--text-muted)' }}>○ Full</div>
|
|
|
<div style={{ color: 'var(--text-secondary)', fontWeight: '600' }}>{nextFull}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<div className="panel" style={{ padding: '8px' }}>
|
|
|
{/* Header with cycle button */}
|
|
|
<div style={{
|
|
|
display: 'flex',
|
|
|
justifyContent: 'space-between',
|
|
|
alignItems: 'center',
|
|
|
marginBottom: '6px'
|
|
|
}}>
|
|
|
<span style={{ fontSize: '12px', color: mode === 'lunar' ? 'var(--accent-purple)' : 'var(--accent-amber)', fontWeight: '700' }}>
|
|
|
{mode === 'lunar' ? '🌙' : '☀'} {MODE_LABELS[mode]}
|
|
|
</span>
|
|
|
<div style={{ display: 'flex', gap: '4px', alignItems: 'center' }}>
|
|
|
{mode === 'image' && (
|
|
|
<select
|
|
|
value={imageType}
|
|
|
onChange={(e) => { setImageType(e.target.value); try { localStorage.setItem('openhamclock_solarImageType', e.target.value); } catch {} }}
|
|
|
onClick={(e) => e.stopPropagation()}
|
|
|
style={{
|
|
|
background: 'var(--bg-tertiary)',
|
|
|
border: '1px solid var(--border-color)',
|
|
|
color: 'var(--text-secondary)',
|
|
|
fontSize: '10px',
|
|
|
padding: '2px 4px',
|
|
|
borderRadius: '3px',
|
|
|
cursor: 'pointer'
|
|
|
}}
|
|
|
>
|
|
|
{Object.entries(imageTypes).map(([key, val]) => (
|
|
|
<option key={key} value={key}>{val.desc}</option>
|
|
|
))}
|
|
|
</select>
|
|
|
)}
|
|
|
<button
|
|
|
onClick={cycleMode}
|
|
|
style={{
|
|
|
background: 'var(--bg-tertiary)',
|
|
|
border: '1px solid var(--border-color)',
|
|
|
color: 'var(--text-secondary)',
|
|
|
fontSize: '10px',
|
|
|
padding: '2px 6px',
|
|
|
borderRadius: '3px',
|
|
|
cursor: 'pointer'
|
|
|
}}
|
|
|
title={MODE_TITLES[mode]}
|
|
|
>
|
|
|
{MODE_ICONS[mode]}
|
|
|
</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{mode === 'indices' ? (
|
|
|
/* Solar Indices View */
|
|
|
<div>
|
|
|
{solarIndices?.data ? (
|
|
|
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
|
|
|
{/* SFI Row */}
|
|
|
<div style={{ background: 'var(--bg-tertiary)', borderRadius: '6px', padding: '8px', display: 'flex', alignItems: 'center', gap: '12px' }}>
|
|
|
<div style={{ minWidth: '60px' }}>
|
|
|
<div style={{ fontSize: '10px', color: 'var(--text-muted)' }}>SFI</div>
|
|
|
<div style={{ fontSize: '22px', fontWeight: '700', color: '#ff8800', fontFamily: 'Orbitron, monospace' }}>
|
|
|
{solarIndices.data.sfi?.current || '--'}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style={{ flex: 1 }}>
|
|
|
{solarIndices.data.sfi?.history?.length > 0 && (
|
|
|
<svg width="100%" height="30" viewBox="0 0 100 30" preserveAspectRatio="none">
|
|
|
{(() => {
|
|
|
const data = solarIndices.data.sfi.history.slice(-20);
|
|
|
const values = data.map(d => d.value);
|
|
|
const max = Math.max(...values, 1);
|
|
|
const min = Math.min(...values);
|
|
|
const range = max - min || 1;
|
|
|
const points = data.map((d, i) => {
|
|
|
const x = (i / (data.length - 1)) * 100;
|
|
|
const y = 30 - ((d.value - min) / range) * 25;
|
|
|
return `${x},${y}`;
|
|
|
}).join(' ');
|
|
|
return <polyline points={points} fill="none" stroke="#ff8800" strokeWidth="1.5" />;
|
|
|
})()}
|
|
|
</svg>
|
|
|
)}
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* K-Index Row */}
|
|
|
<div style={{ background: 'var(--bg-tertiary)', borderRadius: '6px', padding: '8px', display: 'flex', alignItems: 'center', gap: '12px' }}>
|
|
|
<div style={{ minWidth: '60px' }}>
|
|
|
<div style={{ fontSize: '10px', color: 'var(--text-muted)' }}>K-Index</div>
|
|
|
<div style={{ fontSize: '22px', fontWeight: '700', color: getKpColor(kpData?.current), fontFamily: 'Orbitron, monospace' }}>
|
|
|
{kpData?.current ?? '--'}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style={{ flex: 1 }}>
|
|
|
{kpData?.forecast?.length > 0 ? (
|
|
|
<div style={{ display: 'flex', gap: '2px', alignItems: 'flex-end', height: '30px' }}>
|
|
|
{kpData.forecast.slice(0, 8).map((item, i) => {
|
|
|
const val = typeof item === 'object' ? item.value : item;
|
|
|
return (
|
|
|
<div key={i} style={{
|
|
|
flex: 1,
|
|
|
height: `${Math.max(10, (val / 9) * 100)}%`,
|
|
|
background: getKpColor(val),
|
|
|
borderRadius: '2px',
|
|
|
opacity: 0.8
|
|
|
}} title={`Kp ${val}`} />
|
|
|
);
|
|
|
})}
|
|
|
</div>
|
|
|
) : kpData?.history?.length > 0 ? (
|
|
|
<div style={{ display: 'flex', gap: '2px', alignItems: 'flex-end', height: '30px' }}>
|
|
|
{kpData.history.slice(-8).map((item, i) => {
|
|
|
const val = typeof item === 'object' ? item.value : item;
|
|
|
return (
|
|
|
<div key={i} style={{
|
|
|
flex: 1,
|
|
|
height: `${Math.max(10, (val / 9) * 100)}%`,
|
|
|
background: getKpColor(val),
|
|
|
borderRadius: '2px',
|
|
|
opacity: 0.8
|
|
|
}} title={`Kp ${val}`} />
|
|
|
);
|
|
|
})}
|
|
|
</div>
|
|
|
) : (
|
|
|
<div style={{ color: 'var(--text-muted)', fontSize: '10px' }}>No forecast data</div>
|
|
|
)}
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
{/* SSN Row */}
|
|
|
<div style={{ background: 'var(--bg-tertiary)', borderRadius: '6px', padding: '8px', display: 'flex', alignItems: 'center', gap: '12px' }}>
|
|
|
<div style={{ minWidth: '60px' }}>
|
|
|
<div style={{ fontSize: '10px', color: 'var(--text-muted)' }}>SSN</div>
|
|
|
<div style={{ fontSize: '22px', fontWeight: '700', color: '#aa88ff', fontFamily: 'Orbitron, monospace' }}>
|
|
|
{solarIndices.data.ssn?.current || '--'}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div style={{ flex: 1 }}>
|
|
|
{solarIndices.data.ssn?.history?.length > 0 && (
|
|
|
<svg width="100%" height="30" viewBox="0 0 100 30" preserveAspectRatio="none">
|
|
|
{(() => {
|
|
|
const data = solarIndices.data.ssn.history.slice(-20);
|
|
|
const values = data.map(d => d.value);
|
|
|
const max = Math.max(...values, 1);
|
|
|
const min = Math.min(...values, 0);
|
|
|
const range = max - min || 1;
|
|
|
const points = data.map((d, i) => {
|
|
|
const x = (i / (data.length - 1)) * 100;
|
|
|
const y = 30 - ((d.value - min) / range) * 25;
|
|
|
return `${x},${y}`;
|
|
|
}).join(' ');
|
|
|
return <polyline points={points} fill="none" stroke="#aa88ff" strokeWidth="1.5" />;
|
|
|
})()}
|
|
|
</svg>
|
|
|
)}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
) : (
|
|
|
<div style={{ textAlign: 'center', color: 'var(--text-muted)', padding: '20px' }}>
|
|
|
Loading solar data...
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
|
|
) : mode === 'xray' ? (
|
|
|
/* X-Ray Flux Chart View */
|
|
|
renderXrayChart()
|
|
|
) : mode === 'lunar' ? (
|
|
|
/* Lunar Phase View */
|
|
|
renderLunar()
|
|
|
) : (
|
|
|
/* Solar Image View */
|
|
|
<div style={{ textAlign: 'center' }}>
|
|
|
<img
|
|
|
src={imageUrl}
|
|
|
alt="SDO Solar Image"
|
|
|
style={{
|
|
|
width: '100%',
|
|
|
maxWidth: '200px',
|
|
|
borderRadius: '50%',
|
|
|
border: '2px solid var(--border-color)'
|
|
|
}}
|
|
|
onError={(e) => {
|
|
|
e.target.style.display = 'none';
|
|
|
}}
|
|
|
/>
|
|
|
<div style={{ fontSize: '10px', color: 'var(--text-muted)', marginTop: '4px' }}>
|
|
|
SDO/AIA • Live from NASA
|
|
|
</div>
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
export default SolarPanel;
|
