Select Population

gomu-gomu · Jan 11, 2024 · 23dff95 · 23dff95
1 parent 5064d3d
commit 23dff95
Show file tree

Hide file tree

Showing 3 changed files with 76 additions and 44 deletions.
diff --git a/src/index.html b/src/index.html
@@ -102,13 +102,13 @@ <h5 class="card-title">Recovered</h5>
           <div class="card card-cust card-cust--chart shadow border border-0">
             <div class="card-head row p-4">
               <div class="col">
-                <h5 class="card-title">Yearly Recovery Rates by Year</h5>
+                <h5 class="card-title">Yearly Stats</h5>
               </div>
 
               <div class="col">
                 <select
                   class="form-select"
-                  id="chart-recovery-select"
+                  id="chart-line-select"
                   aria-label="Year list"
                 >
                 </select>
@@ -134,7 +134,7 @@ <h5 class="card-title">Yearly Cases by Country</h5>
               <div class="col">
                 <select
                   class="form-select"
-                  id="chart-country-select"
+                  id="chart-map-select"
                   aria-label="Year list"
                 >
                 </select>

diff --git a/src/scripts/chart.js b/src/scripts/chart.js
@@ -1,30 +1,27 @@
-window.addEventListener('DOMContentLoaded', () => {
-  let lineChart = null;
+window.addEventListener('DOMContentLoaded', async () => {
   const ctx = document.getElementById('chart-line');
+  const data = await loadData();
 
-  populateSelect();
-  loadChart();
+  loadChart(data);
+  populateSelect(data);
 
-  function populateSelect() {
-    const selectElement = document.getElementById('chart-recovery-select');
+  function loadData() {
+    return new Promise(resolve => {
+      fetch('https://disease.sh/v3/covid-19/historical/all?lastdays=all')
+        .then(e => e.json())
+        .then(data => {
+          const keys = Object.keys(data);
+          const result = keys.reduce((obj, key) => ({
+            ...obj,
+            [key]: Object.entries(data[key]).map(e => [new Date(e[0]), e[1]])
+          }), {});
 
-    const startYear = 2019;
-    const endYear = new Date().getFullYear();
-    const yearRange = Math.abs(endYear - startYear + 1);
-    const years = Array(yearRange).fill(startYear).map((_, i) => startYear + i);
-
-    for (const year of years) {
-      const optionElement = document.createElement('option');
-
-      optionElement.value = year;
-      optionElement.innerText = year.toString();
-      optionElement.selected = year === endYear;
-
-      selectElement.appendChild(optionElement);
-    }
+          resolve(result);
+        });
+    })
   }
 
-  function loadChart() {
+  function loadChart(data) {
     const months = Array(12).fill(1).map((e, i) => Intl.DateTimeFormat('en', { month: 'long' }).format(new Date(`${e + i}`)));
 
     lineChart = new Chart(ctx, {
@@ -82,4 +79,23 @@ window.addEventListener('DOMContentLoaded', () => {
       }
     });
   }
+
+  function populateSelect(data) {
+    const selectElement = document.getElementById('chart-line-select');
+
+    const startYear = data.cases[0][0].getFullYear();
+    const endYear = data.cases.slice(0).reverse()[0][0].getFullYear();
+    const yearRange = Math.abs(endYear - startYear + 1);
+    const years = Array(yearRange).fill(startYear).map((_, i) => startYear + i);
+
+    for (const year of years) {
+      const optionElement = document.createElement('option');
+
+      optionElement.value = year;
+      optionElement.innerText = year.toString();
+      optionElement.selected = year === endYear;
+
+      selectElement.appendChild(optionElement);
+    }
+  }
 });
diff --git a/src/scripts/map.js b/src/scripts/map.js
@@ -1,27 +1,24 @@
-window.addEventListener('DOMContentLoaded', () => {
-  let mapChart = null;
+window.addEventListener('DOMContentLoaded', async () => {
   const ctx = document.getElementById('chart-map');
+  const data = await loadData()
 
-  populateSelect();
-  loadChart();
+  loadChart(data);
+  populateSelect(data);
 
-  function populateSelect() {
-    const selectElement = document.getElementById('chart-country-select');
+  function loadData() {
+    return new Promise(resolve => {
+      fetch('https://disease.sh/v3/covid-19/historical/all?lastdays=all')
+        .then(e => e.json())
+        .then(data => {
+          const keys = Object.keys(data);
+          const result = keys.reduce((obj, key) => ({
+            ...obj,
+            [key]: Object.entries(data[key]).map(e => [new Date(e[0]), e[1]])
+          }), {});
 
-    const startYear = 2019;
-    const endYear = new Date().getFullYear();
-    const yearRange = Math.abs(endYear - startYear + 1);
-    const years = Array(yearRange).fill(startYear).map((_, i) => startYear + i);
-
-    for (const year of years) {
-      const optionElement = document.createElement('option');
-
-      optionElement.value = year;
-      optionElement.innerText = year.toString();
-      optionElement.selected = year === endYear;
-
-      selectElement.appendChild(optionElement);
-    }
+          resolve(result);
+        });
+    })
   }
 
   async function loadChart() {
@@ -78,4 +75,23 @@ window.addEventListener('DOMContentLoaded', () => {
       }
     });
   }
+
+  function populateSelect(data) {
+    const selectElement = document.getElementById('chart-map-select');
+
+    const startYear = data.cases[0][0].getFullYear();
+    const endYear = data.cases.slice(0).reverse()[0][0].getFullYear();
+    const yearRange = Math.abs(endYear - startYear + 1);
+    const years = Array(yearRange).fill(startYear).map((_, i) => startYear + i);
+
+    for (const year of years) {
+      const optionElement = document.createElement('option');
+
+      optionElement.value = year;
+      optionElement.innerText = year.toString();
+      optionElement.selected = year === endYear;
+
+      selectElement.appendChild(optionElement);
+    }
+  }
 });