{sensorTemp !== undefined ? sensorTemp.toFixed(1) : data.temp.toFixed(1)} °C
diff --git a/src/components/WindChart.tsx b/src/components/WindChart.tsx
new file mode 100644
index 0000000..c338df1
--- /dev/null
+++ b/src/components/WindChart.tsx
@@ -0,0 +1,273 @@
+import { useState, useEffect } from 'react';
+import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Line, ComposedChart } from 'recharts';
+import { FiWind } from 'react-icons/fi';
+import { type Language } from '../translations';
+
+interface WindChartProps {
+ lat: number;
+ lng: number;
+ language: Language;
+ timeRange?: '24h' | '7d' | '30d' | '1y' | 'all';
+ windUnit?: 'kmh' | 'ms';
+}
+
+interface WindDataPoint {
+ time: string;
+ speed: number;
+ gusts: number;
+ dir: number;
+ dirStr: string;
+}
+
+const getCompassDirection = (degrees: number, language: 'cs' | 'en') => {
+ const directionsEn = ['N', 'NE', 'E', 'SE', 'S', 'SW', 'W', 'NW'];
+ const directionsCs = ['S', 'SV', 'V', 'JV', 'J', 'JZ', 'Z', 'SZ'];
+ const directions = language === 'cs' ? directionsCs : directionsEn;
+ const index = Math.round(((degrees %= 360) < 0 ? degrees + 360 : degrees) / 45) % 8;
+ return directions[index];
+};
+
+const CustomWindTooltip = ({ active, payload, label, language, windUnit = 'kmh' }: any) => {
+ if (active && payload && payload.length) {
+ const data = payload[0].payload;
+ const date = new Date(label);
+ const dateStr = date.toLocaleDateString(language === 'cs' ? 'cs-CZ' : 'en-GB', { day: '2-digit', month: '2-digit', year: 'numeric' });
+ const timeStr = date.toLocaleTimeString(language === 'cs' ? 'cs-CZ' : 'en-GB', { hour: '2-digit', minute: '2-digit' });
+
+ return (
+
+
+ {dateStr} {timeStr}
+
+
+
+ ●
+ {language === 'cs' ? 'Rychlost větru' : 'Wind Speed'}: {data.speed} {windUnit === 'kmh' ? 'km/h' : 'm/s'}
+
+
+ ●
+ {language === 'cs' ? 'Nárazy větru' : 'Wind Gusts'}: {data.gusts} {windUnit === 'kmh' ? 'km/h' : 'm/s'}
+
+
+
+ {language === 'cs' ? 'Směr' : 'Direction'}: {data.dirStr} ({data.dir}°)
+
+
+
+ );
+ }
+ return null;
+};
+
+const CustomWindDot = (props: any) => {
+ const { cx, cy, payload } = props;
+
+ if (!cx || !cy || payload.dir === undefined) return null;
+
+ return (
+
+
+
+ );
+};
+
+export const WindChart = ({ lat, lng, language, timeRange = '7d', windUnit = 'kmh' }: WindChartProps) => {
+ const [data, setData] = useState
([]);
+ const [loading, setLoading] = useState(true);
+ const [currentSpeed, setCurrentSpeed] = useState(0);
+ const [maxGust, setMaxGust] = useState(0);
+
+ useEffect(() => {
+ const fetchWind = async () => {
+ try {
+ setLoading(true);
+ let url = '';
+ let isDaily = false;
+
+ if (timeRange === '1y' || timeRange === 'all') {
+ isDaily = true;
+ const end = new Date();
+ end.setDate(end.getDate() - 1);
+ const endStr = end.toISOString().split('T')[0];
+
+ const start = new Date();
+ if (timeRange === '1y') {
+ start.setDate(start.getDate() - 365);
+ } else {
+ start.setFullYear(2020);
+ }
+ const startStr = start.toISOString().split('T')[0];
+
+ url = `https://archive-api.open-meteo.com/v1/archive?latitude=${lat}&longitude=${lng}&start_date=${startStr}&end_date=${endStr}&daily=wind_speed_10m_max,wind_gusts_10m_max,wind_direction_10m_dominant&wind_speed_unit=${windUnit}&timezone=auto`;
+ } else {
+ let pastDays = 7;
+ if (timeRange === '24h') pastDays = 1;
+ if (timeRange === '30d') pastDays = 30;
+ url = `https://api.open-meteo.com/v1/forecast?latitude=${lat}&longitude=${lng}&hourly=wind_speed_10m,wind_gusts_10m,wind_direction_10m&past_days=${pastDays}&forecast_days=1&wind_speed_unit=${windUnit}&timezone=auto`;
+ }
+
+ const res = await fetch(url);
+ if (!res.ok) throw new Error('Failed to fetch wind data');
+ const json = await res.json();
+
+ const times = isDaily ? json.daily.time : json.hourly.time;
+ const speeds = isDaily ? json.daily.wind_speed_10m_max : json.hourly.wind_speed_10m;
+ const gusts = isDaily ? json.daily.wind_gusts_10m_max : json.hourly.wind_gusts_10m;
+ const dirs = isDaily ? json.daily.wind_direction_10m_dominant : json.hourly.wind_direction_10m;
+
+ const chartData: WindDataPoint[] = [];
+ let maxG = 0;
+
+ const now = new Date();
+ let closestIdx = 0;
+ let minDiff = Infinity;
+
+ for (let i = 0; i < times.length; i++) {
+ const t = new Date(times[i]);
+ const diff = Math.abs(t.getTime() - now.getTime());
+ if (diff < minDiff) {
+ minDiff = diff;
+ closestIdx = i;
+ }
+
+ if (t.getTime() <= now.getTime() || isDaily) {
+ if (gusts[i] > maxG) maxG = gusts[i];
+ chartData.push({
+ time: times[i],
+ speed: speeds[i] || 0,
+ gusts: gusts[i] || 0,
+ dir: dirs[i] || 0,
+ dirStr: getCompassDirection(dirs[i] || 0, language)
+ });
+ }
+ }
+
+ let downsampleFactor = 1;
+ if (timeRange === '7d') downsampleFactor = 3;
+ if (timeRange === '30d') downsampleFactor = 12;
+ if (timeRange === '1y') downsampleFactor = 3;
+ if (timeRange === 'all') downsampleFactor = 14;
+
+ const downsampled = chartData.filter((_, i) => i % downsampleFactor === 0 || i === chartData.length - 1);
+
+ setData(downsampled);
+ setMaxGust(maxG);
+ setCurrentSpeed(speeds[closestIdx] || speeds[speeds.length - 1] || 0);
+
+ } catch (err) {
+ console.error(err);
+ } finally {
+ setLoading(false);
+ }
+ };
+
+ if (lat && lng) {
+ fetchWind();
+ }
+ }, [lat, lng, language, timeRange]);
+
+ if (loading) {
+ return (
+
+ {language === 'cs' ? 'Načítám data o větru...' : 'Loading wind data...'}
+
+ );
+ }
+
+ if (data.length === 0) return null;
+
+ return (
+
+
+
+
+ {language === 'cs' ? `Aktivita větru (${timeRange === '1y' || timeRange === 'all' ? 'denní maxima' : timeRange})` : `Wind Activity (${timeRange === '1y' || timeRange === 'all' ? 'daily max' : timeRange})`}
+
+
+
+
+
{language === 'cs' ? 'Aktuální rychlost' : 'Current Speed'}
+
+ {currentSpeed.toFixed(1)}
+ {windUnit === 'kmh' ? 'km/h' : 'm/s'}
+
+
+
+
+
{language === 'cs' ? 'Max. nárazy' : 'Peak Gusts'}
+
+ {maxGust.toFixed(1)}
+ {windUnit === 'kmh' ? 'km/h' : 'm/s'}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {
+ const d = new Date(v);
+ return `${d.getDate()}.${d.getMonth()+1}.`;
+ }}
+ />
+
+
+ } />
+
+ }
+ activeDot={{ r: 6, fill: 'var(--color-cyan)', stroke: '#1e293b', strokeWidth: 2 }}
+ />
+
+
+
+
+
+
+
+
+ {language === 'cs' ? 'Rychlost větru' : 'Wind Speed'}
+
+
+
+ {language === 'cs' ? 'Nárazy větru' : 'Wind Gusts'}
+
+
+