feat: 人口データ型定義、人口遷移グラフコンポーネント作成(#4)

package.json

@@ -18,6 +18,8 @@
   },
   "dependencies": {
     "@emotion/react": "^11.7.0",
+    "highcharts": "^9.3.2",
+    "highcharts-react-official": "^3.1.0",
     "modern-css-reset": "^1.4.0",
     "next": "12.0.5",
     "react": "17.0.2",

src/components/model/Population/PopulationGraph/PopulationGraph.tsx

@@ -0,0 +1,82 @@
+import { VFC } from 'react';
+import Highcharts from 'highcharts';
+import HighchartsExporting from 'highcharts/modules/exporting';
+import HighchartsMore from 'highcharts/highcharts-more';
+import HighchartsReact from 'highcharts-react-official';
+
+type Props = {
+  data: Highcharts.SeriesOptionsType[];
+};
+
+const PopulationGraph: VFC<Props> = ({ data }) => {
+  if (typeof Highcharts === 'object') {
+    HighchartsExporting(Highcharts);
+    HighchartsMore(Highcharts);
+  }
+  const options: Highcharts.Options = {
+    title: {
+      text: '人口遷移グラフ',
+    },
+
+    yAxis: {
+      title: {
+        align: 'high',
+        offset: 0,
+        text: '人口数',
+        rotation: 0,
+        y: -20,
+      },
+    },
+
+    xAxis: {
+      title: {
+        align: 'high',
+        text: '年度',
+        x: 30,
+        y: -20,
+      },
+      accessibility: {
+        rangeDescription: 'Range: 1960 to 2045',
+      },
+    },
+
+    legend: {
+      layout: 'vertical',
+      align: 'right',
+      verticalAlign: 'middle',
+    },
+
+    plotOptions: {
+      series: {
+        label: {
+          connectorAllowed: false,
+        },
+        pointStart: 1960,
+        pointInterval: 5,
+      },
+    },
+
+    series: data,
+
+    responsive: {
+      rules: [
+        {
+          condition: {
+            maxWidth: 600,
+          },
+          chartOptions: {
+            legend: {
+              layout: 'horizontal',
+              align: 'center',
+              verticalAlign: 'bottom',
+            },
+          },
+        },
+      ],
+    },
+  };
+
+  return <HighchartsReact highcharts={Highcharts} options={options} />;
+};
+
+export default PopulationGraph;

src/components/model/Population/PopulationGraph/index.ts

@@ -0,0 +1,3 @@
+import PopulationGraph from '@/components/model/Population/PopulationGraph/PopulationGraph';
+
+export default PopulationGraph;

src/models/Population.ts

@@ -0,0 +1,17 @@
+export type Population = {
+  year: number;
+  value: number;
+};
+
+export type PopulationCategory = {
+  label: string;
+  data: Population[];
+};
+
+export type Populations = {
+  message: string | null;
+  result: {
+    boundaryYear: number;
+    data: PopulationCategory[];
+  };
+};

yarn.lock

@@ -2216,6 +2216,16 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+highcharts-react-official@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/highcharts-react-official/-/highcharts-react-official-3.1.0.tgz#921e5614f9e8580bc99a1e3b531d51a70f396500"
+  integrity sha512-CkWJHrVMOc6CT8KFu1dR+a0w5OxCVKKgZUNWtEi5TmR0xqBDIDe+RyM652MAN/jBYppxMo6TCUVlRObCyWAn0Q==
+
+highcharts@^9.3.2:
+  version "9.3.2"
+  resolved "https://registry.yarnpkg.com/highcharts/-/highcharts-9.3.2.tgz#20b34f7277169a48d7b5691f74705e8addc78cd3"
+  integrity sha512-I/48gNMvs3hZxZnPRUqLbnlrGZJJ7YPPVr1+fYeZ35p4pSZAOwTmAGbptrjBr7JlF52HmJH9zMbt/I4TPLu9Pg==
+
 hmac-drbg@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/hmac-drbg/-/hmac-drbg-1.0.1.tgz#d2745701025a6c775a6c545793ed502fc0c649a1"