Commit 4ebc995c authored by Michał Woźniak's avatar Michał Woźniak
Browse files

getting ready for recovered/deaths charts

parent 7ddedf1d
Pipeline #144 passed with stage
in 1 second
...@@ -79,6 +79,9 @@ var siteData = { ...@@ -79,6 +79,9 @@ var siteData = {
"Bosnia and Herzegovina": { "Bosnia and Herzegovina": {
"population": 3511372 "population": 3511372
}, },
"Botswana": {
"population": 2254068
},
"Brazil": { "Brazil": {
"population": 210147125 "population": 210147125
}, },
...@@ -620,6 +623,9 @@ let getCovidData = () => { ...@@ -620,6 +623,9 @@ let getCovidData = () => {
} else { } else {
site = cur site = cur
} }
if (! (site in siteData)) {
siteData[site] = {}
}
siteData[site].data = data[cur] siteData[site].data = data[cur]
siteData[site].source_link = "https://github.com/pomber/covid19" siteData[site].source_link = "https://github.com/pomber/covid19"
siteData[site].source_title = "pomber / covid19" siteData[site].source_title = "pomber / covid19"
...@@ -638,15 +644,19 @@ let getCovidData = () => { ...@@ -638,15 +644,19 @@ let getCovidData = () => {
*/ */
let calculateDeltas = (data) => { let calculateDeltas = (data) => {
// perhaps we have that data already? // perhaps we have that data already?
if ("delta" in data.data[0]) { if ("new_confirmed" in data.data[0]) {
return data; return data;
} }
// calculate the deltas // calculate the deltas
data.data = data.data.map((cur, i, d)=>{ data.data = data.data.map((cur, i, d)=>{
if (i==0) { if (i==0) {
cur.delta = 0; cur.new_confirmed = 0;
cur.new_recovered = 0;
cur.new_deaths = 0;
} else { } 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; return cur;
}) })
...@@ -1116,7 +1126,7 @@ let updateChartData = (siteSelect) => { ...@@ -1116,7 +1126,7 @@ let updateChartData = (siteSelect) => {
to_chart.data = filtered_data.map(row => row.confirmed) to_chart.data = filtered_data.map(row => row.confirmed)
// use new cases count // use new cases count
} else { } 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? // are we in for per-million values?
...@@ -1311,7 +1321,7 @@ document.addEventListener('DOMContentLoaded', (e)=>{ ...@@ -1311,7 +1321,7 @@ document.addEventListener('DOMContentLoaded', (e)=>{
document.querySelectorAll('input[type=radio][name=chart-type]').forEach((node)=>{ document.querySelectorAll('input[type=radio][name=chart-type]').forEach((node)=>{
node.addEventListener('change', updateChartSettings) 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)=>{ node.addEventListener('change', (e)=>{
for (select_index=0; select_index<sitesSelects.length; select_index++) { for (select_index=0; select_index<sitesSelects.length; select_index++) {
updateChartData(sitesSelects[select_index]) updateChartData(sitesSelects[select_index])
......
...@@ -211,6 +211,9 @@ ...@@ -211,6 +211,9 @@
/* /*
* chart controls mechanics * 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-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-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], .chart-config-container input#chart-cases-cumulative:checked ~ .chart-config-group label[for=chart-cases-cumulative],
...@@ -290,6 +293,9 @@ ...@@ -290,6 +293,9 @@
<canvas id="the-chart"></canvas> <canvas id="the-chart"></canvas>
</div> </div>
<div class="chart-config-container"> <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-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-type-linear" name="chart-type" value="linear"/>
<input type="radio" id="chart-cases-cumulative" name="chart-cases" value="cumulative" checked="checked"/> <input type="radio" id="chart-cases-cumulative" name="chart-cases" value="cumulative" checked="checked"/>
...@@ -300,6 +306,12 @@ ...@@ -300,6 +306,12 @@
<input type="radio" id="chart-start-tenth" name="chart-start" value="10" checked="checked"/> <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-hundredth" name="chart-start" value="100"/>
<input type="radio" id="chart-start-thousandth" name="chart-start" value="1000"/> <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"> <div class="chart-config-group">
<p>Scale:</p> <p>Scale:</p>
<label for="chart-type-logarithmic">logarithmic</label> <label for="chart-type-logarithmic">logarithmic</label>
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment