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

chart scale (linear/logarithmic) selection added

parent baf7dbe3
Pipeline #112 passed with stage
in 1 second
......@@ -295,7 +295,7 @@ let selectSite = (e) => {
<div><span class="label">Doubles every:</span><span class="value">${Math.round(Math.log(2)/Math.log(ratio))} days</span></div>
<div><span class="label">Half infected in:</span><span class="value">${Math.round(Math.log(population*0.5/cases)/Math.log(ratio))} days</span></div>
<div class="sources"><a href="${wikiData.source_link}">source</a></div>`
updateChart(site, data, theSelect.siteNo)
updateChartData(site, data, theSelect.siteNo)
})
.catch((e)=>{
siteData.innerHTML = `<div class="error">Something went wrong. Either a bug, or no data.</div>`
......@@ -392,7 +392,7 @@ let niceChartColors = [
/*
* updating le charte
*/
let updateChart = (site, data, siteno) => {
let updateChartData = (site, data, siteno) => {
// make sure to cancel any other updates to the chart
if ('updateTimeout' in theChart) {
......@@ -420,45 +420,49 @@ let updateChart = (site, data, siteno) => {
return;
}
theChart.updateTimeout = setTimeout(function(){
// update the chart settings
theChart.updateTimeout = setTimeout(updateChartSettings(), 500)
}
let updateChartSettings = () => {
// calculate the max value and the x-axis length that make sense
// with reasonable minimums
var max_cases = 100;
var max_data_points = 20;
theChart.data.datasets.slice(3).forEach((d)=>{
if (d.data[d.data.length-1] > max_cases) {
max_cases = d.data[d.data.length-1]
}
if (d.data.length > max_data_points) {
max_data_points = d.data.length
console.log('max-data-points:', max_data_points)
}
})
// set the max value
if (theChart.options.scales.yAxes[0].type == "logarithmic") {
theChart.options.scales.yAxes[0].ticks.max = max_cases * 2
} else {
theChart.options.scales.yAxes[0].ticks.max = max_cases * 1.1
theChart.options.scales.yAxes[0].type = document.querySelector('input[type=radio][name=chart-type]:checked').value
// calculate the max value and the x-axis length that make sense
// with reasonable minimums
var max_cases = 100;
var max_data_points = 20;
theChart.data.datasets.slice(3).forEach((d)=>{
if (d.data[d.data.length-1] > max_cases) {
max_cases = d.data[d.data.length-1]
}
if (d.data.length > max_data_points) {
max_data_points = d.data.length
console.log('max-data-points:', max_data_points)
}
})
// set the max value
if (theChart.options.scales.yAxes[0].type == "logarithmic") {
theChart.options.scales.yAxes[0].ticks.max = max_cases * 2
} else {
theChart.options.scales.yAxes[0].ticks.max = Math.round(max_cases * 1.1)
}
// set the x-asix length
theChart.data.datasets[0].data = genArr(max_data_points, (i, arr)=>{ return arr[i-1]*2 })
theChart.data.datasets[1].data = genArr(max_data_points, (i, arr)=>{ return arr[i-1]*Math.pow(2, 1/2) }),
theChart.data.datasets[2].data = genArr(max_data_points, (i, arr)=>{ return arr[i-1]*Math.pow(2, 1/7) }),
theChart.data.labels = genArr(max_data_points, 1)
// ignoring the potential error
// because we might have filled out data for an nth site
// while data for (n-1)th is still undefined
// in which case theChart.update() will fail
try {
theChart.update();
} catch (e) {}
// set the x-asix length
theChart.data.datasets[0].data = genArr(max_data_points, (i, arr)=>{ return arr[i-1]*2 })
theChart.data.datasets[1].data = genArr(max_data_points, (i, arr)=>{ return arr[i-1]*Math.pow(2, 1/2) }),
theChart.data.datasets[2].data = genArr(max_data_points, (i, arr)=>{ return arr[i-1]*Math.pow(2, 1/7) }),
theChart.data.labels = genArr(max_data_points, 1)
// end setTimeout
}, 500)
// ignoring the potential error
// because we might have filled out data for an nth site
// while data for (n-1)th is still undefined
// in which case theChart.update() will fail
try {
theChart.update();
} catch (e) {}
}
......@@ -475,8 +479,13 @@ document.addEventListener('DOMContentLoaded', (e)=>{
// now we can add more sites
var addSite = document.getElementById('add-site')
// draw the chart
chart()
// make sure chart controls work
document.getElementById('chart-type-logarithmic').addEventListener('change', updateChartSettings)
document.getElementById('chart-type-linear').addEventListener('change', updateChartSettings)
// fill out the covid data box
getCovidData()
.then((data)=>{
......
......@@ -185,6 +185,26 @@
#disclaimers-container {
font-size:80%;
}
.chart-config-container {
margin-top:1em;
display:flex;
justify-content: center;
font-size:80%;
}
.chart-config-container input {
display:none;
}
.chart-config-container label {
padding: 0.5em;
border-radius:0.2em;
background:#404040;
box-shadow: inset 0px 0px 2px #333;
}
.chart-config-container input:checked + label {
background:springgreen;
color:black;
box-shadow: 0px 0px 2px springgreen;
}
</style>
</head>
<body>
......@@ -209,8 +229,12 @@
</div>
<div id="the-chart-container">
<canvas id="the-chart"></canvas>
<!--input type="radio" id="chart-tipe-logarithmic" name="chart-type"/>
<input type="radio" id="chart-tipe-linear" name="chart-type"/-->
<div class="chart-config-container">
<input type="radio" id="chart-type-logarithmic" name="chart-type" value="logarithmic" checked="checked"/>
<label for="chart-type-logarithmic">Logarithmic scale</label>
<input type="radio" id="chart-type-linear" value="linear" name="chart-type">
<label for="chart-type-linear">Linear scale</label>
</div>
</div>
<div id="disclaimers-container">
<h3>Disclaimers:</h3>
......
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