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 = {
"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])
......
......@@ -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>
......
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