{"id":1551,"date":"2021-08-06T14:03:25","date_gmt":"2021-08-06T05:03:25","guid":{"rendered":"http:\/\/www.agile-software.site\/?p=1551"},"modified":"2022-11-27T04:11:05","modified_gmt":"2022-11-26T19:11:05","slug":"covid19_dashboard","status":"publish","type":"post","link":"https:\/\/agile-software.net\/?p=1551","title":{"rendered":"covid19_dashboard"},"content":{"rendered":"\n

<\/p>\n\n\n\n

\u30d7\u30ed\u30b8\u30a7\u30af\u30c8\u4f5c\u6210<\/h2>\n\n\n\n
npx create-react-app . --template redux-typescript<\/code><\/pre><\/div>\n\n\n\n
\u30e2\u30b8\u30e5\u30fc\u30eb\u306e\u30a4\u30f3\u30dd\u30fc\u30c8<\/h2>\n\n\n\n
npm install axios\nnpm install @material-ui\/core\nnpm install chart.js --save\nmpm install react-chartjs-2\nnpm install react-countup\nnpm install react-icons<\/code><\/pre><\/div>\n\n\n\n
\u30d5\u30a1\u30a4\u30eb\u306e\u6e96\u5099<\/h2>\n\n\n\n
features\u306e\u76f4\u4e0b\u306bcovid\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210\u3057\u305d\u306e\u4e2d\u306bCards\u3001Chart\u3001DashBoard\u3001PieChart\u3001SwitchCountry\u306e\u30d5\u30a9\u30eb\u30c0\u3092\u4f5c\u6210\u3002<\/p>\n\n\n\n
<\/code><\/pre><\/div>\n\n\n\n
covidSlice.ts\u30d5\u30a1\u30a4\u30eb\u306e\u4f5c\u6210<\/h2>\n\n\n\n
API\u306e\u30d1\u30b9\u3092\u5b9a\u7fa9<\/h3>\n\n\n\n
<\/code><\/pre><\/div>\n\n\n\n
data\u578b\u5b9a\u7fa9<\/h3>\n\n\n\n
type DATADAILY = typeof dataDaily;<\/code><\/pre><\/div>\n\n\n\n
State\u69cb\u9020\u5b9a\u7fa9<\/h3>\n\n\n\n
initialState\u5b9a\u7fa9<\/h3>\n\n\n\n
import { createSlice, createAsyncThunk } from "@reduxjs\/toolkit";\nimport axios from "axios";\nimport { RootState } from "..\/..\/app\/store";\nimport dataDaily from ".\/apiDataDaily.json";\nconst apiUrl = "https:\/\/api.covid19api.com\/total\/country";\ntype DATADAILY = typeof dataDaily;\n\ntype covidState = {\n  daily: DATADAILY;\n  country: string;\n};\n\nconst initialState: covidState = {\n  daily: dataDaily,\n  country: "Japan",\n};\n\nexport const fetchAsyncGetDaily = createAsyncThunk(\n  "covid\/getDaily",\n  async (country: string) => {\n    const { data } = await axios.get<DATADAILY>(`${apiUrl}\/${country}`);\n    return { data: data, country: country };\n  }\n);\n\nconst covidSlice = createSlice({\n  name: "covid",\n  initialState: initialState,\n  reducers: {},\n  extraReducers: (builder) => {\n    builder.addCase(fetchAsyncGetDaily.fulfilled, (state, action) => {\n      return {\n        ...state,\n        daily: action.payload.data,\n        country: action.payload.country,\n      };\n    });\n  },\n});\n\nexport const selectDaily = (state: RootState) => state.covid.daily;\nexport const selectCountry = (state: RootState) => state.covid.country;\n\nexport default covidSlice.reducer;<\/code><\/pre><\/div>\n\n\n\n
<\/h2>\n\n\n\n
[\n  {\n    "Country": "Japan",\n    "CountryCode": "",\n    "Province": "",\n    "City": "",\n    "CityCode": "",\n    "Lat": "0",\n    "Lon": "0",\n    "Confirmed": 0,\n    "Deaths": 0,\n    "Recovered": 0,\n    "Active": 0,\n    "Date": "2020-01-22T00:00:00Z"\n  }\n]<\/code><\/pre><\/div>\n\n\n\n
React\u30b3\u30f3\u30dd\u30fc\u30cd\u30f3\u30c8<\/h2>\n\n\n\n
 Cards <\/h3>\n\n\n\n
Cards.tsx<\/h4>\n\n\n\n
covidSlice.ts\u3067\u30a8\u30af\u30b9\u30dd\u30fc\u30c8\u3057\u305fselectDaily\u3092<\/p>\n\n\n\n
\u914d\u5217\u306e\u9577\u3055-1\u3067\u4e00\u756a\u4e0b\u306e<\/p>\n\n\n\n
import React from "react";\nimport styles from ".\/Cards.module.css";\nimport CountUp from "react-countup";\nimport { Card, CardContent, Typography, Grid } from "@material-ui\/core";\n\nimport { GiHastyGrave } from "react-icons\/gi";\nimport { MdLocalHospital } from "react-icons\/md";\nimport { AiFillLike } from "react-icons\/ai";\n\nimport { useSelector } from "react-redux";\nimport { selectDaily } from "..\/covidSlice";\n\nconst Cards: React.FC = () => {\n  const daily = useSelector(selectDaily);\n  return (\n    <div className={styles.container}>\n      <Grid container spacing={1} justify="center">\n        <Grid item xs={12} md={3} component={Card} className={styles.infected}>\n          <CardContent>\n            <Typography color="textSecondary" gutterBottom>\n              <MdLocalHospital \/>\n              Infected persons\n            <\/Typography>\n            <Typography variant="h5">\n              <CountUp\n                start={0}\n                end={daily[daily.length - 1].Confirmed}\n                duration={1.5}\n                separator=","\n              \/>\n            <\/Typography>\n          <\/CardContent>\n        <\/Grid>\n        <Grid item xs={12} md={3} component={Card} className={styles.recovered}>\n          <CardContent>\n            <Typography color="textSecondary" gutterBottom>\n              <AiFillLike \/> Recovered persons\n            <\/Typography>\n            <Typography variant="h5">\n              <CountUp\n                start={0}\n                end={daily[daily.length - 1].Recovered}\n                duration={1.5}\n                separator=","\n              \/>\n            <\/Typography>\n          <\/CardContent>\n        <\/Grid>\n        <Grid item xs={12} md={3} component={Card} className={styles.deaths}>\n          <CardContent>\n            <Typography color="textSecondary" gutterBottom>\n              <GiHastyGrave \/>\n              Dead persons\n            <\/Typography>\n            <Typography variant="h5">\n              <CountUp\n                start={0}\n                end={daily[daily.length - 1].Deaths}\n                duration={1.5}\n                separator=","\n              \/>\n            <\/Typography>\n          <\/CardContent>\n        <\/Grid>\n      <\/Grid>\n    <\/div>\n  );\n};\n\nexport default Cards;<\/code><\/pre><\/div>\n\n\n\n
Cards.module.css<\/h4>\n\n\n\n
.container {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  margin-top: 10px;\n}\n\n.infected {\n  border-left: 5px solid #33a3ff;\n  border-radius: 0% !important;\n  margin: 2% 2% !important;\n}\n\n.recovered {\n  border-left: 5px solid #3cb371;\n  border-radius: 0% !important;\n  margin: 2% 2% !important;\n}\n\n.deaths {\n  border-left: 5px solid #ff3370;\n  border-radius: 0% !important;\n  margin: 2% 2% !important;\n}<\/code><\/pre><\/div>\n\n\n\n
PieChart<\/h3>\n\n\n\n
PieChart.tsx<\/h4>\n\n\n\n
import React from "react";\nimport { Typography } from "@material-ui\/core";\nimport { Doughnut } from "react-chartjs-2";\n\nimport { useSelector } from "react-redux";\nimport { selectDaily } from "..\/covidSlice";\n\nconst PieChart: React.FC = () => {\n  const daily = useSelector(selectDaily);\n\n  const motality =\n    (100 * daily[daily.length - 1].Deaths) \/ daily[daily.length - 1].Confirmed;\n\n  const pieChart = daily[0] && (\n    <Doughnut\n      data={{\n        labels: ["Infected", "Recovered", "Deaths"],\n        datasets: [\n          {\n            data: [\n              daily[daily.length - 1].Confirmed,\n              daily[daily.length - 1].Recovered,\n              daily[daily.length - 1].Deaths,\n            ],\n            backgroundColor: [\n              "rgba(0, 0, 255, 0.5)",\n              "#008080",\n              "rgba(255, 0, 0, 0.5)",\n            ],\n            hoverBackgroundColor: ["#36A2EB", "#3cb371", "#FF6384"],\n            borderColor: ["transparent", "transparent", "transparent"],\n          },\n        ],\n      }}\n      options={{\n        legend: {\n          position: "bottom",\n          labels: {\n            boxWidth: 15,\n          },\n        },\n      }}\n    \/>\n  );\n\n  return (\n    <>\n      <Typography align="center" color="textSecondary" gutterBottom>\n        Motarity {motality.toFixed(2)} [%]\n      <\/Typography>\n      {pieChart}\n    <\/>\n  );\n};\n\nexport default PieChart;<\/code><\/pre><\/div>\n\n\n\n