Merge pull request #21 from NewWays-TechForImpactKAIST/feat/fetch-gra…

…ph-and-text
NewWays-TechForImpactKAIST · Nov 24, 2023 · 4c327be · 4c327be
2 parents 193b2b1 + 667b4cf
commit 4c327be
Show file tree

Hide file tree

Showing 17 changed files with 410 additions and 69 deletions.
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
@@ -19,6 +19,7 @@ module.exports = {
   },
   plugins: ["import", "@typescript-eslint", "react", "react-refresh"],
   rules: {
+    "no-alert": "off",
     "react-refresh/only-export-components": [
       "warn",
       { allowConstantExport: true },

diff --git a/netlify.toml b/netlify.toml
@@ -1,4 +1,5 @@
 [[redirects]]
   from = "/*"
   to = "/index.html"
-  status = 200
+  status = 200
+
diff --git a/src/components/molecules/LocalCouncilReportText/AgeText.tsx b/src/components/molecules/LocalCouncilReportText/AgeText.tsx
@@ -0,0 +1,100 @@
+import { Typography } from "antd";
+
+const { Paragraph, Text } = Typography;
+
+export type AgeTextVariation = 1 | 2;
+
+export interface AgeTextData {
+  metroId: number;
+  localId: number;
+  rankingParagraph: {
+    ageDiversityIndex: number;
+    allIndices: { localId: number; rank: number; ageDiversityIndex: number }[];
+  };
+  indexHistoryParagraph: {
+    mostRecentYear: number;
+    history: {
+      year: number;
+      unit: number;
+      candidateCount: number;
+      candidateDiversityIndex: number;
+      electedDiversityIndex: number;
+      electedDiversityRank: number;
+    }[];
+  };
+  ageHistogramParagraph: {
+    year: number;
+    candidateCount: number;
+    electedCount: number;
+    firstQuintile: number;
+    lastQuintile: number;
+    divArea: {
+      localId: number;
+      firstQuintile: number;
+      lastQuintile: number;
+    };
+    uniArea: {
+      localId: number;
+      firstQuintile: number;
+      lastQuintile: number;
+    };
+  };
+}
+
+interface Props {
+  /** text variation을 선택할 수 있습니다(기본값: 1). */
+  variation?: AgeTextVariation;
+  /** text에 들어갈 데이터입니다. */
+  data?: AgeTextData;
+  getNameFromId: (id: number) => [string, string] | undefined;
+}
+
+export const AgeText = ({
+  variation = 1,
+  data = undefined,
+  getNameFromId,
+}: Props) => {
+  if (!data) return <Paragraph>데이터를 불러오는 중입니다..</Paragraph>;
+
+  const {
+    localId,
+    // rankingParagraph,
+    // indexHistoryParagraph,
+    ageHistogramParagraph,
+  } = data;
+  if (variation === 1)
+    return (
+      <Paragraph>
+        <Text strong>{ageHistogramParagraph.year}</Text>년 전국동시지방선거에서{" "}
+        <Text strong>{getNameFromId(localId)?.join(" ")}</Text>
+        에는 <Text strong>{ageHistogramParagraph.candidateCount}</Text>명이{" "}
+        후보로 나와 <Text strong>{ageHistogramParagraph.electedCount}</Text>명이{" "}
+        당선됐어요. 당선자의 20%가{" "}
+        <Text strong>{ageHistogramParagraph.firstQuintile}</Text>세 미만, 20%가{" "}
+        {ageHistogramParagraph.lastQuintile}세 이상이에요.
+        <br />
+        <br />
+        참고로 다양성 지표 전국 1위는 전체 인원의 20%가{" "}
+        <Text strong>{ageHistogramParagraph.divArea.firstQuintile}</Text>세{" "}
+        미만, 20%가{" "}
+        <Text strong>{ageHistogramParagraph.divArea.lastQuintile}</Text>세{" "}
+        이상인{" "}
+        <Text strong>
+          {getNameFromId(ageHistogramParagraph.divArea.localId)?.join(" ")}
+        </Text>
+        , 전국 뒤에서 1위는 전체 인원의 20%가{" "}
+        <Text strong>{ageHistogramParagraph.uniArea.firstQuintile}</Text>세
+        미만, 20%가{" "}
+        <Text strong>{ageHistogramParagraph.uniArea.lastQuintile}</Text>세
+        이상인{" "}
+        <Text strong>
+          {getNameFromId(ageHistogramParagraph.uniArea.localId)?.join(" ")}
+        </Text>
+        예요.
+        <br />
+        <br />
+        이전 정보를 확인하려면 아래의 슬라이더를 밀어 보세요.
+      </Paragraph>
+    );
+  return <Paragraph>존재하지 않는 템플릿입니다.</Paragraph>;
+};
diff --git a/src/components/molecules/LocalCouncilReportText/GenderText.tsx b/src/components/molecules/LocalCouncilReportText/GenderText.tsx
@@ -0,0 +1,30 @@
+import { Typography } from "antd";
+
+const { Paragraph, Text } = Typography;
+
+export type GenderTextVariation = 1 | 2;
+
+export interface GenderTextData {
+  genderDiversityIndex: number;
+}
+
+interface Props {
+  /** text variation을 선택할 수 있습니다(기본값: 1). */
+  variation?: GenderTextVariation;
+  /** text에 들어갈 데이터입니다. */
+  data?: GenderTextData;
+}
+
+export const GenderText = ({ variation = 1, data = undefined }: Props) => {
+  if (!data) return <Paragraph>데이터를 불러오는 중입니다..</Paragraph>;
+
+  const { genderDiversityIndex } = data;
+  if (variation === 1)
+    return (
+      <Paragraph>
+        이 지역의 성별 다양성 지표의 값은{" "}
+        <Text strong>{genderDiversityIndex}</Text>입니다.
+      </Paragraph>
+    );
+  return <Paragraph>존재하지 않는 템플릿입니다.</Paragraph>;
+};
diff --git a/src/components/molecules/LocalCouncilReportText/PartyText.tsx b/src/components/molecules/LocalCouncilReportText/PartyText.tsx
@@ -0,0 +1,30 @@
+import { Typography } from "antd";
+
+const { Paragraph, Text } = Typography;
+
+export type PartyTextVariation = 1 | 2;
+
+export interface PartyTextData {
+  partyDiversityIndex: number;
+}
+
+interface Props {
+  /** text variation을 선택할 수 있습니다(기본값: 1). */
+  variation?: PartyTextVariation;
+  /** text에 들어갈 데이터입니다. */
+  data?: PartyTextData;
+}
+
+export const PartyText = ({ variation = 1, data = undefined }: Props) => {
+  if (!data) return <Paragraph>데이터를 불러오는 중입니다..</Paragraph>;
+
+  const { partyDiversityIndex } = data;
+  if (variation === 1)
+    return (
+      <Paragraph>
+        이 지역의 정당 다양성 지표의 값은{" "}
+        <Text strong>{partyDiversityIndex}</Text>입니다.
+      </Paragraph>
+    );
+  return <Paragraph>존재하지 않는 템플릿입니다.</Paragraph>;
+};
diff --git a/src/components/molecules/LocalCouncilReportText/index.ts b/src/components/molecules/LocalCouncilReportText/index.ts
@@ -0,0 +1,3 @@
+export * from "./AgeText";
+export * from "./GenderText";
+export * from "./PartyText";
diff --git a/src/components/organisms/MapSelector.tsx → ...nts/organisms/LocalCouncilMapSelector.tsx b/src/components/organisms/MapSelector.tsx → ...nts/organisms/LocalCouncilMapSelector.tsx
@@ -1,31 +1,22 @@
-import { useState, useEffect } from "react";
 import { Button, Flex } from "antd";
 import { css } from "@emotion/react";
-import { LocalSelector, MetroSelector } from "@/components/molecules";
+import {
+  LocalSelector,
+  MetroSelector,
+  DropdownSelector,
+} from "@/components/molecules";
 import { type MetroID } from "static/MapSVGData";
 import { useNavigate, useParams } from "react-router-dom";
-import DropdownSelector from "@/components/molecules/DropdownSelector";
 import { RollbackOutlined } from "@ant-design/icons";
 
 interface Props {
   idMap: Map<MetroID, Map<string, [number, number]>>;
 }
 
-const LocalCouncil = ({ idMap }: Props) => {
-  const [metroId, setMetroId] = useState<MetroID>();
-  const { metroId: metroParam } = useParams();
+const LocalCouncilMapSelector = ({ idMap }: Props) => {
+  const { metroName } = useParams();
   const navigate = useNavigate();
-  useEffect(() => {
-    if (metroParam) {
-      idMap.forEach((value, key) => {
-        if (value) {
-          if (value.values().next().value[0] === metroParam) {
-            setMetroId(key as MetroID);
-          }
-        }
-      });
-    }
-  }, [metroParam]);
+
   return (
     <Flex
       vertical
@@ -36,7 +27,7 @@ const LocalCouncil = ({ idMap }: Props) => {
         margin: 40px 0 40px 0;
       `}
     >
-      {metroId ? (
+      {metroName ? (
         <>
           <Flex
             justify="center"
@@ -47,11 +38,11 @@ const LocalCouncil = ({ idMap }: Props) => {
           >
             <DropdownSelector
               innerText="기초 의회를 선택하세요."
-              options={[...(idMap.get(metroId)?.keys() || [])]}
-              onClick={id => {
-                const idData = idMap.get(metroId)?.get(id);
+              options={[...(idMap.get(metroName as MetroID)?.keys() || [])]}
+              onClick={localName => {
+                const idData = idMap.get(metroName as MetroID)?.get(localName);
                 if (!idData) return;
-                navigate(`/localCouncilReport/${idData[0]}/${idData[1]}`);
+                navigate(`/localCouncil/${metroName}/${localName}`);
               }}
             />
             <div
@@ -65,32 +56,32 @@ const LocalCouncil = ({ idMap }: Props) => {
                 height: 25pt;
               `}
               onClick={() => {
-                setMetroId(undefined);
                 navigate(`/localCouncil`);
               }}
             >
               <RollbackOutlined />
             </Button>
           </Flex>
           <LocalSelector
-            selected={metroId}
-            onClick={id => {
-              const idData = idMap.get(metroId)?.get(id);
+            selected={metroName as MetroID}
+            onClick={localName => {
+              const idData = idMap.get(metroName as MetroID)?.get(localName);
               if (!idData) return;
-              navigate(`/localCouncilReport/${idData[0]}/${idData[1]}`);
+              navigate(`/localCouncil/${metroName}/${localName}`);
             }}
           />
         </>
       ) : (
         <>
+          {" "}
           <DropdownSelector
             innerText="광역 의회를 선택하세요."
             options={[...idMap.keys()]}
-            onClick={value => setMetroId(value as MetroID)}
-          />
+            onClick={newMetroName => navigate(`/localCouncil/${newMetroName}`)}
+          />{" "}
           <MetroSelector
-            onClick={id => {
-              setMetroId(id as MetroID);
+            onClick={newMetroName => {
+              navigate(`/localCouncil/${newMetroName}`);
             }}
           />
         </>
@@ -99,4 +90,4 @@ const LocalCouncil = ({ idMap }: Props) => {
   );
 };
 
-export default LocalCouncil;
+export default LocalCouncilMapSelector;