don't track public/
This commit is contained in:
parent
11a867eca9
commit
be2a146c6e
File diff suppressed because one or more lines are too long
10224
public/bootstrap.css
vendored
10224
public/bootstrap.css
vendored
File diff suppressed because it is too large
Load Diff
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Afghanistan | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:46.107Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Afghanistan</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Afghanistan",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,2,4,4,4,4,4,4,4,6,6,7,7,11,14,14,15,15,18,18,21,23,25,30,30,30,33,36,36,40,42,43,47,50],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,2,0,0,0,0,0,0,2,0,1,0,4,3,0,1,0,3,0,3,2,2,5,0,0,3,3,0,4,2,1,4,3],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="50" data-yesterday="3" data-week="14" data-month="46"><td class="sort-order">1</td><td><em class="text-muted">Other Afghanistan</em></td><td class="text-right">50</td><td class="text-right sorted">3</td><td class="text-right">14</td><td class="text-right">46</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[21,23,25,30,30,30,33,36,36,40,42,43,47,50],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Albania | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:47.304Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Albania</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Albania",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,2,2,2,2,2,4,5,5,6,8,10,10,11,15,15,16,17,20,20,21,22,22,23,23,23,23,23,24,25,26,26,26,26,26,26,27,27,27,27,28],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,2,1,0,1,2,2,0,1,4,0,1,1,3,0,1,1,0,1,0,0,0,0,1,1,1,0,0,0,0,0,1,0,0,0,1],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="28" data-yesterday="1" data-week="2" data-month="13"><td class="sort-order">1</td><td><em class="text-muted">Other Albania</em></td><td class="text-right">28</td><td class="text-right sorted">1</td><td class="text-right">2</td><td class="text-right">13</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[23,24,25,26,26,26,26,26,26,27,27,27,27,28],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Algeria | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:45.204Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Algeria</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Algeria",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,3,4,4,4,7,9,11,15,17,17,19,21,25,26,29,31,35,44,58,86,105,130,152,173,193,205,235,256,275,293,313,326,336,348,364,367,375,384,392,402,407,415,419,425],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,0,3,2,2,4,2,0,2,2,4,1,3,2,4,9,14,28,19,25,22,21,20,12,30,21,19,18,20,13,10,12,16,3,8,9,8,10,5,8,4,6],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="425" data-yesterday="6" data-week="41" data-month="381"><td class="sort-order">1</td><td><em class="text-muted">Other Algeria</em></td><td class="text-right">425</td><td class="text-right sorted">6</td><td class="text-right">41</td><td class="text-right">381</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[313,326,336,348,364,367,375,384,392,402,407,415,419,425],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Andorra | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:48.538Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Andorra</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Andorra",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,3,3,3,6,8,12,14,15,16,17,18,21,22,23,25,26,26,29,29,31,33,33,35,35,36,37,37,37,37,40,40,40],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,2,0,0,3,2,4,2,1,1,1,1,3,1,1,2,1,0,3,0,2,2,0,2,0,1,1,0,0,0,3,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="40" data-yesterday="0" data-week="3" data-month="28"><td class="sort-order">1</td><td><em class="text-muted">Other Andorra</em></td><td class="text-right">40</td><td class="text-right sorted">0</td><td class="text-right">3</td><td class="text-right">28</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[29,31,33,33,35,35,36,37,37,37,37,40,40,40],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Angola | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:48.604Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Angola</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Angola",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="2" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">1</td><td><em class="text-muted">Other Angola</em></td><td class="text-right">2</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[2,2,2,2,2,2,2,2,2,2,2,2,2,2],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Antigua and Barbuda | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:48.664Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Antigua and Barbuda</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Antigua and Barbuda",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2,2,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="3" data-yesterday="0" data-week="0" data-month="3"><td class="sort-order">1</td><td><em class="text-muted">Other Antigua and Barbuda</em></td><td class="text-right">3</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">3</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[2,2,2,3,3,3,3,3,3,3,3,3,3,3],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Argentina | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:45.071Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Argentina</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Argentina",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,2,2,2,2,2,2,3,3,4,4,4,6,8,9,13,18,19,23,27,28,36,39,43,44,48,56,63,72,82,83,90,97,102,111,115,123,129,132,136,147,152,165,176,185,192],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,1,0,1,0,0,2,2,1,4,5,1,4,4,1,8,3,4,1,4,8,7,9,10,1,7,7,5,9,4,8,6,3,4,11,5,13,11,9,7],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="192" data-yesterday="7" data-week="56" data-month="165"><td class="sort-order">1</td><td><em class="text-muted">Other Argentina</em></td><td class="text-right">192</td><td class="text-right sorted">7</td><td class="text-right">56</td><td class="text-right">165</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[97,102,111,115,123,129,132,136,147,152,165,176,185,192],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Armenia | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:48.728Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Armenia</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Armenia",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,3,3,3,4,7,7,7,7,8,8,9,10,12,13,13,14,16,17,18,19,20,20,22,24,24,24,27,28,28],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,2,0,0,1,3,0,0,0,1,0,1,1,2,1,0,1,2,1,1,1,1,0,2,2,0,0,3,1,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="28" data-yesterday="0" data-week="6" data-month="25"><td class="sort-order">1</td><td><em class="text-muted">Other Armenia</em></td><td class="text-right">28</td><td class="text-right sorted">0</td><td class="text-right">6</td><td class="text-right">25</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[14,16,17,18,19,20,20,22,24,24,24,27,28,28],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,245 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Australia | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:46.170Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Australia</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Australia",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,2,2,2,2,3,3,3,3,3,3,3,3,3,5,6,6,7,7,7,7,8,8,13,13,14,16,17,18,20,24,28,30,35,40,45,50,51,54,57,60,61,62,63,63,66,67,67,67,67,67,75,79,80,83],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,2,1,0,1,0,0,0,1,0,5,0,1,2,1,1,2,4,4,2,5,5,5,5,1,3,3,3,1,1,1,0,3,1,0,0,0,0,8,4,1,3],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="17" data-yesterday="1" data-week="3" data-month="13"><td class="sort-order">1</td><td>Victoria</td><td class="text-right">17</td><td class="text-right sorted">1</td><td class="text-right">3</td><td class="text-right">13</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[14,14,14,14,14,14,14,14,14,14,16,16,16,17],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="11" data-yesterday="1" data-week="4" data-month="10"><td class="sort-order">2</td><td>Tasmania</td><td class="text-right">11</td><td class="text-right sorted">1</td><td class="text-right">4</td><td class="text-right">10</td><td><canvas class="mx-auto" id="sparkline-1" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-1",
|
||||
[5,6,6,6,7,7,7,7,7,7,8,9,10,11],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="34" data-yesterday="1" data-week="8" data-month="26"><td class="sort-order">3</td><td>New South Wales</td><td class="text-right">34</td><td class="text-right sorted">1</td><td class="text-right">8</td><td class="text-right">26</td><td><canvas class="mx-auto" id="sparkline-2" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-2",
|
||||
[25,25,25,25,26,26,26,26,26,26,31,33,33,34],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="8" data-yesterday="0" data-week="1" data-month="6"><td class="sort-order">4</td><td>Western Australia</td><td class="text-right">8</td><td class="text-right sorted">0</td><td class="text-right">1</td><td class="text-right">6</td><td><canvas class="mx-auto" id="sparkline-3" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-3",
|
||||
[6,6,6,6,7,7,7,7,7,7,7,8,8,8],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="4" data-yesterday="0" data-week="0" data-month="4"><td class="sort-order">5</td><td>South Australia</td><td class="text-right">4</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">4</td><td><canvas class="mx-auto" id="sparkline-4" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-4",
|
||||
[4,4,4,4,4,4,4,4,4,4,4,4,4,4],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="6" data-yesterday="0" data-week="0" data-month="4"><td class="sort-order">6</td><td>Queensland</td><td class="text-right">6</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">4</td><td><canvas class="mx-auto" id="sparkline-5" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-5",
|
||||
[5,5,5,5,5,6,6,6,6,6,6,6,6,6],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">7</td><td>Northern Territory</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-6" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-6",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="3" data-yesterday="0" data-week="0" data-month="2"><td class="sort-order">8</td><td>Australian Capital Territory</td><td class="text-right">3</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">2</td><td><canvas class="mx-auto" id="sparkline-7" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-7",
|
||||
[2,2,3,3,3,3,3,3,3,3,3,3,3,3],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Austria | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:45.274Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Austria</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Austria",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,3,3,4,6,6,8,16,21,28,30,49,58,68,86,108,128,146,158,168,186,204,220,243,273,295,319,337,350,368,384,393,410,431,443,452,470,491,510,522,530,536,542],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,2,0,1,2,0,2,8,5,7,2,19,9,10,18,22,20,18,12,10,18,18,16,23,30,22,24,18,13,18,16,9,17,21,12,9,18,21,19,12,8,6,6],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="542" data-yesterday="6" data-week="72" data-month="414"><td class="sort-order">1</td><td><em class="text-muted">Other Austria</em></td><td class="text-right">542</td><td class="text-right sorted">6</td><td class="text-right">72</td><td class="text-right">414</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[368,384,393,410,431,443,452,470,491,510,522,530,536,542],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Azerbaijan | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:48.789Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Azerbaijan</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Azerbaijan",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,2,3,3,4,4,4,5,5,5,5,5,7,7,8,8,9,10,11,11,12,13,13,15,15,18,19,19,20,20,20,21,21,21],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,1,0,0,0,0,2,0,1,0,1,1,1,0,1,1,0,2,0,3,1,0,1,0,0,1,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="21" data-yesterday="0" data-week="2" data-month="16"><td class="sort-order">1</td><td><em class="text-muted">Other Azerbaijan</em></td><td class="text-right">21</td><td class="text-right sorted">0</td><td class="text-right">2</td><td class="text-right">16</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[12,13,13,15,15,18,19,19,20,20,20,21,21,21],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Bahamas | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:48.848Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Bahamas</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Bahamas",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,4,4,5,6,7,8,8,8,8,8,8,8,8,9,9,9,9,9,9,11,11,11,11],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,3,0,1,1,1,1,0,0,0,0,0,0,0,1,0,0,0,0,0,2,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="11" data-yesterday="0" data-week="2" data-month="11"><td class="sort-order">1</td><td><em class="text-muted">Other Bahamas</em></td><td class="text-right">11</td><td class="text-right sorted">0</td><td class="text-right">2</td><td class="text-right">11</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[8,8,8,8,9,9,9,9,9,9,11,11,11,11],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Bahrain | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:48.910Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Bahrain</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Bahrain",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,2,2,3,4,4,4,4,4,4,4,4,4,4,4,4,4,5,5,5,6,6,6,6,7,7,7,7,7,7,7,7,7,8,8,8,8],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="8" data-yesterday="0" data-week="1" data-month="4"><td class="sort-order">1</td><td><em class="text-muted">Other Bahrain</em></td><td class="text-right">8</td><td class="text-right sorted">0</td><td class="text-right">1</td><td class="text-right">4</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[6,7,7,7,7,7,7,7,7,7,8,8,8,8],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Bangladesh | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:45.399Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Bangladesh</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Bangladesh",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,2,2,3,4,5,5,5,5,5,5,5,6,6,6,8,9,12,17,20,21,27,30,34,39,46,50,60,75,84,91,101,110,120,127,131,140,145],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,1,1,1,0,0,0,0,0,0,1,0,0,2,1,3,5,3,1,6,3,4,5,7,4,10,15,9,7,10,9,10,7,4,9,5],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="145" data-yesterday="5" data-week="44" data-month="140"><td class="sort-order">1</td><td><em class="text-muted">Other Bangladesh</em></td><td class="text-right">145</td><td class="text-right sorted">5</td><td class="text-right">44</td><td class="text-right">140</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[39,46,50,60,75,84,91,101,110,120,127,131,140,145],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Barbados | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:48.972Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Barbados</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Barbados",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,3,3,3,4,4,4,4,4,5,5,5,5,5,5,5,5,6,6,6,6],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="6" data-yesterday="0" data-week="1" data-month="6"><td class="sort-order">1</td><td><em class="text-muted">Other Barbados</em></td><td class="text-right">6</td><td class="text-right sorted">0</td><td class="text-right">1</td><td class="text-right">6</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[4,4,5,5,5,5,5,5,5,5,6,6,6,6],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Belarus | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:45.462Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Belarus</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Belarus",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,4,4,5,8,13,13,13,16,19,23,26,29,33,36,40,42,45,47,51,55,58,60,63,67,72],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,0,1,3,5,0,0,3,3,4,3,3,4,3,4,2,3,2,4,4,3,2,3,4,5],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="72" data-yesterday="5" data-week="21" data-month="71"><td class="sort-order">1</td><td><em class="text-muted">Other Belarus</em></td><td class="text-right">72</td><td class="text-right sorted">5</td><td class="text-right">21</td><td class="text-right">71</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[29,33,36,40,42,45,47,51,55,58,60,63,67,72],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Belgium | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:43.414Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Belgium</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Belgium",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,3,3,4,4,5,10,14,21,37,67,75,88,122,178,220,289,353,431,513,705,828,1011,1143,1283,1447,1632,2035,2240,2523,3019,3346,3600,3903,4157,4440,4857,5163,5453,5683,5828,5998,6262,6490,6679,6917,7094],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,0,0,1,0,1,5,4,7,16,30,8,13,34,56,42,69,64,78,82,192,123,183,132,140,164,185,403,205,283,496,327,254,303,254,283,417,306,290,230,145,170,264,228,189,238,177],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="7094" data-yesterday="177" data-week="1266" data-month="6389"><td class="sort-order">1</td><td><em class="text-muted">Other Belgium</em></td><td class="text-right">7,094</td><td class="text-right sorted">177</td><td class="text-right">1,266</td><td class="text-right">6,389</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[3903,4157,4440,4857,5163,5453,5683,5828,5998,6262,6490,6679,6917,7094],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Belize | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:49.036Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Belize</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Belize",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="2" data-yesterday="0" data-week="0" data-month="2"><td class="sort-order">1</td><td><em class="text-muted">Other Belize</em></td><td class="text-right">2</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">2</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[2,2,2,2,2,2,2,2,2,2,2,2,2,2],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Benin | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:49.096Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Benin</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Benin",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="1" data-yesterday="0" data-week="0" data-month="1"><td class="sort-order">1</td><td><em class="text-muted">Other Benin</em></td><td class="text-right">1</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">1</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Bhutan | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:49.158Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Bhutan</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Bhutan",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">1</td><td><em class="text-muted">Other Bhutan</em></td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Bolivia | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:45.786Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Bolivia</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Bolivia",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,4,6,7,8,9,10,10,11,14,15,18,19,20,24,27,28,28,29,31,31,32,33,34,37,43,44,46,50],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,2,1,1,1,1,0,1,3,1,3,1,1,4,3,1,0,1,2,0,1,1,1,3,6,1,2,4],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="50" data-yesterday="4" data-week="17" data-month="44"><td class="sort-order">1</td><td><em class="text-muted">Other Bolivia</em></td><td class="text-right">50</td><td class="text-right sorted">4</td><td class="text-right">17</td><td class="text-right">44</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[27,28,28,29,31,31,32,33,34,37,43,44,46,50],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Bosnia and Herzegovina | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:46.553Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Bosnia and Herzegovina</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Bosnia and Herzegovina",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,3,3,3,4,5,6,10,13,13,16,17,21,23,29,33,34,35,36,37,39,39,40,41,43,46,47,48,49,51,53,54,55,57,59],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,2,0,0,1,1,1,4,3,0,3,1,4,2,6,4,1,1,1,1,2,0,1,1,2,3,1,1,1,2,2,1,1,2,2],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="59" data-yesterday="2" data-week="10" data-month="46"><td class="sort-order">1</td><td><em class="text-muted">Other Bosnia and Herzegovina</em></td><td class="text-right">59</td><td class="text-right sorted">2</td><td class="text-right">10</td><td class="text-right">46</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[39,40,41,43,46,47,48,49,51,53,54,55,57,59],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Botswana | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:49.221Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Botswana</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Botswana",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="1" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">1</td><td><em class="text-muted">Other Botswana</em></td><td class="text-right">1</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Brazil | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:43.324Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Brazil</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Brazil",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,6,11,15,25,34,46,59,77,92,111,136,159,201,240,324,359,445,486,564,686,819,950,1057,1124,1223,1328,1532,1736,1924,2141,2354,2462,2587,2741,2906,3331,3704,4057,4286],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,3,5,4,10,9,12,13,18,15,19,25,23,42,39,84,35,86,41,78,122,133,131,107,67,99,105,204,204,188,217,213,108,125,154,165,425,373,353,229],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="4286" data-yesterday="229" data-week="1699" data-month="4085"><td class="sort-order">1</td><td><em class="text-muted">Other Brazil</em></td><td class="text-right">4,286</td><td class="text-right sorted">229</td><td class="text-right">1,699</td><td class="text-right">4,085</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[1328,1532,1736,1924,2141,2354,2462,2587,2741,2906,3331,3704,4057,4286],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Brunei | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:49.280Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Brunei</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Brunei",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="1" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">1</td><td><em class="text-muted">Other Brunei</em></td><td class="text-right">1</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Bulgaria | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:47.366Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Bulgaria</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Bulgaria",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,2,2,2,2,2,3,3,3,3,3,3,3,3,3,7,8,8,8,10,10,14,17,20,22,23,24,24,25,28,29,32,35,36,38,41,41,42,43,45,49,52,54,55,56],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,4,1,0,0,2,0,4,3,3,2,1,1,0,1,3,1,3,3,1,2,3,0,1,1,2,4,3,2,1,1],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="56" data-yesterday="1" data-week="13" data-month="48"><td class="sort-order">1</td><td><em class="text-muted">Other Bulgaria</em></td><td class="text-right">56</td><td class="text-right sorted">1</td><td class="text-right">13</td><td class="text-right">48</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[32,35,36,38,41,41,42,43,45,49,52,54,55,56],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Burkina Faso | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:47.430Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Burkina Faso</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Burkina Faso",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,2,4,4,4,4,7,9,11,12,12,14,16,16,16,16,17,18,19,23,24,24,27,27,27,30,32,32,35,36,36,38,38,39,41,41,41,42],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,2,0,0,0,3,2,2,1,0,2,2,0,0,0,1,1,1,4,1,0,3,0,0,3,2,0,3,1,0,2,0,1,2,0,0,1],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="42" data-yesterday="1" data-week="4" data-month="28"><td class="sort-order">1</td><td><em class="text-muted">Other Burkina Faso</em></td><td class="text-right">42</td><td class="text-right sorted">1</td><td class="text-right">4</td><td class="text-right">28</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[27,30,32,32,35,36,36,38,38,39,41,41,41,42],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Burma | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:49.340Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Burma</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Burma",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,3,3,3,3,4,4,4,4,4,4,5,5,5,5,5,5,5,5,5],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,2,0,0,0,1,0,0,0,0,0,1,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="5" data-yesterday="0" data-week="0" data-month="4"><td class="sort-order">1</td><td><em class="text-muted">Other Burma</em></td><td class="text-right">5</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">4</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[4,4,4,4,4,5,5,5,5,5,5,5,5,5],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Burundi | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:49.402Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Burundi</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Burundi",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="1" data-yesterday="0" data-week="0" data-month="1"><td class="sort-order">1</td><td><em class="text-muted">Other Burundi</em></td><td class="text-right">1</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">1</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Cabo Verde | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:49.465Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Cabo Verde</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Cabo Verde",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="1" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">1</td><td><em class="text-muted">Other Cabo Verde</em></td><td class="text-right">1</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Cambodia | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:49.527Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Cambodia</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Cambodia",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">1</td><td><em class="text-muted">Other Cambodia</em></td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Cameroon | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:46.230Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Cameroon</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Cameroon",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,6,6,6,6,7,8,9,9,9,9,10,10,12,12,12,12,14,17,22,22,22,42,42,43,43,43,43,53,56],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,4,0,0,0,1,1,1,0,0,0,1,0,2,0,0,0,2,3,5,0,0,20,0,1,0,0,0,10,3],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="56" data-yesterday="3" data-week="14" data-month="50"><td class="sort-order">1</td><td><em class="text-muted">Other Cameroon</em></td><td class="text-right">56</td><td class="text-right sorted">3</td><td class="text-right">14</td><td class="text-right">50</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[12,14,17,22,22,22,42,42,43,43,43,43,53,56],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,266 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Canada | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:43.497Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Canada</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Canada",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,4,5,8,9,12,19,21,25,26,30,38,54,61,64,80,101,109,139,179,218,259,339,375,407,503,557,654,714,779,899,1006,1257,1354,1399,1563,1725,1908,2075,2240,2384,2547,2661],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,3,1,3,1,3,7,2,4,1,4,8,16,7,3,16,21,8,30,40,39,41,80,36,32,96,54,97,60,65,120,107,251,97,45,164,162,183,167,165,144,163,114],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="1516" data-yesterday="70" data-week="577" data-month="1485"><td class="sort-order">1</td><td>Quebec</td><td class="text-right">1,516</td><td class="text-right sorted">70</td><td class="text-right">577</td><td class="text-right">1,485</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[360,435,487,630,688,688,820,939,1044,1134,1243,1340,1446,1516],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="960" data-yesterday="44" data-week="336" data-month="927"><td class="sort-order">2</td><td>Ontario</td><td class="text-right">960</td><td class="text-right sorted">44</td><td class="text-right">336</td><td class="text-right">927</td><td><canvas class="mx-auto" id="sparkline-1" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-1",
|
||||
[291,334,385,490,524,564,591,624,694,762,806,862,916,960],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">3</td><td>Yukon</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-2" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-2",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="4" data-yesterday="0" data-week="0" data-month="2"><td class="sort-order">4</td><td>Saskatchewan</td><td class="text-right">4</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">2</td><td><canvas class="mx-auto" id="sparkline-3" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-3",
|
||||
[4,4,4,4,4,4,4,4,4,4,4,4,4,4],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">5</td><td>Recovered</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-4" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-4",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">6</td><td>Prince Edward Island</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-5" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-5",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="-1" data-yesterday="0" data-week="-10" data-month="-1"><td class="sort-order">7</td><td>Nova Scotia</td><td class="text-right">-1</td><td class="text-right sorted">0</td><td class="text-right">-10</td><td class="text-right">-1</td><td><canvas class="mx-auto" id="sparkline-6" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-6",
|
||||
[3,3,3,3,4,7,9,9,10,12,16,-1,-1,-1],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">8</td><td>Northwest Territories</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-7" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-7",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="3" data-yesterday="0" data-week="0" data-month="2"><td class="sort-order">9</td><td>Newfoundland and Labrador</td><td class="text-right">3</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">2</td><td><canvas class="mx-auto" id="sparkline-8" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-8",
|
||||
[3,3,3,3,3,3,3,3,3,3,3,3,3,3],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">10</td><td>New Brunswick</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-9" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-9",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="6" data-yesterday="0" data-week="0" data-month="5"><td class="sort-order">11</td><td>Manitoba</td><td class="text-right">6</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">5</td><td><canvas class="mx-auto" id="sparkline-10" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-10",
|
||||
[4,4,5,5,5,5,5,6,6,6,6,6,6,6],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="-1" data-yesterday="0" data-week="-1" data-month="-1"><td class="sort-order">12</td><td>Grand Princess</td><td class="text-right">-1</td><td class="text-right sorted">0</td><td class="text-right">-1</td><td class="text-right">-1</td><td><canvas class="mx-auto" id="sparkline-11" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-11",
|
||||
[0,0,0,0,0,0,0,0,0,-1,-1,-1,-1,-1],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="1" data-yesterday="0" data-week="2" data-month="0"><td class="sort-order">13</td><td>Diamond Princess</td><td class="text-right">1</td><td class="text-right sorted">0</td><td class="text-right">2</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-12" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-12",
|
||||
[-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,1],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="100" data-yesterday="0" data-week="18" data-month="76"><td class="sort-order">14</td><td>British Columbia</td><td class="text-right">100</td><td class="text-right sorted">0</td><td class="text-right">18</td><td class="text-right">76</td><td><canvas class="mx-auto" id="sparkline-13" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-13",
|
||||
[69,69,72,75,77,78,81,82,87,90,94,98,100,100],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="73" data-yesterday="0" data-week="14" data-month="65"><td class="sort-order">15</td><td>Alberta</td><td class="text-right">73</td><td class="text-right sorted">0</td><td class="text-right">14</td><td class="text-right">65</td><td><canvas class="mx-auto" id="sparkline-14" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-14",
|
||||
[46,48,48,48,50,51,51,59,61,66,68,72,73,73],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Central African Republic | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:49.589Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Central African Republic</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Central African Republic",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">1</td><td><em class="text-muted">Other Central African Republic</em></td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Chad | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:49.650Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Chad</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Chad",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">1</td><td><em class="text-muted">Other Chad</em></td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Chile | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:44.937Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Chile</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Chile",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2,3,4,5,6,7,8,12,16,18,22,27,34,37,43,48,57,65,73,80,82,92,94,105,116,126,133,139,147,160,168,174,181,189],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,1,1,1,1,1,4,4,2,4,5,7,3,6,5,9,8,8,7,2,10,2,11,11,10,7,6,8,13,8,6,7,8],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="189" data-yesterday="8" data-week="50" data-month="177"><td class="sort-order">1</td><td><em class="text-muted">Other Chile</em></td><td class="text-right">189</td><td class="text-right sorted">8</td><td class="text-right">50</td><td class="text-right">177</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[82,92,94,105,116,126,133,139,147,160,168,174,181,189],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,320 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>China | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:47.493Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>China</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"China",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[17,18,26,42,56,82,131,133,171,213,259,361,425,491,563,633,718,805,905,1012,1112,1117,1369,1521,1663,1766,1864,2003,2116,2238,2238,2443,2445,2595,2665,2717,2746,2790,2837,2872,2914,2947,2983,3015,3044,3072,3100,3123,3139,3161,3172,3180,3193,3203,3217,3230,3241,3249,3253,3259,3274,3274,3281,3285,3291,3296,3299,3304,3308,3309,3316,3322,3326,3330,3333,3335,3335,3337,3339,3340,3343,3343,3345,3345,3346,3346,4636,4636,4636,4636,4636,4636,4636,4636,4636,4637],
|
||||
[0,1,8,16,14,26,49,2,38,42,46,102,64,66,72,70,85,87,100,107,100,5,252,152,142,103,98,139,113,122,0,205,2,150,70,52,29,44,47,35,42,33,36,32,29,28,28,23,16,22,11,8,13,10,14,13,11,8,4,6,15,0,7,4,6,5,3,5,4,1,7,6,4,4,3,2,0,2,2,1,3,0,2,0,1,0,1290,0,0,0,0,0,0,0,0,1],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="9" data-yesterday="1" data-week="1" data-month="1"><td class="sort-order">1</td><td>Beijing</td><td class="text-right">9</td><td class="text-right sorted">1</td><td class="text-right">1</td><td class="text-right">1</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[8,8,8,8,8,8,8,8,8,8,8,8,8,9],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="1" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">2</td><td>Zhejiang</td><td class="text-right">1</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-1" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-1",
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="2" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">3</td><td>Yunnan</td><td class="text-right">2</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-2" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-2",
|
||||
[2,2,2,2,2,2,2,2,2,2,2,2,2,2],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="3" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">4</td><td>Xinjiang</td><td class="text-right">3</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-3" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-3",
|
||||
[3,3,3,3,3,3,3,3,3,3,3,3,3,3],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">5</td><td>Tibet</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-4" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-4",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="3" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">6</td><td>Tianjin</td><td class="text-right">3</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-5" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-5",
|
||||
[3,3,3,3,3,3,3,3,3,3,3,3,3,3],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="3" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">7</td><td>Sichuan</td><td class="text-right">3</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-6" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-6",
|
||||
[3,3,3,3,3,3,3,3,3,3,3,3,3,3],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">8</td><td>Shanxi</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-7" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-7",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="7" data-yesterday="0" data-week="0" data-month="2"><td class="sort-order">9</td><td>Shanghai</td><td class="text-right">7</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">2</td><td><canvas class="mx-auto" id="sparkline-8" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-8",
|
||||
[7,7,7,7,7,7,7,7,7,7,7,7,7,7],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="7" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">10</td><td>Shandong</td><td class="text-right">7</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-9" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-9",
|
||||
[7,7,7,7,7,7,7,7,7,7,7,7,7,7],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="3" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">11</td><td>Shaanxi</td><td class="text-right">3</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-10" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-10",
|
||||
[3,3,3,3,3,3,3,3,3,3,3,3,3,3],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">12</td><td>Qinghai</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-11" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-11",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">13</td><td>Ningxia</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-12" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-12",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">14</td><td>Macau</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-13" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-13",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="2" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">15</td><td>Liaoning</td><td class="text-right">2</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-14" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-14",
|
||||
[2,2,2,2,2,2,2,2,2,2,2,2,2,2],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="1" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">16</td><td>Jilin</td><td class="text-right">1</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-15" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-15",
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="1" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">17</td><td>Jiangxi</td><td class="text-right">1</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-16" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-16",
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">18</td><td>Jiangsu</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-17" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-17",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="1" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">19</td><td>Inner Mongolia</td><td class="text-right">1</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-18" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-18",
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="4" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">20</td><td>Hunan</td><td class="text-right">4</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-19" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-19",
|
||||
[4,4,4,4,4,4,4,4,4,4,4,4,4,4],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="4512" data-yesterday="0" data-week="0" data-month="1325"><td class="sort-order">21</td><td>Hubei</td><td class="text-right">4,512</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">1,325</td><td><canvas class="mx-auto" id="sparkline-20" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-20",
|
||||
[3221,3221,3222,3222,4512,4512,4512,4512,4512,4512,4512,4512,4512,4512],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="4" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">22</td><td>Hong Kong</td><td class="text-right">4</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-21" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-21",
|
||||
[4,4,4,4,4,4,4,4,4,4,4,4,4,4],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="22" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">23</td><td>Henan</td><td class="text-right">22</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-22" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-22",
|
||||
[22,22,22,22,22,22,22,22,22,22,22,22,22,22],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="13" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">24</td><td>Heilongjiang</td><td class="text-right">13</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-23" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-23",
|
||||
[13,13,13,13,13,13,13,13,13,13,13,13,13,13],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="6" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">25</td><td>Hebei</td><td class="text-right">6</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-24" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-24",
|
||||
[6,6,6,6,6,6,6,6,6,6,6,6,6,6],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="6" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">26</td><td>Hainan</td><td class="text-right">6</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-25" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-25",
|
||||
[6,6,6,6,6,6,6,6,6,6,6,6,6,6],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="2" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">27</td><td>Guizhou</td><td class="text-right">2</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-26" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-26",
|
||||
[2,2,2,2,2,2,2,2,2,2,2,2,2,2],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="2" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">28</td><td>Guangxi</td><td class="text-right">2</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-27" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-27",
|
||||
[2,2,2,2,2,2,2,2,2,2,2,2,2,2],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="8" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">29</td><td>Guangdong</td><td class="text-right">8</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-28" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-28",
|
||||
[8,8,8,8,8,8,8,8,8,8,8,8,8,8],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="2" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">30</td><td>Gansu</td><td class="text-right">2</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-29" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-29",
|
||||
[2,2,2,2,2,2,2,2,2,2,2,2,2,2],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="1" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">31</td><td>Fujian</td><td class="text-right">1</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-30" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-30",
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="6" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">32</td><td>Chongqing</td><td class="text-right">6</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-31" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-31",
|
||||
[6,6,6,6,6,6,6,6,6,6,6,6,6,6],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="6" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">33</td><td>Anhui</td><td class="text-right">6</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-32" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-32",
|
||||
[6,6,6,6,6,6,6,6,6,6,6,6,6,6],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Colombia | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:44.594Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Colombia</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Colombia",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,3,3,4,6,6,6,10,12,16,17,19,25,32,35,46,50,54,69,80,100,109,112,127,131,144,153,153,179,189,196,206,215,225,233,244],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,1,0,1,2,0,0,4,2,4,1,2,6,7,3,11,4,4,15,11,20,9,3,15,4,13,9,0,26,10,7,10,9,10,8,11],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="244" data-yesterday="11" data-week="55" data-month="228"><td class="sort-order">1</td><td><em class="text-muted">Other Colombia</em></td><td class="text-right">244</td><td class="text-right sorted">11</td><td class="text-right">55</td><td class="text-right">228</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[112,127,131,144,153,153,179,189,196,206,215,225,233,244],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Congo (Brazzaville) | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:49.714Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Congo (Brazzaville)</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Congo (Brazzaville)",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,2,5,5,5,5,5,5,5,5,5,5,5,5,6,6,6,6,6,6,6,6,6,6],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,3,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="6" data-yesterday="0" data-week="0" data-month="6"><td class="sort-order">1</td><td><em class="text-muted">Other Congo (Brazzaville)</em></td><td class="text-right">6</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">6</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[5,5,5,5,6,6,6,6,6,6,6,6,6,6],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Congo (Kinshasa) | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:49.775Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Congo (Kinshasa)</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Congo (Kinshasa)",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,2,2,3,3,6,6,8,8,9,13,13,18,18,18,18,18,18,20,20,20,20,20,21,22,23,25,25,25,25,25,25,25,28,28],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,1,0,3,0,2,0,1,4,0,5,0,0,0,0,0,2,0,0,0,0,1,1,1,2,0,0,0,0,0,0,3,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="28" data-yesterday="0" data-week="3" data-month="20"><td class="sort-order">1</td><td><em class="text-muted">Other Congo (Kinshasa)</em></td><td class="text-right">28</td><td class="text-right sorted">0</td><td class="text-right">3</td><td class="text-right">20</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[20,20,21,22,23,25,25,25,25,25,25,25,28,28],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Costa Rica | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:49.837Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Costa Rica</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Costa Rica",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,3,3,3,3,3,3,3,4,4,4,4,5,6,6,6,6,6,6,6],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,1,1,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="6" data-yesterday="0" data-week="0" data-month="4"><td class="sort-order">1</td><td><em class="text-muted">Other Costa Rica</em></td><td class="text-right">6</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">4</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[3,3,4,4,4,4,5,6,6,6,6,6,6,6],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Cote d'Ivoire | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:49.897Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Cote d'Ivoire</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Cote d'Ivoire",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,3,3,3,3,3,3,4,5,6,6,6,6,6,8,9,9,13,14,14,14,14,14],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,2,0,0,0,0,0,1,1,1,0,0,0,0,2,1,0,4,1,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="14" data-yesterday="0" data-week="5" data-month="13"><td class="sort-order">1</td><td><em class="text-muted">Other Cote d'Ivoire</em></td><td class="text-right">14</td><td class="text-right sorted">0</td><td class="text-right">5</td><td class="text-right">13</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[6,6,6,6,6,8,9,9,13,14,14,14,14,14],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Croatia | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:47.553Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Croatia</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Croatia",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,3,3,5,6,6,6,6,7,8,12,15,16,18,19,20,21,21,23,25,31,33,35,36,39,47,47,48,48,50,51,54,55],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,2,0,2,1,0,0,0,1,1,4,3,1,2,1,1,1,0,2,2,6,2,2,1,3,8,0,1,0,2,1,3,1],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="55" data-yesterday="1" data-week="8" data-month="49"><td class="sort-order">1</td><td><em class="text-muted">Other Croatia</em></td><td class="text-right">55</td><td class="text-right sorted">1</td><td class="text-right">8</td><td class="text-right">49</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[25,31,33,35,36,39,47,47,48,48,50,51,54,55],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Cuba | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:46.294Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Cuba</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Cuba",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,2,2,3,3,4,6,6,6,6,6,8,9,11,12,15,15,16,18,21,21,24,27,31,32,34,36,38,40,43,49,51,54],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,1,0,1,0,1,2,0,0,0,0,2,1,2,1,3,0,1,2,3,0,3,3,4,1,2,2,2,2,3,6,2,3],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="54" data-yesterday="3" data-week="18" data-month="48"><td class="sort-order">1</td><td><em class="text-muted">Other Cuba</em></td><td class="text-right">54</td><td class="text-right sorted">3</td><td class="text-right">18</td><td class="text-right">48</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[21,21,24,27,31,32,34,36,38,40,43,49,51,54],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Cyprus | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:49.957Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Cyprus</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Cyprus",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,3,3,3,5,5,5,7,8,9,10,11,11,9,9,9,9,10,10,10,11,12,12,12,12,12,12,12,12,12,13,13,14,14,14],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,2,0,0,2,0,0,2,1,1,1,1,0,-2,0,0,0,1,0,0,1,1,0,0,0,0,0,0,0,0,1,0,1,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="14" data-yesterday="0" data-week="2" data-month="6"><td class="sort-order">1</td><td><em class="text-muted">Other Cyprus</em></td><td class="text-right">14</td><td class="text-right sorted">0</td><td class="text-right">2</td><td class="text-right">6</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[12,12,12,12,12,12,12,12,12,13,13,14,14,14],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Czechia | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:46.616Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Czechia</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Czechia",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,3,6,9,9,11,16,23,31,39,44,53,59,67,78,88,99,112,119,129,138,143,161,166,169,173,181,186,194,201,208,210,214,218,220],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,2,3,3,0,2,5,7,8,8,5,9,6,8,11,10,11,13,7,10,9,5,18,5,3,4,8,5,8,7,7,2,4,4,2],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="220" data-yesterday="2" data-week="26" data-month="189"><td class="sort-order">1</td><td><em class="text-muted">Other Czechia</em></td><td class="text-right">220</td><td class="text-right sorted">2</td><td class="text-right">26</td><td class="text-right">189</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[143,161,166,169,173,181,186,194,201,208,210,214,218,220],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,230 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Denmark | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:45.850Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Denmark</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Denmark",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,3,4,4,6,9,13,13,24,32,34,41,52,65,72,77,90,104,123,139,161,179,187,203,218,237,247,260,273,285,299,309,321,336,346,355,364,370,384,394,403,418,422],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,0,2,3,4,0,11,8,2,7,11,13,7,5,13,14,19,16,22,18,8,16,15,19,10,13,13,12,14,10,12,15,10,9,9,6,14,10,9,15,4],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="422" data-yesterday="4" data-week="58" data-month="332"><td class="sort-order">1</td><td><em class="text-muted">Other Denmark</em></td><td class="text-right">422</td><td class="text-right sorted">4</td><td class="text-right">58</td><td class="text-right">332</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[285,299,309,321,336,346,355,364,370,384,394,403,418,422],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">2</td><td>Greenland</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-1" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-1",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">3</td><td>Faroe Islands</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-2" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-2",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Diamond Princess | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.018Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Diamond Princess</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Diamond Princess",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,2,3,3,3,4,4,6,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,7,7,7,8,8,8,10,10,10,10,10,10,10,10,11,11,11,11,11,11,11,11,11,11,11,11,11,12,12,12,13,13,13,13,13,13,13,13,13,13],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,1,0,0,1,0,2,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,1,0,0,2,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="13" data-yesterday="0" data-week="0" data-month="3"><td class="sort-order">1</td><td><em class="text-muted">Other Diamond Princess</em></td><td class="text-right">13</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">3</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[11,12,12,12,13,13,13,13,13,13,13,13,13,13],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Djibouti | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.078Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Djibouti</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Djibouti",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="2" data-yesterday="0" data-week="0" data-month="2"><td class="sort-order">1</td><td><em class="text-muted">Other Djibouti</em></td><td class="text-right">2</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">2</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[2,2,2,2,2,2,2,2,2,2,2,2,2,2],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Dominica | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.138Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Dominica</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Dominica",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">1</td><td><em class="text-muted">Other Dominica</em></td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Dominican Republic | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:45.526Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Dominican Republic</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Dominican Republic",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,2,3,3,6,10,10,20,28,39,42,51,57,60,68,68,82,86,98,108,118,126,135,173,177,183,189,196,200,217,226,235,245,260,265,267,273,278],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,0,1,0,3,4,0,10,8,11,3,9,6,3,8,0,14,4,12,10,10,8,9,38,4,6,6,7,4,17,9,9,10,15,5,2,6,5],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="278" data-yesterday="5" data-week="43" data-month="227"><td class="sort-order">1</td><td><em class="text-muted">Other Dominican Republic</em></td><td class="text-right">278</td><td class="text-right sorted">5</td><td class="text-right">43</td><td class="text-right">227</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[177,183,189,196,200,217,226,235,245,260,265,267,273,278],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Ecuador | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.199Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Ecuador</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Ecuador",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,2,2,2,3,5,7,14,18,27,28,34,36,48,58,60,75,93,120,145,172,180,191,191,242,272,297,315,333,355,369,388,403,421,456,474,507,520,537,560,576,576,576],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,1,2,2,7,4,9,1,6,2,12,10,2,15,18,27,25,27,8,11,0,51,30,25,18,18,22,14,19,15,18,35,18,33,13,17,23,16,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="576" data-yesterday="0" data-week="69" data-month="501"><td class="sort-order">1</td><td><em class="text-muted">Other Ecuador</em></td><td class="text-right">576</td><td class="text-right sorted">0</td><td class="text-right">69</td><td class="text-right">501</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[355,369,388,403,421,456,474,507,520,537,560,576,576,576],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Egypt | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:44.797Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Egypt</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Egypt",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,2,2,2,2,4,6,6,8,10,14,19,20,21,24,30,36,40,41,46,52,58,66,71,78,85,94,103,118,135,146,159,164,178,183,196,205,224,239,250,264,276,287,294,307,317],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,2,2,0,2,2,4,5,1,1,3,6,6,4,1,5,6,6,8,5,7,7,9,9,15,17,11,13,5,14,5,13,9,19,15,11,14,12,11,7,13,10],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="317" data-yesterday="10" data-week="67" data-month="271"><td class="sort-order">1</td><td><em class="text-muted">Other Egypt</em></td><td class="text-right">317</td><td class="text-right sorted">10</td><td class="text-right">67</td><td class="text-right">271</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[164,178,183,196,205,224,239,250,264,276,287,294,307,317],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>El Salvador | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.260Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>El Salvador</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"El Salvador",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,3,3,4,4,5,6,6,6,6,6,6,6,6,7,7,7,7,7,7,8,8,8,8],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,1,0,1,0,1,1,0,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="8" data-yesterday="0" data-week="1" data-month="7"><td class="sort-order">1</td><td><em class="text-muted">Other El Salvador</em></td><td class="text-right">8</td><td class="text-right sorted">0</td><td class="text-right">1</td><td class="text-right">7</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[6,6,6,6,7,7,7,7,7,7,8,8,8,8],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Equatorial Guinea | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.320Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Equatorial Guinea</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Equatorial Guinea",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="1" data-yesterday="0" data-week="1" data-month="1"><td class="sort-order">1</td><td><em class="text-muted">Other Equatorial Guinea</em></td><td class="text-right">1</td><td class="text-right sorted">0</td><td class="text-right">1</td><td class="text-right">1</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[0,0,0,0,0,0,0,0,0,1,1,1,1,1],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Eritrea | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.379Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Eritrea</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Eritrea",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">1</td><td><em class="text-muted">Other Eritrea</em></td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Estonia | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:46.358Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Estonia</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Estonia",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,3,3,4,5,11,12,13,15,19,21,24,24,24,24,25,28,31,35,36,38,38,40,40,43,44,45,46,46,49],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,2,0,1,1,6,1,1,2,4,2,3,0,0,0,1,3,3,4,1,2,0,2,0,3,1,1,1,0,3],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="49" data-yesterday="3" data-week="9" data-month="45"><td class="sort-order">1</td><td><em class="text-muted">Other Estonia</em></td><td class="text-right">49</td><td class="text-right sorted">3</td><td class="text-right">9</td><td class="text-right">45</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[28,31,35,36,38,38,40,40,43,44,45,46,46,49],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Eswatini | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.442Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Eswatini</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Eswatini",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="1" data-yesterday="0" data-week="0" data-month="1"><td class="sort-order">1</td><td><em class="text-muted">Other Eswatini</em></td><td class="text-right">1</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">1</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[0,0,0,1,1,1,1,1,1,1,1,1,1,1],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Ethiopia | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.502Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Ethiopia</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Ethiopia",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,2,2,2,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3,3],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="3" data-yesterday="0" data-week="0" data-month="3"><td class="sort-order">1</td><td><em class="text-muted">Other Ethiopia</em></td><td class="text-right">3</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">3</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[3,3,3,3,3,3,3,3,3,3,3,3,3,3],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Fiji | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.560Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Fiji</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Fiji",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">1</td><td><em class="text-muted">Other Fiji</em></td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Finland | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:45.914Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Finland</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Finland",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,3,5,7,9,11,13,17,17,19,20,25,28,27,34,40,42,48,49,56,59,64,72,75,82,90,94,98,141,149,172,177,186,190],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,2,2,2,2,2,2,4,0,2,1,5,3,-1,7,6,2,6,1,7,3,5,8,3,7,8,4,4,43,8,23,5,9,4],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="190" data-yesterday="4" data-week="92" data-month="173"><td class="sort-order">1</td><td><em class="text-muted">Other Finland</em></td><td class="text-right">190</td><td class="text-right sorted">4</td><td class="text-right">92</td><td class="text-right">173</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[59,64,72,75,82,90,94,98,141,149,172,177,186,190],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,254 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>France | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:43.224Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>France</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"France",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,2,2,2,2,2,3,4,4,6,9,11,19,19,33,48,48,79,91,91,149,149,149,244,451,563,676,862,1102,1333,1698,1997,2317,2611,3030,3532,4414,5398,6520,7574,8093,8926,10343,10887,12228,13215,13851,14412,14986,15748,17188,17941,18703,19345,19744,20292,20829,21373,21889,22279,22648,22890],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,1,0,2,3,2,8,0,14,15,0,31,12,0,58,0,0,95,207,112,113,186,240,231,365,299,320,294,419,502,882,984,1122,1054,519,833,1417,544,1341,987,636,561,574,762,1440,753,762,642,399,548,537,544,516,390,369,242],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="22856" data-yesterday="242" data-week="2591" data-month="19333"><td class="sort-order">1</td><td><em class="text-muted">Other France</em></td><td class="text-right">22,856</td><td class="text-right sorted">242</td><td class="text-right">2,591</td><td class="text-right">19,333</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[14967,15729,17167,17920,18681,19323,19718,20265,20796,21340,21856,22245,22614,22856],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="3" data-yesterday="0" data-week="1" data-month="2"><td class="sort-order">2</td><td>St Martin</td><td class="text-right">3</td><td class="text-right sorted">0</td><td class="text-right">1</td><td class="text-right">2</td><td><canvas class="mx-auto" id="sparkline-1" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-1",
|
||||
[2,2,2,2,2,2,2,2,2,2,2,3,3,3],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">3</td><td>Saint Pierre and Miquelon</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-2" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-2",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">4</td><td>Saint Barthelemy</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-3" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-3",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">5</td><td>Reunion</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-4" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-4",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">6</td><td>New Caledonia</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-5" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-5",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="4" data-yesterday="0" data-week="0" data-month="3"><td class="sort-order">7</td><td>Mayotte</td><td class="text-right">4</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">3</td><td><canvas class="mx-auto" id="sparkline-6" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-6",
|
||||
[3,3,3,3,4,4,4,4,4,4,4,4,4,4],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="14" data-yesterday="0" data-week="2" data-month="11"><td class="sort-order">8</td><td>Martinique</td><td class="text-right">14</td><td class="text-right sorted">0</td><td class="text-right">2</td><td class="text-right">11</td><td><canvas class="mx-auto" id="sparkline-7" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-7",
|
||||
[6,6,8,8,8,8,12,12,14,14,14,14,14,14],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="12" data-yesterday="0" data-week="4" data-month="8"><td class="sort-order">9</td><td>Guadeloupe</td><td class="text-right">12</td><td class="text-right sorted">0</td><td class="text-right">4</td><td class="text-right">8</td><td><canvas class="mx-auto" id="sparkline-8" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-8",
|
||||
[8,8,8,8,8,8,8,8,12,12,12,12,12,12],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">10</td><td>French Polynesia</td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-9" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-9",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr><tr id="row-undefined" data-total="1" data-yesterday="0" data-week="0" data-month="1"><td class="sort-order">11</td><td>French Guiana</td><td class="text-right">1</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">1</td><td><canvas class="mx-auto" id="sparkline-10" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-10",
|
||||
[0,0,0,0,0,0,0,1,1,1,1,1,1,1],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Gabon | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.620Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Gabon</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Gabon",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,3,3,3],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="3" data-yesterday="0" data-week="2" data-month="2"><td class="sort-order">1</td><td><em class="text-muted">Other Gabon</em></td><td class="text-right">3</td><td class="text-right sorted">0</td><td class="text-right">2</td><td class="text-right">2</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[1,1,1,1,1,1,1,1,1,1,2,3,3,3],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Gambia | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.681Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Gambia</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Gambia",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="1" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">1</td><td><em class="text-muted">Other Gambia</em></td><td class="text-right">1</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Georgia | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:47.614Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Georgia</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Georgia",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2,3,3,3,3,3,3,3,3,3,3,3,4,4,4,4,5,5,5,5,6],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,0,1],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="6" data-yesterday="1" data-week="2" data-month="6"><td class="sort-order">1</td><td><em class="text-muted">Other Georgia</em></td><td class="text-right">6</td><td class="text-right sorted">1</td><td class="text-right">2</td><td class="text-right">6</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[3,3,3,3,3,4,4,4,4,5,5,5,5,6],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Germany | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:43.575Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Germany</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Germany",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,3,3,7,9,11,17,24,28,44,67,84,94,123,157,206,267,342,433,533,645,775,920,1107,1275,1444,1584,1810,2016,2349,2607,2767,2736,3022,3194,3294,3804,4052,4352,4459,4586,4862,5033,5279,5575,5760,5877,5976],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,1,0,4,2,2,6,7,4,16,23,17,10,29,34,49,61,75,91,100,112,130,145,187,168,169,140,226,206,333,258,160,-31,286,172,100,510,248,300,107,127,276,171,246,296,185,117,99],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="5976" data-yesterday="99" data-week="1114" data-month="5201"><td class="sort-order">1</td><td><em class="text-muted">Other Germany</em></td><td class="text-right">5,976</td><td class="text-right sorted">99</td><td class="text-right">1,114</td><td class="text-right">5,201</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[3194,3294,3804,4052,4352,4459,4586,4862,5033,5279,5575,5760,5877,5976],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Ghana | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:47.677Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Ghana</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Ghana",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,4,4,4,5,5,5,5,5,5,5,5,5,5,5,6,6,6,8,8,8,8,8,8,8,9,9,9,9,9,9,10,10,11],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,2,0,0,1,0,0,0,0,0,0,0,0,0,0,1,0,0,2,0,0,0,0,0,0,1,0,0,0,0,0,1,0,1],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="11" data-yesterday="1" data-week="2" data-month="6"><td class="sort-order">1</td><td><em class="text-muted">Other Ghana</em></td><td class="text-right">11</td><td class="text-right sorted">1</td><td class="text-right">2</td><td class="text-right">6</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[8,8,8,8,8,9,9,9,9,9,9,10,10,11],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Greece | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:45.979Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Greece</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Greece",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,3,4,4,5,5,6,6,13,15,17,20,22,26,28,32,38,43,49,50,53,63,68,73,79,81,83,87,92,93,98,99,101,102,105,108,110,113,116,121,121,125,130,130,134],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,2,1,0,1,0,1,0,7,2,2,3,2,4,2,4,6,5,6,1,3,10,5,5,6,2,2,4,5,1,5,1,2,1,3,3,2,3,3,5,0,4,5,0,4],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="134" data-yesterday="4" data-week="18" data-month="85"><td class="sort-order">1</td><td><em class="text-muted">Other Greece</em></td><td class="text-right">134</td><td class="text-right sorted">4</td><td class="text-right">18</td><td class="text-right">85</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[99,101,102,105,108,110,113,116,121,121,125,130,130,134],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Grenada | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.741Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Grenada</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Grenada",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">1</td><td><em class="text-muted">Other Grenada</em></td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Guatemala | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:46.676Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Guatemala</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Guatemala",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,3,3,3,3,3,3,5,5,5,5,5,7,7,7,7,7,8,11,11,13,15],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,0,0,2,0,0,0,0,2,0,0,0,0,1,3,0,2,2],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="15" data-yesterday="2" data-week="8" data-month="14"><td class="sort-order">1</td><td><em class="text-muted">Other Guatemala</em></td><td class="text-right">15</td><td class="text-right sorted">2</td><td class="text-right">8</td><td class="text-right">14</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[5,5,5,5,7,7,7,7,7,8,11,11,13,15],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Guinea-Bissau | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:47.739Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Guinea-Bissau</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Guinea-Bissau",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="1" data-yesterday="1" data-week="1" data-month="1"><td class="sort-order">1</td><td><em class="text-muted">Other Guinea-Bissau</em></td><td class="text-right">1</td><td class="text-right sorted">1</td><td class="text-right">1</td><td class="text-right">1</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,1],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Guinea | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.802Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Guinea</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Guinea",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,3,3,5,5,6,6,6,6,7,7],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,2,0,2,0,1,0,0,0,1,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="7" data-yesterday="0" data-week="2" data-month="7"><td class="sort-order">1</td><td><em class="text-muted">Other Guinea</em></td><td class="text-right">7</td><td class="text-right sorted">0</td><td class="text-right">2</td><td class="text-right">7</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[0,0,1,1,3,3,5,5,6,6,6,6,7,7],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Guyana | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:47.799Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Guyana</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Guyana",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,2,2,4,4,4,4,4,5,6,6,6,6,6,6,6,6,6,6,6,7,7,7,7,7,7,7,8],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,2,0,0,0,0,1,1,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,1],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="8" data-yesterday="1" data-week="1" data-month="6"><td class="sort-order">1</td><td><em class="text-muted">Other Guyana</em></td><td class="text-right">8</td><td class="text-right sorted">1</td><td class="text-right">1</td><td class="text-right">6</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[6,6,6,6,6,6,7,7,7,7,7,7,7,8],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Haiti | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.866Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Haiti</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Haiti",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,2,2,2,3,3,3,3,3,3,3,3,3,3,4,5,5,6,6],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,1,1,0,1,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="6" data-yesterday="0" data-week="3" data-month="6"><td class="sort-order">1</td><td><em class="text-muted">Other Haiti</em></td><td class="text-right">6</td><td class="text-right sorted">0</td><td class="text-right">3</td><td class="text-right">6</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[3,3,3,3,3,3,3,3,3,4,5,5,6,6],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Holy See | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.927Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Holy See</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Holy See",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">1</td><td><em class="text-muted">Other Holy See</em></td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Honduras | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:50.988Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Honduras</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Honduras",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,3,7,7,10,14,15,15,22,22,22,22,23,23,24,25,25,26,31,35,41,46,46,46,46,46,47,55,59,59],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,2,4,0,3,4,1,0,7,0,0,0,1,0,1,1,0,1,5,4,6,5,0,0,0,0,1,8,4,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="59" data-yesterday="0" data-week="13" data-month="52"><td class="sort-order">1</td><td><em class="text-muted">Other Honduras</em></td><td class="text-right">59</td><td class="text-right sorted">0</td><td class="text-right">13</td><td class="text-right">52</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[25,26,31,35,41,46,46,46,46,46,47,55,59,59],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Hungary | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:44.865Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Hungary</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Hungary",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,3,4,6,7,9,10,10,10,11,13,15,16,20,21,26,32,34,38,47,58,66,77,85,99,109,122,134,142,156,172,189,199,213,225,239,262,262,272],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,2,1,2,1,2,1,0,0,1,2,2,1,4,1,5,6,2,4,9,11,8,11,8,14,10,13,12,8,14,16,17,10,14,12,14,23,0,10],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="272" data-yesterday="10" data-week="73" data-month="256"><td class="sort-order">1</td><td><em class="text-muted">Other Hungary</em></td><td class="text-right">272</td><td class="text-right sorted">10</td><td class="text-right">73</td><td class="text-right">256</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[109,122,134,142,156,172,189,199,213,225,239,262,262,272],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Iceland | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:51.049Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Iceland</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Iceland",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,0,1,1,1,0,1,1,1,2,2,2,2,2,2,2,2,2,4,4,4,4,6,6,6,6,7,8,8,8,8,8,8,9,9,9,10,10,10,10,10,10,10],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,5,-5,1,0,0,-1,1,0,0,1,0,0,0,0,0,0,0,0,2,0,0,0,2,0,0,0,1,1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="10" data-yesterday="0" data-week="0" data-month="8"><td class="sort-order">1</td><td><em class="text-muted">Other Iceland</em></td><td class="text-right">10</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">8</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[8,8,8,8,9,9,9,10,10,10,10,10,10,10],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>India | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:43.963Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>India</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"India",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,2,2,2,2,3,3,4,5,4,7,10,10,12,20,20,24,27,32,35,58,72,72,86,99,136,150,178,226,246,288,331,358,393,405,448,486,521,559,592,645,681,721,780,825,881],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,1,0,0,0,1,0,1,1,-1,3,3,0,2,8,0,4,3,5,3,23,14,0,14,13,37,14,28,48,20,42,43,27,35,12,43,38,35,38,33,53,36,40,59,45,56],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="881" data-yesterday="56" data-week="289" data-month="846"><td class="sort-order">1</td><td><em class="text-muted">Other India</em></td><td class="text-right">881</td><td class="text-right sorted">56</td><td class="text-right">289</td><td class="text-right">846</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[358,393,405,448,486,521,559,592,645,681,721,780,825,881],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Indonesia | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:44.247Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Indonesia</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Indonesia",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,4,5,5,5,5,19,25,32,38,48,49,55,58,78,87,102,114,122,136,157,170,181,191,198,209,221,240,280,306,327,373,399,459,469,496,520,535,582,590,616,635,647,689,720,743],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,3,1,0,0,0,14,6,7,6,10,1,6,3,20,9,15,12,8,14,21,13,11,10,7,11,12,19,40,26,21,46,26,60,10,27,24,15,47,8,26,19,12,42,31,23],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="743" data-yesterday="23" data-week="153" data-month="607"><td class="sort-order">1</td><td><em class="text-muted">Other Indonesia</em></td><td class="text-right">743</td><td class="text-right sorted">23</td><td class="text-right">153</td><td class="text-right">607</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[399,459,469,496,520,535,582,590,616,635,647,689,720,743],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Iran | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:43.885Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Iran</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Iran",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,4,5,8,12,16,19,26,34,43,54,66,77,92,107,124,145,194,237,291,354,429,514,611,724,853,988,1135,1284,1433,1556,1685,1812,1934,2077,2234,2378,2517,2640,2757,2898,3036,3160,3294,3452,3603,3739,3872,3993,4110,4232,4357,4474,4585,4683,4777,4869,4958,5031,5118,5209,5297,5391,5481,5574,5650,5710],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,2,1,3,4,4,3,7,8,9,11,12,11,15,15,17,21,49,43,54,63,75,85,97,113,129,135,147,149,149,123,129,127,122,143,157,144,139,123,117,141,138,124,134,158,151,136,133,121,117,122,125,117,111,98,94,92,89,73,87,91,88,94,90,93,76,60],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="5710" data-yesterday="60" data-week="501" data-month="2812"><td class="sort-order">1</td><td><em class="text-muted">Other Iran</em></td><td class="text-right">5,710</td><td class="text-right sorted">60</td><td class="text-right">501</td><td class="text-right">2,812</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[4585,4683,4777,4869,4958,5031,5118,5209,5297,5391,5481,5574,5650,5710],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Iraq | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:47.862Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Iraq</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Iraq",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,2,3,4,6,6,7,7,8,9,10,10,10,11,12,13,17,17,20,23,27,29,36,40,42,42,46,50,52,54,54,56,61,64,65,69,69,70,72,76,78,78,79,80,81,82,82,82,83,83,83,86,86,87],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,2,0,1,1,2,0,1,0,1,1,1,0,0,1,1,1,4,0,3,3,4,2,7,4,2,0,4,4,2,2,0,2,5,3,1,4,0,1,2,4,2,0,1,1,1,1,0,0,1,0,0,3,0,1],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="87" data-yesterday="1" data-week="5" data-month="37"><td class="sort-order">1</td><td><em class="text-muted">Other Iraq</em></td><td class="text-right">87</td><td class="text-right sorted">1</td><td class="text-right">5</td><td class="text-right">37</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[78,78,79,80,81,82,82,82,83,83,83,86,86,87],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Ireland | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:44.177Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Ireland</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Ireland",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,2,2,2,2,2,3,3,3,4,6,7,9,19,22,36,46,54,71,85,98,120,137,158,174,210,235,263,287,320,334,365,406,444,486,530,571,610,687,730,769,794,1014,1063,1087],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,1,0,0,1,2,1,2,10,3,14,10,8,17,14,13,22,17,21,16,36,25,28,24,33,14,31,41,38,42,44,41,39,77,43,39,25,220,49,24],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="1087" data-yesterday="24" data-week="400" data-month="1016"><td class="sort-order">1</td><td><em class="text-muted">Other Ireland</em></td><td class="text-right">1,087</td><td class="text-right sorted">24</td><td class="text-right">400</td><td class="text-right">1,016</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[365,406,444,486,530,571,610,687,730,769,794,1014,1063,1087],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Israel | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:46.740Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Israel</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Israel",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,3,5,8,12,12,15,16,20,26,36,40,44,49,57,65,73,86,95,101,103,116,123,130,142,151,164,172,177,184,189,192,194,199,201],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,2,2,3,4,0,3,1,4,6,10,4,4,5,8,8,8,13,9,6,2,13,7,7,12,9,13,8,5,7,5,3,2,5,2],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="201" data-yesterday="2" data-week="24" data-month="181"><td class="sort-order">1</td><td><em class="text-muted">Other Israel</em></td><td class="text-right">201</td><td class="text-right sorted">2</td><td class="text-right">24</td><td class="text-right">181</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[116,123,130,142,151,164,172,177,184,189,192,194,199,201],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Italy | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:43.125Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Italy</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Italy",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,3,7,10,12,17,21,29,34,52,79,107,148,197,233,366,463,631,827,827,1266,1441,1809,2158,2503,2978,3405,4032,4825,5476,6077,6820,7503,8215,9134,10023,10779,11591,12428,13155,13915,14681,15362,15887,16523,17127,17669,18279,18849,19468,19899,20465,21067,21645,22170,22745,23227,23660,24114,24648,25085,25549,25969,26384,26644],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,4,3,2,5,4,8,5,18,27,28,41,49,36,133,97,168,196,0,439,175,368,349,345,475,427,627,793,651,601,743,683,712,919,889,756,812,837,727,760,766,681,525,636,604,542,610,570,619,431,566,602,578,525,575,482,433,454,534,437,464,420,415,260],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="26644" data-yesterday="260" data-week="2530" data-month="14216"><td class="sort-order">1</td><td><em class="text-muted">Other Italy</em></td><td class="text-right">26,644</td><td class="text-right sorted">260</td><td class="text-right">2,530</td><td class="text-right">14,216</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[20465,21067,21645,22170,22745,23227,23660,24114,24648,25085,25549,25969,26384,26644],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Jamaica | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:51.110Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Jamaica</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Jamaica",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,3,3,3,3,3,3,3,4,4,4,4,4,4,4,5,5,5,5,5,5,6,6,6,7,7,7],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,2,0,0,0,0,0,0,1,0,0,0,0,0,0,1,0,0,0,0,0,1,0,0,1,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="7" data-yesterday="0" data-week="2" data-month="6"><td class="sort-order">1</td><td><em class="text-muted">Other Jamaica</em></td><td class="text-right">7</td><td class="text-right sorted">0</td><td class="text-right">2</td><td class="text-right">6</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[4,4,5,5,5,5,5,5,6,6,6,7,7,7],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Japan | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:44.452Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Japan</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Japan",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,1,2,4,4,5,6,6,6,6,6,6,6,6,10,10,15,16,19,22,22,27,29,29,29,33,35,41,42,43,45,47,49,52,54,54,56,57,62,63,77,77,85,92,93,94,99,99,108,123,143,146,178,190,222,236,236,263,281,328,345,360,372],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,1,2,0,1,1,0,0,0,0,0,0,0,4,0,5,1,3,3,0,5,2,0,0,4,2,6,1,1,2,2,2,3,2,0,2,1,5,1,14,0,8,7,1,1,5,0,9,15,20,3,32,12,32,14,0,27,18,47,17,15,12],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="372" data-yesterday="12" data-week="136" data-month="316"><td class="sort-order">1</td><td><em class="text-muted">Other Japan</em></td><td class="text-right">372</td><td class="text-right sorted">12</td><td class="text-right">136</td><td class="text-right">316</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[123,143,146,178,190,222,236,236,263,281,328,345,360,372],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Jordan | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:51.169Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Jordan</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Jordan",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,3,5,5,5,5,5,5,5,6,6,6,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7,7],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,2,2,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="7" data-yesterday="0" data-week="0" data-month="2"><td class="sort-order">1</td><td><em class="text-muted">Other Jordan</em></td><td class="text-right">7</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">2</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[7,7,7,7,7,7,7,7,7,7,7,7,7,7],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Kazakhstan | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:51.229Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Kazakhstan</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Kazakhstan",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,0,0,0,0,0,1,1,1,1,1,2,3,3,6,5,6,6,6,7,8,10,10,10,12,14,16,17,17,17,17,19,19,19,20,25,25,25],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,3,-3,0,0,0,0,1,0,0,0,0,1,1,0,3,-1,1,0,0,1,1,2,0,0,2,2,2,1,0,0,0,2,0,0,1,5,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="25" data-yesterday="0" data-week="6" data-month="23"><td class="sort-order">1</td><td><em class="text-muted">Other Kazakhstan</em></td><td class="text-right">25</td><td class="text-right sorted">0</td><td class="text-right">6</td><td class="text-right">23</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[12,14,16,17,17,17,17,19,19,19,20,25,25,25],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Kenya | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:51.290Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Kenya</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Kenya",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,3,4,4,4,6,6,6,7,7,7,8,9,9,10,11,11,12,14,14,14,14,14,14,14,14],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,2,1,0,0,2,0,0,1,0,0,1,1,0,1,1,0,1,2,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="14" data-yesterday="0" data-week="0" data-month="13"><td class="sort-order">1</td><td><em class="text-muted">Other Kenya</em></td><td class="text-right">14</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">13</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[9,9,10,11,11,12,14,14,14,14,14,14,14,14],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Korea, South | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:47.923Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Korea, South</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Korea, South",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,2,6,8,10,12,13,13,16,17,28,28,35,35,42,44,50,53,54,60,66,66,72,75,75,81,84,91,94,102,111,111,120,126,131,139,144,152,158,162,165,169,174,177,183,186,192,200,204,208,211,214,217,222,225,229,230,232,234,236,237,238,240,240,242,243],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,0,4,2,2,2,1,0,3,1,11,0,7,0,7,2,6,3,1,6,6,0,6,3,0,6,3,7,3,8,9,0,9,6,5,8,5,8,6,4,3,4,5,3,6,3,6,8,4,4,3,3,3,5,3,4,1,2,2,2,1,1,2,0,2,1],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="243" data-yesterday="1" data-week="7" data-month="81"><td class="sort-order">1</td><td><em class="text-muted">Other Korea, South</em></td><td class="text-right">243</td><td class="text-right sorted">1</td><td class="text-right">7</td><td class="text-right">81</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[217,222,225,229,230,232,234,236,237,238,240,240,242,243],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Kosovo | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:51.351Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Kosovo</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Kosovo",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,1,1,4,5,5,7,7,7,7,8,8,11,12,12,12,12,12,12,12,12,12,12],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,3,1,0,2,0,0,0,1,0,3,1,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="12" data-yesterday="0" data-week="0" data-month="11"><td class="sort-order">1</td><td><em class="text-muted">Other Kosovo</em></td><td class="text-right">12</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">11</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[7,8,8,11,12,12,12,12,12,12,12,12,12,12],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Kuwait | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:47.983Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Kuwait</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Kuwait",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,2,3,3,3,5,6,7,9,11,13,14,15,19,20],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,1,0,0,2,1,1,2,2,2,1,1,4,1],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="20" data-yesterday="1" data-week="11" data-month="20"><td class="sort-order">1</td><td><em class="text-muted">Other Kuwait</em></td><td class="text-right">20</td><td class="text-right sorted">1</td><td class="text-right">11</td><td class="text-right">20</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[2,3,3,3,5,6,7,9,11,13,14,15,19,20],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Kyrgyzstan | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:51.411Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Kyrgyzstan</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Kyrgyzstan",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,4,4,4,4,5,5,5,5,5,5,5,5,5,5,7,7,7,8,8,8,8],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,3,0,0,0,1,0,0,0,0,0,0,0,0,0,2,0,0,1,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="8" data-yesterday="0" data-week="1" data-month="8"><td class="sort-order">1</td><td><em class="text-muted">Other Kyrgyzstan</em></td><td class="text-right">8</td><td class="text-right sorted">0</td><td class="text-right">1</td><td class="text-right">8</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[5,5,5,5,5,5,5,7,7,7,8,8,8,8],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Laos | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:51.471Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Laos</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Laos",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">1</td><td><em class="text-muted">Other Laos</em></td><td class="text-right">0</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Latvia | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:51.531Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Latvia</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Latvia",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,2,2,3,3,3,5,5,5,5,5,5,5,5,5,9,11,11,12,12,12],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,0,0,2,0,0,0,0,0,0,0,0,4,2,0,1,0,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="12" data-yesterday="0" data-week="7" data-month="12"><td class="sort-order">1</td><td><em class="text-muted">Other Latvia</em></td><td class="text-right">12</td><td class="text-right sorted">0</td><td class="text-right">7</td><td class="text-right">12</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[5,5,5,5,5,5,5,5,9,11,11,12,12,12],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Lebanon | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:51.592Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Lebanon</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Lebanon",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,3,3,3,3,3,3,3,4,4,4,4,4,4,6,6,8,8,10,11,12,14,16,17,17,18,19,19,19,19,20,20,20,20,21,21,21,21,21,21,21,21,22,22,22,24,24],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,0,0,0,0,0,0,0,1,0,0,0,0,0,2,0,2,0,2,1,1,2,2,1,0,1,1,0,0,0,1,0,0,0,1,0,0,0,0,0,0,0,1,0,0,2,0],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="24" data-yesterday="0" data-week="3" data-month="12"><td class="sort-order">1</td><td><em class="text-muted">Other Lebanon</em></td><td class="text-right">24</td><td class="text-right sorted">0</td><td class="text-right">3</td><td class="text-right">12</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[20,21,21,21,21,21,21,21,21,22,22,22,24,24],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
@ -1,224 +0,0 @@
|
||||
<!DOCTYPE html><html><head><title>Liberia | Covid-19</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
||||
vertical-align: middle !important;
|
||||
}
|
||||
th.sorted, td.sorted {
|
||||
background-color: #e0eefd;
|
||||
}
|
||||
.table-sm {
|
||||
font-size: 80%;
|
||||
}
|
||||
</style><script>function makeSparkline(id, data) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: [1, 2, 3, 4, 5, 6, 7, 8, 10, 11, 12, 13, 14],
|
||||
datasets: [{ data: data }],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
legend: {
|
||||
display: false,
|
||||
},
|
||||
elements: {
|
||||
line: {
|
||||
borderColor: '#000000',
|
||||
borderWidth: 1,
|
||||
},
|
||||
point: {
|
||||
radius: 0,
|
||||
},
|
||||
},
|
||||
tooltips: {
|
||||
enabled: false,
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: false,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: false,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function makeHeroChart(id, title, labels, totalDeaths, newDeaths) {
|
||||
const canvas = document.getElementById(id);
|
||||
const chart = new Chart(canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: labels,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Total Deaths',
|
||||
data: totalDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(196, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(196, 128, 128, 0.25)',
|
||||
},
|
||||
{
|
||||
label: 'New Deaths',
|
||||
data: newDeaths,
|
||||
fill: true,
|
||||
borderColor: 'rgb(64, 64, 64)',
|
||||
borderWidth: 1,
|
||||
backgroundColor: 'rgba(128, 128, 128, 0.75)',
|
||||
}
|
||||
],
|
||||
},
|
||||
options: {
|
||||
responsive: false,
|
||||
title: {
|
||||
display: true,
|
||||
position: 'top',
|
||||
text: title,
|
||||
},
|
||||
tooltips: {
|
||||
intersect: false,
|
||||
position: 'nearest',
|
||||
axis: 'x',
|
||||
},
|
||||
scales: {
|
||||
yAxes: [
|
||||
{
|
||||
display: true,
|
||||
ticks: {
|
||||
precision: 0,
|
||||
beginAtZero: true,
|
||||
}
|
||||
},
|
||||
],
|
||||
xAxes: [
|
||||
{
|
||||
display: true,
|
||||
},
|
||||
],
|
||||
}
|
||||
}
|
||||
});
|
||||
}</script></head><body><div class="container"><h1>Covid-19 Data</h1><p class="text-muted"><em>Data from <a href="https://github.com/CSSEGISandData/COVID-19">Johns Hopkins CSSE</a>.
|
||||
This page generated from latest data as of 2020-04-27T15:51:48.045Z.
|
||||
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Liberia</h2><div class="card mb-4"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>makeHeroChart(
|
||||
'main-chart',
|
||||
"Liberia",
|
||||
["2020-01-22","2020-01-23","2020-01-24","2020-01-25","2020-01-26","2020-01-27","2020-01-28","2020-01-29","2020-01-30","2020-01-31","2020-02-01","2020-02-02","2020-02-03","2020-02-04","2020-02-05","2020-02-06","2020-02-07","2020-02-08","2020-02-09","2020-02-10","2020-02-11","2020-02-12","2020-02-13","2020-02-14","2020-02-15","2020-02-16","2020-02-17","2020-02-18","2020-02-19","2020-02-20","2020-02-21","2020-02-22","2020-02-23","2020-02-24","2020-02-25","2020-02-26","2020-02-27","2020-02-28","2020-02-29","2020-03-01","2020-03-02","2020-03-03","2020-03-04","2020-03-05","2020-03-06","2020-03-07","2020-03-08","2020-03-09","2020-03-10","2020-03-11","2020-03-12","2020-03-13","2020-03-14","2020-03-15","2020-03-16","2020-03-17","2020-03-18","2020-03-19","2020-03-20","2020-03-21","2020-03-22","2020-03-23","2020-03-24","2020-03-25","2020-03-26","2020-03-27","2020-03-28","2020-03-29","2020-03-30","2020-03-31","2020-04-01","2020-04-02","2020-04-03","2020-04-04","2020-04-05","2020-04-06","2020-04-07","2020-04-08","2020-04-09","2020-04-10","2020-04-11","2020-04-12","2020-04-13","2020-04-14","2020-04-15","2020-04-16","2020-04-17","2020-04-18","2020-04-19","2020-04-20","2020-04-21","2020-04-22","2020-04-23","2020-04-24","2020-04-25","2020-04-26"],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,3,3,3,4,4,5,5,5,6,6,6,6,7,7,8,8,8,8,8,8,11,12],
|
||||
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,2,0,0,1,0,1,0,0,1,0,0,0,1,0,1,0,0,0,0,0,3,1],
|
||||
);
|
||||
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover table-bordered"><thead><tr><th>#</th><th data-col="name"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span><span>State/Province</span></div></th><th class="text-center" data-col="total"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span><span>Deaths</span></div></th><th class="text-center sorted" data-col="yesterday"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span><span>…since yesterday</span></div></th><th class="text-center" data-col="week"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span><span>…since last week</span></div></th><th class="text-center" data-col="month"><div class="d-inline-flex"><span class="sortables mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span><span>…month-to-date</span></div></th><th class="text-center">Last 14 days</th></tr></thead><tbody><tr id="row-undefined" data-total="12" data-yesterday="1" data-week="4" data-month="12"><td class="sort-order">1</td><td><em class="text-muted">Other Liberia</em></td><td class="text-right">12</td><td class="text-right sorted">1</td><td class="text-right">4</td><td class="text-right">12</td><td><canvas class="mx-auto" id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
|
||||
"sparkline-0",
|
||||
[6,6,6,6,7,7,8,8,8,8,8,8,11,12],
|
||||
);</script></td></tr></tbody></table></div></div></div><script>(function() {
|
||||
const table = document.getElementById('table');
|
||||
const headerRow = table.querySelector('thead tr');
|
||||
const headers = [].slice.call(headerRow.querySelectorAll('th'));
|
||||
const tbody = table.querySelector('tbody');
|
||||
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
||||
|
||||
const resortTable = (col) => {
|
||||
let nextChild = null;
|
||||
const highlightedIndex = headers.findIndex(cell => cell.getAttribute('data-col') === col);
|
||||
console.log(col, highlightedIndex);
|
||||
headers.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
|
||||
for (let i = allRows.length - 1; i >= 0; i--) {
|
||||
const row = allRows[i];
|
||||
if (!row) {
|
||||
continue;
|
||||
}
|
||||
const cells = [].slice.call(row.querySelectorAll('td'));
|
||||
cells.forEach((cell, i) => {
|
||||
if (i !== highlightedIndex) {
|
||||
cell.classList.remove('sorted');
|
||||
} else {
|
||||
cell.classList.add('sorted');
|
||||
}
|
||||
});
|
||||
if (row === nextChild) {
|
||||
continue;
|
||||
}
|
||||
|
||||
tbody.insertBefore(row, nextChild);
|
||||
row.querySelector('.sort-order').textContent = (i + 1).toString();
|
||||
nextChild = row;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSort = (value, dir) => {
|
||||
const newSortDir = dir === 'desc' ? 'desc' : 'asc';
|
||||
const sortByNumberThenName = (attr) => {
|
||||
allRows.sort((a, b) => {
|
||||
const aValue = Number(a.getAttribute('data-' + attr));
|
||||
const bValue = Number(b.getAttribute('data-' + attr));
|
||||
if (aValue === bValue) {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
return aName && bName ? aName.localeCompare(bName) : 0;
|
||||
}
|
||||
|
||||
return aValue < bValue ?
|
||||
(newSortDir === 'asc' ? -1 : 1) :
|
||||
(newSortDir === 'asc' ? 1 : -1);
|
||||
});
|
||||
resortTable(value);
|
||||
};
|
||||
|
||||
switch (value) {
|
||||
case 'name':
|
||||
allRows.sort((a, b) => {
|
||||
const aName = a.getAttribute('data-name');
|
||||
const bName = b.getAttribute('data-name');
|
||||
if (!aName || !bName) {
|
||||
return -1;
|
||||
}
|
||||
if (newSortDir === 'asc') {
|
||||
return aName.localeCompare(bName);
|
||||
}
|
||||
|
||||
return bName.localeCompare(aName);
|
||||
});
|
||||
resortTable('name');
|
||||
break;
|
||||
case 'total':
|
||||
sortByNumberThenName('total');
|
||||
break;
|
||||
case 'yesterday':
|
||||
sortByNumberThenName('yesterday');
|
||||
break;
|
||||
case 'week':
|
||||
sortByNumberThenName('week');
|
||||
break;
|
||||
case 'month':
|
||||
sortByNumberThenName('month');
|
||||
break;
|
||||
}
|
||||
};
|
||||
|
||||
const handleHash = (hash) => {
|
||||
const sortValue = hash.replace(/^#sort:/, '').split(':');
|
||||
handleSort(sortValue[0], sortValue[1]);
|
||||
};
|
||||
|
||||
window.addEventListener('hashchange', () => {
|
||||
handleHash(window.location.hash);
|
||||
});
|
||||
|
||||
handleHash(window.location.hash);
|
||||
}());</script></body></html>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user