tmont/covid19
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
covid19/public/countries/united-states-california.html
tmont 11a867eca9 highlight sorted column
2020-04-27 08:54:26 -07:00

401 lines
34 KiB
HTML
Raw Blame History

<!DOCTYPE html><html><head><title>California - United States | 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:55.052Z.
</em></p><div class="main-content"><h2><a class="float-right" href="/countries/united-states.html" style="font-size: 50%">◀ United States</a>California - United States</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',
"California",
["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,1,1,1,1,1,1,2,4,4,4,3,5,7,12,16,18,24,25,30,39,50,65,81,94,110,124,146,173,199,238,265,289,348,380,432,495,544,583,604,640,714,767,860,956,1037,1140,1177,1225,1282,1421,1533,1621,1689,1725],
[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,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,2,0,0,-1,2,2,5,4,2,6,1,5,9,11,15,16,13,16,14,22,27,26,39,27,24,59,32,52,63,49,39,21,36,74,53,93,96,81,103,37,48,57,139,112,88,68,36],
);
</script></div></div><div class="table-responsive" id="table"><table class="table table-sm table-hover"><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>County/Region</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>&hellip;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>&hellip;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>&hellip;month-to-date</span></div></th><th>Last 14 days</th></tr></thead><tbody><tr id="row-los-angeles" data-name="Los Angeles" data-total="916" data-yesterday="21" data-week="297" data-month="862"><td class="sort-order">1</td><td>Los Angeles</td><td class="text-right">916</td><td class="text-right sorted">21</td><td class="text-right">297</td><td class="text-right">862</td><td><canvas id="sparkline-0" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-0",
[322,360,405,457,497,576,600,619,663,732,797,850,895,916],
);</script></td></tr><tr id="row-riverside" data-name="Riverside" data-total="118" data-yesterday="6" data-week="33" data-month="105"><td class="sort-order">2</td><td>Riverside</td><td class="text-right">118</td><td class="text-right sorted">6</td><td class="text-right">33</td><td class="text-right">105</td><td><canvas id="sparkline-1" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-1",
[41,50,50,54,69,69,75,85,85,93,100,112,112,118],
);</script></td></tr><tr id="row-contra-costa" data-name="Contra Costa" data-total="29" data-yesterday="4" data-week="7" data-month="26"><td class="sort-order">3</td><td>Contra Costa</td><td class="text-right">29</td><td class="text-right sorted">4</td><td class="text-right">7</td><td class="text-right">26</td><td><canvas id="sparkline-2" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-2",
[11,11,14,16,19,19,20,22,22,22,23,23,25,29],
);</script></td></tr><tr id="row-san-bernardino" data-name="San Bernardino" data-total="82" data-yesterday="2" data-week="22" data-month="78"><td class="sort-order">4</td><td>San Bernardino</td><td class="text-right">82</td><td class="text-right sorted">2</td><td class="text-right">22</td><td class="text-right">78</td><td><canvas id="sparkline-3" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-3",
[31,31,31,39,47,57,57,60,67,67,77,80,80,82],
);</script></td></tr><tr id="row-santa-clara" data-name="Santa Clara" data-total="100" data-yesterday="1" data-week="17" data-month="70"><td class="sort-order">5</td><td>Santa Clara</td><td class="text-right">100</td><td class="text-right sorted">1</td><td class="text-right">17</td><td class="text-right">70</td><td><canvas id="sparkline-4" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-4",
[60,60,65,69,73,73,73,83,83,94,95,98,99,100],
);</script></td></tr><tr id="row-san-joaquin" data-name="San Joaquin" data-total="25" data-yesterday="1" data-week="8" data-month="19"><td class="sort-order">6</td><td>San Joaquin</td><td class="text-right">25</td><td class="text-right sorted">1</td><td class="text-right">8</td><td class="text-right">19</td><td><canvas id="sparkline-5" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-5",
[16,17,17,17,17,17,17,17,18,20,22,24,24,25],
);</script></td></tr><tr id="row-orange" data-name="Orange" data-total="39" data-yesterday="1" data-week="6" data-month="32"><td class="sort-order">7</td><td>Orange</td><td class="text-right">39</td><td class="text-right sorted">1</td><td class="text-right">6</td><td class="text-right">32</td><td><canvas id="sparkline-6" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-6",
[19,19,22,25,28,32,32,33,33,34,36,36,38,39],
);</script></td></tr><tr id="row-unassigned" data-name="Unassigned" data-total="2" data-yesterday="0" data-week="0" data-month="2"><td class="sort-order">8</td><td>Unassigned</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 id="sparkline-7" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-7",
[0,0,0,0,0,0,2,2,2,2,2,2,2,2],
);</script></td></tr><tr id="row-out-of-ca" data-name="Out of CA" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">9</td><td>Out of CA</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 id="sparkline-8" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-8",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-yuba" data-name="Yuba" data-total="1" data-yesterday="0" data-week="0" data-month="1"><td class="sort-order">10</td><td>Yuba</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 id="sparkline-9" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-9",
[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
);</script></td></tr><tr id="row-yolo" data-name="Yolo" data-total="13" data-yesterday="0" data-week="4" data-month="12"><td class="sort-order">11</td><td>Yolo</td><td class="text-right">13</td><td class="text-right sorted">0</td><td class="text-right">4</td><td class="text-right">12</td><td><canvas id="sparkline-10" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-10",
[3,4,4,7,7,8,8,9,10,10,12,13,13,13],
);</script></td></tr><tr id="row-ventura" data-name="Ventura" data-total="16" data-yesterday="0" data-week="3" data-month="12"><td class="sort-order">12</td><td>Ventura</td><td class="text-right">16</td><td class="text-right sorted">0</td><td class="text-right">3</td><td class="text-right">12</td><td><canvas id="sparkline-11" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-11",
[10,10,13,13,13,13,13,13,13,13,16,16,16,16],
);</script></td></tr><tr id="row-tuolumne" data-name="Tuolumne" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">13</td><td>Tuolumne</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 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-tulare" data-name="Tulare" data-total="32" data-yesterday="0" data-week="14" data-month="31"><td class="sort-order">14</td><td>Tulare</td><td class="text-right">32</td><td class="text-right sorted">0</td><td class="text-right">14</td><td class="text-right">31</td><td><canvas id="sparkline-13" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-13",
[13,13,15,17,17,17,17,18,18,25,25,28,32,32],
);</script></td></tr><tr id="row-trinity" data-name="Trinity" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">15</td><td>Trinity</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 id="sparkline-14" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-14",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-tehama" data-name="Tehama" data-total="1" data-yesterday="0" data-week="0" data-month="1"><td class="sort-order">16</td><td>Tehama</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 id="sparkline-15" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-15",
[0,0,1,1,1,1,1,1,1,1,1,1,1,1],
);</script></td></tr><tr id="row-sutter" data-name="Sutter" data-total="3" data-yesterday="0" data-week="1" data-month="3"><td class="sort-order">17</td><td>Sutter</td><td class="text-right">3</td><td class="text-right sorted">0</td><td class="text-right">1</td><td class="text-right">3</td><td><canvas id="sparkline-16" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-16",
[2,2,2,2,2,2,2,2,2,2,3,3,3,3],
);</script></td></tr><tr id="row-stanislaus" data-name="Stanislaus" data-total="5" data-yesterday="0" data-week="1" data-month="5"><td class="sort-order">18</td><td>Stanislaus</td><td class="text-right">5</td><td class="text-right sorted">0</td><td class="text-right">1</td><td class="text-right">5</td><td><canvas id="sparkline-17" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-17",
[2,2,4,4,4,4,4,4,4,4,5,5,5,5],
);</script></td></tr><tr id="row-sonoma" data-name="Sonoma" data-total="2" data-yesterday="0" data-week="0" data-month="1"><td class="sort-order">19</td><td>Sonoma</td><td class="text-right">2</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">1</td><td><canvas id="sparkline-18" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-18",
[2,2,2,2,2,2,2,2,2,2,2,2,2,2],
);</script></td></tr><tr id="row-solano" data-name="Solano" data-total="4" data-yesterday="0" data-week="2" data-month="4"><td class="sort-order">20</td><td>Solano</td><td class="text-right">4</td><td class="text-right sorted">0</td><td class="text-right">2</td><td class="text-right">4</td><td><canvas id="sparkline-19" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-19",
[2,2,2,2,2,2,2,2,2,3,4,4,4,4],
);</script></td></tr><tr id="row-siskiyou" data-name="Siskiyou" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">21</td><td>Siskiyou</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 id="sparkline-20" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-20",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-sierra" data-name="Sierra" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">22</td><td>Sierra</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 id="sparkline-21" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-21",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-shasta" data-name="Shasta" data-total="4" data-yesterday="0" data-week="1" data-month="3"><td class="sort-order">23</td><td>Shasta</td><td class="text-right">4</td><td class="text-right sorted">0</td><td class="text-right">1</td><td class="text-right">3</td><td><canvas id="sparkline-22" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-22",
[3,3,3,3,3,3,3,3,3,3,3,4,4,4],
);</script></td></tr><tr id="row-santa-cruz" data-name="Santa Cruz" data-total="2" data-yesterday="0" data-week="0" data-month="1"><td class="sort-order">24</td><td>Santa Cruz</td><td class="text-right">2</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">1</td><td><canvas id="sparkline-23" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-23",
[1,2,2,2,2,2,2,2,2,2,2,2,2,2],
);</script></td></tr><tr id="row-santa-barbara" data-name="Santa Barbara" data-total="7" data-yesterday="0" data-week="3" data-month="7"><td class="sort-order">25</td><td>Santa Barbara</td><td class="text-right">7</td><td class="text-right sorted">0</td><td class="text-right">3</td><td class="text-right">7</td><td><canvas id="sparkline-24" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-24",
[2,2,2,2,3,3,4,4,4,5,5,6,7,7],
);</script></td></tr><tr id="row-san-mateo" data-name="San Mateo" data-total="41" data-yesterday="0" data-week="13" data-month="31"><td class="sort-order">26</td><td>San Mateo</td><td class="text-right">41</td><td class="text-right sorted">0</td><td class="text-right">13</td><td class="text-right">31</td><td><canvas id="sparkline-25" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-25",
[21,21,21,28,28,28,28,28,28,39,39,41,41,41],
);</script></td></tr><tr id="row-san-luis-obispo" data-name="San Luis Obispo" data-total="1" data-yesterday="0" data-week="0" data-month="1"><td class="sort-order">27</td><td>San Luis Obispo</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 id="sparkline-26" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-26",
[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
);</script></td></tr><tr id="row-san-francisco" data-name="San Francisco" data-total="22" data-yesterday="0" data-week="2" data-month="16"><td class="sort-order">28</td><td>San Francisco</td><td class="text-right">22</td><td class="text-right sorted">0</td><td class="text-right">2</td><td class="text-right">16</td><td><canvas id="sparkline-27" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-27",
[15,15,17,17,20,20,20,20,20,21,21,22,22,22],
);</script></td></tr><tr id="row-san-diego" data-name="San Diego" data-total="111" data-yesterday="0" data-week="40" data-month="104"><td class="sort-order">29</td><td>San Diego</td><td class="text-right">111</td><td class="text-right sorted">0</td><td class="text-right">40</td><td class="text-right">104</td><td><canvas id="sparkline-28" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-28",
[45,47,53,60,63,70,71,71,72,96,100,102,111,111],
);</script></td></tr><tr id="row-san-benito" data-name="San Benito" data-total="2" data-yesterday="0" data-week="0" data-month="1"><td class="sort-order">30</td><td>San Benito</td><td class="text-right">2</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">1</td><td><canvas 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-sacramento" data-name="Sacramento" data-total="41" data-yesterday="0" data-week="7" data-month="34"><td class="sort-order">31</td><td>Sacramento</td><td class="text-right">41</td><td class="text-right sorted">0</td><td class="text-right">7</td><td class="text-right">34</td><td><canvas id="sparkline-30" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-30",
[27,28,32,32,32,33,34,34,35,36,41,41,41,41],
);</script></td></tr><tr id="row-plumas" data-name="Plumas" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">32</td><td>Plumas</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 id="sparkline-31" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-31",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-placer" data-name="Placer" data-total="8" data-yesterday="0" data-week="0" data-month="6"><td class="sort-order">33</td><td>Placer</td><td class="text-right">8</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">6</td><td><canvas id="sparkline-32" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-32",
[5,5,7,8,8,8,8,8,8,8,8,8,8,8],
);</script></td></tr><tr id="row-nevada" data-name="Nevada" data-total="1" data-yesterday="0" data-week="0" data-month="1"><td class="sort-order">34</td><td>Nevada</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 id="sparkline-33" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-33",
[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
);</script></td></tr><tr id="row-napa" data-name="Napa" data-total="2" data-yesterday="0" data-week="0" data-month="2"><td class="sort-order">35</td><td>Napa</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 id="sparkline-34" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-34",
[2,2,2,2,2,2,2,2,2,2,2,2,2,2],
);</script></td></tr><tr id="row-monterey" data-name="Monterey" data-total="4" data-yesterday="0" data-week="0" data-month="3"><td class="sort-order">36</td><td>Monterey</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 id="sparkline-35" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-35",
[3,3,3,3,3,3,3,4,4,4,4,4,4,4],
);</script></td></tr><tr id="row-mono" data-name="Mono" data-total="1" data-yesterday="0" data-week="0" data-month="1"><td class="sort-order">37</td><td>Mono</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 id="sparkline-36" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-36",
[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
);</script></td></tr><tr id="row-modoc" data-name="Modoc" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">38</td><td>Modoc</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 id="sparkline-37" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-37",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-merced" data-name="Merced" data-total="3" data-yesterday="0" data-week="0" data-month="3"><td class="sort-order">39</td><td>Merced</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 id="sparkline-38" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-38",
[3,3,3,3,3,3,3,3,3,3,3,3,3,3],
);</script></td></tr><tr id="row-mendocino" data-name="Mendocino" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">40</td><td>Mendocino</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 id="sparkline-39" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-39",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-mariposa" data-name="Mariposa" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">41</td><td>Mariposa</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 id="sparkline-40" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-40",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-marin" data-name="Marin" data-total="12" data-yesterday="0" data-week="2" data-month="8"><td class="sort-order">42</td><td>Marin</td><td class="text-right">12</td><td class="text-right sorted">0</td><td class="text-right">2</td><td class="text-right">8</td><td><canvas id="sparkline-41" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-41",
[10,10,10,10,10,10,10,10,10,10,11,12,12,12],
);</script></td></tr><tr id="row-madera" data-name="Madera" data-total="2" data-yesterday="0" data-week="0" data-month="1"><td class="sort-order">43</td><td>Madera</td><td class="text-right">2</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">1</td><td><canvas id="sparkline-42" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-42",
[2,2,2,2,2,2,2,2,2,2,2,2,2,2],
);</script></td></tr><tr id="row-lassen" data-name="Lassen" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">44</td><td>Lassen</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 id="sparkline-43" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-43",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-lake" data-name="Lake" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">45</td><td>Lake</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 id="sparkline-44" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-44",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-kings" data-name="Kings" data-total="1" data-yesterday="0" data-week="0" data-month="1"><td class="sort-order">46</td><td>Kings</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 id="sparkline-45" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-45",
[1,1,1,1,1,1,1,1,1,1,1,1,1,1],
);</script></td></tr><tr id="row-kern" data-name="Kern" data-total="4" data-yesterday="0" data-week="1" data-month="3"><td class="sort-order">47</td><td>Kern</td><td class="text-right">4</td><td class="text-right sorted">0</td><td class="text-right">1</td><td class="text-right">3</td><td><canvas id="sparkline-46" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-46",
[3,3,3,3,3,3,3,3,3,4,4,4,4,4],
);</script></td></tr><tr id="row-inyo" data-name="Inyo" data-total="1" data-yesterday="0" data-week="1" data-month="1"><td class="sort-order">48</td><td>Inyo</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 id="sparkline-47" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-47",
[0,0,0,0,0,0,0,0,0,0,0,1,1,1],
);</script></td></tr><tr id="row-imperial" data-name="Imperial" data-total="8" data-yesterday="0" data-week="5" data-month="8"><td class="sort-order">49</td><td>Imperial</td><td class="text-right">8</td><td class="text-right sorted">0</td><td class="text-right">5</td><td class="text-right">8</td><td><canvas id="sparkline-48" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-48",
[3,3,3,3,3,3,3,3,4,5,8,8,8,8],
);</script></td></tr><tr id="row-humboldt" data-name="Humboldt" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">50</td><td>Humboldt</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 id="sparkline-49" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-49",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-glenn" data-name="Glenn" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">51</td><td>Glenn</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 id="sparkline-50" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-50",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-fresno" data-name="Fresno" data-total="7" data-yesterday="0" data-week="0" data-month="7"><td class="sort-order">52</td><td>Fresno</td><td class="text-right">7</td><td class="text-right sorted">0</td><td class="text-right">0</td><td class="text-right">7</td><td><canvas id="sparkline-51" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-51",
[5,5,7,7,7,7,7,7,7,7,7,7,7,7],
);</script></td></tr><tr id="row-el-dorado" data-name="El Dorado" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">53</td><td>El Dorado</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 id="sparkline-52" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-52",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-del-norte" data-name="Del Norte" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">54</td><td>Del Norte</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 id="sparkline-53" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-53",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-colusa" data-name="Colusa" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">55</td><td>Colusa</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 id="sparkline-54" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-54",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-calaveras" data-name="Calaveras" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">56</td><td>Calaveras</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 id="sparkline-55" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-55",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-butte" data-name="Butte" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">57</td><td>Butte</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 id="sparkline-56" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-56",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-amador" data-name="Amador" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">58</td><td>Amador</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 id="sparkline-57" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-57",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-alpine" data-name="Alpine" data-total="0" data-yesterday="0" data-week="0" data-month="0"><td class="sort-order">59</td><td>Alpine</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 id="sparkline-58" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-58",
[0,0,0,0,0,0,0,0,0,0,0,0,0,0],
);</script></td></tr><tr id="row-alameda" data-name="Alameda" data-total="52" data-yesterday="0" data-week="10" data-month="45"><td class="sort-order">60</td><td>Alameda</td><td class="text-right">52</td><td class="text-right sorted">0</td><td class="text-right">10</td><td class="text-right">45</td><td><canvas id="sparkline-59" width="200" height="50"></canvas><script>makeSparkline(
"sparkline-59",
[23,23,36,39,40,41,42,42,43,43,46,48,52,52],
);</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>
Reference in New Issue View Git Blame Copy Permalink