66 lines
2 KiB
TypeScript
66 lines
2 KiB
TypeScript
import { formatValue } from '../lib/format';
|
|
|
|
export default function MapLegend({
|
|
featureLabel,
|
|
range,
|
|
showCancel,
|
|
onCancel,
|
|
mode,
|
|
enumValues,
|
|
}: {
|
|
featureLabel: string;
|
|
range: [number, number];
|
|
showCancel: boolean;
|
|
onCancel: () => void;
|
|
mode: 'feature' | 'density';
|
|
enumValues?: string[];
|
|
}) {
|
|
const gradientStyle =
|
|
mode === 'density'
|
|
? 'linear-gradient(to right, rgb(130, 234, 220), rgb(20, 140, 180), rgb(88, 28, 140))'
|
|
: 'linear-gradient(to right, rgb(46, 204, 113), rgb(241, 196, 15), rgb(231, 76, 60), rgb(142, 68, 173))';
|
|
|
|
return (
|
|
<div className="absolute top-3 right-3 z-10 bg-white dark:bg-navy-800 dark:text-warm-200 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">{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"
|
|
>
|
|
<svg
|
|
className="w-4 h-4"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
strokeWidth={2}
|
|
>
|
|
<path strokeLinecap="round" strokeLinejoin="round" d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="h-3 rounded" style={{ background: gradientStyle }} />
|
|
<div className="flex justify-between mt-1 text-warm-600 dark:text-warm-400">
|
|
{mode === 'density' ? (
|
|
<>
|
|
<span>Few</span>
|
|
<span>Many</span>
|
|
</>
|
|
) : enumValues && enumValues.length > 0 ? (
|
|
<>
|
|
<span>{enumValues[0]}</span>
|
|
<span>{enumValues[enumValues.length - 1]}</span>
|
|
</>
|
|
) : (
|
|
<>
|
|
<span>{formatValue(range[0])}</span>
|
|
<span>{formatValue(range[1])}</span>
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|