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,7 +420,14 @@ let updateChart = (site, data, siteno) => {
return;
}
theChart.updateTimeout = setTimeout(function(){
// update the chart settings
theChart.updateTimeout = setTimeout(updateChartSettings(), 500)
}
let updateChartSettings = () => {
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
......@@ -440,7 +447,7 @@ let updateChart = (site, data, siteno) => {
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].ticks.max = Math.round(max_cases * 1.1)
}
// set the x-asix length
......@@ -456,9 +463,6 @@ let updateChart = (site, data, siteno) => {
try {
theChart.update();
} catch (e) {}
// end setTimeout
}, 500)
}
......@@ -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