feat: update lake water data and optimize visual components for real-time monitoring
This commit is contained in:
David Fencl
@@ -99,55 +99,76 @@ export const WeatherWidget = ({ lat, lng, language, sensorTemp, windUnit = 'kmh'
|
||||
<div className="kpi-card" style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ fontSize: '1rem', color: 'var(--text-muted)', marginBottom: '1rem' }}>{dict.title}</div>
|
||||
|
||||
<div style={{ display: 'grid', gridTemplateColumns: '1fr auto', gap: '1rem', alignItems: 'center' }}>
|
||||
<div style={{ position: 'relative', display: 'flex', justifyContent: 'center', alignItems: 'center', height: '170px', marginTop: '-1.5rem' }}>
|
||||
|
||||
{/* Left Column: Wind */}
|
||||
<div style={{ display: 'flex', alignItems: 'flex-start', gap: '1rem' }}>
|
||||
<div style={{
|
||||
width: '40px', height: '40px', borderRadius: '50%', backgroundColor: 'rgba(0, 195, 255, 0.1)',
|
||||
display: 'flex', alignItems: 'center', justifyContent: 'center',
|
||||
color: 'var(--color-cyan)', fontSize: '1.2rem',
|
||||
transform: `rotate(${data.windDir}deg)`
|
||||
}} title={`Wind direction: ${data.windDir}°`}>
|
||||
<FiWind style={{ transform: 'rotate(-90deg)' }} /> {/* Assume icon points UP by default, wind from south (180) should point UP. Arrow should point where wind is GOING. */}
|
||||
</div>
|
||||
{/* SVG Compass Ring */}
|
||||
<svg width="180" height="180" viewBox="0 0 260 260" style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)' }}>
|
||||
<circle cx="130" cy="130" r="100" fill="transparent" stroke="rgba(255,255,255,0.03)" strokeWidth="30" />
|
||||
|
||||
<div style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
<div style={{ fontSize: '1.5rem', fontWeight: 'bold', lineHeight: 1.1, color: 'var(--text-main)', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', gap: '4px' }}>
|
||||
{data.windSpeed.toFixed(1)}
|
||||
<span style={{ fontSize: '0.8rem', color: 'var(--text-muted)', fontWeight: 'normal' }}>
|
||||
{windUnit === 'kmh' ? 'km/h' : 'm/s'} • {getCompassDirection(data.windDir, language)}
|
||||
</span>
|
||||
<svg
|
||||
width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"
|
||||
style={{ color: 'var(--text-muted)', transform: `rotate(${data.windDir}deg)`, transition: 'transform 0.3s ease' }}
|
||||
>
|
||||
<line x1="12" y1="19" x2="12" y2="5"></line>
|
||||
<polyline points="5 12 12 5 19 12"></polyline>
|
||||
</svg>
|
||||
</div>
|
||||
<div style={{ fontSize: '0.8rem', color: 'var(--text-muted)', marginTop: '4px', whiteSpace: 'nowrap' }}>
|
||||
{dict.gusts}: <span style={{ color: data.windGusts > (windUnit === 'kmh' ? 50 : 13.8) ? 'var(--color-red)' : 'var(--text-main)' }}>{data.windGusts.toFixed(1)} {windUnit === 'kmh' ? 'km/h' : 'm/s'}</span>
|
||||
</div>
|
||||
</div>
|
||||
{/* Generate Ticks */}
|
||||
{Array.from({ length: 72 }).map((_, i) => {
|
||||
const angle = i * 5;
|
||||
const isMajor = angle % 90 === 0;
|
||||
const isMedium = angle % 45 === 0;
|
||||
const innerR = isMajor ? 90 : isMedium ? 100 : 105;
|
||||
const outerR = 115;
|
||||
const rad = (angle - 90) * (Math.PI / 180);
|
||||
const x1 = 130 + innerR * Math.cos(rad);
|
||||
const y1 = 130 + innerR * Math.sin(rad);
|
||||
const x2 = 130 + outerR * Math.cos(rad);
|
||||
const y2 = 130 + outerR * Math.sin(rad);
|
||||
|
||||
if (isMajor) return null; // Put text here instead
|
||||
|
||||
return <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="rgba(255,255,255,0.15)" strokeWidth={isMedium ? 2 : 1} />;
|
||||
})}
|
||||
|
||||
<text x="130" y="25" fill="var(--text-muted)" fontSize="18" fontWeight="bold" textAnchor="middle" alignmentBaseline="middle">{language === 'cs' ? 'S' : 'N'}</text>
|
||||
<text x="235" y="130" fill="var(--text-muted)" fontSize="18" fontWeight="bold" textAnchor="middle" alignmentBaseline="middle">{language === 'cs' ? 'V' : 'E'}</text>
|
||||
<text x="130" y="235" fill="var(--text-muted)" fontSize="18" fontWeight="bold" textAnchor="middle" alignmentBaseline="middle">{language === 'cs' ? 'J' : 'S'}</text>
|
||||
<text x="25" y="130" fill="var(--text-muted)" fontSize="18" fontWeight="bold" textAnchor="middle" alignmentBaseline="middle">{language === 'cs' ? 'Z' : 'W'}</text>
|
||||
|
||||
{/* Direction Indicator */}
|
||||
{(() => {
|
||||
const dirRad = (data.windDir + 180 - 90) * (Math.PI / 180);
|
||||
const x = 130 + 94 * Math.cos(dirRad);
|
||||
const y = 130 + 94 * Math.sin(dirRad);
|
||||
return (
|
||||
<g transform={`translate(${x}, ${y}) rotate(${data.windDir})`}>
|
||||
<path d="M-8,-8 L0,8 L8,-8 L0,-4 Z" fill="var(--color-cyan)" />
|
||||
</g>
|
||||
);
|
||||
})()}
|
||||
</svg>
|
||||
|
||||
{/* Center Data */}
|
||||
<FiWind size={26} color="var(--color-cyan)" style={{ position: 'absolute', top: '26px', left: '50%', transform: 'translateX(-50%)', zIndex: 10 }} />
|
||||
|
||||
<div style={{ position: 'absolute', top: '50%', left: '50%', transform: 'translate(-50%, -50%)', marginTop: '-6px', zIndex: 10, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
|
||||
<span style={{ fontSize: '2.8rem', fontWeight: 'bold', color: 'var(--text-main)', lineHeight: 1, textShadow: '0 2px 10px rgba(0,0,0,0.5)' }}>{data.windSpeed.toFixed(1)}</span>
|
||||
<span style={{ position: 'absolute', left: '100%', bottom: '0.3rem', marginLeft: '0.2rem', fontSize: '0.9rem', color: 'var(--text-main)', whiteSpace: 'nowrap' }}>{windUnit === 'kmh' ? 'km/h' : 'm/s'}</span>
|
||||
</div>
|
||||
|
||||
{/* Right Column: Other Info */}
|
||||
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.4rem', borderLeft: '1px solid var(--border-color)', paddingLeft: '1rem', whiteSpace: 'nowrap' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.9rem' }} title={sensorTemp !== undefined ? (language === 'cs' ? 'Měřeno přímo senzorem na hrázi' : 'Measured by sensor at the dam') : 'OpenMeteo API'}>
|
||||
<FiThermometer color="var(--color-orange)" />
|
||||
<span style={{ fontWeight: 'bold' }}>{sensorTemp !== undefined ? sensorTemp.toFixed(1) : data.temp.toFixed(1)} °C</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>
|
||||
<FiSunrise color="#f59e0b" />
|
||||
<span>{formatTime(data.sunrise)}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.5rem', fontSize: '0.9rem', color: 'var(--text-muted)' }}>
|
||||
<FiSunset color="#f59e0b" />
|
||||
<span>{formatTime(data.sunset)}</span>
|
||||
</div>
|
||||
<div style={{ position: 'absolute', bottom: '50px', left: '50%', transform: 'translateX(-50%)', zIndex: 10, fontSize: '0.75rem', color: 'var(--color-purple)', whiteSpace: 'nowrap' }}>
|
||||
{dict.gusts}: {data.windGusts.toFixed(1)} {windUnit === 'kmh' ? 'km/h' : 'm/s'}
|
||||
</div>
|
||||
|
||||
{/* Corner Elements */}
|
||||
<div style={{ position: 'absolute', bottom: '0px', left: '0px', display: 'flex', alignItems: 'center', gap: '0.4rem', fontSize: '1rem' }} title={sensorTemp !== undefined ? (language === 'cs' ? 'Měřeno přímo senzorem na hrázi' : 'Measured by sensor at the dam') : 'OpenMeteo API'}>
|
||||
<FiThermometer color="var(--color-orange)" size={18} />
|
||||
<span style={{ fontWeight: 'bold', color: 'var(--text-main)' }}>{sensorTemp !== undefined ? sensorTemp.toFixed(1) : data.temp.toFixed(1)} °C</span>
|
||||
</div>
|
||||
|
||||
<div style={{ position: 'absolute', bottom: '0px', right: '0px', display: 'flex', flexDirection: 'column', gap: '0.3rem', fontSize: '0.9rem' }}>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', color: 'var(--text-main)' }}>
|
||||
<FiSunrise color="var(--color-orange)" size={16} />
|
||||
<span style={{ fontWeight: 'bold' }}>{formatTime(data.sunrise)}</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: '0.4rem', color: 'var(--text-main)' }}>
|
||||
<FiSunset color="var(--color-orange)" size={16} />
|
||||
<span style={{ fontWeight: 'bold' }}>{formatTime(data.sunset)}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user