feat: add color-coded indicators to KpiCards and LakeDetail legends

This commit is contained in:
David Fencl
2026-06-05 22:59:19 +02:00
parent 8d1fb5b28e
commit 0030dca448
2 changed files with 12 additions and 8 deletions
+8 -6
View File
@@ -44,16 +44,18 @@ const CustomTooltip = ({ active, payload, label, language, isWeather }: any) =>
{payload.map((entry: any, index: number) => {
let labelStr = '';
let unit = '';
if (entry.dataKey === 'level') { labelStr = dict.level; unit = 'm n. m.'; }
else if (entry.dataKey === 'outflow') { labelStr = dict.outflow; unit = 'm³/s'; }
else if (entry.dataKey === 'inflow') { labelStr = dict.inflow; unit = 'm³/s'; }
let color = '';
if (entry.dataKey === 'level') { labelStr = dict.level; unit = 'm n. m.'; color = 'var(--color-cyan)'; }
else if (entry.dataKey === 'outflow') { labelStr = dict.outflow; unit = 'm³/s'; color = 'var(--color-orange)'; }
else if (entry.dataKey === 'inflow') { labelStr = dict.inflow; unit = 'm³/s'; color = '#8b5cf6'; }
if (!labelStr || (entry.dataKey === 'inflow' && entry.value === 0)) return null;
return (
<p key={index} style={{ margin: 0, color: 'var(--text-main)' }}>
{labelStr}: <span style={{ fontWeight: 'bold' }}>{entry.value.toFixed(entry.dataKey === 'level' ? 2 : 1)} {unit}</span>
</p>
<div key={index} style={{ margin: 0, color: 'var(--text-main)', display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
<span style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', backgroundColor: color, marginRight: '8px' }}></span>
{labelStr}: <span style={{ fontWeight: 'bold', marginLeft: '4px' }}>{entry.value.toFixed(entry.dataKey === 'level' ? 2 : 1)} {unit}</span>
</div>
);
})}
</div>