1.1.1 β€’ Published 3 years ago

react-simple-south-korea-map-chart v1.1.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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;
PropTypeDefaultDescription
dataArray<{ locale: string; count: number }>ν•„μˆ˜ν–‰μ •κ΅¬μ—­λ³„ 데이터
setColorByCountFunctionν•„μˆ˜λ°μ΄ν„° count값에 따라 ν‘œμ‹œν•  색상을 λ°˜ν™˜ν•˜λŠ” 콜백
darkModebooleanfalse닀크λͺ¨λ“œ μ—¬λΆ€(값에 따라 Default Tooltip 색상이 변경됨)
customTooltipJSX.element<DefaultTooltip />μ»€μŠ€ν…€ 툴팁 μ»΄ν¬λ„ŒνŠΈ
unitString"개"νˆ΄νŒμ— 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

μ°Έκ³  λͺ¨λ“ˆ

1.1.1

3 years ago

1.1.0

3 years ago

1.0.9

3 years ago

1.0.8

3 years ago

1.0.7

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago