Add basic chart for cases in indonesia

miftahafina · Mar 20, 2020 · a136144 · a136144
1 parent 0527389
commit a136144
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 61 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -7,8 +7,10 @@
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.2",
+    "chart.js": "^2.9.3",
     "normalize.css": "^8.0.1",
     "react": "^16.13.0",
+    "react-chartjs-2": "^2.9.0",
     "react-dom": "^16.13.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "3.4.0"

diff --git a/src/Containers/ChartPage/ChartPage.jsx b/src/Containers/ChartPage/ChartPage.jsx
@@ -1,12 +1,61 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import { Line } from 'react-chartjs-2';
 
 const ChartPage = () => {
   const [dailyReport, setDailyReport] = useState([]);
-  const [startDate] = useState(new Date('2020-03-02')); // 2 Maret 2020
-  const [endDate] = useState(new Date()); // current date
+  const [sortedDailyReport, setSortedDailyReport] = useState([]);
+
+  const [startDate, setStartDate] = useState(); // 2 Maret 2020
+  const [endDate, setEndDate] = useState(); // current date
   const [dateRange, setDateRange] = useState([]);
 
+  const [chartLabel, setChartLabel] = useState([]);
+  const [chartDataConfirmed, setChartDataConfirmed] = useState([]);
+  const [chartDataRecovered, setChartDataRecovered] = useState([]);
+  const [chartDataDeaths, setChartDataDeaths] = useState([]);
+
+  const compare = (a, b) => {
+    if ( a.lastUpdate < b.lastUpdate ){
+      return -1;
+    }
+    if ( a.lastUpdate > b.lastUpdate ){
+      return 1;
+    }
+    return 0;
+  }
+
+  useEffect(() => {
+    let sorted = dailyReport;
+    setSortedDailyReport(sorted.sort(compare));
+
+  }, [dailyReport])
+
+  useEffect(() => {
+    setChartLabel(sortedDailyReport.map(data => {
+      return `${new Date(data.lastUpdate).getDate()}/${new Date(data.lastUpdate).getMonth()+1}`
+    }));
+  }, [sortedDailyReport])
+
+
+  useEffect(() => {
+    setChartDataConfirmed(sortedDailyReport.map(data => data.confirmed));
+    setChartDataRecovered(sortedDailyReport.map(data => data.recovered));
+    setChartDataDeaths(sortedDailyReport.map(data => data.deaths));
+  }, [sortedDailyReport])
+
+  const initDate = () => {
+    let firstCaseDate = new Date('2020-03-02');
+    let today = new Date();
+
+    setStartDate(firstCaseDate);
+    setEndDate(today.setDate(today.getDate() - 1));
+  }
+
+  useEffect(() => {
+    initDate();
+  }, [])
+
   const getDateRange = (start, end) => {
     let arrDate = [];
     let arrDateFormatted = [];
@@ -24,22 +73,10 @@ const ChartPage = () => {
     setDateRange(arrDateFormatted);
   }
 
-  // useEffect(() => {
-  //   if (dateRange.length > 0) {
-  //     console.log('dateRange', dateRange);
-  //   }
-  // }, [dateRange])
-
   useEffect(() => {
     getDateRange(startDate, endDate);
   }, [startDate, endDate])
 
-  // useEffect(() => {
-  //   if (dailyReport.length > 0) {
-  //     console.log('dailyReport', dailyReport);
-  //   }
-  // }, [dailyReport])
-
   useEffect(() => {
     dateRange.map((data, index) => (
       axios.get(`https://covid19.mathdro.id/api/daily/${data}`)
@@ -59,33 +96,39 @@ const ChartPage = () => {
     ));
   }, [dateRange]);
 
+  const getChartData = () => {
+    return {
+      labels: chartLabel,
+      datasets: [
+        {
+          label: 'Terkonfirmasi',
+          data: chartDataConfirmed,
+          backgroundColor: '#000A12',
+          borderColor: '#f2b900',
+          borderWidth: 1
+        },
+        {
+          label: 'Sembuh',
+          data: chartDataRecovered,
+          backgroundColor: '#000A12',
+          borderColor: '#52cc99',
+          borderWidth: 1
+        },
+        {
+          label: 'Meninggal',
+          data: chartDataDeaths,
+          backgroundColor: '#000A12',
+          borderColor: '#f26353',
+          borderWidth: 1
+        },
+      ]
+    }
+  }
+
   return (
     <div className="content">
       <h1>Daily Report</h1>
-      <ul>
-        {
-          dailyReport.map((data, index) => (
-          <li key={index}>
-            <small>
-              Country {data.countryRegion}<br />
-              Confirmed {data.confirmed}<br />
-              Recovered {data.recovered}<br />
-              Deaths {data.deaths}<br />
-              last Update {data.lastUpdate}
-            </small>
-          </li>
-          ))
-        }
-      </ul>
-
-      <h1>Date Range</h1>
-      <ul>
-        {
-          dateRange.map((data, index) => (
-            <li key={index}>{data}</li>
-          ))
-        }
-      </ul>
+      <Line data={getChartData} />
     </div>
   )
 }

diff --git a/src/Containers/ChartPage/ChartPageBak.jsx b/src/Containers/ChartPage/ChartPageBak.jsx
@@ -1,12 +1,25 @@
 import React, { useState, useEffect } from 'react';
 import axios from 'axios';
+import { Line } from 'react-chartjs-2';
 
 const ChartPage = () => {
   const [dailyReport, setDailyReport] = useState([]);
-  const [startDate] = useState(new Date('2020-03-02')); // 2 Maret 2020
-  const [endDate] = useState(new Date('2020-03-18')); // current date
+  const [startDate, setStartDate] = useState(); // 2 Maret 2020
+  const [endDate, setEndDate] = useState(); // current date
   const [dateRange, setDateRange] = useState([]);
 
+  const initDate = () => {
+    let firstCaseDate = new Date('2020-03-02');
+    let today = new Date();
+
+    setStartDate(firstCaseDate);
+    setEndDate(today.setDate(today.getDate() - 1));
+  }
+
+  useEffect(() => {
+    initDate();
+  }, [])
+
   const getDateRange = (start, end) => {
     let arrDate = [];
     let arrDateFormatted = [];
@@ -24,25 +37,23 @@ const ChartPage = () => {
     setDateRange(arrDateFormatted);
   }
 
-  useEffect(() => {
-    if (dateRange.length > 0) {
-      console.log('dateRange', dateRange);
-    }
-  }, [dateRange])
+  // useEffect(() => {
+  //   if (dateRange.length > 0) {
+  //     console.log('dateRange', dateRange);
+  //   }
+  // }, [dateRange])
 
   useEffect(() => {
     getDateRange(startDate, endDate);
   }, [startDate, endDate])
 
-  useEffect(() => {
-      console.log('dailyReport', dailyReport);
-    if (dailyReport.length > 0) {
-    }
-  }, [dailyReport])
+  // useEffect(() => {
+  //   if (dailyReport.length > 0) {
+  //     console.log('dailyReport', dailyReport);
+  //   }
+  // }, [dailyReport])
 
   useEffect(() => {
-    let arrFiltered = [];
-
     dateRange.map((data, index) => (
       axios.get(`https://covid19.mathdro.id/api/daily/${data}`)
         .then(res => {
@@ -52,25 +63,50 @@ const ChartPage = () => {
         )
 
         .then(filtered => {
-          arrFiltered.push(...filtered);
-          setDailyReport(arrFiltered.concat(filtered));
-        })
-
-        .then(() => {
-          console.log('arrFiltered', arrFiltered);
+          setDailyReport(dailyReport => [...dailyReport, ...filtered])
         })
 
-        .catch((err) => {
+        .catch(err => {
           console.log('Error when fetching data from API', err);
         })
     ));
-
-    console.log('arrFiltered outside loop', arrFiltered);
   }, [dateRange]);
 
+  const getChartData = () => {
+    return {
+      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+      datasets: [{
+        label: '# of Votes',
+        data: [12, 19, 3, 5, 2, 3],
+
+        backgroundColor: [
+          'rgba(255, 99, 132, 0.2)',
+          'rgba(54, 162, 235, 0.2)',
+          'rgba(255, 206, 86, 0.2)',
+          'rgba(75, 192, 192, 0.2)',
+          'rgba(153, 102, 255, 0.2)',
+          'rgba(255, 159, 64, 0.2)'
+        ],
+        borderColor: [
+          'rgba(255, 99, 132, 1)',
+          'rgba(54, 162, 235, 1)',
+          'rgba(255, 206, 86, 1)',
+          'rgba(75, 192, 192, 1)',
+          'rgba(153, 102, 255, 1)',
+          'rgba(255, 159, 64, 1)'
+        ],
+        borderWidth: 1
+      }]
+    }
+  }
+
   return (
     <div className="content">
       <h1>Daily Report</h1>
+
+      <Line data={getChartData} />
+
+
       <ul>
         {
           dailyReport.map((data, index) => (