Category/Data table/Basic Map_20210429_Day2

[ADD]Worldwide new cases Bar Chart

- Utilize React-Chart-js2

- Use Bar Element instead of Line Element

---

국가별 실시간 확진자수 목록 렌더링(Live Cases by Country)

1) useEffect, 모든 국가의 바이러스 관련 데이터를 fetch 해온다

 await fetch("https://disease.sh/v3/covid-19/countries")

data

2) sortData function 을 이용, value(cases) 값 기준으로 국가들을 내림차순 정렬

3) setTableData(sortedData) 상태에 저장

4) Table Component 에 sortedData 를 렌더링

 

App.js

import React, { useState, useEffect } from 'react'
import './App.css';
import {
  MenuItem,
  FormControl,
  Select,
  Card,
  CardContent
} from "@material-ui/core"
import InfoBox from './Infobox'
import Map from './Map'
import Table from './Table'
import LineGraph from './LineGraph'
import { sortData, prettyPrintStat } from './util'
import 'leaflet/dist/leaflet.css'

function App() {
  const [countries, setContries] = useState([]);
  const [country, setCountry] = useState("worldwide");
  const [countryInfo, setCountryInfo] = useState({});
  const [tableData, setTableData] = useState([]);
  const [mapCenter, setMapCenter] = useState({ lat: 37, lng: 127.5});
  const [mapZoom, setMapZoom] = useState(3);
  const [mapCountries, setMapCountries] = useState([]);
  const [casesType, setCasesType] = useState("cases");

...생략...

  useEffect(() => {
    const getCountriesData = async () => {
      await fetch("https://disease.sh/v3/covid-19/countries")
      .then(res => res.json())
      .then((data) =>{
        const countries = data.map((country)=> (
          {
            name:country.country,
            value: country.countryInfo.iso2
          }
        ))
        // console.log(data)
        const sortedData = sortData(data);
        setTableData(sortedData);
        setMapCountries(data);
        setContries(countries);
        // console.log(countries)
      })
    }
    getCountriesData();
  }, [])

...생략...

  return (
    <div className="app">
      <div className="app__left">
      
...생략...

      </div>
      <Card className="app__right">
        <CardContent>
          <div className="app__information">
            <div className="liveCases">
              <h3>Live Cases by Country</h3>
              <Table countries={tableData}></Table>
            </div>
            <div className="graph">
             
...생략...
             
            </div>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}

export default App;

 

util.js

export const sortData = (data) =>{
  const sortedData = [...data];

  return sortedData.sort((a,b)=> a.cases > b.cases ? -1 : 1 );
}

확진자수 기준하여 국가 내림차순 정렬

 

Table.js

import React from 'react';
import './Table.css';
import numeral from 'numeral';

function Table({countries}) {
  // console.log(countries)
  return (
    <div className="table">
      <table>
        <tbody>
            {countries.map((country) => (
              <tr className="tr" key={country.country}>
                <td>{country.country}</td>
                {/* 10,000,000     , !*/}
                <td><strong>{numeral(country.cases).format("0,0")}</strong></td>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  )
}

export default Table;

---

날짜별 새 확진자/회복자/사망자 그래프 렌더링(Worldwide new cases)

1) App.js, Infobox 클릭

2) LineGraph 에 casesType 전달

3) useEffect, 전세계의 4개월 바이러스 데이터와 casesType 을 buildChartData 의 변수로 전달 

4) 데이터를 좌표(점) 형태로 가공(x축: 시간, y축: 변화량)하여 배열에 저장 및 리턴

5) 가공된 결과인 좌표데이터를 차트 라이브러리(react-chartjs-2) 의 Bar 엘리먼트에 데이터로 전달 

6) 렌더링

import React, { useState, useEffect } from "react";
import { Line, Bar } from "react-chartjs-2";
import numeral from "numeral";

...생략...

const buildChartData = (data, casesType) => {
  let chartData = [];
  let lastDataPoint;
  for (let date in data.cases) {
    if (lastDataPoint) {
      let newDataPoint = {
        x: date,
        y: data[casesType][date] - lastDataPoint,
      };
      chartData.push(newDataPoint);
    }
    lastDataPoint = data[casesType][date];
  }
  return chartData;
};

function LineGraph({ casesType }) {
  const [data, setData] = useState({});

  useEffect(() => {
    const fetchData = async () => {
      await fetch("https://disease.sh/v3/covid-19/historical/all?lastdays=120")
        .then((response) => {
          return response.json();
        })
        .then((data) => {
          let chartData = buildChartData(data, casesType);
          setData(chartData);
          // console.log(chartData);
        });
    };
    fetchData();
  }, [casesType]);

  return (
    <div>
      {data?.length > 0 && (
        //! Line with options not working. Mouse-over and label still showing
        <Bar
          data={{
            datasets: [
              {
                backgroundColor: "#c95c47",
                borderColor: "#CC1034",
                data: data,
                label: `New ${casesType}`,
                hoverBackgroundColor: "blue",
              },
            ],
          }}
          // options={{options}}
          style={{height:"250px"}}
        />
      )}
    </div>
  );
}

export default LineGraph;

---

Numeral.js

: A javascript library for formatting and manipulating numbers.

Format

Numbers can be formatted to look like currency, percentages, times, or even plain old numbers with decimal places, thousands, and abbreviations.

var string = numeral(1000).format('0,0');
// '1,000'

1) Currency

2) Numbers

etc

---

도움 받은 사이트

• disease.sh/
• numeral library: numeraljs.com/