mirror of https://github.com/bvn13/covid19-ru.git
208 lines
7.5 KiB
HTML
208 lines
7.5 KiB
HTML
<!DOCTYPE html>
|
||
<html xmlns:th="http://www.thymeleaf.org">
|
||
|
||
<head>
|
||
<title>Статистика COVID19 в России</title>
|
||
<meta charset="UTF-8"/>
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||
|
||
<!-- <link rel="stylesheet" th:href="@{/css/chart.min.css}">-->
|
||
</head>
|
||
<body>
|
||
<p>
|
||
<span th:text="'Today is: ' + ${#dates.format(#dates.createNow(), 'dd MMM yyyy HH:mm')}" th:remove="tag"></span>
|
||
</p>
|
||
<p>
|
||
<a th:href="${@mainConfig.getMainUrl()} + '/stats/last'">Последние данные</a>
|
||
</p>
|
||
<p>
|
||
<a th:href="${@mainConfig.getMainUrl()} + '/stats/all'">Все данные</a>
|
||
</p>
|
||
|
||
<p>
|
||
<label for="region">Регион</label>
|
||
<select id="region"></select>
|
||
</p>
|
||
|
||
<div style="width: 75%;">
|
||
<canvas id="chart"></canvas>
|
||
</div>
|
||
|
||
<p>
|
||
<a href="https://github.com/bvn13/covid19-ru">Исходный код</a>
|
||
</p>
|
||
<p>
|
||
<a href="https://twitter.com/bvn13">@bvn13 - Автор проекта</a>
|
||
</p>
|
||
|
||
<script th:inline="javascript">
|
||
var mainUrl = [[${@mainConfig.getMainUrl()}]];
|
||
|
||
document.addEventListener('DOMContentLoaded', () => {
|
||
(function ($) {
|
||
function setUpRegions(regions) {
|
||
$("#region > option").each((i, el) => {
|
||
$(el).remove();
|
||
});
|
||
|
||
_.forEach(regions, (region) => {
|
||
$("#region").append("<option value='" + region + "'>" + region + "</option>");
|
||
});
|
||
|
||
onRegionChanged();
|
||
}
|
||
|
||
function getRegion() {
|
||
return document.getElementById("region").value;
|
||
}
|
||
|
||
function onRegionChanged() {
|
||
var region = getRegion();
|
||
loadStatsForRegion(region);
|
||
}
|
||
|
||
function loadStatsForRegion(region) {
|
||
fetch(mainUrl + '/stats/all?region=' + region)
|
||
.then(value => {
|
||
return value.json()
|
||
})
|
||
.then(json => {
|
||
console.log(json);
|
||
showData(json);
|
||
});
|
||
}
|
||
|
||
function showData(json) {
|
||
var labels = _.map(json.progress, (progress) => progress.datetime.substr(0, 10));
|
||
var sick = _.map(json.progress, (progress) => progress.stats.length > 0 ? progress.stats[0].sick : 0);
|
||
var sickDeltas = _.map(json.progress, (progress) =>
|
||
progress.stats.length > 0
|
||
? progress.stats[0].sick - progress.stats[0].previous.sick
|
||
: 0
|
||
);
|
||
var healed = _.map(json.progress, (progress) => progress.stats.length > 0 ? progress.stats[0].healed : 0);
|
||
var healedDeltas = _.map(json.progress, (progress) =>
|
||
progress.stats.length > 0
|
||
? progress.stats[0].healed - progress.stats[0].previous.healed
|
||
: 0
|
||
);
|
||
var died = _.map(json.progress, (progress) => progress.stats.length > 0 ? progress.stats[0].died : 0);
|
||
var diedDeltas = _.map(json.progress, (progress) =>
|
||
progress.stats.length > 0
|
||
? progress.stats[0].died - progress.stats[0].previous.died
|
||
: 0
|
||
);
|
||
|
||
if (window.myChart) {
|
||
window.myChart.destroy();
|
||
}
|
||
|
||
window.myChart = new Chart(ctx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: labels,
|
||
datasets: [{
|
||
label: 'Всего (чел.)',
|
||
data: sick,
|
||
backgroundColor: 'red',
|
||
borderColor: 'red',
|
||
borderWidth: 1,
|
||
fill: false
|
||
}, {
|
||
label: 'Выздоровело (чел.)',
|
||
data: healed,
|
||
backgroundColor: 'green',
|
||
borderColor: 'green',
|
||
borderWidth: 1,
|
||
fill: false
|
||
}, {
|
||
label: 'Умерло (чел.)',
|
||
data: died,
|
||
backgroundColor: 'black',
|
||
borderColor: 'black',
|
||
borderWidth: 1,
|
||
fill: false
|
||
}, {
|
||
label: 'Всего (дельта чел.)',
|
||
data: sickDeltas,
|
||
backgroundColor: 'red',
|
||
borderColor: 'red',
|
||
borderWidth: 1,
|
||
borderDash: [5, 15],
|
||
fill: false
|
||
}, {
|
||
label: 'Выздоровело (дельта чел.)',
|
||
data: healedDeltas,
|
||
backgroundColor: 'green',
|
||
borderColor: 'green',
|
||
borderWidth: 1,
|
||
borderDash: [5, 15],
|
||
fill: false
|
||
}, {
|
||
label: 'Умерло (дельта чел.)',
|
||
data: diedDeltas,
|
||
backgroundColor: 'black',
|
||
borderColor: 'black',
|
||
borderWidth: 1,
|
||
borderDash: [5, 15],
|
||
fill: false
|
||
}]
|
||
},
|
||
options: {
|
||
responsive: true,
|
||
elements: {
|
||
line: {
|
||
tension: 0.000001
|
||
}
|
||
},
|
||
scales: {
|
||
xAxes: [{
|
||
display: true,
|
||
scaleLabel: {
|
||
display: true,
|
||
labelString: 'Дата'
|
||
}
|
||
}],
|
||
yAxes: [{
|
||
display: true,
|
||
scaleLabel: {
|
||
display: true,
|
||
labelString: 'Количество (чел.)'
|
||
},
|
||
ticks: {
|
||
beginAtZero: true
|
||
}
|
||
}]
|
||
}
|
||
}
|
||
});
|
||
|
||
myChart.canvas.parentNode.style.width = '1024px';
|
||
// myChart.canvas.parentNode.style.height = '1024px';
|
||
}
|
||
|
||
$("#region").change(() => onRegionChanged());
|
||
|
||
var ctx = document.getElementById('chart').getContext('2d');
|
||
|
||
fetch(mainUrl + '/regions')
|
||
.then(value => {
|
||
return value.json()
|
||
})
|
||
.then(json => setUpRegions(json));
|
||
|
||
})(jQuery);
|
||
|
||
});
|
||
|
||
</script>
|
||
|
||
<script th:src="@{/js/jquery-3.5.0.min.js}"></script>
|
||
<script th:src="@{/js/polyfill.min.js}"></script>
|
||
<script th:src="@{/js/fetch.min.js}"></script>
|
||
<script th:src="@{/js/chart.min.js}"></script>
|
||
<script th:src="@{/js/lodash.js}"></script>
|
||
|
||
</body>
|
||
|
||
</html> |