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

working on starting the charts from 1st/10th/100th/1000th case

parent e14a2351
......@@ -502,12 +502,26 @@ let updateChartData = (siteSelect) => {
borderWidth: 1
}
// where do we start with the data?
found_start = false
filtered_data = siteData[siteSelect.value]
.data
.filter((row, idx) => {
if (found_start) {
return true
} else if (row.cases >= document.querySelector('input[type=radio][name=chart-start]:checked').value) {
found_start = true
return true
}
return false
})
// use cumulative case numbers
if (document.querySelector('input[type=radio][name=chart-cases]:checked').value === 'cumulative') {
to_chart.data = siteData[siteSelect.value].data.map(row => row.cases)
to_chart.data = filtered_data.map(row => row.cases)
// use new cases count
} else {
to_chart.data = siteData[siteSelect.value].data.map(row => row.delta)
to_chart.data = filtered_data.map(row => row.delta)
}
// assign the data to the chart
......@@ -582,9 +596,10 @@ document.addEventListener('DOMContentLoaded', (e)=>{
chart()
// make sure chart controls work
document.getElementById('chart-type-logarithmic').addEventListener('change', updateChartSettings)
document.getElementById('chart-type-linear').addEventListener('change', updateChartSettings)
document.querySelectorAll('input[type=radio][name=chart-cases]').forEach((node)=>{
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]').forEach((node)=>{
node.addEventListener('change', (e)=>{
for (select_index=0; select_index<sitesSelects.length; select_index++) {
updateChartData(sitesSelects[select_index])
......
No preview for this file type
......@@ -190,6 +190,7 @@
display:flex;
justify-content: center;
font-size:80%;
flex-wrap: wrap;
}
.chart-config-container input {
display:none;
......@@ -208,7 +209,11 @@
.chart-config-group {
display:flex;
justify-content: center;
margin:0em 1em;
margin:0.5em 1em;
}
.chart-config-group > p {
margin:0em;
padding:0.5em;
}
</style>
</head>
......@@ -236,16 +241,30 @@
<canvas id="the-chart"></canvas>
<div class="chart-config-container">
<div class="chart-config-group">
<p>Scale:</p>
<input type="radio" id="chart-type-logarithmic" name="chart-type" value="logarithmic" checked="checked"/>
<label for="chart-type-logarithmic">Logarithmic scale</label>
<label for="chart-type-logarithmic">logarithmic</label>
<input type="radio" id="chart-type-linear" name="chart-type" value="linear">
<label for="chart-type-linear">Linear scale</label>
<label for="chart-type-linear">linear</label>
</div>
<div class="chart-config-group">
<p>Cases:</p>
<input type="radio" id="chart-cases-cumulative" name="chart-cases" value="cumulative" checked="checked"/>
<label for="chart-cases-cumulative">Cumulative cases</label>
<label for="chart-cases-cumulative">cumulative</label>
<input type="radio" id="chart-cases-new" name="chart-cases" value="new" >
<label for="chart-cases-new">New cases</label>
<label for="chart-cases-new">new</label>
</div>
<div class="chart-config-group">
<p>Start from:</p>
<input type="radio" id="chart-start-first" name="chart-start" value="1" checked="checked"/>
<label for="chart-start-first">1st</label>
<input type="radio" id="chart-start-tenth" name="chart-start" value="10"/>
<label for="chart-start-tenth">10th</label>
<input type="radio" id="chart-start-hundredth" name="chart-start" value="100"/>
<label for="chart-start-hundredth">100th</label>
<input type="radio" id="chart-start-thousandth" name="chart-start" value="1000"/>
<label for="chart-start-thousandth">1000th</label>
<p>case</p>
</div>
</div>
</div>
......
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