2020-04-20 10:51:50 +03:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html xmlns:th="http://www.thymeleaf.org">
|
|
|
|
|
|
|
|
|
|
|
|
<head>
|
2020-04-21 02:21:13 +03:00
|
|
|
|
<title>Статистика COVID19 в России</title>
|
2020-04-20 10:51:50 +03:00
|
|
|
|
<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>
|
|
|
|
|
|
|
2020-04-21 02:21:13 +03:00
|
|
|
|
<p>
|
|
|
|
|
|
<a href="https://github.com/bvn13/covid19-ru">Исходный код</a>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
<a href="https://twitter.com/bvn13">@bvn13 - Автор проекта</a>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
|
2020-04-20 10:51:50 +03:00
|
|
|
|
<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);
|
2020-04-21 02:21:13 +03:00
|
|
|
|
var sickDeltas = _.map(json.progress, (progress) =>
|
|
|
|
|
|
progress.stats.length > 0
|
|
|
|
|
|
? progress.stats[0].sick - progress.stats[0].previous.sick
|
|
|
|
|
|
: 0
|
|
|
|
|
|
);
|
2020-04-20 10:51:50 +03:00
|
|
|
|
var healed = _.map(json.progress, (progress) => progress.stats.length > 0 ? progress.stats[0].healed : 0);
|
2020-04-21 02:21:13 +03:00
|
|
|
|
var healedDeltas = _.map(json.progress, (progress) =>
|
|
|
|
|
|
progress.stats.length > 0
|
|
|
|
|
|
? progress.stats[0].healed - progress.stats[0].previous.healed
|
|
|
|
|
|
: 0
|
|
|
|
|
|
);
|
2020-04-20 10:51:50 +03:00
|
|
|
|
var died = _.map(json.progress, (progress) => progress.stats.length > 0 ? progress.stats[0].died : 0);
|
2020-04-21 02:21:13 +03:00
|
|
|
|
var diedDeltas = _.map(json.progress, (progress) =>
|
|
|
|
|
|
progress.stats.length > 0
|
|
|
|
|
|
? progress.stats[0].died - progress.stats[0].previous.died
|
|
|
|
|
|
: 0
|
|
|
|
|
|
);
|
2020-04-20 10:51:50 +03:00
|
|
|
|
|
2020-04-21 02:52:14 +03:00
|
|
|
|
if (window.myChart) {
|
|
|
|
|
|
window.myChart.destroy();
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
window.myChart = new Chart(ctx, {
|
2020-04-20 10:51:50 +03:00
|
|
|
|
type: 'line',
|
|
|
|
|
|
data: {
|
|
|
|
|
|
labels: labels,
|
|
|
|
|
|
datasets: [{
|
2020-04-21 02:21:13 +03:00
|
|
|
|
label: 'Всего (чел.)',
|
2020-04-20 10:51:50 +03:00
|
|
|
|
data: sick,
|
|
|
|
|
|
backgroundColor: 'red',
|
|
|
|
|
|
borderColor: 'red',
|
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
|
fill: false
|
|
|
|
|
|
}, {
|
2020-04-21 02:21:13 +03:00
|
|
|
|
label: 'Выздоровело (чел.)',
|
2020-04-20 10:51:50 +03:00
|
|
|
|
data: healed,
|
|
|
|
|
|
backgroundColor: 'green',
|
|
|
|
|
|
borderColor: 'green',
|
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
|
fill: false
|
|
|
|
|
|
}, {
|
2020-04-21 02:21:13 +03:00
|
|
|
|
label: 'Умерло (чел.)',
|
2020-04-20 10:51:50 +03:00
|
|
|
|
data: died,
|
|
|
|
|
|
backgroundColor: 'black',
|
|
|
|
|
|
borderColor: 'black',
|
|
|
|
|
|
borderWidth: 1,
|
|
|
|
|
|
fill: false
|
2020-04-21 02:21:13 +03:00
|
|
|
|
}, {
|
|
|
|
|
|
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
|
2020-04-20 10:51:50 +03:00
|
|
|
|
}]
|
|
|
|
|
|
},
|
|
|
|
|
|
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>
|
