diff --git a/package.json b/package.json index b375896..d02d27c 100644 --- a/package.json +++ b/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", diff --git a/src/components/model/Population/PopulationGraph/PopulationGraph.tsx b/src/components/model/Population/PopulationGraph/PopulationGraph.tsx new file mode 100644 index 0000000..7d160b0 --- /dev/null +++ b/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 = ({ 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 ; +}; + +export default PopulationGraph; diff --git a/src/components/model/Population/PopulationGraph/index.ts b/src/components/model/Population/PopulationGraph/index.ts new file mode 100644 index 0000000..8e4e9d4 --- /dev/null +++ b/src/components/model/Population/PopulationGraph/index.ts @@ -0,0 +1,3 @@ +import PopulationGraph from '@/components/model/Population/PopulationGraph/PopulationGraph'; + +export default PopulationGraph; diff --git a/src/models/Population.ts b/src/models/Population.ts new file mode 100644 index 0000000..b4bebda --- /dev/null +++ b/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[]; + }; +}; diff --git a/yarn.lock b/yarn.lock index a5a6663..4187161 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2216,6 +2216,16 @@ he@1.2.0: 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"