69 lines
1.7 KiB
TypeScript
69 lines
1.7 KiB
TypeScript
// src/components/Legend.tsx
|
||
import React from 'react';
|
||
|
||
interface LegendProps {
|
||
getColor: (count: number) => string;
|
||
maxCount: number;
|
||
}
|
||
|
||
const Legend: React.FC<LegendProps> = ({ getColor, maxCount }) => {
|
||
// Dynamically generate grades based on the maxCount of the current dataset
|
||
const grades = [
|
||
1,
|
||
Math.round(maxCount / 5),
|
||
Math.round(maxCount / 2.5),
|
||
Math.round(maxCount / 1.5),
|
||
maxCount
|
||
];
|
||
|
||
// Remove duplicates and filter out zero or invalid numbers, then sort
|
||
const uniqueGrades = [...new Set(grades)].filter(g => g > 0).sort((a,b) => a-b);
|
||
if (uniqueGrades.length > 1 && uniqueGrades[1] <= 1) {
|
||
uniqueGrades.shift(); // remove the '1' if the next step is too close
|
||
}
|
||
|
||
return (
|
||
<>
|
||
<style>{`
|
||
.legend {
|
||
position: absolute;
|
||
bottom: 20px;
|
||
right: 20px;
|
||
padding: 10px;
|
||
background: rgba(255, 255, 255, 0.8);
|
||
color: #333;
|
||
border-radius: 5px;
|
||
box-shadow: 0 0 15px rgba(0,0,0,0.2);
|
||
z-index: 1000; /* Ensure it's on top of the map */
|
||
}
|
||
.legend h4 {
|
||
margin: 0 0 5px 0;
|
||
text-align: center;
|
||
}
|
||
.legend i {
|
||
width: 18px;
|
||
height: 18px;
|
||
float: left;
|
||
margin-right: 8px;
|
||
opacity: 0.7;
|
||
}
|
||
`}</style>
|
||
<div className="legend">
|
||
<h4>Count</h4>
|
||
{uniqueGrades.map((grade, index) => {
|
||
const from = grade;
|
||
const to = uniqueGrades[index + 1];
|
||
return (
|
||
<div key={from}>
|
||
<i style={{ background: getColor(from) }}></i>
|
||
{from}{to ? `–${to - 1}` : '+'}
|
||
</div>
|
||
);
|
||
})}
|
||
</div>
|
||
</>
|
||
);
|
||
};
|
||
|
||
export default Legend;
|