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) => { ...@@ -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">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><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>` <div class="sources"><a href="${wikiData.source_link}">source</a></div>`
updateChart(site, data, theSelect.siteNo) updateChartData(site, data, theSelect.siteNo)
}) })
.catch((e)=>{ .catch((e)=>{
siteData.innerHTML = `<div class="error">Something went wrong. Either a bug, or no data.</div>` siteData.innerHTML = `<div class="error">Something went wrong. Either a bug, or no data.</div>`
...@@ -392,7 +392,7 @@ let niceChartColors = [ ...@@ -392,7 +392,7 @@ let niceChartColors = [
/* /*
* updating le charte * updating le charte
*/ */
let updateChart = (site, data, siteno) => { let updateChartData = (site, data, siteno) => {
// make sure to cancel any other updates to the chart // make sure to cancel any other updates to the chart
if ('updateTimeout' in theChart) { if ('updateTimeout' in theChart) {
...@@ -420,45 +420,49 @@ let updateChart = (site, data, siteno) => { ...@@ -420,45 +420,49 @@ let updateChart = (site, data, siteno) => {
return; 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 theChart.options.scales.yAxes[0].type = document.querySelector('input[type=radio][name=chart-type]:checked').value
// with reasonable minimums
var max_cases = 100; // calculate the max value and the x-axis length that make sense
var max_data_points = 20; // with reasonable minimums
theChart.data.datasets.slice(3).forEach((d)=>{ var max_cases = 100;
if (d.data[d.data.length-1] > max_cases) { var max_data_points = 20;
max_cases = d.data[d.data.length-1] theChart.data.datasets.slice(3).forEach((d)=>{
} if (d.data[d.data.length-1] > max_cases) {
if (d.data.length > max_data_points) { max_cases = d.data[d.data.length-1]
max_data_points = d.data.length }
console.log('max-data-points:', max_data_points) 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
} }
})
// 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 // set the x-asix length
theChart.data.datasets[0].data = genArr(max_data_points, (i, arr)=>{ return arr[i-1]*2 }) 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[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.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) 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) {}
// end setTimeout // ignoring the potential error
}, 500) // 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)=>{ ...@@ -475,8 +479,13 @@ document.addEventListener('DOMContentLoaded', (e)=>{
// now we can add more sites // now we can add more sites
var addSite = document.getElementById('add-site') var addSite = document.getElementById('add-site')
// draw the chart
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 // fill out the covid data box
getCovidData() getCovidData()
.then((data)=>{ .then((data)=>{
......
...@@ -185,6 +185,26 @@ ...@@ -185,6 +185,26 @@
#disclaimers-container { #disclaimers-container {
font-size:80%; 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> </style>
</head> </head>
<body> <body>
...@@ -209,8 +229,12 @@ ...@@ -209,8 +229,12 @@
</div> </div>
<div id="the-chart-container"> <div id="the-chart-container">
<canvas id="the-chart"></canvas> <canvas id="the-chart"></canvas>
<!--input type="radio" id="chart-tipe-logarithmic" name="chart-type"/> <div class="chart-config-container">
<input type="radio" id="chart-tipe-linear" name="chart-type"/--> <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>
<div id="disclaimers-container"> <div id="disclaimers-container">
<h3>Disclaimers:</h3> <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