|
|
/**
|
|
|
* SpaceWeatherPanel Component
|
|
|
* Displays solar flux, K-index, and sunspot number
|
|
|
*/
|
|
|
import React from 'react';
|
|
|
|
|
|
export const SpaceWeatherPanel = ({ data, loading }) => {
|
|
|
const getKIndexColor = (kIndex) => {
|
|
|
const k = parseInt(kIndex);
|
|
|
if (isNaN(k)) return 'var(--text-muted)';
|
|
|
if (k >= 5) return 'var(--accent-red)';
|
|
|
if (k >= 4) return 'var(--accent-amber)';
|
|
|
return 'var(--accent-green)';
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<div className="panel" style={{ padding: '12px' }}>
|
|
|
<div className="panel-header">☀️ SPACE WEATHER</div>
|
|
|
{loading ? (
|
|
|
<div style={{ display: 'flex', justifyContent: 'center', padding: '20px' }}>
|
|
|
<div className="loading-spinner" />
|
|
|
</div>
|
|
|
) : (
|
|
|
<div style={{
|
|
|
display: 'grid',
|
|
|
gridTemplateColumns: 'repeat(3, 1fr)',
|
|
|
gap: '12px',
|
|
|
textAlign: 'center'
|
|
|
}}>
|
|
|
<div>
|
|
|
<div style={{ fontSize: '11px', color: 'var(--text-muted)', marginBottom: '4px' }}>SFI</div>
|
|
|
<div style={{
|
|
|
fontSize: '24px',
|
|
|
fontWeight: '700',
|
|
|
color: 'var(--accent-amber)',
|
|
|
fontFamily: 'Orbitron, monospace'
|
|
|
}}>
|
|
|
{data?.solarFlux || '--'}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div style={{ fontSize: '11px', color: 'var(--text-muted)', marginBottom: '4px' }}>K-INDEX</div>
|
|
|
<div style={{
|
|
|
fontSize: '24px',
|
|
|
fontWeight: '700',
|
|
|
color: getKIndexColor(data?.kIndex),
|
|
|
fontFamily: 'Orbitron, monospace'
|
|
|
}}>
|
|
|
{data?.kIndex || '--'}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div>
|
|
|
<div style={{ fontSize: '11px', color: 'var(--text-muted)', marginBottom: '4px' }}>SSN</div>
|
|
|
<div style={{
|
|
|
fontSize: '24px',
|
|
|
fontWeight: '700',
|
|
|
color: 'var(--accent-cyan)',
|
|
|
fontFamily: 'Orbitron, monospace'
|
|
|
}}>
|
|
|
{data?.sunspotNumber || '--'}
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
)}
|
|
|
{data?.conditions && (
|
|
|
<div style={{
|
|
|
textAlign: 'center',
|
|
|
marginTop: '12px',
|
|
|
padding: '6px',
|
|
|
background: data.conditions === 'GOOD' ? 'rgba(0, 255, 136, 0.1)' :
|
|
|
data.conditions === 'FAIR' ? 'rgba(255, 180, 50, 0.1)' :
|
|
|
data.conditions === 'POOR' ? 'rgba(255, 68, 102, 0.1)' : 'transparent',
|
|
|
borderRadius: '4px'
|
|
|
}}>
|
|
|
<span style={{
|
|
|
fontSize: '11px',
|
|
|
fontWeight: '600',
|
|
|
color: data.conditions === 'GOOD' ? 'var(--accent-green)' :
|
|
|
data.conditions === 'FAIR' ? 'var(--accent-amber)' :
|
|
|
data.conditions === 'POOR' ? 'var(--accent-red)' : 'var(--text-muted)'
|
|
|
}}>
|
|
|
CONDITIONS: {data.conditions}
|
|
|
</span>
|
|
|
</div>
|
|
|
)}
|
|
|
</div>
|
|
|
);
|
|
|
};
|
|
|
|
|
|
export default SpaceWeatherPanel;
|
