1.1.1 β’ Published 3 years ago
react-simple-south-korea-map-chart v1.1.1
react-simple-korea-map-chart π°π·
νμ ꡬμλ³ ν΅κ³ λ°μ΄ν°λ₯Ό μ¬λ¬ μμΌλ‘ μκ°νν΄μ£Όλ κ°λ¨ν λνλ―Όκ΅ μ§λ 리μ‘νΈ μ»΄ν¬λνΈμ λλ€.
λ°λͺ¨νμ΄μ§
react-simple-south-korea-map-chart
μ¬μ© μ
import { SimpleSouthKoreaMapChart } from "react-simple-south-korea-map-chart";
const data = [
{ locale: "λΆμ°κ΄μμ", count: 1500 },
{ locale: "λꡬκ΄μμ", count: 3000 },
{ locale: "λμ κ΄μμ", count: 400 },
{ locale: "κ°μλ", count: 2500 },
{ locale: "κ΄μ£Όκ΄μμ", count: 1000 },
{ locale: "κ²½κΈ°λ", count: 4000 },
{ locale: "μΈμ²κ΄μμ", count: 2200 },
{ locale: "μ μ£ΌνΉλ³μμΉλ", count: 100 },
{ locale: "μΆ©μ²λΆλ", count: 49 },
{ locale: "κ²½μλΆλ", count: 2000 },
{ locale: "μ λΌλΆλ", count: 3300 },
{ locale: "μΈμ’
νΉλ³μμΉμ", count: 110 },
{ locale: "μΆ©μ²λ¨λ", count: 10 },
{ locale: "κ²½μλ¨λ", count: 0 },
{ locale: "μ λΌλ¨λ", count: 250 },
{ locale: "μΈμ°κ΄μμ", count: 100 },
{ locale: "μμΈνΉλ³μ", count: 10000 },
];
function App() {
const setColorByCount = (count: number) => {
if (count === 0) return "#F1F1F1";
if (count > 5000) return "#79D3C4";
if (count > 3000) return "#43cdb6";
if (count > 1000) return "#61CDBB";
if (count > 200) return "#91D9CD";
if (count > 100) return "#A9DFD6";
if (count > 50) return "#C1E5DF";
if (count > 5) return "#D9EBE8";
else return "#ebfffd";
};
return (
<SimpleSouthKoreaMapChart
setColorByCount={setColorByCount}
data={data}
/>
);
}
export default App;
Prop | Type | Default | Description |
---|---|---|---|
data | Array<{ locale: string; count: number }> | νμ | νμ ꡬμλ³ λ°μ΄ν° |
setColorByCount | Function | νμ | λ°μ΄ν° count κ°μ λ°λΌ νμν μμμ λ°ννλ μ½λ°± |
darkMode | boolean | false | λ€ν¬λͺ¨λ μ¬λΆ(κ°μ λ°λΌ Default Tooltip μμμ΄ λ³κ²½λ¨) |
customTooltip | JSX.element | <DefaultTooltip /> | 컀μ€ν ν΄ν μ»΄ν¬λνΈ |
unit | String | "κ°" | ν΄νμ count λ€μ νμλ λ¨μ |
컀μ€ν ν΄ν μ¬μ©νκΈ°
const CustomTooltip = ({ darkMode, tooltipStyle, children }: any) => {
return (
<div
style={{
borderRadius: 0,
color: "yellow",
position: "fixed",
minWidth: "80px",
padding: "10px",
border: `1px solid ${darkMode ? "#41444a" : "#f5f5f5"}`,
backgroundColor: "blue",
...tooltipStyle,
}}
>
{children}
</div>
);
};
...
<SimpleSouthKoreaMapChart
darkMode={darkMode}
setColor={setColor}
data={data}
customTooltip={<CustomTooltip />}
/>
λ°λͺ¨ μ€ν
npm i
npm run demo