andras/perfect-postcode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Good changes

Browse source
This commit is contained in:
Andras Schmelczer 2026-03-11 20:44:34 +00:00
parent 80a5a2a774
commit 791bc6976b
24 changed files with 890 additions and 312 deletions
Download patch file Download diff file Expand all files Collapse all files

74
frontend/src/components/map/MapLegend.tsx
View file

@ -14,6 +14,7 @@ export default function MapLegend({
theme = 'light',
inline = false,
suffix,
raw,
}: {
featureLabel: string;
range: [number, number];
@ -24,26 +25,65 @@ export default function MapLegend({
theme?: 'light' | 'dark';
inline?: boolean;
suffix?: string;
raw?: boolean;
}) {
const densityGradient = theme === 'dark' ? DENSITY_GRADIENT_DARK : DENSITY_GRADIENT;
const gradientStyle =
mode === 'density' ? gradientToCss(densityGradient) : gradientToCss(FEATURE_GRADIENT);
const fmt = raw ? { raw: true } : undefined;
const rangeMin =
mode === 'density' ? (
<TickerValue text={formatValue(range[0])} />
) : enumValues && enumValues.length > 0 ? (
<span>{enumValues[0]}</span>
) : (
<TickerValue text={formatValue(range[0], fmt) + (suffix || '')} />
);
const rangeMax =
mode === 'density' ? (
<TickerValue text={formatValue(range[1])} />
) : enumValues && enumValues.length > 0 ? (
<span>{enumValues[enumValues.length - 1]}</span>
) : (
<TickerValue text={formatValue(range[1], fmt) + (suffix || '')} />
);
if (inline) {
return (
<div className="bg-warm-100 dark:bg-warm-800 text-warm-700 dark:text-warm-200 px-3 py-1.5 text-xs border-b border-warm-200 dark:border-warm-700 flex items-center gap-2">
<span className="font-semibold text-xs text-warm-800 dark:text-warm-200 truncate">
{featureLabel}
</span>
{showCancel && (
<button
onClick={onCancel}
className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 shrink-0"
title="Clear colour view"
>
<CloseIcon className="w-3.5 h-3.5" />
</button>
)}
<div className="flex items-center gap-1.5 flex-1 min-w-[40%] text-warm-500 dark:text-warm-400">
{rangeMin}
<div className="h-2.5 rounded flex-1 min-w-[40px]" style={{ background: gradientStyle }} />
{rangeMax}
</div>
</div>
);
}
return (
<div
className={
inline
? 'bg-white dark:bg-warm-800 dark:text-white p-3 text-xs border-b border-warm-200 dark:border-warm-700'
: 'absolute top-3 right-3 z-10 bg-white dark:bg-navy-800 dark:text-white rounded shadow-lg p-3 text-xs min-w-[160px]'
}
>
<div className="absolute top-3 right-3 z-10 bg-white dark:bg-navy-800 dark:text-white rounded shadow-lg p-3 text-xs min-w-[160px]">
<div className="flex items-center justify-between mb-2">
<span className="font-semibold text-sm dark:text-white">{featureLabel}</span>
{showCancel && (
<button
onClick={onCancel}
className="text-warm-400 hover:text-warm-700 dark:hover:text-warm-300 ml-2"
title="Clear color view"
title="Clear colour view"
>
<CloseIcon className="w-4 h-4" />
</button>
@ -51,22 +91,8 @@ export default function MapLegend({
</div>
<div className="h-3 rounded" style={{ background: gradientStyle }} />
<div className="flex justify-between mt-1 text-warm-600 dark:text-warm-200">
{mode === 'density' ? (
<>
<TickerValue text={formatValue(range[0])} />
<TickerValue text={formatValue(range[1])} />
</>
) : enumValues && enumValues.length > 0 ? (
<>
<span>{enumValues[0]}</span>
<span>{enumValues[enumValues.length - 1]}</span>
</>
) : (
<>
<TickerValue text={formatValue(range[0]) + (suffix || '')} />
<TickerValue text={formatValue(range[1]) + (suffix || '')} />
</>
)}
{rangeMin}
{rangeMax}
</div>
</div>
);