francois/HowBadIsMyBatch
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adding slider4freeBeds

Browse Source
This commit is contained in:
frankknoll
2022-04-01 10:45:44 +02:00
parent 1be04b9022
commit 2a7e92217c
3 changed files with 47 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
docs/FreeBedsChartView.js
View File

@@ -48,6 +48,12 @@ class FreeBedsChartView {
return { beforeDraw: drawTrafficLights };
}
setData(data) {
this.#chart.config.data.datasets[0].data = data;
this.#chart.config.data.datasets[1].data = data;
this.#chart.update();
}
#getData(data, label) {
return {
datasets: [

2
docs/intensivstationen.html
View File

@@ -58,6 +58,7 @@
displayFreeBedsChart(
{
freeBedsChartView: freeBedsChartView,
sliderElement: document.getElementById('slider4freeBeds'),
kreisText: selectedOption.text,
kreisValue: selectedOption.value
});
@@ -524,6 +525,7 @@
<option value="Zwickau">Zwickau</option>
</select>
<canvas id="freeBeds"></canvas>
<div id="slider4freeBeds"></div>
</div>
</div>
</div>

59
docs/intensivstationen.js
View File

@@ -4,31 +4,47 @@ function displayIntensiveCareCapacitiesChart(
headingElement.textContent = kreisText
fetch(`data/intensivstationen/intensivstationen-${kreisValue}.json`)
.then(response => response.json())
.then(json => {
populationElement.textContent = new Intl.NumberFormat().format(json.population);
intensiveCareCapacitiesChartView.displayChart({ data: json.data, title: kreisText });
createSlider(
{
sliderElement: sliderElement,
range: {
min: 0,
max: json.data.length - 1
},
orientation: 'horizontal',
onUpdate: ([start, end]) => intensiveCareCapacitiesChartView.setData(json.data.slice(start, end + 1))
});
.then(json => _displayIntensiveCareCapacitiesChart({ intensiveCareCapacitiesChartView, sliderElement, populationElement, kreisText, json }));
}
function _displayIntensiveCareCapacitiesChart({ intensiveCareCapacitiesChartView, sliderElement, populationElement, kreisText, json }) {
populationElement.textContent = new Intl.NumberFormat().format(json.population);
intensiveCareCapacitiesChartView.displayChart({ data: json.data, title: kreisText });
createSlider(
{
sliderElement: sliderElement,
range: {
min: 0,
max: json.data.length - 1
},
orientation: 'horizontal',
onUpdate: ([start, end]) => intensiveCareCapacitiesChartView.setData(json.data.slice(start, end + 1))
});
}
function displayFreeBedsChart({ freeBedsChartView, kreisText, kreisValue }) {
function displayFreeBedsChart({ freeBedsChartView, sliderElement, kreisText, kreisValue }) {
fetch(`data/intensivstationen/intensivstationen-${kreisValue}.json`)
.then(response => response.json())
.then(json =>
freeBedsChartView.displayChart(
{
data: getDataDicts(json.data),
title: kreisText
}));
.then(json => _displayFreeBedsChart({ freeBedsChartView, sliderElement, kreisText, json }));
}
function _displayFreeBedsChart({ freeBedsChartView, sliderElement, kreisText, json }) {
const data = getDataDicts(json.data);
freeBedsChartView.displayChart(
{
data: data,
title: kreisText
});
createSlider(
{
sliderElement: sliderElement,
range: {
min: 0,
max: data.length - 1
},
orientation: 'horizontal',
onUpdate: ([start, end]) => freeBedsChartView.setData(data.slice(start, end + 1))
});
}
function getDataDicts(data) {
@@ -79,6 +95,9 @@ function _displayMedianOfFreeBedsByKreisChart(canvas, sliderElement, data) {
}
function createSlider({ sliderElement, range, orientation, height = null, onUpdate }) {
if ('noUiSlider' in sliderElement) {
sliderElement.noUiSlider.destroy();
}
noUiSlider.create(
sliderElement,
{