fencl/davisfe.cz
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
src/components/KpiCards.tsx
+4 -2
View File
@@ -57,10 +57,12 @@ const KpiCards = ({ data, language, lakeName = 'Lipno 1' }: Props) => {
</div> </div>
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '100%' }}> <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', height: '100%' }}>
<div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', fontSize: '0.85rem' }}> <div style={{ display: 'flex', flexDirection: 'column', gap: '0.25rem', fontSize: '0.85rem' }}>
<div style={{ fontSize: '0.85rem', color: 'var(--text-muted)' }}> <div style={{ fontSize: '0.85rem', color: 'var(--text-muted)', display: 'flex', alignItems: 'center' }}>
{dict.inflow}: <span style={{ fontWeight: 'bold', color: 'var(--text-main)' }}>{data.inflow.toFixed(1)} m³/s</span> <span style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', backgroundColor: '#8b5cf6', marginRight: '6px' }}></span>
{dict.inflow}: <span style={{ fontWeight: 'bold', color: 'var(--text-main)', marginLeft: '4px' }}>{data.inflow.toFixed(1)} m³/s</span>
</div> </div>
<div style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginTop: '0.25rem', display: 'flex', alignItems: 'center', gap: '0.25rem' }}> <div style={{ fontSize: '0.85rem', color: 'var(--text-muted)', marginTop: '0.25rem', display: 'flex', alignItems: 'center', gap: '0.25rem' }}>
<span style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', backgroundColor: 'var(--color-orange)', marginRight: '2px' }}></span>
{dict.outflow}: <span style={{ fontWeight: 'bold', color: 'var(--text-main)' }}>{data.outflow.toFixed(1)} m³/s</span> {dict.outflow}: <span style={{ fontWeight: 'bold', color: 'var(--text-main)' }}>{data.outflow.toFixed(1)} m³/s</span>
{flowDiff > 0 ? <FiArrowUp color="var(--color-green)" /> : flowDiff < 0 ? <FiArrowDown color="var(--color-red)" /> : null} {flowDiff > 0 ? <FiArrowUp color="var(--color-green)" /> : flowDiff < 0 ? <FiArrowDown color="var(--color-red)" /> : null}
</div> </div>
src/components/LakeDetail.tsx
+8 -6
View File
@@ -44,16 +44,18 @@ const CustomTooltip = ({ active, payload, label, language, isWeather }: any) =>
{payload.map((entry: any, index: number) => { {payload.map((entry: any, index: number) => {
let labelStr = ''; let labelStr = '';
let unit = ''; let unit = '';
if (entry.dataKey === 'level') { labelStr = dict.level; unit = 'm n. m.'; } let color = '';
else if (entry.dataKey === 'outflow') { labelStr = dict.outflow; unit = 'm³/s'; } if (entry.dataKey === 'level') { labelStr = dict.level; unit = 'm n. m.'; color = 'var(--color-cyan)'; }
else if (entry.dataKey === 'inflow') { labelStr = dict.inflow; unit = 'm³/s'; } 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; if (!labelStr || (entry.dataKey === 'inflow' && entry.value === 0)) return null;
return ( return (
<p key={index} style={{ margin: 0, color: 'var(--text-main)' }}> <div key={index} style={{ margin: 0, color: 'var(--text-main)', display: 'flex', alignItems: 'center', marginBottom: '4px' }}>
{labelStr}: <span style={{ fontWeight: 'bold' }}>{entry.value.toFixed(entry.dataKey === 'level' ? 2 : 1)} {unit}</span> <span style={{ display: 'inline-block', width: '8px', height: '8px', borderRadius: '50%', backgroundColor: color, marginRight: '8px' }}></span>
</p> {labelStr}: <span style={{ fontWeight: 'bold', marginLeft: '4px' }}>{entry.value.toFixed(entry.dataKey === 'level' ? 2 : 1)} {unit}</span>
</div>
); );
})} })}
</div> </div>