From ba465c29ec846791958069c70a3a7f84bffea8e9 Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 00:15:57 +0900
Subject: [PATCH 01/18] =?UTF-8?q?refactor:=20=E3=82=B3=E3=83=A1=E3=83=B3?=
 =?UTF-8?q?=E3=83=88=E3=82=92=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PopulationSelector.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/PopulationSelector.tsx b/src/components/PopulationSelector.tsx
index d0ec13c..a295cd3 100644
--- a/src/components/PopulationSelector.tsx
+++ b/src/components/PopulationSelector.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
-import { fetchPopulation } from "../api/population"; // 人口データを取得するAPI
-import { Prefecture } from "../types/prefecture"; // 都道府県の型
-import { PopulationCategory } from "../types/population"; // 人口データのカテゴリ型
+import { fetchPopulation } from "../api/population";
+import { Prefecture } from "../types/prefecture";
+import { PopulationCategory } from "../types/population";
 
 interface PopulationSelectorProps {
   prefectures: Prefecture[];

From 194d5df4c5335a5baca06b298c4226cf7a646d10 Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 00:53:33 +0900
Subject: [PATCH 02/18] =?UTF-8?q?fix:=20API=E3=81=AEURL=E3=82=92=E6=AD=A3?=
 =?UTF-8?q?=E3=81=97=E3=81=84=E3=82=82=E3=81=AE=E3=81=AB=E5=A4=89=E6=9B=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/population.ts         | 2 +-
 src/api/prefectures.ts        | 2 +-
 src/tests/population.test.ts  | 4 ++--
 src/tests/prefectures.test.ts | 4 ++--
 4 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/api/population.ts b/src/api/population.ts
index 5792d1f..1bb0580 100644
--- a/src/api/population.ts
+++ b/src/api/population.ts
@@ -6,7 +6,7 @@ export const fetchPopulation = async (
 ): Promise<PopulationCategory[]> => {
   try {
     const response = await axios.get<PopulationResponse>(
-      `${process.env.REACT_APP_YUMEMI_API_URL}/population/${prefCode}`,
+      `${process.env.REACT_APP_YUMEMI_API_URL}/api/v1/population/composition/perYear?${prefCode}`,
       {
         headers: {
           "X-API-KEY": process.env.REACT_APP_YUMEMI_API_KEY!,
diff --git a/src/api/prefectures.ts b/src/api/prefectures.ts
index 66061b6..0bf3fc6 100644
--- a/src/api/prefectures.ts
+++ b/src/api/prefectures.ts
@@ -4,7 +4,7 @@ import { Prefecture } from "../types/prefecture";
 export const fetchPrefectures = async (): Promise<Prefecture[]> => {
   try {
     const response = await axios.get(
-      `${process.env.REACT_APP_YUMEMI_API_URL}/prefectures`,
+      `${process.env.REACT_APP_YUMEMI_API_URL}/api/v1/prefectures`,
       {
         headers: {
           "X-API-KEY": process.env.REACT_APP_YUMEMI_API_KEY!,
diff --git a/src/tests/population.test.ts b/src/tests/population.test.ts
index ef58e3c..259c8ac 100644
--- a/src/tests/population.test.ts
+++ b/src/tests/population.test.ts
@@ -30,7 +30,7 @@ describe("fetchPopulation", () => {
 
     expect(result).toEqual(mockData);
     expect(mockedAxios.get).toHaveBeenCalledWith(
-      `${process.env.REACT_APP_YUMEMI_API_URL}/population/${prefCode}`,
+      `${process.env.REACT_APP_YUMEMI_API_URL}/api/v1/population/composition/perYear?${prefCode}`,
       {
         headers: {
           "X-API-KEY": process.env.REACT_APP_YUMEMI_API_KEY!,
@@ -48,7 +48,7 @@ describe("fetchPopulation", () => {
       "Error fetching population data: Error: API Error"
     );
     expect(mockedAxios.get).toHaveBeenCalledWith(
-      `${process.env.REACT_APP_YUMEMI_API_URL}/population/${prefCode}`,
+      `${process.env.REACT_APP_YUMEMI_API_URL}/api/v1/population/composition/perYear?${prefCode}`,
       {
         headers: {
           "X-API-KEY": process.env.REACT_APP_YUMEMI_API_KEY!,
diff --git a/src/tests/prefectures.test.ts b/src/tests/prefectures.test.ts
index f7fb20a..0b4565f 100644
--- a/src/tests/prefectures.test.ts
+++ b/src/tests/prefectures.test.ts
@@ -19,7 +19,7 @@ describe("fetchPrefectures", () => {
 
     expect(result).toEqual(mockData);
     expect(mockedAxios.get).toHaveBeenCalledWith(
-      `${process.env.REACT_APP_YUMEMI_API_URL}/prefectures`,
+      `${process.env.REACT_APP_YUMEMI_API_URL}/api/v1/prefectures`,
       {
         headers: {
           "X-API-KEY": process.env.REACT_APP_YUMEMI_API_KEY!,
@@ -33,7 +33,7 @@ describe("fetchPrefectures", () => {
 
     await expect(fetchPrefectures()).rejects.toThrow("API Error");
     expect(mockedAxios.get).toHaveBeenCalledWith(
-      `${process.env.REACT_APP_YUMEMI_API_URL}/prefectures`,
+      `${process.env.REACT_APP_YUMEMI_API_URL}/api/v1/prefectures`,
       {
         headers: {
           "X-API-KEY": process.env.REACT_APP_YUMEMI_API_KEY!,

From 21f202a14f03aa979f098390498c7686ea0990d3 Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 19:08:58 +0900
Subject: [PATCH 03/18] =?UTF-8?q?feat:=20Zustand=E3=82=92=E7=94=A8?=
 =?UTF-8?q?=E3=81=84=E3=81=A6=E9=83=BD=E9=81=93=E5=BA=9C=E7=9C=8C=E3=82=B9?=
 =?UTF-8?q?=E3=83=88=E3=82=A2=E3=82=92=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                          |  3 +-
 src/components/PrefectureCheckbox.tsx | 34 ++++------
 src/store/prefecturesStore.ts         | 31 +++++++++
 src/tests/PrefectureCheckbox.test.tsx | 93 ++++++++++++++++-----------
 yarn.lock                             |  5 ++
 5 files changed, 105 insertions(+), 61 deletions(-)
 create mode 100644 src/store/prefecturesStore.ts

diff --git a/package.json b/package.json
index 0489116..0e43eae 100644
--- a/package.json
+++ b/package.json
@@ -17,7 +17,8 @@
     "react-dom": "^19.0.0",
     "react-scripts": "5.0.1",
     "typescript": "^4.4.2",
-    "web-vitals": "^2.1.0"
+    "web-vitals": "^2.1.0",
+    "zustand": "^5.0.2"
   },
   "scripts": {
     "start": "react-scripts start",
diff --git a/src/components/PrefectureCheckbox.tsx b/src/components/PrefectureCheckbox.tsx
index 039dbd3..447f226 100644
--- a/src/components/PrefectureCheckbox.tsx
+++ b/src/components/PrefectureCheckbox.tsx
@@ -1,39 +1,29 @@
 import React from "react";
 import { Prefecture } from "../types/prefecture";
+import usePrefecturesStore from "../store/prefecturesStore";
 
-interface PrefectureCheckboxProps {
-  prefectures: Prefecture[];
-  selectedPrefectures: string[];
-  onSelect: (selected: string[]) => void;
-}
-
-const PrefectureCheckbox: React.FC<PrefectureCheckboxProps> = ({
+const PrefectureCheckbox: React.FC<{ prefectures: Prefecture[] }> = ({
   prefectures,
-  selectedPrefectures,
-  onSelect,
 }) => {
-  const handleCheckboxChange = (prefCode: string) => {
-    if (selectedPrefectures.includes(prefCode)) {
-      onSelect(selectedPrefectures.filter((code) => code !== prefCode));
-    } else {
-      onSelect([...selectedPrefectures, prefCode]);
-    }
-  };
+  const { selectedPrefectures, togglePrefecture, selectAll, clearSelection } =
+    usePrefecturesStore();
 
   return (
     <div>
       <h3>都道府県選択</h3>
+      <button
+        onClick={() => selectAll(prefectures.map((pref) => pref.prefCode))}
+      >
+        すべて選択
+      </button>
+      <button onClick={clearSelection}>選択をクリア</button>
       {prefectures.map((prefecture) => (
         <div key={prefecture.prefCode}>
           <input
             type="checkbox"
             id={prefecture.prefCode.toString()}
-            checked={selectedPrefectures.includes(
-              prefecture.prefCode.toString()
-            )}
-            onChange={() =>
-              handleCheckboxChange(prefecture.prefCode.toString())
-            }
+            checked={selectedPrefectures.includes(prefecture.prefCode)}
+            onChange={() => togglePrefecture(prefecture.prefCode)}
           />
           <label htmlFor={prefecture.prefCode.toString()}>
             {prefecture.prefName}
diff --git a/src/store/prefecturesStore.ts b/src/store/prefecturesStore.ts
new file mode 100644
index 0000000..1e46e6a
--- /dev/null
+++ b/src/store/prefecturesStore.ts
@@ -0,0 +1,31 @@
+import { create } from "zustand";
+
+interface PrefecturesState {
+  selectedPrefectures: number[];
+  togglePrefecture: (prefCode: number) => void;
+  selectAll: (prefCodes: number[]) => void;
+  clearSelection: () => void;
+}
+
+const usePrefecturesStore = create<PrefecturesState>((set) => ({
+  selectedPrefectures: [],
+
+  togglePrefecture: (prefCode: number) =>
+    set((state) => ({
+      selectedPrefectures: state.selectedPrefectures.includes(prefCode)
+        ? state.selectedPrefectures.filter((code) => code !== prefCode)
+        : [...state.selectedPrefectures, prefCode],
+    })),
+
+  selectAll: (prefCodes: number[]) =>
+    set(() => ({
+      selectedPrefectures: prefCodes,
+    })),
+
+  clearSelection: () =>
+    set(() => ({
+      selectedPrefectures: [],
+    })),
+}));
+
+export default usePrefecturesStore;
diff --git a/src/tests/PrefectureCheckbox.test.tsx b/src/tests/PrefectureCheckbox.test.tsx
index 0f84690..83391bd 100644
--- a/src/tests/PrefectureCheckbox.test.tsx
+++ b/src/tests/PrefectureCheckbox.test.tsx
@@ -1,54 +1,71 @@
 import React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
-import PrefectureCheckbox from "./../components/PrefectureCheckbox";
-import { Prefecture } from "../types/prefecture";
-
-const mockPrefectures: Prefecture[] = [
-  { prefCode: 1, prefName: "北海道" },
-  { prefCode: 2, prefName: "青森県" },
-];
-
-describe("PrefectureCheckbox", () => {
-  it("都道府県のチェックボックスを表示する", () => {
-    render(
-      <PrefectureCheckbox
-        prefectures={mockPrefectures}
-        selectedPrefectures={[]}
-        onSelect={() => {}}
-      />
-    );
+import usePrefecturesStore from "../store/prefecturesStore";
+import PrefectureCheckbox from "../components/PrefectureCheckbox";
+
+jest.mock("../store/prefecturesStore", () => ({
+  __esModule: true,
+  default: jest.fn(),
+}));
+
+describe("PrefectureCheckboxコンポーネントの動作", () => {
+  const mockPrefectures = [
+    { prefCode: 1, prefName: "北海道" },
+    { prefCode: 2, prefName: "青森県" },
+    { prefCode: 3, prefName: "岩手県" },
+  ];
+
+  let mockTogglePrefecture: jest.Mock;
+  let mockSelectAll: jest.Mock;
+  let mockClearSelection: jest.Mock;
+
+  beforeEach(() => {
+    mockTogglePrefecture = jest.fn();
+    mockSelectAll = jest.fn();
+    mockClearSelection = jest.fn();
+
+    (
+      usePrefecturesStore as jest.MockedFunction<typeof usePrefecturesStore>
+    ).mockImplementation(() => ({
+      selectedPrefectures: [],
+      togglePrefecture: mockTogglePrefecture,
+      selectAll: mockSelectAll,
+      clearSelection: mockClearSelection,
+    }));
+  });
+
+  it("都道府県が正しくレンダリングされる", () => {
+    render(<PrefectureCheckbox prefectures={mockPrefectures} />);
 
     mockPrefectures.forEach((pref) => {
       expect(screen.getByLabelText(pref.prefName)).toBeInTheDocument();
     });
   });
 
-  it("チェックボックスをクリックすると選択状態が変更される", () => {
-    const mockOnSelect = jest.fn();
-    render(
-      <PrefectureCheckbox
-        prefectures={mockPrefectures}
-        selectedPrefectures={[]}
-        onSelect={mockOnSelect}
-      />
-    );
+  it("チェックボックスをクリックすると状態が切り替わる", () => {
+    render(<PrefectureCheckbox prefectures={mockPrefectures} />);
 
     const checkbox = screen.getByLabelText("北海道");
     fireEvent.click(checkbox);
 
-    expect(mockOnSelect).toHaveBeenCalledWith(["1"]);
+    expect(mockTogglePrefecture).toHaveBeenCalledWith(1);
   });
 
-  it("選択済みの都道府県のチェックボックスはチェックされている", () => {
-    render(
-      <PrefectureCheckbox
-        prefectures={mockPrefectures}
-        selectedPrefectures={["1"]}
-        onSelect={() => {}}
-      />
-    );
-
-    expect(screen.getByLabelText("北海道")).toBeChecked();
-    expect(screen.getByLabelText("青森県")).not.toBeChecked();
+  it("全て選択ボタンが正しく動作する", () => {
+    render(<PrefectureCheckbox prefectures={mockPrefectures} />);
+
+    const selectAllButton = screen.getByText("すべて選択");
+    fireEvent.click(selectAllButton);
+
+    expect(mockSelectAll).toHaveBeenCalledWith([1, 2, 3]);
+  });
+
+  it("選択をクリアボタンが正しく動作する", () => {
+    render(<PrefectureCheckbox prefectures={mockPrefectures} />);
+
+    const clearButton = screen.getByText("選択をクリア");
+    fireEvent.click(clearButton);
+
+    expect(mockClearSelection).toHaveBeenCalled();
   });
 });
diff --git a/yarn.lock b/yarn.lock
index 0b6ec53..780458f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -11013,3 +11013,8 @@ yocto-queue@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
+
+zustand@^5.0.2:
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/zustand/-/zustand-5.0.2.tgz#f7595ada55a565f1fd6464f002a91e701ee0cfca"
+  integrity sha512-8qNdnJVJlHlrKXi50LDqqUNmUbuBjoKLrYQBnoChIbVph7vni+sY+YpvdjXG9YLd/Bxr6scMcR+rm5H3aSqPaw==

From 4ff5938a42c950eb243a8a3d87fb8b29b72d0e9a Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 19:09:10 +0900
Subject: [PATCH 04/18] =?UTF-8?q?test:=20=E9=83=BD=E9=81=93=E5=BA=9C?=
 =?UTF-8?q?=E7=9C=8C=E3=82=B9=E3=83=88=E3=82=A2=E3=81=AE=E3=83=86=E3=82=B9?=
 =?UTF-8?q?=E3=83=88=E3=82=B3=E3=83=BC=E3=83=89=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/tests/prefecturesStore.test.ts | 55 ++++++++++++++++++++++++++++++
 1 file changed, 55 insertions(+)
 create mode 100644 src/tests/prefecturesStore.test.ts

diff --git a/src/tests/prefecturesStore.test.ts b/src/tests/prefecturesStore.test.ts
new file mode 100644
index 0000000..3ed890d
--- /dev/null
+++ b/src/tests/prefecturesStore.test.ts
@@ -0,0 +1,55 @@
+import { act } from "react";
+import usePrefecturesStore from "../store/prefecturesStore";
+
+describe("都道府県ストアの動作", () => {
+  beforeEach(() => {
+    const { getState, setState } = usePrefecturesStore;
+    setState(() => getState());
+  });
+
+  it("都道府県の選択状態を切り替えられる", () => {
+    const { selectedPrefectures, togglePrefecture } =
+      usePrefecturesStore.getState();
+
+    expect(selectedPrefectures).toEqual([]);
+
+    act(() => {
+      togglePrefecture(1);
+    });
+    expect(usePrefecturesStore.getState().selectedPrefectures).toEqual([1]);
+
+    act(() => {
+      togglePrefecture(1);
+    });
+    expect(usePrefecturesStore.getState().selectedPrefectures).toEqual([]);
+  });
+
+  it("全ての都道府県を選択できる", () => {
+    const { selectedPrefectures, selectAll } = usePrefecturesStore.getState();
+
+    expect(selectedPrefectures).toEqual([]);
+
+    act(() => {
+      selectAll([1, 2, 3]);
+    });
+    expect(usePrefecturesStore.getState().selectedPrefectures).toEqual([
+      1, 2, 3,
+    ]);
+  });
+
+  it("選択状態を全て解除できる", () => {
+    const { clearSelection, selectAll } = usePrefecturesStore.getState();
+
+    act(() => {
+      selectAll([1, 2, 3]);
+    });
+    expect(usePrefecturesStore.getState().selectedPrefectures).toEqual([
+      1, 2, 3,
+    ]);
+
+    act(() => {
+      clearSelection();
+    });
+    expect(usePrefecturesStore.getState().selectedPrefectures).toEqual([]);
+  });
+});

From 27d7c6a24edc52dccf6f0cd4042341833cb922b1 Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 19:12:14 +0900
Subject: [PATCH 05/18] =?UTF-8?q?feat:=20=E3=82=B0=E3=83=A9=E3=83=95?=
 =?UTF-8?q?=E6=8F=8F=E7=94=BB=E3=82=B3=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D?=
 =?UTF-8?q?=E3=83=B3=E3=83=88=20PopulationChart.tsx=20=E3=82=92=E4=BD=9C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                       |   1 +
 src/components/PopulationChart.tsx |  81 +++++++++++
 yarn.lock                          | 223 ++++++++++++++++++++++++++++-
 3 files changed, 301 insertions(+), 4 deletions(-)
 create mode 100644 src/components/PopulationChart.tsx

diff --git a/package.json b/package.json
index 0e43eae..9fabe12 100644
--- a/package.json
+++ b/package.json
@@ -16,6 +16,7 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-scripts": "5.0.1",
+    "recharts": "^2.15.0",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0",
     "zustand": "^5.0.2"
diff --git a/src/components/PopulationChart.tsx b/src/components/PopulationChart.tsx
new file mode 100644
index 0000000..eeffea2
--- /dev/null
+++ b/src/components/PopulationChart.tsx
@@ -0,0 +1,81 @@
+import React, { useState } from "react";
+import {
+  LineChart,
+  Line,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  Legend,
+  ResponsiveContainer,
+} from "recharts";
+
+interface PopulationData {
+  year: number;
+  value: number;
+}
+
+interface PopulationCategory {
+  label: string;
+  data: PopulationData[];
+}
+
+interface PopulationChartProps {
+  data: PopulationCategory[];
+}
+
+const PopulationChart: React.FC<PopulationChartProps> = ({ data }) => {
+  const [selectedCategory, setSelectedCategory] = useState("総人口");
+
+  const selectedData = data.find(
+    (category) => category.label === selectedCategory
+  );
+
+  return (
+    <div style={{ width: "100%", height: "500px" }}>
+      <div>
+        {data.map((category) => (
+          <button
+            key={category.label}
+            onClick={() => setSelectedCategory(category.label)}
+            style={{
+              margin: "5px",
+              padding: "10px",
+              backgroundColor:
+                category.label === selectedCategory ? "#007bff" : "#e0e0e0",
+              color: category.label === selectedCategory ? "#fff" : "#000",
+              border: "none",
+              borderRadius: "5px",
+            }}
+          >
+            {category.label}
+          </button>
+        ))}
+      </div>
+      {selectedData ? (
+        <ResponsiveContainer width="100%" height="100%">
+          <LineChart
+            data={selectedData.data}
+            margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
+          >
+            <CartesianGrid strokeDasharray="3 3" />
+            <XAxis dataKey="year" />
+            <YAxis />
+            <Tooltip />
+            <Legend />
+            <Line
+              type="monotone"
+              dataKey="value"
+              stroke="#8884d8"
+              activeDot={{ r: 8 }}
+            />
+          </LineChart>
+        </ResponsiveContainer>
+      ) : (
+        <p>データがありません</p>
+      )}
+    </div>
+  );
+};
+
+export default PopulationChart;
diff --git a/yarn.lock b/yarn.lock
index 780458f..8af7cb4 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1054,7 +1054,7 @@
     "@babel/plugin-transform-modules-commonjs" "^7.25.9"
     "@babel/plugin-transform-typescript" "^7.25.9"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.8.4":
+"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7":
   version "7.26.0"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.26.0.tgz#8600c2f595f277c60815256418b85356a65173c1"
   integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==
@@ -2170,6 +2170,57 @@
   dependencies:
     "@types/node" "*"
 
+"@types/d3-array@^3.0.3":
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/@types/d3-array/-/d3-array-3.2.1.tgz#1f6658e3d2006c4fceac53fde464166859f8b8c5"
+  integrity sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==
+
+"@types/d3-color@*":
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.3.tgz#368c961a18de721da8200e80bf3943fb53136af2"
+  integrity sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==
+
+"@types/d3-ease@^3.0.0":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-ease/-/d3-ease-3.0.2.tgz#e28db1bfbfa617076f7770dd1d9a48eaa3b6c51b"
+  integrity sha512-NcV1JjO5oDzoK26oMzbILE6HW7uVXOHLQvHshBUW4UMdZGfiY6v5BeQwh9a9tCzv+CeefZQHJt5SRgK154RtiA==
+
+"@types/d3-interpolate@^3.0.1":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz#412b90e84870285f2ff8a846c6eb60344f12a41c"
+  integrity sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==
+  dependencies:
+    "@types/d3-color" "*"
+
+"@types/d3-path@*":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.1.0.tgz#2b907adce762a78e98828f0b438eaca339ae410a"
+  integrity sha512-P2dlU/q51fkOc/Gfl3Ul9kicV7l+ra934qBFXCFhrZMOL6du1TM0pm1ThYvENukyOn5h9v+yMJ9Fn5JK4QozrQ==
+
+"@types/d3-scale@^4.0.2":
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.8.tgz#d409b5f9dcf63074464bf8ddfb8ee5a1f95945bb"
+  integrity sha512-gkK1VVTr5iNiYJ7vWDI+yUFFlszhNMtVeneJ6lUTKPjprsvLLI9/tgEGiXJOnlINJA8FyA88gfnQsHbybVZrYQ==
+  dependencies:
+    "@types/d3-time" "*"
+
+"@types/d3-shape@^3.1.0":
+  version "3.1.6"
+  resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.6.tgz#65d40d5a548f0a023821773e39012805e6e31a72"
+  integrity sha512-5KKk5aKGu2I+O6SONMYSNflgiP0WfZIQvVUMan50wHsLG1G94JlxEVnCpQARfTtzytuY0p/9PXXZb3I7giofIA==
+  dependencies:
+    "@types/d3-path" "*"
+
+"@types/d3-time@*", "@types/d3-time@^3.0.0":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.4.tgz#8472feecd639691450dd8000eb33edd444e1323f"
+  integrity sha512-yuzZug1nkAAaBlBBikKZTgzCeA+k1uy4ZFwWANOfKw5z5LRhV0gNA7gNkKm7HoK+HRN0wX3EkxGk0fpbWhmB7g==
+
+"@types/d3-timer@^3.0.0":
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/d3-timer/-/d3-timer-3.0.2.tgz#70bbda77dc23aa727413e22e214afa3f0e852f70"
+  integrity sha512-Ps3T8E8dZDam6fUyNiMkekK3XUsaUEik+idO9/YjPtfj2qruF8tFBXS7XhtE4iIXBLxhmLjP3SXpLhVf21I9Lw==
+
 "@types/eslint-scope@^3.7.7":
   version "3.7.7"
   resolved "https://registry.yarnpkg.com/@types/eslint-scope/-/eslint-scope-3.7.7.tgz#3108bd5f18b0cdb277c867b3dd449c9ed7079ac5"
@@ -3633,6 +3684,11 @@ cliui@^8.0.1:
     strip-ansi "^6.0.1"
     wrap-ansi "^7.0.0"
 
+clsx@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -4061,6 +4117,77 @@ csstype@^3.0.2:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
+"d3-array@2 - 3", "d3-array@2.10.0 - 3", d3-array@^3.1.6:
+  version "3.2.4"
+  resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.4.tgz#15fec33b237f97ac5d7c986dc77da273a8ed0bb5"
+  integrity sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==
+  dependencies:
+    internmap "1 - 2"
+
+"d3-color@1 - 3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2"
+  integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==
+
+d3-ease@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-ease/-/d3-ease-3.0.1.tgz#9658ac38a2140d59d346160f1f6c30fda0bd12f4"
+  integrity sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==
+
+"d3-format@1 - 3":
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641"
+  integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA==
+
+"d3-interpolate@1.2.0 - 3", d3-interpolate@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d"
+  integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==
+  dependencies:
+    d3-color "1 - 3"
+
+d3-path@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.1.0.tgz#22df939032fb5a71ae8b1800d61ddb7851c42526"
+  integrity sha512-p3KP5HCf/bvjBSSKuXid6Zqijx7wIfNW+J/maPs+iwR35at5JCbLUT0LzF1cnjbCHWhqzQTIN2Jpe8pRebIEFQ==
+
+d3-scale@^4.0.2:
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396"
+  integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ==
+  dependencies:
+    d3-array "2.10.0 - 3"
+    d3-format "1 - 3"
+    d3-interpolate "1.2.0 - 3"
+    d3-time "2.1.1 - 3"
+    d3-time-format "2 - 4"
+
+d3-shape@^3.1.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.2.0.tgz#a1a839cbd9ba45f28674c69d7f855bcf91dfc6a5"
+  integrity sha512-SaLBuwGm3MOViRq2ABk3eLoxwZELpH6zhl3FbAoJ7Vm1gofKx6El1Ib5z23NUEhF9AsGl7y+dzLe5Cw2AArGTA==
+  dependencies:
+    d3-path "^3.1.0"
+
+"d3-time-format@2 - 4":
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a"
+  integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg==
+  dependencies:
+    d3-time "1 - 3"
+
+"d3-time@1 - 3", "d3-time@2.1.1 - 3", d3-time@^3.0.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.1.0.tgz#9310db56e992e3c0175e1ef385e545e48a9bb5c7"
+  integrity sha512-VqKjzBLejbSMT4IgbmVgDjpkYrNWUYJnbCGo874u7MMKIWsILRX+OpX/gTk8MqjpT1A/c6HY2dCA77ZN0lkQ2Q==
+  dependencies:
+    d3-array "2 - 3"
+
+d3-timer@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/d3-timer/-/d3-timer-3.0.1.tgz#6284d2a2708285b1abb7e201eda4380af35e63b0"
+  integrity sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==
+
 damerau-levenshtein@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7"
@@ -4132,6 +4259,11 @@ debug@^3.2.7:
   dependencies:
     ms "^2.1.1"
 
+decimal.js-light@^2.4.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/decimal.js-light/-/decimal.js-light-2.5.1.tgz#134fd32508f19e208f4fb2f8dac0d2626a867934"
+  integrity sha512-qIMFpTMZmny+MMIitAB6D7iVPEorVw6YQRWkvarTkT4tBeSLLiHzcwj6q0MmYSFCiVpiqPJTJEYIrpcPzVEIvg==
+
 decimal.js@^10.2.1, decimal.js@^10.4.2:
   version "10.4.3"
   resolved "https://registry.yarnpkg.com/decimal.js/-/decimal.js-10.4.3.tgz#1044092884d245d1b7f65725fa4ad4c6f781cc23"
@@ -4295,6 +4427,14 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
+dom-helpers@^5.0.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
+  dependencies:
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
+
 dom-serializer@0:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.2.2.tgz#1afb81f533717175d478655debc5e332d9f9bb51"
@@ -5008,7 +5148,7 @@ etag@~1.8.1:
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
   integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
-eventemitter3@^4.0.0:
+eventemitter3@^4.0.0, eventemitter3@^4.0.1:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@@ -5101,6 +5241,11 @@ fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
+fast-equals@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/fast-equals/-/fast-equals-5.0.1.tgz#a4eefe3c5d1c0d021aeed0bc10ba5e0c12ee405d"
+  integrity sha512-WF1Wi8PwwSY7/6Kx0vKXtw8RwuSGoM1bvDaJbu7MxDlR1vovZjIAKrnzyrThgAjm6JDTu0fVgWXDlMGspodfoQ==
+
 fast-glob@^3.2.9, fast-glob@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
@@ -5872,6 +6017,11 @@ internal-slot@^1.0.7:
     hasown "^2.0.0"
     side-channel "^1.0.4"
 
+"internmap@1 - 2":
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
+  integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
+
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@@ -8705,7 +8855,7 @@ prompts@^2.0.1, prompts@^2.4.2:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -8859,7 +9009,7 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
-react-is@^18.0.0:
+react-is@^18.0.0, react-is@^18.3.1:
   version "18.3.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
   integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
@@ -8924,6 +9074,25 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-smooth@^4.0.0:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/react-smooth/-/react-smooth-4.0.4.tgz#a5875f8bb61963ca61b819cedc569dc2453894b4"
+  integrity sha512-gnGKTpYwqL0Iii09gHobNolvX4Kiq4PKx6eWBCYYix+8cdw+cGo3do906l1NBPKkSWx1DghC1dlWG9L2uGd61Q==
+  dependencies:
+    fast-equals "^5.0.1"
+    prop-types "^15.8.1"
+    react-transition-group "^4.4.5"
+
+react-transition-group@^4.4.5:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
+  dependencies:
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
+    loose-envify "^1.4.0"
+    prop-types "^15.6.2"
+
 react@^19.0.0:
   version "19.0.0"
   resolved "https://registry.yarnpkg.com/react/-/react-19.0.0.tgz#6e1969251b9f108870aa4bff37a0ce9ddfaaabdd"
@@ -8965,6 +9134,27 @@ readdirp@~3.6.0:
   dependencies:
     picomatch "^2.2.1"
 
+recharts-scale@^0.4.4:
+  version "0.4.5"
+  resolved "https://registry.yarnpkg.com/recharts-scale/-/recharts-scale-0.4.5.tgz#0969271f14e732e642fcc5bd4ab270d6e87dd1d9"
+  integrity sha512-kivNFO+0OcUNu7jQquLXAxz1FIwZj8nrj+YkOKc5694NbjCvcT6aSZiIzNzd2Kul4o4rTto8QVR9lMNtxD4G1w==
+  dependencies:
+    decimal.js-light "^2.4.1"
+
+recharts@^2.15.0:
+  version "2.15.0"
+  resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.15.0.tgz#0b77bff57a43885df9769ae649a14cb1a7fe19aa"
+  integrity sha512-cIvMxDfpAmqAmVgc4yb7pgm/O1tmmkl/CjrvXuW+62/+7jj/iF9Ykm+hb/UJt42TREHMyd3gb+pkgoa2MxgDIw==
+  dependencies:
+    clsx "^2.0.0"
+    eventemitter3 "^4.0.1"
+    lodash "^4.17.21"
+    react-is "^18.3.1"
+    react-smooth "^4.0.0"
+    recharts-scale "^0.4.4"
+    tiny-invariant "^1.3.1"
+    victory-vendor "^36.6.8"
+
 recursive-readdir@^2.2.2:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/recursive-readdir/-/recursive-readdir-2.2.3.tgz#e726f328c0d69153bcabd5c322d3195252379372"
@@ -10033,6 +10223,11 @@ thunky@^1.0.2:
   resolved "https://registry.yarnpkg.com/thunky/-/thunky-1.1.0.tgz#5abaf714a9405db0504732bbccd2cedd9ef9537d"
   integrity sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA==
 
+tiny-invariant@^1.3.1:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.3.tgz#46680b7a873a0d5d10005995eb90a70d74d60127"
+  integrity sha512-+FbBPE1o9QAYvviau/qC5SE3caw21q3xkvWKBtja5vgqOWIHHJ3ioaq1VPfn/Szqctz2bU/oYeKd9/z5BL+PVg==
+
 tmpl@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.5.tgz#8683e0b902bb9c20c4f726e3c0b69f36518c07cc"
@@ -10397,6 +10592,26 @@ vary@~1.1.2:
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
   integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
+victory-vendor@^36.6.8:
+  version "36.9.2"
+  resolved "https://registry.yarnpkg.com/victory-vendor/-/victory-vendor-36.9.2.tgz#668b02a448fa4ea0f788dbf4228b7e64669ff801"
+  integrity sha512-PnpQQMuxlwYdocC8fIJqVXvkeViHYzotI+NJrCuav0ZYFoq912ZHBk3mCeuj+5/VpodOjPe1z0Fk2ihgzlXqjQ==
+  dependencies:
+    "@types/d3-array" "^3.0.3"
+    "@types/d3-ease" "^3.0.0"
+    "@types/d3-interpolate" "^3.0.1"
+    "@types/d3-scale" "^4.0.2"
+    "@types/d3-shape" "^3.1.0"
+    "@types/d3-time" "^3.0.0"
+    "@types/d3-timer" "^3.0.0"
+    d3-array "^3.1.6"
+    d3-ease "^3.0.1"
+    d3-interpolate "^3.0.1"
+    d3-scale "^4.0.2"
+    d3-shape "^3.1.0"
+    d3-time "^3.0.0"
+    d3-timer "^3.0.1"
+
 w3c-hr-time@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/w3c-hr-time/-/w3c-hr-time-1.0.2.tgz#0a89cdf5cc15822df9c360543676963e0cc308cd"

From 346bd8abe119943b550d6d21f9be7a743533dd94 Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 19:16:15 +0900
Subject: [PATCH 06/18] =?UTF-8?q?feat:=20usePopulation=E3=82=AB=E3=82=B9?=
 =?UTF-8?q?=E3=82=BF=E3=83=A0=E3=83=95=E3=83=83=E3=82=AF=E3=82=92=E4=BD=9C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/usePopulation.ts | 32 ++++++++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 src/hooks/usePopulation.ts

diff --git a/src/hooks/usePopulation.ts b/src/hooks/usePopulation.ts
new file mode 100644
index 0000000..2e654ad
--- /dev/null
+++ b/src/hooks/usePopulation.ts
@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react";
+import { fetchPopulation } from "../api/population";
+import { PopulationCategory } from "../types/population";
+
+const usePopulation = (prefCode: number | null) => {
+  const [data, setData] = useState<PopulationCategory[]>([]);
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (!prefCode) return;
+
+    const fetchData = async () => {
+      setLoading(true);
+      setError(null);
+      try {
+        const result = await fetchPopulation(prefCode.toString());
+        setData(result);
+      } catch (err) {
+        setError("人口データの取得に失敗しました. " + err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    fetchData();
+  }, [prefCode]);
+
+  return { data, loading, error };
+};
+
+export default usePopulation;

From cfe5641c5aff28245a2128bfb0826eef8e4bf9fe Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 19:26:21 +0900
Subject: [PATCH 07/18] =?UTF-8?q?test:=20PopulationChart=E3=82=B3=E3=83=B3?=
 =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AE=E3=83=86?=
 =?UTF-8?q?=E3=82=B9=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/tests/PopulationChart.test.tsx | 53 ++++++++++++++++++++++++++++++
 src/tests/setupTests.ts            |  6 ++++
 2 files changed, 59 insertions(+)
 create mode 100644 src/tests/PopulationChart.test.tsx

diff --git a/src/tests/PopulationChart.test.tsx b/src/tests/PopulationChart.test.tsx
new file mode 100644
index 0000000..d4f6ad0
--- /dev/null
+++ b/src/tests/PopulationChart.test.tsx
@@ -0,0 +1,53 @@
+import React from "react";
+import { render, screen, fireEvent } from "@testing-library/react";
+import PopulationChart from "../components/PopulationChart";
+
+jest.mock("recharts", () => {
+  const OriginalRecharts = jest.requireActual("recharts");
+
+  return {
+    ...OriginalRecharts,
+    ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
+      <div style={{ width: 800, height: 400 }}>{children}</div>
+    ),
+  };
+});
+
+const mockData = [
+  {
+    label: "総人口",
+    data: [
+      { year: 1960, value: 5000 },
+      { year: 1965, value: 6000 },
+    ],
+  },
+  {
+    label: "年少人口",
+    data: [
+      { year: 1960, value: 2000 },
+      { year: 1965, value: 2500 },
+    ],
+  },
+];
+
+describe("PopulationChartコンポーネントのテスト", () => {
+  it("グラフが正しくレンダリングされる", () => {
+    render(<PopulationChart data={mockData} />);
+    expect(screen.getByText("総人口")).toBeInTheDocument();
+    expect(screen.getByText("年少人口")).toBeInTheDocument();
+  });
+
+  it("カテゴリ切り替えボタンが動作する", () => {
+    render(<PopulationChart data={mockData} />);
+    const button = screen.getByText("年少人口");
+    fireEvent.click(button);
+    expect(screen.getByText("年少人口")).toHaveStyle(
+      "background-color: #007bff"
+    );
+  });
+
+  it("データがない場合にエラーメッセージが表示される", () => {
+    render(<PopulationChart data={[]} />);
+    expect(screen.getByText("データがありません")).toBeInTheDocument();
+  });
+});
diff --git a/src/tests/setupTests.ts b/src/tests/setupTests.ts
index 1dd407a..6c41415 100644
--- a/src/tests/setupTests.ts
+++ b/src/tests/setupTests.ts
@@ -3,3 +3,9 @@
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 import "@testing-library/jest-dom";
+
+global.ResizeObserver = class {
+  observe() {}
+  unobserve() {}
+  disconnect() {}
+};

From 272ce13f12872729707851539081eb039ca0019a Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 19:47:55 +0900
Subject: [PATCH 08/18] =?UTF-8?q?fix:=20PrefectureCheckbox=E3=82=B3?=
 =?UTF-8?q?=E3=83=B3=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=A8?=
 =?UTF-8?q?=E3=83=86=E3=82=B9=E3=83=88=E3=82=92=E4=BF=AE=E6=AD=A3=20-=20?=
 =?UTF-8?q?=E3=81=99=E3=81=B9=E3=81=A6=E9=81=B8=E6=8A=9E=E3=81=A8=E9=81=B8?=
 =?UTF-8?q?=E6=8A=9E=E3=82=92=E3=82=AF=E3=83=AA=E3=82=A2=E3=83=9C=E3=82=BF?=
 =?UTF-8?q?=E3=83=B3=E3=82=92=E8=BF=BD=E5=8A=A0=20-=20=E3=83=86=E3=82=B9?=
 =?UTF-8?q?=E3=83=88=E3=82=92=E4=BF=AE=E6=AD=A3=E3=81=97=E3=80=81=E3=83=A2?=
 =?UTF-8?q?=E3=83=83=E3=82=AF=E3=81=A8=E5=8B=95=E4=BD=9C=E3=82=92=E7=A2=BA?=
 =?UTF-8?q?=E8=AA=8D?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PrefectureCheckbox.tsx | 25 ++++++------
 src/tests/PrefectureCheckbox.test.tsx | 56 +++++++++++++--------------
 2 files changed, 39 insertions(+), 42 deletions(-)

diff --git a/src/components/PrefectureCheckbox.tsx b/src/components/PrefectureCheckbox.tsx
index 447f226..e2f0b12 100644
--- a/src/components/PrefectureCheckbox.tsx
+++ b/src/components/PrefectureCheckbox.tsx
@@ -1,31 +1,32 @@
 import React from "react";
 import { Prefecture } from "../types/prefecture";
-import usePrefecturesStore from "../store/prefecturesStore";
 
-const PrefectureCheckbox: React.FC<{ prefectures: Prefecture[] }> = ({
+interface PrefectureCheckboxProps {
+  prefectures: Prefecture[];
+  onSelect: (prefCode: number) => void;
+}
+
+const PrefectureCheckbox: React.FC<PrefectureCheckboxProps> = ({
   prefectures,
+  onSelect,
 }) => {
-  const { selectedPrefectures, togglePrefecture, selectAll, clearSelection } =
-    usePrefecturesStore();
-
   return (
     <div>
-      <h3>都道府県選択</h3>
+      <h3>都道府県を選択</h3>
       <button
-        onClick={() => selectAll(prefectures.map((pref) => pref.prefCode))}
+        onClick={() => prefectures.forEach((pref) => onSelect(pref.prefCode))}
       >
         すべて選択
       </button>
-      <button onClick={clearSelection}>選択をクリア</button>
+      <button onClick={() => onSelect(0)}>選択をクリア</button>{" "}
       {prefectures.map((prefecture) => (
         <div key={prefecture.prefCode}>
           <input
             type="checkbox"
-            id={prefecture.prefCode.toString()}
-            checked={selectedPrefectures.includes(prefecture.prefCode)}
-            onChange={() => togglePrefecture(prefecture.prefCode)}
+            id={`pref-${prefecture.prefCode}`}
+            onChange={() => onSelect(prefecture.prefCode)}
           />
-          <label htmlFor={prefecture.prefCode.toString()}>
+          <label htmlFor={`pref-${prefecture.prefCode}`}>
             {prefecture.prefName}
           </label>
         </div>
diff --git a/src/tests/PrefectureCheckbox.test.tsx b/src/tests/PrefectureCheckbox.test.tsx
index 83391bd..d787f36 100644
--- a/src/tests/PrefectureCheckbox.test.tsx
+++ b/src/tests/PrefectureCheckbox.test.tsx
@@ -1,6 +1,5 @@
 import React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
-import usePrefecturesStore from "../store/prefecturesStore";
 import PrefectureCheckbox from "../components/PrefectureCheckbox";
 
 jest.mock("../store/prefecturesStore", () => ({
@@ -15,57 +14,54 @@ describe("PrefectureCheckboxコンポーネントの動作", () => {
     { prefCode: 3, prefName: "岩手県" },
   ];
 
-  let mockTogglePrefecture: jest.Mock;
-  let mockSelectAll: jest.Mock;
-  let mockClearSelection: jest.Mock;
+  let mockOnSelect: jest.Mock;
 
   beforeEach(() => {
-    mockTogglePrefecture = jest.fn();
-    mockSelectAll = jest.fn();
-    mockClearSelection = jest.fn();
-
-    (
-      usePrefecturesStore as jest.MockedFunction<typeof usePrefecturesStore>
-    ).mockImplementation(() => ({
-      selectedPrefectures: [],
-      togglePrefecture: mockTogglePrefecture,
-      selectAll: mockSelectAll,
-      clearSelection: mockClearSelection,
-    }));
-  });
-
-  it("都道府県が正しくレンダリングされる", () => {
-    render(<PrefectureCheckbox prefectures={mockPrefectures} />);
-
-    mockPrefectures.forEach((pref) => {
-      expect(screen.getByLabelText(pref.prefName)).toBeInTheDocument();
-    });
+    mockOnSelect = jest.fn();
   });
 
   it("チェックボックスをクリックすると状態が切り替わる", () => {
-    render(<PrefectureCheckbox prefectures={mockPrefectures} />);
+    render(
+      <PrefectureCheckbox
+        prefectures={mockPrefectures}
+        onSelect={mockOnSelect}
+      />
+    );
 
     const checkbox = screen.getByLabelText("北海道");
     fireEvent.click(checkbox);
 
-    expect(mockTogglePrefecture).toHaveBeenCalledWith(1);
+    expect(mockOnSelect).toHaveBeenCalledWith(1);
   });
 
   it("全て選択ボタンが正しく動作する", () => {
-    render(<PrefectureCheckbox prefectures={mockPrefectures} />);
+    render(
+      <PrefectureCheckbox
+        prefectures={mockPrefectures}
+        onSelect={mockOnSelect}
+      />
+    );
 
     const selectAllButton = screen.getByText("すべて選択");
     fireEvent.click(selectAllButton);
 
-    expect(mockSelectAll).toHaveBeenCalledWith([1, 2, 3]);
+    expect(mockOnSelect).toHaveBeenCalledTimes(mockPrefectures.length);
+    expect(mockOnSelect).toHaveBeenCalledWith(1);
+    expect(mockOnSelect).toHaveBeenCalledWith(2);
+    expect(mockOnSelect).toHaveBeenCalledWith(3);
   });
 
   it("選択をクリアボタンが正しく動作する", () => {
-    render(<PrefectureCheckbox prefectures={mockPrefectures} />);
+    render(
+      <PrefectureCheckbox
+        prefectures={mockPrefectures}
+        onSelect={mockOnSelect}
+      />
+    );
 
     const clearButton = screen.getByText("選択をクリア");
     fireEvent.click(clearButton);
 
-    expect(mockClearSelection).toHaveBeenCalled();
+    expect(mockOnSelect).toHaveBeenCalledWith(0);
   });
 });

From 596db37ea8dfef06aa6b0e5f699628ef0d521932 Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 19:48:14 +0900
Subject: [PATCH 09/18] =?UTF-8?q?feat:=20usePrefecturesStore=E3=82=92?=
 =?UTF-8?q?=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/usePrefecturesStore.ts | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)
 create mode 100644 src/store/usePrefecturesStore.ts

diff --git a/src/store/usePrefecturesStore.ts b/src/store/usePrefecturesStore.ts
new file mode 100644
index 0000000..09d883c
--- /dev/null
+++ b/src/store/usePrefecturesStore.ts
@@ -0,0 +1,28 @@
+import { create } from "zustand";
+import { Prefecture } from "../types/prefecture";
+
+interface PrefecturesState {
+  selectedPrefectures: number[];
+  prefectures: Prefecture[];
+  togglePrefecture: (prefCode: number) => void;
+  setPrefectures: (prefectures: Prefecture[]) => void;
+  clearSelection: () => void;
+}
+
+const usePrefecturesStore = create<PrefecturesState>((set) => ({
+  selectedPrefectures: [],
+  prefectures: [],
+  togglePrefecture: (prefCode: number) =>
+    set((state) => ({
+      selectedPrefectures: state.selectedPrefectures.includes(prefCode)
+        ? state.selectedPrefectures.filter((code) => code !== prefCode)
+        : [...state.selectedPrefectures, prefCode],
+    })),
+  setPrefectures: (prefectures: Prefecture[]) => set(() => ({ prefectures })),
+  clearSelection: () =>
+    set(() => ({
+      selectedPrefectures: [],
+    })),
+}));
+
+export default usePrefecturesStore;

From 972662d0846b8c8d565e94c156859f67cbe9495e Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 19:48:37 +0900
Subject: [PATCH 10/18] =?UTF-8?q?feat:=20PopulationGraphPage=E3=82=92?=
 =?UTF-8?q?=E4=BD=9C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PopulationGraphPage.tsx | 45 +++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/pages/PopulationGraphPage.tsx

diff --git a/src/pages/PopulationGraphPage.tsx b/src/pages/PopulationGraphPage.tsx
new file mode 100644
index 0000000..cb7d9fe
--- /dev/null
+++ b/src/pages/PopulationGraphPage.tsx
@@ -0,0 +1,45 @@
+import React, { useEffect, useState } from "react";
+import PrefectureCheckbox from "../components/PrefectureCheckbox";
+import PopulationChart from "../components/PopulationChart";
+import usePopulation from "../hooks/usePopulation";
+import usePrefecturesStore from "../store/usePrefecturesStore";
+import { fetchPrefectures } from "../api/prefectures";
+
+const PopulationGraphPage = () => {
+  const { selectedPrefectures, prefectures, setPrefectures } =
+    usePrefecturesStore();
+  const [currentPref, setCurrentPref] = useState<number | null>(null);
+  const { data, loading, error } = usePopulation(currentPref);
+
+  useEffect(() => {
+    const initializePrefectures = async () => {
+      try {
+        const fetchedPrefectures = await fetchPrefectures();
+        setPrefectures(fetchedPrefectures);
+      } catch (err) {
+        throw new Error("都道府県データの取得に失敗しました:" + err);
+      }
+    };
+    initializePrefectures();
+  }, [setPrefectures]);
+
+  const handlePrefectureSelect = (prefCode: number) => {
+    setCurrentPref(prefCode);
+  };
+
+  return (
+    <div>
+      <h1>人口推移グラフ</h1>
+      <PrefectureCheckbox
+        prefectures={prefectures}
+        onSelect={handlePrefectureSelect}
+      />
+      {selectedPrefectures.length === 0 && <p>都道府県を選択してください。</p>}
+      {loading && <p>データを取得中...</p>}
+      {error && <p>{error}</p>}
+      <PopulationChart data={data} />
+    </div>
+  );
+};
+
+export default PopulationGraphPage;

From 0c0b513e9552adb5bece40e0c5c817f1f941c00c Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 20:34:33 +0900
Subject: [PATCH 11/18] =?UTF-8?q?feat:=20=E3=83=AC=E3=82=A4=E3=82=A2?=
 =?UTF-8?q?=E3=82=A6=E3=83=88=E4=BF=AE=E6=AD=A3=E3=81=A8=E3=82=B0=E3=83=A9?=
 =?UTF-8?q?=E3=83=95=E6=8F=8F=E7=94=BB=E6=A9=9F=E8=83=BD=E3=81=AE=E7=B5=B1?=
 =?UTF-8?q?=E5=90=88=E6=BA=96=E5=82=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/App.tsx b/src/App.tsx
index ff61bdd..33a01ac 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,11 +1,13 @@
 import React from "react";
 import Header from "./components/Header";
+import PopulationGraphPage from "./pages/PopulationGraphPage";
 import "./assets/styles/reset.css";
 
 function App() {
   return (
     <div className="layout">
       <Header />
+      <PopulationGraphPage />
     </div>
   );
 }

From a6f31006f06e1b71a025b43a2425646dee6ccc5d Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 20:34:44 +0900
Subject: [PATCH 12/18] =?UTF-8?q?fix:=20=E4=BA=BA=E5=8F=A3=E3=83=87?=
 =?UTF-8?q?=E3=83=BC=E3=82=BF=E5=8F=96=E5=BE=97=E3=83=AD=E3=82=B8=E3=83=83?=
 =?UTF-8?q?=E3=82=AF=E3=81=AE=E6=94=B9=E5=96=84=E3=81=A8=E5=9E=8B=E5=AE=89?=
 =?UTF-8?q?=E5=85=A8=E6=80=A7=E3=81=AE=E5=90=91=E4=B8=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/population.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/population.ts b/src/api/population.ts
index 1bb0580..009e89b 100644
--- a/src/api/population.ts
+++ b/src/api/population.ts
@@ -6,7 +6,7 @@ export const fetchPopulation = async (
 ): Promise<PopulationCategory[]> => {
   try {
     const response = await axios.get<PopulationResponse>(
-      `${process.env.REACT_APP_YUMEMI_API_URL}/api/v1/population/composition/perYear?${prefCode}`,
+      `${process.env.REACT_APP_YUMEMI_API_URL}/api/v1/population/composition/perYear?prefCode=${prefCode}`,
       {
         headers: {
           "X-API-KEY": process.env.REACT_APP_YUMEMI_API_KEY!,

From 505ceebd7fc4cedc047fd9256e1282e0064568d8 Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 20:35:02 +0900
Subject: [PATCH 13/18] =?UTF-8?q?fix:=20=E9=83=BD=E9=81=93=E5=BA=9C?=
 =?UTF-8?q?=E7=9C=8C=E3=83=87=E3=83=BC=E3=82=BF=E5=8F=96=E5=BE=97API?=
 =?UTF-8?q?=E3=81=AE=E3=82=A8=E3=83=A9=E3=83=BC=E3=83=8F=E3=83=B3=E3=83=89?=
 =?UTF-8?q?=E3=83=AA=E3=83=B3=E3=82=B0=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/prefectures.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/api/prefectures.ts b/src/api/prefectures.ts
index 0bf3fc6..fdb544b 100644
--- a/src/api/prefectures.ts
+++ b/src/api/prefectures.ts
@@ -16,7 +16,7 @@ export const fetchPrefectures = async (): Promise<Prefecture[]> => {
       throw new Error("Failed to fetch prefectures");
     }
 
-    return response.data as Prefecture[];
+    return response.data.result as Prefecture[];
   } catch (error) {
     throw new Error("Error fetching prefectures: " + error);
   }

From a92b47a7cdb62283845efdb5b9cae307c410e15e Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 20:35:29 +0900
Subject: [PATCH 14/18] =?UTF-8?q?feat:=20=E3=82=B0=E3=83=A9=E3=83=95?=
 =?UTF-8?q?=E6=8F=8F=E7=94=BB=E3=81=AB=E8=A4=87=E6=95=B0=E9=83=BD=E9=81=93?=
 =?UTF-8?q?=E5=BA=9C=E7=9C=8C=E5=AF=BE=E5=BF=9C=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PopulationChart.tsx | 88 +++++++++++++-----------------
 1 file changed, 38 insertions(+), 50 deletions(-)

diff --git a/src/components/PopulationChart.tsx b/src/components/PopulationChart.tsx
index eeffea2..9897e65 100644
--- a/src/components/PopulationChart.tsx
+++ b/src/components/PopulationChart.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React from "react";
 import {
   LineChart,
   Line,
@@ -15,65 +15,53 @@ interface PopulationData {
   value: number;
 }
 
-interface PopulationCategory {
-  label: string;
-  data: PopulationData[];
-}
-
 interface PopulationChartProps {
-  data: PopulationCategory[];
+  data: { [key: string]: PopulationData[] };
+  prefectureNames: { [key: number]: string }; // 都道府県コードと都道府県名のマッピング
 }
 
-const PopulationChart: React.FC<PopulationChartProps> = ({ data }) => {
-  const [selectedCategory, setSelectedCategory] = useState("総人口");
+const PopulationChart: React.FC<PopulationChartProps> = ({
+  data,
+  prefectureNames,
+}) => {
+  const allYears = Object.values(data)
+    .flat()
+    .map((entry) => entry.year);
 
-  const selectedData = data.find(
-    (category) => category.label === selectedCategory
-  );
+  const uniqueYears = Array.from(new Set(allYears)).sort();
+
+  const combinedData = uniqueYears.map((year) => {
+    const entry: { [key: string]: number | string } = { year };
+    for (const [prefCode, populationData] of Object.entries(data)) {
+      const yearData = populationData.find((d) => d.year === year);
+      entry[prefCode] = yearData ? yearData.value : 0;
+    }
+    return entry;
+  });
 
   return (
     <div style={{ width: "100%", height: "500px" }}>
-      <div>
-        {data.map((category) => (
-          <button
-            key={category.label}
-            onClick={() => setSelectedCategory(category.label)}
-            style={{
-              margin: "5px",
-              padding: "10px",
-              backgroundColor:
-                category.label === selectedCategory ? "#007bff" : "#e0e0e0",
-              color: category.label === selectedCategory ? "#fff" : "#000",
-              border: "none",
-              borderRadius: "5px",
-            }}
-          >
-            {category.label}
-          </button>
-        ))}
-      </div>
-      {selectedData ? (
-        <ResponsiveContainer width="100%" height="100%">
-          <LineChart
-            data={selectedData.data}
-            margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
-          >
-            <CartesianGrid strokeDasharray="3 3" />
-            <XAxis dataKey="year" />
-            <YAxis />
-            <Tooltip />
-            <Legend />
+      <ResponsiveContainer width="100%" height="100%">
+        <LineChart
+          data={combinedData}
+          margin={{ top: 20, right: 30, left: 20, bottom: 5 }}
+        >
+          <CartesianGrid strokeDasharray="3 3" />
+          <XAxis dataKey="year" />
+          <YAxis />
+          <Tooltip />
+          <Legend />
+          {Object.keys(data).map((prefCode) => (
             <Line
+              key={prefCode}
               type="monotone"
-              dataKey="value"
-              stroke="#8884d8"
-              activeDot={{ r: 8 }}
+              dataKey={prefCode}
+              name={prefectureNames[Number(prefCode)] || `都道府県 ${prefCode}`}
+              stroke={`#${Math.floor(Math.random() * 16777215).toString(16)}`} // ランダム色
             />
-          </LineChart>
-        </ResponsiveContainer>
-      ) : (
-        <p>データがありません</p>
-      )}
+          ))}
+        </LineChart>
+      </ResponsiveContainer>
     </div>
   );
 };

From 438c0426a3c6ce26f5bbdec5e242bc4662b54ebc Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 20:35:48 +0900
Subject: [PATCH 15/18] =?UTF-8?q?fix:=20=E3=83=81=E3=82=A7=E3=83=83?=
 =?UTF-8?q?=E3=82=AF=E3=83=9C=E3=83=83=E3=82=AF=E3=82=B9=E3=81=AE=E9=81=B8?=
 =?UTF-8?q?=E6=8A=9E=E7=8A=B6=E6=85=8B=E7=AE=A1=E7=90=86=E3=81=AE=E3=83=90?=
 =?UTF-8?q?=E3=82=B0=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/PrefectureCheckbox.tsx | 12 +++++-------
 1 file changed, 5 insertions(+), 7 deletions(-)

diff --git a/src/components/PrefectureCheckbox.tsx b/src/components/PrefectureCheckbox.tsx
index e2f0b12..034f10d 100644
--- a/src/components/PrefectureCheckbox.tsx
+++ b/src/components/PrefectureCheckbox.tsx
@@ -7,18 +7,16 @@ interface PrefectureCheckboxProps {
 }
 
 const PrefectureCheckbox: React.FC<PrefectureCheckboxProps> = ({
-  prefectures,
+  prefectures = [],
   onSelect,
 }) => {
+  if (!Array.isArray(prefectures)) {
+    return null;
+  }
+
   return (
     <div>
       <h3>都道府県を選択</h3>
-      <button
-        onClick={() => prefectures.forEach((pref) => onSelect(pref.prefCode))}
-      >
-        すべて選択
-      </button>
-      <button onClick={() => onSelect(0)}>選択をクリア</button>{" "}
       {prefectures.map((prefecture) => (
         <div key={prefecture.prefCode}>
           <input

From 3e027ca168c0eb926025b60c2fe9e9e855b3b78b Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 20:36:10 +0900
Subject: [PATCH 16/18] =?UTF-8?q?feat:=20=E9=83=BD=E9=81=93=E5=BA=9C?=
 =?UTF-8?q?=E7=9C=8C=E3=83=87=E3=83=BC=E3=82=BF=E3=81=A8=E4=BA=BA=E5=8F=A3?=
 =?UTF-8?q?=E3=83=87=E3=83=BC=E3=82=BF=E3=81=AE=E9=80=A3=E6=90=BA=E5=87=A6?=
 =?UTF-8?q?=E7=90=86=E3=82=92=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/PopulationGraphPage.tsx | 67 +++++++++++++++++++++++++------
 1 file changed, 55 insertions(+), 12 deletions(-)

diff --git a/src/pages/PopulationGraphPage.tsx b/src/pages/PopulationGraphPage.tsx
index cb7d9fe..2a59bb6 100644
--- a/src/pages/PopulationGraphPage.tsx
+++ b/src/pages/PopulationGraphPage.tsx
@@ -1,43 +1,86 @@
 import React, { useEffect, useState } from "react";
 import PrefectureCheckbox from "../components/PrefectureCheckbox";
 import PopulationChart from "../components/PopulationChart";
-import usePopulation from "../hooks/usePopulation";
 import usePrefecturesStore from "../store/usePrefecturesStore";
 import { fetchPrefectures } from "../api/prefectures";
+import { fetchPopulation } from "../api/population";
+import { Prefecture } from "../types/prefecture";
+import { PopulationData } from "../types/population";
 
-const PopulationGraphPage = () => {
+const PopulationGraphPage: React.FC = () => {
   const { selectedPrefectures, prefectures, setPrefectures } =
     usePrefecturesStore();
-  const [currentPref, setCurrentPref] = useState<number | null>(null);
-  const { data, loading, error } = usePopulation(currentPref);
+  const [populationData, setPopulationData] = useState<{
+    [key: string]: PopulationData[];
+  }>({});
+  const [loading, setLoading] = useState<boolean>(false);
+  const [error, setError] = useState<string | null>(null);
 
   useEffect(() => {
-    const initializePrefectures = async () => {
+    const initializePrefectures = async (): Promise<void> => {
       try {
-        const fetchedPrefectures = await fetchPrefectures();
+        const fetchedPrefectures: Prefecture[] = await fetchPrefectures();
         setPrefectures(fetchedPrefectures);
       } catch (err) {
-        throw new Error("都道府県データの取得に失敗しました:" + err);
+        setError("都道府県データの取得に失敗しました:" + err);
       }
     };
     initializePrefectures();
   }, [setPrefectures]);
 
-  const handlePrefectureSelect = (prefCode: number) => {
-    setCurrentPref(prefCode);
-  };
+  useEffect(() => {
+    const fetchPopulationData = async (): Promise<void> => {
+      setLoading(true);
+      setError(null);
+
+      const newPopulationData: { [key: string]: PopulationData[] } = {};
+
+      try {
+        for (const prefCode of selectedPrefectures) {
+          const categories = await fetchPopulation(prefCode.toString());
+          const totalPopulation = categories.find(
+            (category) => category.label === "総人口"
+          )?.data;
+
+          if (totalPopulation) {
+            newPopulationData[prefCode.toString()] = totalPopulation;
+          }
+        }
+        setPopulationData(newPopulationData);
+      } catch (err) {
+        setError("人口データの取得に失敗しました:" + err);
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    if (selectedPrefectures.length > 0) {
+      fetchPopulationData();
+    } else {
+      setPopulationData({});
+    }
+  }, [selectedPrefectures]);
 
   return (
     <div>
       <h1>人口推移グラフ</h1>
       <PrefectureCheckbox
         prefectures={prefectures}
-        onSelect={handlePrefectureSelect}
+        onSelect={(prefCode: number) => {
+          const { togglePrefecture } = usePrefecturesStore.getState();
+          togglePrefecture(prefCode);
+        }}
       />
       {selectedPrefectures.length === 0 && <p>都道府県を選択してください。</p>}
       {loading && <p>データを取得中...</p>}
       {error && <p>{error}</p>}
-      <PopulationChart data={data} />
+      <PopulationChart
+        data={populationData}
+        prefectureNames={prefectures.reduce(
+          (acc, pref) => ({ ...acc, [pref.prefCode]: pref.prefName }),
+          {}
+        )}
+      />
     </div>
   );
 };

From 86d14953e6587a1b52c2724cffbe4b8caab9120c Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 20:36:23 +0900
Subject: [PATCH 17/18] =?UTF-8?q?test:=20PopulationChart=E3=82=B3=E3=83=B3?=
 =?UTF-8?q?=E3=83=9D=E3=83=BC=E3=83=8D=E3=83=B3=E3=83=88=E3=81=AE=E3=83=86?=
 =?UTF-8?q?=E3=82=B9=E3=83=88=E3=81=AB=E9=83=BD=E9=81=93=E5=BA=9C=E7=9C=8C?=
 =?UTF-8?q?=E5=90=8D=E3=81=AE=E6=A4=9C=E8=A8=BC=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/tests/PopulationChart.test.tsx | 43 +++++++++++++++++-------------
 1 file changed, 24 insertions(+), 19 deletions(-)

diff --git a/src/tests/PopulationChart.test.tsx b/src/tests/PopulationChart.test.tsx
index d4f6ad0..2efec61 100644
--- a/src/tests/PopulationChart.test.tsx
+++ b/src/tests/PopulationChart.test.tsx
@@ -13,32 +13,37 @@ jest.mock("recharts", () => {
   };
 });
 
-const mockData = [
-  {
-    label: "総人口",
-    data: [
-      { year: 1960, value: 5000 },
-      { year: 1965, value: 6000 },
-    ],
-  },
-  {
-    label: "年少人口",
-    data: [
-      { year: 1960, value: 2000 },
-      { year: 1965, value: 2500 },
-    ],
-  },
-];
+const mockData = {
+  総人口: [
+    { year: 1960, value: 5000 },
+    { year: 1965, value: 6000 },
+  ],
+  年少人口: [
+    { year: 1960, value: 2000 },
+    { year: 1965, value: 2500 },
+  ],
+};
+
+// テスト用の都道府県名マッピング
+const mockPrefectureNames = {
+  1: "北海道",
+  2: "青森県",
+  3: "岩手県",
+};
 
 describe("PopulationChartコンポーネントのテスト", () => {
   it("グラフが正しくレンダリングされる", () => {
-    render(<PopulationChart data={mockData} />);
+    render(
+      <PopulationChart data={mockData} prefectureNames={mockPrefectureNames} />
+    );
     expect(screen.getByText("総人口")).toBeInTheDocument();
     expect(screen.getByText("年少人口")).toBeInTheDocument();
   });
 
   it("カテゴリ切り替えボタンが動作する", () => {
-    render(<PopulationChart data={mockData} />);
+    render(
+      <PopulationChart data={mockData} prefectureNames={mockPrefectureNames} />
+    );
     const button = screen.getByText("年少人口");
     fireEvent.click(button);
     expect(screen.getByText("年少人口")).toHaveStyle(
@@ -47,7 +52,7 @@ describe("PopulationChartコンポーネントのテスト", () => {
   });
 
   it("データがない場合にエラーメッセージが表示される", () => {
-    render(<PopulationChart data={[]} />);
+    render(<PopulationChart data={{}} prefectureNames={mockPrefectureNames} />);
     expect(screen.getByText("データがありません")).toBeInTheDocument();
   });
 });

From 806af2379e396199f8c257b92d18cbc082153b7f Mon Sep 17 00:00:00 2001
From: crab85193 <crab85193@gmail.com>
Date: Wed, 18 Dec 2024 22:51:41 +0900
Subject: [PATCH 18/18] =?UTF-8?q?feat:=20=E3=83=9E=E3=83=AB=E3=83=81?=
 =?UTF-8?q?=E3=82=AB=E3=83=86=E3=82=B4=E3=83=AA=E3=83=BB=E3=83=9E=E3=83=AB?=
 =?UTF-8?q?=E3=83=81=E9=83=BD=E9=81=93=E5=BA=9C=E7=9C=8C=E5=AF=BE=E5=BF=9C?=
 =?UTF-8?q?=E3=81=AE=E3=82=B0=E3=83=A9=E3=83=95=E6=A9=9F=E8=83=BD=E3=82=92?=
 =?UTF-8?q?=E5=AE=9F=E8=A3=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 「総人口」「年少人口」「生産年齢人口」「老年人口」4種のカテゴリに対応する固定ボタンを追加
- 複数の都道府県選択時に、選択中カテゴリの全都道府県データを同時に描画
- ライン色をprefNameごとにランダム生成し、都度同一prefNameには同じ色を割り当てる処理を追加
- store構成をprefecturesStoreからusePrefecturesStoreへ移行し、関連テスト・API呼び出しロジックを調整
- PrefectureCheckboxやPopulationChart、PopulationGraphPageでのプロパティ・ロジックを修正し、テストを対応させる
- 不要ファイル(prefecturesStore.ts)を削除
- テストコード(population.test.ts, prefectures.test.ts, PrefectureCheckbox.test.tsx, PopulationChart.test.tsx等)を新たなデータ構造・APIレスポンスに適合
---
 src/api/prefectures.ts                |  8 +--
 src/components/PopulationChart.tsx    | 94 ++++++++++++++++++++++-----
 src/components/PrefectureCheckbox.tsx | 30 +++++----
 src/pages/PopulationGraphPage.tsx     | 73 ++++++++++++++-------
 src/store/prefecturesStore.ts         | 31 ---------
 src/store/usePrefecturesStore.ts      | 27 +++++---
 src/tests/PopulationChart.test.tsx    | 70 +++++++++++++-------
 src/tests/PrefectureCheckbox.test.tsx | 58 ++++++-----------
 src/tests/population.test.ts          |  4 +-
 src/tests/prefectures.test.ts         | 22 +++----
 src/tests/prefecturesStore.test.ts    |  2 +-
 11 files changed, 240 insertions(+), 179 deletions(-)
 delete mode 100644 src/store/prefecturesStore.ts

diff --git a/src/api/prefectures.ts b/src/api/prefectures.ts
index fdb544b..0f5fae4 100644
--- a/src/api/prefectures.ts
+++ b/src/api/prefectures.ts
@@ -6,16 +6,10 @@ export const fetchPrefectures = async (): Promise<Prefecture[]> => {
     const response = await axios.get(
       `${process.env.REACT_APP_YUMEMI_API_URL}/api/v1/prefectures`,
       {
-        headers: {
-          "X-API-KEY": process.env.REACT_APP_YUMEMI_API_KEY!,
-        },
+        headers: { "X-API-KEY": process.env.REACT_APP_YUMEMI_API_KEY },
       }
     );
 
-    if (response.status !== 200) {
-      throw new Error("Failed to fetch prefectures");
-    }
-
     return response.data.result as Prefecture[];
   } catch (error) {
     throw new Error("Error fetching prefectures: " + error);
diff --git a/src/components/PopulationChart.tsx b/src/components/PopulationChart.tsx
index 9897e65..c231cb5 100644
--- a/src/components/PopulationChart.tsx
+++ b/src/components/PopulationChart.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import {
   LineChart,
   Line,
@@ -13,34 +13,94 @@ import {
 interface PopulationData {
   year: number;
   value: number;
+  rate: number;
+}
+
+interface PrefectureCategoryData {
+  prefName: string;
+  data: PopulationData[];
+}
+
+interface AllCategoriesData {
+  [categoryName: string]: PrefectureCategoryData[];
 }
 
 interface PopulationChartProps {
-  data: { [key: string]: PopulationData[] };
-  prefectureNames: { [key: number]: string }; // 都道府県コードと都道府県名のマッピング
+  allCategoriesData: AllCategoriesData;
 }
 
+const categories = ["総人口", "年少人口", "生産年齢人口", "老年人口"];
+
+const colorMap: { [prefName: string]: string } = {};
+
+const generateRandomColor = (): string => {
+  const letters = "0123456789ABCDEF";
+  let color = "#";
+  for (let i = 0; i < 6; i++) {
+    color += letters[Math.floor(Math.random() * 16)];
+  }
+  return color;
+};
+
+const getColorForPrefName = (pName: string) => {
+  if (!colorMap[pName]) {
+    colorMap[pName] = generateRandomColor();
+  }
+  return colorMap[pName];
+};
+
 const PopulationChart: React.FC<PopulationChartProps> = ({
-  data,
-  prefectureNames,
+  allCategoriesData,
 }) => {
-  const allYears = Object.values(data)
-    .flat()
-    .map((entry) => entry.year);
+  const [selectedCategory, setSelectedCategory] = useState<string>(
+    categories[0]
+  );
+
+  const prefectureDataArray = allCategoriesData[selectedCategory] || [];
 
-  const uniqueYears = Array.from(new Set(allYears)).sort();
+  if (prefectureDataArray.length === 0) {
+    return <p>選択中のカテゴリのデータがありません</p>;
+  }
+
+  const allYears = prefectureDataArray.flatMap((p) =>
+    p.data.map((d) => d.year)
+  );
+  const uniqueYears = Array.from(new Set(allYears)).sort((a, b) => a - b);
 
   const combinedData = uniqueYears.map((year) => {
     const entry: { [key: string]: number | string } = { year };
-    for (const [prefCode, populationData] of Object.entries(data)) {
-      const yearData = populationData.find((d) => d.year === year);
-      entry[prefCode] = yearData ? yearData.value : 0;
+    for (const pData of prefectureDataArray) {
+      const yearData = pData.data.find((d) => d.year === year);
+      entry[pData.prefName] = yearData ? yearData.value : 0;
     }
     return entry;
   });
 
+  const prefNames = prefectureDataArray.map((p) => p.prefName);
+
   return (
     <div style={{ width: "100%", height: "500px" }}>
+      {/* カテゴリ切り替えUI */}
+      <div style={{ marginBottom: "10px" }}>
+        {categories.map((cat) => (
+          <button
+            key={cat}
+            onClick={() => setSelectedCategory(cat)}
+            style={{
+              marginRight: "5px",
+              padding: "5px 10px",
+              backgroundColor: cat === selectedCategory ? "#007bff" : "#e0e0e0",
+              color: cat === selectedCategory ? "#fff" : "#000",
+              border: "none",
+              borderRadius: "3px",
+              cursor: "pointer",
+            }}
+          >
+            {cat}
+          </button>
+        ))}
+      </div>
+
       <ResponsiveContainer width="100%" height="100%">
         <LineChart
           data={combinedData}
@@ -51,13 +111,13 @@ const PopulationChart: React.FC<PopulationChartProps> = ({
           <YAxis />
           <Tooltip />
           <Legend />
-          {Object.keys(data).map((prefCode) => (
+          {prefNames.map((pName) => (
             <Line
-              key={prefCode}
+              key={pName}
               type="monotone"
-              dataKey={prefCode}
-              name={prefectureNames[Number(prefCode)] || `都道府県 ${prefCode}`}
-              stroke={`#${Math.floor(Math.random() * 16777215).toString(16)}`} // ランダム色
+              dataKey={pName}
+              name={pName}
+              stroke={getColorForPrefName(pName)}
             />
           ))}
         </LineChart>
diff --git a/src/components/PrefectureCheckbox.tsx b/src/components/PrefectureCheckbox.tsx
index 034f10d..5762480 100644
--- a/src/components/PrefectureCheckbox.tsx
+++ b/src/components/PrefectureCheckbox.tsx
@@ -1,32 +1,40 @@
 import React from "react";
 import { Prefecture } from "../types/prefecture";
+import usePrefecturesStore from "../store/usePrefecturesStore";
 
 interface PrefectureCheckboxProps {
   prefectures: Prefecture[];
   onSelect: (prefCode: number) => void;
+  onSelectAll: (prefCodes: number[]) => void;
+  onClearSelection: () => void;
 }
 
 const PrefectureCheckbox: React.FC<PrefectureCheckboxProps> = ({
-  prefectures = [],
+  prefectures,
   onSelect,
+  onSelectAll,
+  onClearSelection,
 }) => {
-  if (!Array.isArray(prefectures)) {
-    return null;
-  }
+  const { selectedPrefectures } = usePrefecturesStore();
 
   return (
     <div>
       <h3>都道府県を選択</h3>
-      {prefectures.map((prefecture) => (
-        <div key={prefecture.prefCode}>
+      <button
+        onClick={() => onSelectAll(prefectures.map((pref) => pref.prefCode))}
+      >
+        すべて選択
+      </button>
+      <button onClick={onClearSelection}>選択をクリア</button>
+      {prefectures.map((pref) => (
+        <div key={pref.prefCode}>
           <input
+            id={`pref-${pref.prefCode}`}
             type="checkbox"
-            id={`pref-${prefecture.prefCode}`}
-            onChange={() => onSelect(prefecture.prefCode)}
+            checked={selectedPrefectures.includes(pref.prefCode)}
+            onChange={() => onSelect(pref.prefCode)}
           />
-          <label htmlFor={`pref-${prefecture.prefCode}`}>
-            {prefecture.prefName}
-          </label>
+          <label htmlFor={`pref-${pref.prefCode}`}>{pref.prefName}</label>
         </div>
       ))}
     </div>
diff --git a/src/pages/PopulationGraphPage.tsx b/src/pages/PopulationGraphPage.tsx
index 2a59bb6..00fe377 100644
--- a/src/pages/PopulationGraphPage.tsx
+++ b/src/pages/PopulationGraphPage.tsx
@@ -7,12 +7,23 @@ import { fetchPopulation } from "../api/population";
 import { Prefecture } from "../types/prefecture";
 import { PopulationData } from "../types/population";
 
+interface PrefectureCategoryData {
+  prefName: string;
+  data: PopulationData[];
+}
+
+interface AllCategoriesData {
+  [categoryName: string]: PrefectureCategoryData[];
+}
+
+const categories = ["総人口", "年少人口", "生産年齢人口", "老年人口"];
+
 const PopulationGraphPage: React.FC = () => {
   const { selectedPrefectures, prefectures, setPrefectures } =
     usePrefecturesStore();
-  const [populationData, setPopulationData] = useState<{
-    [key: string]: PopulationData[];
-  }>({});
+  const [allCategoriesData, setAllCategoriesData] = useState<AllCategoriesData>(
+    {}
+  );
   const [loading, setLoading] = useState<boolean>(false);
   const [error, setError] = useState<string | null>(null);
 
@@ -29,24 +40,35 @@ const PopulationGraphPage: React.FC = () => {
   }, [setPrefectures]);
 
   useEffect(() => {
-    const fetchPopulationData = async (): Promise<void> => {
+    const fetchPopulationData = async () => {
       setLoading(true);
       setError(null);
 
-      const newPopulationData: { [key: string]: PopulationData[] } = {};
+      const newAllCategoriesData: AllCategoriesData = {
+        総人口: [],
+        年少人口: [],
+        生産年齢人口: [],
+        老年人口: [],
+      };
 
       try {
         for (const prefCode of selectedPrefectures) {
-          const categories = await fetchPopulation(prefCode.toString());
-          const totalPopulation = categories.find(
-            (category) => category.label === "総人口"
-          )?.data;
+          const categoriesData = await fetchPopulation(prefCode.toString());
+          const prefName =
+            prefectures.find((p) => p.prefCode === Number(prefCode))
+              ?.prefName || prefCode.toString();
 
-          if (totalPopulation) {
-            newPopulationData[prefCode.toString()] = totalPopulation;
+          for (const catName of categories) {
+            const catData = categoriesData.find((c) => c.label === catName);
+            if (catData) {
+              newAllCategoriesData[catName].push({
+                prefName: prefName,
+                data: catData.data,
+              });
+            }
           }
         }
-        setPopulationData(newPopulationData);
+        setAllCategoriesData(newAllCategoriesData);
       } catch (err) {
         setError("人口データの取得に失敗しました:" + err);
       } finally {
@@ -57,30 +79,31 @@ const PopulationGraphPage: React.FC = () => {
     if (selectedPrefectures.length > 0) {
       fetchPopulationData();
     } else {
-      setPopulationData({});
+      setAllCategoriesData({
+        総人口: [],
+        年少人口: [],
+        生産年齢人口: [],
+        老年人口: [],
+      });
     }
-  }, [selectedPrefectures]);
+  }, [selectedPrefectures, prefectures]);
+
+  const { togglePrefecture, selectAllPrefectures, clearSelection } =
+    usePrefecturesStore.getState();
 
   return (
     <div>
       <h1>人口推移グラフ</h1>
       <PrefectureCheckbox
         prefectures={prefectures}
-        onSelect={(prefCode: number) => {
-          const { togglePrefecture } = usePrefecturesStore.getState();
-          togglePrefecture(prefCode);
-        }}
+        onSelect={(prefCode: number) => togglePrefecture(prefCode)}
+        onSelectAll={(prefCodes: number[]) => selectAllPrefectures(prefCodes)}
+        onClearSelection={clearSelection}
       />
       {selectedPrefectures.length === 0 && <p>都道府県を選択してください。</p>}
       {loading && <p>データを取得中...</p>}
       {error && <p>{error}</p>}
-      <PopulationChart
-        data={populationData}
-        prefectureNames={prefectures.reduce(
-          (acc, pref) => ({ ...acc, [pref.prefCode]: pref.prefName }),
-          {}
-        )}
-      />
+      <PopulationChart allCategoriesData={allCategoriesData} />
     </div>
   );
 };
diff --git a/src/store/prefecturesStore.ts b/src/store/prefecturesStore.ts
deleted file mode 100644
index 1e46e6a..0000000
--- a/src/store/prefecturesStore.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import { create } from "zustand";
-
-interface PrefecturesState {
-  selectedPrefectures: number[];
-  togglePrefecture: (prefCode: number) => void;
-  selectAll: (prefCodes: number[]) => void;
-  clearSelection: () => void;
-}
-
-const usePrefecturesStore = create<PrefecturesState>((set) => ({
-  selectedPrefectures: [],
-
-  togglePrefecture: (prefCode: number) =>
-    set((state) => ({
-      selectedPrefectures: state.selectedPrefectures.includes(prefCode)
-        ? state.selectedPrefectures.filter((code) => code !== prefCode)
-        : [...state.selectedPrefectures, prefCode],
-    })),
-
-  selectAll: (prefCodes: number[]) =>
-    set(() => ({
-      selectedPrefectures: prefCodes,
-    })),
-
-  clearSelection: () =>
-    set(() => ({
-      selectedPrefectures: [],
-    })),
-}));
-
-export default usePrefecturesStore;
diff --git a/src/store/usePrefecturesStore.ts b/src/store/usePrefecturesStore.ts
index 09d883c..ac557eb 100644
--- a/src/store/usePrefecturesStore.ts
+++ b/src/store/usePrefecturesStore.ts
@@ -1,28 +1,35 @@
 import { create } from "zustand";
-import { Prefecture } from "../types/prefecture";
+
+interface Prefecture {
+  prefCode: number;
+  prefName: string;
+}
 
 interface PrefecturesState {
-  selectedPrefectures: number[];
   prefectures: Prefecture[];
-  togglePrefecture: (prefCode: number) => void;
+  selectedPrefectures: number[];
   setPrefectures: (prefectures: Prefecture[]) => void;
+  togglePrefecture: (prefCode: number) => void;
+  selectAllPrefectures: (prefCodes: number[]) => void;
   clearSelection: () => void;
+  selectAll: (prefCodes: number[]) => void;
 }
 
 const usePrefecturesStore = create<PrefecturesState>((set) => ({
-  selectedPrefectures: [],
   prefectures: [],
-  togglePrefecture: (prefCode: number) =>
+  selectedPrefectures: [],
+  setPrefectures: (prefectures) => set({ prefectures }),
+  togglePrefecture: (prefCode) =>
     set((state) => ({
       selectedPrefectures: state.selectedPrefectures.includes(prefCode)
         ? state.selectedPrefectures.filter((code) => code !== prefCode)
         : [...state.selectedPrefectures, prefCode],
     })),
-  setPrefectures: (prefectures: Prefecture[]) => set(() => ({ prefectures })),
-  clearSelection: () =>
-    set(() => ({
-      selectedPrefectures: [],
-    })),
+  selectAllPrefectures: (prefCodes: number[]) =>
+    set({ selectedPrefectures: prefCodes }),
+  clearSelection: () => set({ selectedPrefectures: [] }),
+
+  selectAll: (prefCodes: number[]) => set({ selectedPrefectures: prefCodes }),
 }));
 
 export default usePrefecturesStore;
diff --git a/src/tests/PopulationChart.test.tsx b/src/tests/PopulationChart.test.tsx
index 2efec61..c1e905c 100644
--- a/src/tests/PopulationChart.test.tsx
+++ b/src/tests/PopulationChart.test.tsx
@@ -4,7 +4,6 @@ import PopulationChart from "../components/PopulationChart";
 
 jest.mock("recharts", () => {
   const OriginalRecharts = jest.requireActual("recharts");
-
   return {
     ...OriginalRecharts,
     ResponsiveContainer: ({ children }: { children: React.ReactNode }) => (
@@ -13,46 +12,69 @@ jest.mock("recharts", () => {
   };
 });
 
-const mockData = {
+const mockAllCategoriesData = {
   総人口: [
-    { year: 1960, value: 5000 },
-    { year: 1965, value: 6000 },
+    {
+      prefName: "北海道",
+      data: [
+        { year: 1960, value: 5000, rate: 0 },
+        { year: 1965, value: 6000, rate: 0 },
+      ],
+    },
+    {
+      prefName: "青森県",
+      data: [
+        { year: 1960, value: 4500, rate: 0 },
+        { year: 1965, value: 5500, rate: 0 },
+      ],
+    },
   ],
   年少人口: [
-    { year: 1960, value: 2000 },
-    { year: 1965, value: 2500 },
+    {
+      prefName: "北海道",
+      data: [
+        { year: 1960, value: 2000, rate: 0 },
+        { year: 1965, value: 2500, rate: 0 },
+      ],
+    },
+    {
+      prefName: "青森県",
+      data: [
+        { year: 1960, value: 1800, rate: 0 },
+        { year: 1965, value: 2300, rate: 0 },
+      ],
+    },
   ],
-};
-
-// テスト用の都道府県名マッピング
-const mockPrefectureNames = {
-  1: "北海道",
-  2: "青森県",
-  3: "岩手県",
+  生産年齢人口: [],
+  老年人口: [],
 };
 
 describe("PopulationChartコンポーネントのテスト", () => {
   it("グラフが正しくレンダリングされる", () => {
-    render(
-      <PopulationChart data={mockData} prefectureNames={mockPrefectureNames} />
-    );
+    render(<PopulationChart allCategoriesData={mockAllCategoriesData} />);
     expect(screen.getByText("総人口")).toBeInTheDocument();
     expect(screen.getByText("年少人口")).toBeInTheDocument();
+    expect(screen.getByText("生産年齢人口")).toBeInTheDocument();
+    expect(screen.getByText("老年人口")).toBeInTheDocument();
   });
 
   it("カテゴリ切り替えボタンが動作する", () => {
-    render(
-      <PopulationChart data={mockData} prefectureNames={mockPrefectureNames} />
-    );
+    render(<PopulationChart allCategoriesData={mockAllCategoriesData} />);
     const button = screen.getByText("年少人口");
     fireEvent.click(button);
-    expect(screen.getByText("年少人口")).toHaveStyle(
-      "background-color: #007bff"
-    );
+    expect(button).toHaveStyle("background-color: #007bff");
   });
 
   it("データがない場合にエラーメッセージが表示される", () => {
-    render(<PopulationChart data={{}} prefectureNames={mockPrefectureNames} />);
-    expect(screen.getByText("データがありません")).toBeInTheDocument();
+    const emptyData = {
+      総人口: [],
+      年少人口: [],
+      生産年齢人口: [],
+      老年人口: [],
+    };
+    render(<PopulationChart allCategoriesData={emptyData} />);
+    expect(
+      screen.getByText("選択中のカテゴリのデータがありません")
+    ).toBeInTheDocument();
   });
 });
diff --git a/src/tests/PrefectureCheckbox.test.tsx b/src/tests/PrefectureCheckbox.test.tsx
index d787f36..223997e 100644
--- a/src/tests/PrefectureCheckbox.test.tsx
+++ b/src/tests/PrefectureCheckbox.test.tsx
@@ -2,66 +2,50 @@ import React from "react";
 import { render, screen, fireEvent } from "@testing-library/react";
 import PrefectureCheckbox from "../components/PrefectureCheckbox";
 
-jest.mock("../store/prefecturesStore", () => ({
-  __esModule: true,
-  default: jest.fn(),
-}));
+const mockPrefectures = [
+  { prefCode: 1, prefName: "北海道" },
+  { prefCode: 2, prefName: "青森県" },
+  { prefCode: 3, prefName: "岩手県" },
+];
+
+describe("PrefectureCheckboxコンポーネント", () => {
+  it("すべて選択ボタンが正しく動作する", () => {
+    const mockOnSelect = jest.fn();
+    const mockOnSelectAll = jest.fn();
+    const mockOnClearSelection = jest.fn();
 
-describe("PrefectureCheckboxコンポーネントの動作", () => {
-  const mockPrefectures = [
-    { prefCode: 1, prefName: "北海道" },
-    { prefCode: 2, prefName: "青森県" },
-    { prefCode: 3, prefName: "岩手県" },
-  ];
-
-  let mockOnSelect: jest.Mock;
-
-  beforeEach(() => {
-    mockOnSelect = jest.fn();
-  });
-
-  it("チェックボックスをクリックすると状態が切り替わる", () => {
-    render(
-      <PrefectureCheckbox
-        prefectures={mockPrefectures}
-        onSelect={mockOnSelect}
-      />
-    );
-
-    const checkbox = screen.getByLabelText("北海道");
-    fireEvent.click(checkbox);
-
-    expect(mockOnSelect).toHaveBeenCalledWith(1);
-  });
-
-  it("全て選択ボタンが正しく動作する", () => {
     render(
       <PrefectureCheckbox
         prefectures={mockPrefectures}
         onSelect={mockOnSelect}
+        onSelectAll={mockOnSelectAll}
+        onClearSelection={mockOnClearSelection}
       />
     );
 
     const selectAllButton = screen.getByText("すべて選択");
     fireEvent.click(selectAllButton);
 
-    expect(mockOnSelect).toHaveBeenCalledTimes(mockPrefectures.length);
-    expect(mockOnSelect).toHaveBeenCalledWith(1);
-    expect(mockOnSelect).toHaveBeenCalledWith(2);
-    expect(mockOnSelect).toHaveBeenCalledWith(3);
+    expect(mockOnSelectAll).toHaveBeenCalledWith([1, 2, 3]);
   });
 
   it("選択をクリアボタンが正しく動作する", () => {
+    const mockOnSelect = jest.fn();
+    const mockOnSelectAll = jest.fn();
+    const mockOnClearSelection = jest.fn();
+
     render(
       <PrefectureCheckbox
         prefectures={mockPrefectures}
         onSelect={mockOnSelect}
+        onSelectAll={mockOnSelectAll}
+        onClearSelection={mockOnClearSelection}
       />
     );
 
     const clearButton = screen.getByText("選択をクリア");
     fireEvent.click(clearButton);
 
-    expect(mockOnSelect).toHaveBeenCalledWith(0);
+    expect(mockOnClearSelection).toHaveBeenCalled();
   });
 });
diff --git a/src/tests/population.test.ts b/src/tests/population.test.ts
index 259c8ac..0a91fdb 100644
--- a/src/tests/population.test.ts
+++ b/src/tests/population.test.ts
@@ -30,7 +30,7 @@ describe("fetchPopulation", () => {
 
     expect(result).toEqual(mockData);
     expect(mockedAxios.get).toHaveBeenCalledWith(
-      `${process.env.REACT_APP_YUMEMI_API_URL}/api/v1/population/composition/perYear?${prefCode}`,
+      `${process.env.REACT_APP_YUMEMI_API_URL}/api/v1/population/composition/perYear?prefCode=${prefCode}`,
       {
         headers: {
           "X-API-KEY": process.env.REACT_APP_YUMEMI_API_KEY!,
@@ -48,7 +48,7 @@ describe("fetchPopulation", () => {
       "Error fetching population data: Error: API Error"
     );
     expect(mockedAxios.get).toHaveBeenCalledWith(
-      `${process.env.REACT_APP_YUMEMI_API_URL}/api/v1/population/composition/perYear?${prefCode}`,
+      `${process.env.REACT_APP_YUMEMI_API_URL}/api/v1/population/composition/perYear?prefCode=${prefCode}`,
       {
         headers: {
           "X-API-KEY": process.env.REACT_APP_YUMEMI_API_KEY!,
diff --git a/src/tests/prefectures.test.ts b/src/tests/prefectures.test.ts
index 0b4565f..a0997f1 100644
--- a/src/tests/prefectures.test.ts
+++ b/src/tests/prefectures.test.ts
@@ -1,5 +1,5 @@
 import axios from "axios";
-import { fetchPrefectures } from "./../api/prefectures";
+import { fetchPrefectures } from "../api/prefectures";
 import { Prefecture } from "../types/prefecture";
 
 jest.mock("axios");
@@ -10,10 +10,12 @@ describe("fetchPrefectures", () => {
     const mockData: Prefecture[] = [
       { prefCode: 1, prefName: "北海道" },
       { prefCode: 2, prefName: "青森県" },
-      { prefCode: 3, prefName: "宮城県" },
+      { prefCode: 3, prefName: "岩手県" },
     ];
 
-    mockedAxios.get.mockResolvedValue({ status: 200, data: mockData });
+    mockedAxios.get.mockResolvedValue({
+      data: { message: null, result: mockData },
+    });
 
     const result = await fetchPrefectures();
 
@@ -21,9 +23,7 @@ describe("fetchPrefectures", () => {
     expect(mockedAxios.get).toHaveBeenCalledWith(
       `${process.env.REACT_APP_YUMEMI_API_URL}/api/v1/prefectures`,
       {
-        headers: {
-          "X-API-KEY": process.env.REACT_APP_YUMEMI_API_KEY!,
-        },
+        headers: { "X-API-KEY": process.env.REACT_APP_YUMEMI_API_KEY },
       }
     );
   });
@@ -31,14 +31,8 @@ describe("fetchPrefectures", () => {
   it("APIがエラーを返した場合、エラーをスローする", async () => {
     mockedAxios.get.mockRejectedValue(new Error("API Error"));
 
-    await expect(fetchPrefectures()).rejects.toThrow("API Error");
-    expect(mockedAxios.get).toHaveBeenCalledWith(
-      `${process.env.REACT_APP_YUMEMI_API_URL}/api/v1/prefectures`,
-      {
-        headers: {
-          "X-API-KEY": process.env.REACT_APP_YUMEMI_API_KEY!,
-        },
-      }
+    await expect(fetchPrefectures()).rejects.toThrow(
+      "Error fetching prefectures: Error: API Error"
     );
   });
 });
diff --git a/src/tests/prefecturesStore.test.ts b/src/tests/prefecturesStore.test.ts
index 3ed890d..996ce22 100644
--- a/src/tests/prefecturesStore.test.ts
+++ b/src/tests/prefecturesStore.test.ts
@@ -1,5 +1,5 @@
 import { act } from "react";
-import usePrefecturesStore from "../store/prefecturesStore";
+import usePrefecturesStore from "../store/usePrefecturesStore";
 
 describe("都道府県ストアの動作", () => {
   beforeEach(() => {