844 lines
22 KiB
HTML
844 lines
22 KiB
HTML
<!DOCTYPE html><html><head><title>Global Deaths</title><meta charset="utf8"><link rel="stylesheet" href="/bootstrap.css"><script src="/Chart.bundle.js"></script><style>table td {
|
|
vertical-align: middle !important;
|
|
}</style></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-27T03:01:29.416Z.
|
|
</em></p><div class="main-content"><h2><a class="float-right" href="/" style="font-size: 50%">◀ All Countries</a>Canada</h2><div class="card"><div class="card-body"><canvas class="mx-auto" id="main-chart" width="800" height="450"></canvas><script>(function() {
|
|
const canvas = document.getElementById('main-chart');
|
|
const chart = new Chart(canvas.getContext('2d'), {
|
|
type: 'line',
|
|
data: {
|
|
labels: ["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"],
|
|
datasets: [
|
|
{
|
|
label: 'Deaths',
|
|
data: [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,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],
|
|
fill: true,
|
|
borderColor: 'rgb(196, 64, 64)',
|
|
backgroundColor: 'rgba(196, 64, 64, 0.5)',
|
|
}
|
|
],
|
|
},
|
|
options: {
|
|
responsive: false,
|
|
title: {
|
|
display: true,
|
|
position: 'top',
|
|
text: "Canada"
|
|
},
|
|
scales: {
|
|
yAxes: [
|
|
{
|
|
display: true,
|
|
ticks: {
|
|
precision: 0,
|
|
beginAtZero: true,
|
|
}
|
|
},
|
|
],
|
|
xAxes: [
|
|
{
|
|
display: true,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover"><thead><tr><th>#</th><th><span class="sortables float-left mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:name:asc">▲</a><a href="#sort:name:desc">▼</a></span>State/Province</th><th><span class="sortables float-left mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:total:asc">▲</a><a href="#sort:total:desc">▼</a></span>Deaths</th><th><span class="sortables float-left mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:yesterday:asc">▲</a><a href="#sort:yesterday:desc">▼</a></span>…since yesterday</th><th><span class="sortables float-left mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:week:asc">▲</a><a href="#sort:week:desc">▼</a></span>…since last week</th><th><span class="sortables float-left mr-2 d-inline-flex flex-column" style="font-size: 50%"><a href="#sort:month:asc">▲</a><a href="#sort:month:desc">▼</a></span>…month-to-date</th><th>Last 14 days</th></tr></thead><tbody><tr id="row-alberta" data-name="Alberta" data-total="73" data-yesterday="0" data-week="14" data-month="65"><td class="sort-order">1</td><td>Alberta</td><td class="text-right">73</td><td class="text-right">0</td><td class="text-right">14</td><td class="text-right">65</td><td><canvas id="sparkline-0" width="200" height="50"></canvas><script>(function() {
|
|
const canvas = document.getElementById('sparkline-0');
|
|
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: [46,48,48,48,50,51,51,59,61,66,68,72,73,73],
|
|
}
|
|
],
|
|
},
|
|
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,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
</script></td></tr><tr id="row-british-columbia" data-name="British Columbia" data-total="100" data-yesterday="0" data-week="18" data-month="76"><td class="sort-order">2</td><td>British Columbia</td><td class="text-right">100</td><td class="text-right">0</td><td class="text-right">18</td><td class="text-right">76</td><td><canvas id="sparkline-1" width="200" height="50"></canvas><script>(function() {
|
|
const canvas = document.getElementById('sparkline-1');
|
|
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: [69,69,72,75,77,78,81,82,87,90,94,98,100,100],
|
|
}
|
|
],
|
|
},
|
|
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,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
</script></td></tr><tr id="row-diamond-princess" data-name="Diamond Princess" data-total="1" data-yesterday="0" data-week="2" data-month="0"><td class="sort-order">3</td><td>Diamond Princess</td><td class="text-right">1</td><td class="text-right">0</td><td class="text-right">2</td><td class="text-right">0</td><td><canvas id="sparkline-2" width="200" height="50"></canvas><script>(function() {
|
|
const canvas = document.getElementById('sparkline-2');
|
|
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: [-1,-1,-1,-1,-1,-1,-1,-1,-1,-1,1,1,1,1],
|
|
}
|
|
],
|
|
},
|
|
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,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
</script></td></tr><tr id="row-grand-princess" data-name="Grand Princess" data-total="-1" data-yesterday="0" data-week="-1" data-month="-1"><td class="sort-order">4</td><td>Grand Princess</td><td class="text-right">-1</td><td class="text-right">0</td><td class="text-right">-1</td><td class="text-right">-1</td><td><canvas id="sparkline-3" width="200" height="50"></canvas><script>(function() {
|
|
const canvas = document.getElementById('sparkline-3');
|
|
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: [0,0,0,0,0,0,0,0,0,-1,-1,-1,-1,-1],
|
|
}
|
|
],
|
|
},
|
|
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,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
</script></td></tr><tr id="row-manitoba" data-name="Manitoba" data-total="6" data-yesterday="0" data-week="0" data-month="5"><td class="sort-order">5</td><td>Manitoba</td><td class="text-right">6</td><td class="text-right">0</td><td class="text-right">0</td><td class="text-right">5</td><td><canvas id="sparkline-4" width="200" height="50"></canvas><script>(function() {
|
|
const canvas = document.getElementById('sparkline-4');
|
|
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: [4,4,5,5,5,5,5,6,6,6,6,6,6,6],
|
|
}
|
|
],
|
|
},
|
|
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,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
</script></td></tr><tr id="row-new-brunswick" data-name="New Brunswick" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">6</td><td>New Brunswick</td><td class="text-right">0</td><td class="text-right">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas id="sparkline-5" width="200" height="50"></canvas><script>(function() {
|
|
const canvas = document.getElementById('sparkline-5');
|
|
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: [0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
|
}
|
|
],
|
|
},
|
|
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,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
</script></td></tr><tr id="row-newfoundland-and-labrador" data-name="Newfoundland and Labrador" data-total="3" data-yesterday="0" data-week="0" data-month="2"><td class="sort-order">7</td><td>Newfoundland and Labrador</td><td class="text-right">3</td><td class="text-right">0</td><td class="text-right">0</td><td class="text-right">2</td><td><canvas id="sparkline-6" width="200" height="50"></canvas><script>(function() {
|
|
const canvas = document.getElementById('sparkline-6');
|
|
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: [3,3,3,3,3,3,3,3,3,3,3,3,3,3],
|
|
}
|
|
],
|
|
},
|
|
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,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
</script></td></tr><tr id="row-northwest-territories" data-name="Northwest Territories" 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">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas id="sparkline-7" width="200" height="50"></canvas><script>(function() {
|
|
const canvas = document.getElementById('sparkline-7');
|
|
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: [0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
|
}
|
|
],
|
|
},
|
|
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,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
</script></td></tr><tr id="row-nova-scotia" data-name="Nova Scotia" data-total="-1" data-yesterday="0" data-week="-10" data-month="-1"><td class="sort-order">9</td><td>Nova Scotia</td><td class="text-right">-1</td><td class="text-right">0</td><td class="text-right">-10</td><td class="text-right">-1</td><td><canvas id="sparkline-8" width="200" height="50"></canvas><script>(function() {
|
|
const canvas = document.getElementById('sparkline-8');
|
|
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: [3,3,3,3,4,7,9,9,10,12,16,-1,-1,-1],
|
|
}
|
|
],
|
|
},
|
|
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,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
</script></td></tr><tr id="row-ontario" data-name="Ontario" data-total="960" data-yesterday="44" data-week="336" data-month="927"><td class="sort-order">10</td><td>Ontario</td><td class="text-right">960</td><td class="text-right">44</td><td class="text-right">336</td><td class="text-right">927</td><td><canvas id="sparkline-9" width="200" height="50"></canvas><script>(function() {
|
|
const canvas = document.getElementById('sparkline-9');
|
|
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: [291,334,385,490,524,564,591,624,694,762,806,862,916,960],
|
|
}
|
|
],
|
|
},
|
|
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,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
</script></td></tr><tr id="row-prince-edward-island" data-name="Prince Edward Island" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">11</td><td>Prince Edward Island</td><td class="text-right">0</td><td class="text-right">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas id="sparkline-10" width="200" height="50"></canvas><script>(function() {
|
|
const canvas = document.getElementById('sparkline-10');
|
|
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: [0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
|
}
|
|
],
|
|
},
|
|
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,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
</script></td></tr><tr id="row-quebec" data-name="Quebec" data-total="1516" data-yesterday="70" data-week="577" data-month="1485"><td class="sort-order">12</td><td>Quebec</td><td class="text-right">1,516</td><td class="text-right">70</td><td class="text-right">577</td><td class="text-right">1,485</td><td><canvas id="sparkline-11" width="200" height="50"></canvas><script>(function() {
|
|
const canvas = document.getElementById('sparkline-11');
|
|
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: [360,435,487,630,688,688,820,939,1044,1134,1243,1340,1446,1516],
|
|
}
|
|
],
|
|
},
|
|
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,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
</script></td></tr><tr id="row-recovered" data-name="Recovered" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">13</td><td>Recovered</td><td class="text-right">0</td><td class="text-right">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas id="sparkline-12" width="200" height="50"></canvas><script>(function() {
|
|
const canvas = document.getElementById('sparkline-12');
|
|
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: [0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
|
}
|
|
],
|
|
},
|
|
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,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
</script></td></tr><tr id="row-saskatchewan" data-name="Saskatchewan" data-total="4" data-yesterday="0" data-week="0" data-month="2"><td class="sort-order">14</td><td>Saskatchewan</td><td class="text-right">4</td><td class="text-right">0</td><td class="text-right">0</td><td class="text-right">2</td><td><canvas id="sparkline-13" width="200" height="50"></canvas><script>(function() {
|
|
const canvas = document.getElementById('sparkline-13');
|
|
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: [4,4,4,4,4,4,4,4,4,4,4,4,4,4],
|
|
}
|
|
],
|
|
},
|
|
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,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
</script></td></tr><tr id="row-yukon" data-name="Yukon" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">15</td><td>Yukon</td><td class="text-right">0</td><td class="text-right">0</td><td class="text-right">0</td><td class="text-right">0</td><td><canvas id="sparkline-14" width="200" height="50"></canvas><script>(function() {
|
|
const canvas = document.getElementById('sparkline-14');
|
|
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: [0,0,0,0,0,0,0,0,0,0,0,0,0,0],
|
|
}
|
|
],
|
|
},
|
|
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,
|
|
},
|
|
],
|
|
}
|
|
}
|
|
});
|
|
}());
|
|
</script></td></tr></tbody></table></div><script>(function() {
|
|
const tbody = document.getElementById('table').querySelector('tbody');
|
|
const allRows = [].slice.call(tbody.querySelectorAll('tbody tr'));
|
|
|
|
const resortTable = () => {
|
|
let nextChild = null;
|
|
for (let i = allRows.length - 1; i >= 0; i--) {
|
|
const row = allRows[i];
|
|
if (!row) {
|
|
continue;
|
|
}
|
|
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.localeCompare(bName);
|
|
}
|
|
|
|
return aValue < bValue ?
|
|
(newSortDir === 'asc' ? -1 : 1) :
|
|
(newSortDir === 'asc' ? 1 : -1);
|
|
});
|
|
resortTable();
|
|
};
|
|
switch (value) {
|
|
case 'name':
|
|
allRows.sort((a, b) => {
|
|
const aName = a.getAttribute('data-name');
|
|
const bName = b.getAttribute('data-name');
|
|
if (newSortDir === 'asc') {
|
|
return aName.localeCompare(bName);
|
|
}
|
|
|
|
return bName.localeCompare(aName);
|
|
});
|
|
resortTable();
|
|
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></div></div></body></html> |