Commit 361f57b9 authored by Michał Woźniak's avatar Michał Woźniak
Browse files

added a per-100k option (closes #4)

parent b7a7e13f
Pipeline #288 passed with stage
in 6 seconds
......@@ -1351,8 +1351,12 @@ let updateChartData = (siteSelect) => {
// population_ratio is also used as an indicator that we're doing a per-million chart
var population_ratio = false
if ( (dataset !== 'cfr') && document.querySelector('input[type=radio][name=chart-values]:checked').value === 'permillion') {
population_ratio = (siteData[siteSelect.value].population / 1000000)
if (dataset !== 'cfr') {
if (document.querySelector('input[type=radio][name=chart-values]:checked').value === 'per100k') {
population_ratio = (siteData[siteSelect.value].population / 100000)
} else if (document.querySelector('input[type=radio][name=chart-values]:checked').value === 'permillion') {
population_ratio = (siteData[siteSelect.value].population / 1000000)
}
}
// where do we start with the data?
......@@ -1587,11 +1591,15 @@ let updateChartSettings = () => {
if (chart_start_setting === "date") {
theChart.options.scales.xAxes[0].scaleLabel.labelString = "Date"
} else if (chart_start == 1) {
if ( (chart_dataset != 'cfr') && (document.querySelector('input[type=radio][name=chart-values]:checked').value === 'permillion')) {
if ( (chart_dataset != 'cfr') && (document.querySelector('input[type=radio][name=chart-values]:checked').value === 'per100k') ) {
theChart.options.scales.xAxes[0].scaleLabel.labelString = "Days since one confirmed case per a hundred thousand people"
} else if ( (chart_dataset != 'cfr') && (document.querySelector('input[type=radio][name=chart-values]:checked').value === 'permillion') ) {
theChart.options.scales.xAxes[0].scaleLabel.labelString = "Days since one confirmed case per million people"
} else {
theChart.options.scales.xAxes[0].scaleLabel.labelString = "Days since 1st confirmed case"
}
} else if ( (chart_dataset != 'cfr') && (document.querySelector('input[type=radio][name=chart-values]:checked').value === 'per100k') ) {
theChart.options.scales.xAxes[0].scaleLabel.labelString = `Days since ${chart_start} confirmed cases per a hundred thousand people`
} else if ( (chart_dataset != 'cfr') && (document.querySelector('input[type=radio][name=chart-values]:checked').value === 'permillion') ) {
theChart.options.scales.xAxes[0].scaleLabel.labelString = `Days since ${chart_start} confirmed cases per million people`
} else {
......@@ -1970,7 +1978,7 @@ document.addEventListener('DOMContentLoaded', (e)=>{
"site-menu-button-percentage": ()=>{
document.getElementById('chart-data-confirmed').checked = true
document.getElementById('chart-cases-cumulative').checked = true
document.getElementById('chart-values-permillion').checked = true
document.getElementById('chart-values-per100k').checked = true
document.getElementById('chart-type-logarithmic').checked = true
},
"site-menu-button-deaths": ()=>{
......
......@@ -335,6 +335,7 @@
.chart-config-container input#chart-data-cfr:checked ~ input#chart-cases-delta:checked ~ .chart-config-group label[for=chart-type-linear],
.chart-config-container input#chart-values-absolute:checked ~ .chart-config-group label[for=chart-values-absolute],
.chart-config-container input#chart-data-cfr:checked ~ .chart-config-group label[for=chart-values-absolute],
.chart-config-container input#chart-data-cfr:not(:checked) ~ input#chart-values-per100k:checked ~ .chart-config-group label[for=chart-values-per100k],
.chart-config-container input#chart-data-cfr:not(:checked) ~ input#chart-values-permillion:checked ~ .chart-config-group label[for=chart-values-permillion],
.chart-config-container input#chart-start-date:checked ~ .chart-config-group label[for=chart-start-date],
.chart-config-container input#chart-start-first:checked ~ .chart-config-group label[for=chart-start-first],
......@@ -347,6 +348,7 @@
}
.chart-config-container input#chart-data-active:checked ~ input#chart-cases-delta:checked ~ .chart-config-group label[for=chart-type-logarithmic],
.chart-config-container input#chart-data-cfr:checked ~ input#chart-cases-delta:checked ~ .chart-config-group label[for=chart-type-logarithmic],
.chart-config-container input#chart-data-cfr:checked ~ .chart-config-group label[for=chart-values-per100k],
.chart-config-container input#chart-data-cfr:checked ~ .chart-config-group label[for=chart-values-permillion] {
opacity:0.5;
pointer-events: none;
......@@ -406,12 +408,14 @@
.chart-config-container input#chart-data-cfr:checked ~ .chart-config-group .delta-change {
display:inline;
}
.chart-config-group .per100k,
.chart-config-group .permillion,
.chart-config-group .data-confirmed,
.chart-config-group .data-recovered,
.chart-config-group .data-deaths {
display:none;
}
.chart-config-container input#chart-values-per100k:checked ~ .chart-config-group .per100k,
.chart-config-container input#chart-values-permillion:checked ~ .chart-config-group .permillion,
.chart-config-container input#chart-data-confirmed:checked ~ .chart-config-group .data-confirmed,
.chart-config-container input#chart-data-recovered:checked ~ .chart-config-group .data-recovered,
......@@ -421,6 +425,7 @@
display:inline;
}
/* doesn't make any sense for CFR */
.chart-config-container input#chart-data-cfr:checked ~ .chart-config-group .per100k,
.chart-config-container input#chart-data-cfr:checked ~ .chart-config-group .permillion {
display:none
}
......@@ -503,6 +508,7 @@
<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-values-absolute" name="chart-values" value="absolute" checked="checked"/>
<input type="radio" id="chart-values-per100k" name="chart-values" value="per100k"/>
<input type="radio" id="chart-values-permillion" name="chart-values" value="permillion"/>
<input type="radio" id="chart-start-date" name="chart-start" value="date"/>
<input type="radio" id="chart-start-first" name="chart-start" value="1"/>
......@@ -536,6 +542,7 @@
<div class="chart-config-group">
<p>Values:</p>
<label for="chart-values-absolute">absolute</label>
<label for="chart-values-per100k">per 100K</label>
<label for="chart-values-permillion">per 1M</label>
</div>
<div class="break"></div>
......@@ -547,7 +554,7 @@
<label for="chart-start-tenth">10th</label>
<label for="chart-start-hundredth">100th</label>
<label for="chart-start-thousandth">1000th</label>
<p><span class="data-confirmed">confirmed case</span><span class="data-recovered">recovery</span><span class="data-deaths">death</span><span class="permillion"> per 1M</span></p>
<p><span class="data-confirmed">confirmed case</span><span class="data-recovered">recovery</span><span class="data-deaths">death</span><span class="per100k"> per 100K</span><span class="permillion"> per 1M</span></p>
</div>
<div class="break"></div>
<div class="chart-config-group">
......
Markdown is supported
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