-
+
+
+
{data.storageDiff !== undefined && data.storageDiff !== 0 ? (data.storageDiff > 0 ? `+${data.storageDiff.toFixed(2)} m` : `${data.storageDiff.toFixed(2)} m`) : (data.fullness > 0 ? `${data.fullness.toFixed(1)}%` : 'N/A')}
-
- {dict.volume}: {data.volume.toFixed(1)} mil. m³
+
+ {dict.volume}: {data.volume.toFixed(1)} mil. m³
+ {data.minDiff !== undefined && (
+
+ {language === 'cs' ? 'K minimu:' : 'To min:'} {data.minDiff.toFixed(2)} m
+
+ )}
+
+
+
+
diff --git a/src/components/LakeDetail.tsx b/src/components/LakeDetail.tsx
index 9c92144..605fe17 100644
--- a/src/components/LakeDetail.tsx
+++ b/src/components/LakeDetail.tsx
@@ -1,5 +1,5 @@
import { useState, useEffect } from 'react';
-import { AreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, Line, ComposedChart, ReferenceLine, Bar } from 'recharts';
+import { ComposedChart, Area, Line, Bar, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer, ReferenceLine } from 'recharts';
import { Helmet } from 'react-helmet-async';
import { type Language, t } from '../translations';
import KpiCards from './KpiCards';
@@ -30,7 +30,7 @@ interface Props {
const CustomTooltip = ({ active, payload, label, language, isWeather }: any) => {
if (active && payload && payload.length) {
- const dict = t[language].chart;
+ const dict = t[language as Language].chart;
if (isWeather) {
return (
@@ -118,7 +118,7 @@ const LakeDetail = ({ language, lakeId, windUnit = 'kmh' }: Props) => {
volume: item.volume || 0,
fullness: 0,
temperature: item.temperature,
- precipitation: item.precipitation
+ precipitation: item.precipitation === null ? undefined : item.precipitation
};
});
setData(formattedData);
@@ -190,6 +190,10 @@ const LakeDetail = ({ language, lakeId, windUnit = 'kmh' }: Props) => {
let minDiff7d = Infinity;
let minDiff30d = Infinity;
+ let inflowSum24h = 0;
+ let outflowSum24h = 0;
+ let flowCount24h = 0;
+
for (const d of data) {
const t = new Date(d.timestamp).getTime();
@@ -210,11 +214,23 @@ const LakeDetail = ({ language, lakeId, windUnit = 'kmh' }: Props) => {
minDiff30d = diff30d;
level30dAgo = d.level;
}
+
+ if (t >= targetMs24h && d.inflow !== undefined && d.outflow !== undefined) {
+ inflowSum24h += d.inflow;
+ outflowSum24h += d.outflow;
+ flowCount24h++;
+ }
}
const levelDiff24h = latestData.level - level24hAgo;
const levelDiff7d = latestData.level - level7dAgo;
const levelDiff30d = latestData.level - level30dAgo;
+
+ const avgInflow24h = flowCount24h > 0 ? inflowSum24h / flowCount24h : undefined;
+ const avgOutflow24h = flowCount24h > 0 ? outflowSum24h / flowCount24h : undefined;
+
+ const limits = lakeInfo ? NAVIGATION_LIMITS[lakeInfo.id] : undefined;
+ const staticConfig = lakeInfo ? lakesConfig.find(l => l.id === lakeInfo.id) : undefined;
const kpiData = {
level: latestData.level,
@@ -225,12 +241,12 @@ const LakeDetail = ({ language, lakeId, windUnit = 'kmh' }: Props) => {
outflow: lastValidFlowData.outflow,
volume: lakeInfo?.volume || 0,
fullness: lakeInfo?.capacity || 0,
- storageDiff: lakeInfo?.storageDiff
+ storageDiff: lakeInfo?.storageDiff,
+ minDiff: staticConfig?.minLevel ? latestData.level - staticConfig.minLevel : undefined,
+ avgInflow24h,
+ avgOutflow24h
};
- const limits = lakeInfo ? NAVIGATION_LIMITS[lakeInfo.id] : undefined;
- const staticConfig = lakeInfo ? lakesConfig.find(l => l.id === lakeInfo.id) : undefined;
-
const leftYAxisDomain = [
(dataMin: number) => {
let min = dataMin;
@@ -284,7 +300,7 @@ const LakeDetail = ({ language, lakeId, windUnit = 'kmh' }: Props) => {
{lakeInfo && lakeInfo.lat && lakeInfo.lng && (
-
+
)}
@@ -343,14 +359,14 @@ const LakeDetail = ({ language, lakeId, windUnit = 'kmh' }: Props) => {
))}
{staticConfig && staticConfig.maxLevel && (
-
+
)}
{staticConfig && staticConfig.storageLevel && (
-
+
)}
-
-
+
+
@@ -358,8 +374,8 @@ const LakeDetail = ({ language, lakeId, windUnit = 'kmh' }: Props) => {
{/* Chart Legend */}
{dict.level}
-
{dict.outflow}
-
{dict.inflow}
+
{dict.outflow}
+
{dict.inflow}
{/* WEATHER CHART SECTION */}
diff --git a/src/components/LakeMap.tsx b/src/components/LakeMap.tsx
index 280a54e..2f4e473 100644
--- a/src/components/LakeMap.tsx
+++ b/src/components/LakeMap.tsx
@@ -2,7 +2,7 @@ import { useState, useEffect } from 'react';
import { MapContainer, TileLayer, Marker, Popup } from 'react-leaflet';
import L from 'leaflet';
import 'leaflet/dist/leaflet.css';
-import { FiX, FiSearch, FiDroplet } from 'react-icons/fi';
+import { FiX, FiSearch } from 'react-icons/fi';
import { type Language, t } from '../translations';
import { slugify } from '../utils/slugify';
import { useNavigate } from 'react-router-dom';
diff --git a/src/components/LakesOverview.tsx b/src/components/LakesOverview.tsx
index 3356480..1d995a5 100644
--- a/src/components/LakesOverview.tsx
+++ b/src/components/LakesOverview.tsx
@@ -33,9 +33,17 @@ const LakeCard = ({ lake, language, isFav, onToggleFav }: { lake: Lake, language
const minVal = Math.min(...lake.sparkline);
const maxVal = Math.max(...lake.sparkline);
const diff = maxVal - minVal;
- // Enforce a minimum visual span of 0.5 meters so tiny fluctuations don't look like mountains
- const padding = diff < 0.5 ? (0.5 - diff) / 2 : 0;
+ const padding = diff === 0 ? 0.1 : diff * 0.1; // dynamic 10% padding
const yDomain = [minVal - padding, maxVal + padding];
+
+ const firstVal = lake.sparkline[0] || 0;
+ const lastVal = lake.sparkline[lake.sparkline.length - 1] || 0;
+ const trendDiff = lastVal - firstVal;
+
+ // Dynamic color based on trend direction: stable=cyan, rising=green, falling=red
+ let trendColor = 'var(--color-cyan)';
+ if (trendDiff > 0.01) trendColor = 'var(--color-green)';
+ else if (trendDiff < -0.01) trendColor = 'var(--color-red)';
return (
@@ -120,54 +128,9 @@ const LakeCard = ({ lake, language, isFav, onToggleFav }: { lake: Lake, language
);
};
-const SmallLakeCard = ({ lake, isFav, onToggleFav }: { lake: Lake, isFav: boolean, onToggleFav: (id: string) => void }) => {
- const navigate = useNavigate();
-
- return (
-
navigate(`/${slugify(lake.name)}`)}
- style={{ cursor: 'pointer', padding: '1rem', display: 'flex', flexDirection: 'column', gap: '0.5rem', position: 'relative' }}
- >
- {/* Star button */}
-
-
-
{lake.name}
-
{lake.level} m n.m.
-
- = 80 ? 'var(--color-green)' : lake.capacity < 40 ? 'var(--color-red)' : 'var(--text-muted)', fontWeight: 600 }}>
- {lake.capacity > 0 ? `${lake.capacity}%` : 'N/A'}
-
- {lake.storageDiff !== undefined && (
- = 0 ? 'var(--color-green)' : 'var(--color-red)', marginLeft: '4px' }}>
- ({lake.storageDiff > 0 ? '+' : ''}{lake.storageDiff.toFixed(2)} m)
-
- )}
-
-
- );
-};
-
const LakesOverview = ({ language }: Props) => {
const [lakes, setLakes] = useState
([]);
- const { isFavorite, toggleFavorite, favorites } = useFavorites();
+ const { isFavorite, toggleFavorite } = useFavorites();
useEffect(() => {
const loadData = () => {
@@ -234,6 +197,19 @@ const LakesOverview = ({ language }: Props) => {