getting ready for recovered/deaths charts

covid.js

@@ -79,6 +79,9 @@ var siteData = {
     "Bosnia and Herzegovina": {
         "population": 3511372
     },
+    "Botswana": {
+        "population": 2254068
+    },
     "Brazil": {
         "population": 210147125
     },
@@ -620,6 +623,9 @@ let getCovidData = () => {
                         } else {
                             site = cur
                         }
+                        if (! (site in siteData)) {
+                            siteData[site] = {}
+                        }
                         siteData[site].data = data[cur]
                         siteData[site].source_link = "https://github.com/pomber/covid19"
                         siteData[site].source_title = "pomber / covid19"
@@ -638,15 +644,19 @@ let getCovidData = () => {
  */
 let calculateDeltas = (data) => {
     // perhaps we have that data already?
-    if ("delta" in data.data[0]) {
+    if ("new_confirmed" in data.data[0]) {
         return data;
     }
     // calculate the deltas
     data.data = data.data.map((cur, i, d)=>{
             if (i==0) {
-                cur.delta = 0;
+                cur.new_confirmed = 0;
+                cur.new_recovered = 0;
+                cur.new_deaths = 0;
             } else {
-                cur.delta = cur.confirmed - d[i-1].confirmed
+                cur.new_confirmed = cur.confirmed - d[i-1].confirmed
+                cur.new_recovered = cur.recovered - d[i-1].recovered
+                cur.new_deaths = cur.deaths - d[i-1].deaths
             }
             return cur;
         })
@@ -1116,7 +1126,7 @@ let updateChartData = (siteSelect) => {
         to_chart.data = filtered_data.map(row => row.confirmed)
     // use new cases count
     } else {
-        to_chart.data = filtered_data.map(row => row.delta)
+        to_chart.data = filtered_data.map(row => row.new_confirmed)
     }
     
     // are we in for per-million values?
@@ -1311,7 +1321,7 @@ document.addEventListener('DOMContentLoaded', (e)=>{
     document.querySelectorAll('input[type=radio][name=chart-type]').forEach((node)=>{
         node.addEventListener('change', updateChartSettings)
     })
-    document.querySelectorAll('input[type=radio][name=chart-cases], input[type=radio][name=chart-start], input[type=radio][name=chart-values], input[type=number][name=chart-average]').forEach((node)=>{
+    document.querySelectorAll('input[type=radio][name=chart-cases], input[type=radio][name=chart-start], input[type=radio][name=chart-values], input[type=number][name=chart-average], input[type=radio][name=chart-data]').forEach((node)=>{
         node.addEventListener('change', (e)=>{
             for (select_index=0; select_index<sitesSelects.length; select_index++) {
                 updateChartData(sitesSelects[select_index])

index.html

@@ -211,6 +211,9 @@
             /*
              * chart controls mechanics
              */
+            .chart-config-container input#chart-data-confirmed:checked ~ .chart-config-group label[for=chart-data-confirmed],
+            .chart-config-container input#chart-data-recovered:checked ~ .chart-config-group label[for=chart-data-recovered],
+            .chart-config-container input#chart-data-deaths:checked ~ .chart-config-group label[for=chart-data-deaths],
             .chart-config-container input#chart-type-logarithmic:checked ~ .chart-config-group label[for=chart-type-logarithmic],
             .chart-config-container input#chart-type-linear:checked ~ .chart-config-group label[for=chart-type-linear],
             .chart-config-container input#chart-cases-cumulative:checked ~ .chart-config-group label[for=chart-cases-cumulative],
@@ -290,6 +293,9 @@
             <canvas id="the-chart"></canvas>
         </div>
         <div class="chart-config-container">
+            <!--input type="radio" id="chart-data-confirmed" name="chart-data" value="confirmed" checked="checked"/>
+            <input type="radio" id="chart-data-recovered" name="chart-data" value="recovered"/>
+            <input type="radio" id="chart-data-deaths" name="chart-data" value="deaths"/-->
             <input type="radio" id="chart-type-logarithmic" name="chart-type" value="logarithmic" checked="checked"/>
             <input type="radio" id="chart-type-linear" name="chart-type" value="linear"/>
             <input type="radio" id="chart-cases-cumulative" name="chart-cases" value="cumulative" checked="checked"/>
@@ -300,6 +306,12 @@
             <input type="radio" id="chart-start-tenth" name="chart-start" value="10" checked="checked"/>
             <input type="radio" id="chart-start-hundredth" name="chart-start" value="100"/>
             <input type="radio" id="chart-start-thousandth" name="chart-start" value="1000"/>
+            <div class="chart-config-group">
+                <p>Show:</p>
+                <label for="chart-data-confirmed">confirmed cases</label>
+                <label for="chart-data-recovered">recoveries</label>
+                <label for="chart-data-deaths">deaths</label>
+            </div>
             <div class="chart-config-group">
                 <p>Scale:</p>
                 <label for="chart-type-logarithmic">logarithmic</label>