consolidated data tables
This commit is contained in:
parent
9c8877397a
commit
17bfd61122
@ -337,6 +337,11 @@ const processGlobalDeaths = async () => {
|
||||
item.population = record.population;
|
||||
}
|
||||
|
||||
if (record.county) {
|
||||
record.name = record.county;
|
||||
record.safeName = toSafeName(record.county);
|
||||
}
|
||||
|
||||
// roll up up state/county data
|
||||
if (record.state && record.county) {
|
||||
const stateItem = perStateTotals[record.state] = perStateTotals[record.state] || {
|
||||
|
||||
@ -7,71 +7,17 @@ block main
|
||||
|
||||
+heroChart
|
||||
|
||||
div#table.table-responsive: table.table.table-sm.table-hover.table-bordered
|
||||
thead: tr
|
||||
th #
|
||||
th(data-col="name"): +sortableLinks("name") State/Province
|
||||
if data.name === 'United States'
|
||||
th.text-center(data-col="population"): +sortableLinks("population") Population
|
||||
th.text-center(data-col="total"): +sortableLinks("total") Deaths
|
||||
if data.name === 'United States'
|
||||
th.text-center(data-col="million"): +sortableLinks("million") …/1M
|
||||
th.text-center.sorted(data-col="yesterday"): +sortableLinks("yesterday") …since yesterday
|
||||
th.text-center(data-col="week"): +sortableLinks("week") …since last week
|
||||
th.text-center(data-col="month"): +sortableLinks("month") …month-to-date
|
||||
th.text-center(data-col="growth"): +sortableLinks("growth") …growth rate
|
||||
th.text-center Last 14 days
|
||||
-
|
||||
data.states.sort((a, b) => {
|
||||
const yesterdayA = a.timeSeriesDaily[a.timeSeriesDaily.length - 1].delta;
|
||||
const yesterdayB = b.timeSeriesDaily[b.timeSeriesDaily.length - 1].delta;
|
||||
if (yesterdayA === yesterdayB) {
|
||||
return a.name && b.name ? a.name.localeCompare(b.name) : -1;
|
||||
}
|
||||
mixin renderItemName(item)
|
||||
if item.name
|
||||
if item.counties && item.counties.length
|
||||
a(href=("/countries/" + item.countrySafeName + "-" + item.safeName + ".html"))= item.name
|
||||
else
|
||||
= item.name
|
||||
else if item.state
|
||||
= item.state
|
||||
else if item.country === 'United States'
|
||||
em.text-muted All #{item.country}
|
||||
else
|
||||
em.text-muted Other #{item.country}
|
||||
|
||||
return yesterdayA < yesterdayB ? 1 : -1;
|
||||
});
|
||||
tbody: each item, i in data.states
|
||||
- const yesterday = item.timeSeriesDaily[item.timeSeriesDaily.length - 1].delta || 0;
|
||||
- const lastWeek = item.timeSeriesDaily[item.timeSeriesDaily.length - 1].value - item.timeSeriesDaily[item.timeSeriesDaily.length - 7].value;
|
||||
- const lastMonth = item.timeSeriesMonthly[item.timeSeriesMonthly.length - 1].delta || 0;
|
||||
tr(
|
||||
id=("row-" + item.safeName)
|
||||
data-name=item.name
|
||||
data-population=item.population
|
||||
data-total=item.total
|
||||
data-million=item.deathsPerMillion
|
||||
data-yesterday=yesterday
|
||||
data-week=lastWeek
|
||||
data-month=lastMonth
|
||||
data-growth=item.deathGrowthRate
|
||||
)
|
||||
td.sort-order= i + 1
|
||||
td
|
||||
if item.name
|
||||
if item.counties && item.counties.length
|
||||
a(href=("/countries/" + item.countrySafeName + "-" + item.safeName + ".html"))= item.name
|
||||
else
|
||||
= item.name
|
||||
else if item.state
|
||||
= item.state
|
||||
else if item.country === 'United States'
|
||||
em.text-muted All #{item.country}
|
||||
else
|
||||
em.text-muted Other #{item.country}
|
||||
if data.name === 'United States'
|
||||
td.text-right: +formatNumber(item.population)
|
||||
td.text-right: +formatNumber(item.total)
|
||||
if data.name === 'United States'
|
||||
td.text-right: +formatNumber(Math.round(item.deathsPerMillion))
|
||||
td.text-right.sorted: +formatNumber(yesterday)
|
||||
td.text-right: +formatNumber(lastWeek)
|
||||
td.text-right: +formatNumber(lastMonth)
|
||||
td.text-right= Number(item.deathGrowthRate * 100).toFixed(2) + '%'
|
||||
td
|
||||
canvas.mx-auto(id="sparkline-" + i width="200" height="50")
|
||||
script.
|
||||
makeSparkline(
|
||||
"sparkline-#{i}",
|
||||
#{JSON.stringify(item.timeSeriesDaily.slice(-14).map(x => x.value))},
|
||||
);
|
||||
+dataTable(data.states, 'State/Province', 'state')
|
||||
|
||||
@ -146,6 +146,69 @@ html
|
||||
!{JSON.stringify(data.timeSeriesDaily.map(x => x.delta))},
|
||||
);
|
||||
|
||||
mixin dataTable(items, label, type)
|
||||
- const hasPopulation = type !== 'state' || data.name === 'United States';
|
||||
|
||||
div#table.table-responsive: table.table.table-sm.table-hover
|
||||
thead: tr
|
||||
th #
|
||||
th(data-col="name"): +sortableLinks("name")= label
|
||||
if hasPopulation
|
||||
th.text-center(data-col="population"): +sortableLinks("population") Population
|
||||
th.text-center(data-col="total"): +sortableLinks("total") Deaths
|
||||
if hasPopulation
|
||||
th.text-center(data-col="million"): +sortableLinks("million") …/1M
|
||||
th.text-center.sorted(data-col="yesterday"): +sortableLinks("yesterday") …since yesterday
|
||||
th.text-center(data-col="week"): +sortableLinks("week") …since last week
|
||||
th.text-center(data-col="month"): +sortableLinks("month") …month-to-date
|
||||
th.text-center(data-col="growth"): +sortableLinks("growth") …growth rate
|
||||
th.text-center Last 14 days
|
||||
|
||||
-
|
||||
items.sort((a, b) => {
|
||||
const yesterdayA = a.timeSeriesDaily[a.timeSeriesDaily.length - 1].delta;
|
||||
const yesterdayB = b.timeSeriesDaily[b.timeSeriesDaily.length - 1].delta;
|
||||
if (yesterdayA === yesterdayB) {
|
||||
return a.name && b.name ? a.name.localeCompare(b.name) : 0;
|
||||
}
|
||||
|
||||
return yesterdayA < yesterdayB ? 1 : -1;
|
||||
});
|
||||
|
||||
tbody: each item, i in items
|
||||
- const yesterday = item.timeSeriesDaily[item.timeSeriesDaily.length - 1].delta || 0;
|
||||
- const lastWeek = item.timeSeriesDaily[item.timeSeriesDaily.length - 1].value - item.timeSeriesDaily[item.timeSeriesDaily.length - 7].value;
|
||||
- const lastMonth = item.timeSeriesMonthly[item.timeSeriesMonthly.length - 1].delta || 0;
|
||||
tr(
|
||||
id=("row-" + item.safeName)
|
||||
data-name=item.name
|
||||
data-population=item.population
|
||||
data-total=item.total
|
||||
data-million=item.deathsPerMillion
|
||||
data-yesterday=yesterday
|
||||
data-week=lastWeek
|
||||
data-month=lastMonth
|
||||
data-growth=item.deathGrowthRate
|
||||
)
|
||||
td.sort-order= i + 1
|
||||
td: +renderItemName(item)
|
||||
if hasPopulation
|
||||
td.text-right: +formatNumber(item.population)
|
||||
td.text-right: +formatNumber(item.total)
|
||||
if hasPopulation
|
||||
td.text-right: +formatNumber(Math.round(item.deathsPerMillion))
|
||||
td.text-right.sorted: +formatNumber(yesterday)
|
||||
td.text-right: +formatNumber(lastWeek)
|
||||
td.text-right: +formatNumber(lastMonth)
|
||||
td.text-right= Number(item.deathGrowthRate * 100).toFixed(2) + '%'
|
||||
td
|
||||
canvas.mx-auto(id="sparkline-" + i width="200" height="50")
|
||||
script.
|
||||
makeSparkline(
|
||||
"sparkline-#{i}",
|
||||
#{JSON.stringify(item.timeSeriesDaily.slice(-14).map(x => x.value))},
|
||||
);
|
||||
|
||||
div.container.mt-2
|
||||
h1.text-center Covid-19 Death Data
|
||||
div.d-flex.justify-content-around.font-italic.small
|
||||
|
||||
@ -2,67 +2,16 @@ extends ./master.pug
|
||||
|
||||
block main
|
||||
h2
|
||||
a.float-right(href=("/countries/" + data.countrySafeName + ".html") style="font-size: 50%") ◀ #{data.country}
|
||||
a.float-right(href=("/countries/" + data.countrySafeName + ".html") style="font-size: 50%")
|
||||
| ◀ #{data.country}
|
||||
=data.name + ' - ' + data.country
|
||||
|
||||
+heroChart
|
||||
|
||||
div#table.table-responsive: table.table.table-sm.table-hover
|
||||
thead: tr
|
||||
th #
|
||||
th(data-col="name"): +sortableLinks("name") County/Region
|
||||
th.text-center(data-col="population"): +sortableLinks("population") Population
|
||||
th.text-center(data-col="total"): +sortableLinks("total") Deaths
|
||||
th.text-center(data-col="million"): +sortableLinks("million") …1/M
|
||||
th.text-center.sorted(data-col="yesterday"): +sortableLinks("yesterday") …since yesterday
|
||||
th.text-center(data-col="week"): +sortableLinks("week") …since last week
|
||||
th.text-center(data-col="month"): +sortableLinks("month") …month-to-date
|
||||
th.text-center(data-col="growth"): +sortableLinks("growth") …growth rate
|
||||
th Last 14 days
|
||||
mixin renderItemName(item)
|
||||
if item.name
|
||||
= item.name
|
||||
else
|
||||
em.text-muted Other #{item.state}
|
||||
|
||||
-
|
||||
data.counties.sort((a, b) => {
|
||||
const yesterdayA = a.timeSeriesDaily[a.timeSeriesDaily.length - 1].delta;
|
||||
const yesterdayB = b.timeSeriesDaily[b.timeSeriesDaily.length - 1].delta;
|
||||
if (yesterdayA === yesterdayB) {
|
||||
return a.name && b.name ? a.name.localeCompare(b.name) : -1;
|
||||
}
|
||||
|
||||
return yesterdayA < yesterdayB ? 1 : -1;
|
||||
});
|
||||
|
||||
tbody: each item, i in data.counties
|
||||
- const yesterday = item.timeSeriesDaily[item.timeSeriesDaily.length - 1].delta || 0;
|
||||
- const lastWeek = item.timeSeriesDaily[item.timeSeriesDaily.length - 1].value - item.timeSeriesDaily[item.timeSeriesDaily.length - 7].value;
|
||||
- const lastMonth = item.timeSeriesMonthly[item.timeSeriesMonthly.length - 1].delta || 0;
|
||||
tr(
|
||||
id=("row-" + item.countySafeName)
|
||||
data-name=item.county
|
||||
data-population=item.population
|
||||
data-total=item.total
|
||||
data-million=item.deathsPerMillion
|
||||
data-yesterday=yesterday
|
||||
data-week=lastWeek
|
||||
data-month=lastMonth
|
||||
data-growth=item.deathGrowthRate
|
||||
)
|
||||
td.sort-order= i + 1
|
||||
td
|
||||
if item.county
|
||||
= item.county
|
||||
else
|
||||
em.text-muted Other #{item.state}
|
||||
td.text-right: +formatNumber(item.population)
|
||||
td.text-right: +formatNumber(item.total)
|
||||
td.text-right: +formatNumber(Math.round(item.deathsPerMillion))
|
||||
td.text-right.sorted: +formatNumber(yesterday)
|
||||
td.text-right: +formatNumber(lastWeek)
|
||||
td.text-right: +formatNumber(lastMonth)
|
||||
td.text-right= Number(item.deathGrowthRate * 100).toFixed(2) + '%'
|
||||
td
|
||||
canvas(id="sparkline-" + i width="200" height="50")
|
||||
script.
|
||||
makeSparkline(
|
||||
"sparkline-#{i}",
|
||||
#{JSON.stringify(item.timeSeriesDaily.slice(-14).map(x => x.value))},
|
||||
);
|
||||
+dataTable(data.counties, 'County/Region', 'county')
|
||||
|
||||
@ -5,57 +5,11 @@ block main
|
||||
|
||||
+heroChart
|
||||
|
||||
div#table.table-responsive: table.table.table-sm.table-hover
|
||||
thead: tr
|
||||
th #
|
||||
th(data-col="name"): +sortableLinks("name") Country
|
||||
th.text-center(data-col="population"): +sortableLinks("population") Population
|
||||
th.text-center(data-col="total"): +sortableLinks("total") Deaths
|
||||
th.text-center(data-col="million"): +sortableLinks("million") …/1M
|
||||
th.text-center.sorted(data-col="yesterday"): +sortableLinks("yesterday") …since yesterday
|
||||
th.text-center(data-col="week"): +sortableLinks("week") …since last week
|
||||
th.text-center(data-col="month"): +sortableLinks("month") …month-to-date
|
||||
th.text-center(data-col="growth"): +sortableLinks("growth") …growth rate
|
||||
th.text-center Last 14 days
|
||||
-
|
||||
data.countries.sort((a, b) => {
|
||||
const yesterdayA = a.timeSeriesDaily[a.timeSeriesDaily.length - 1].delta;
|
||||
const yesterdayB = b.timeSeriesDaily[b.timeSeriesDaily.length - 1].delta;
|
||||
if (yesterdayA === yesterdayB) {
|
||||
return a.name.localeCompare(b.name);
|
||||
}
|
||||
mixin renderItemName(item)
|
||||
a.d-inline-block.text-truncate(
|
||||
href="./countries/" + item.safeName + ".html"
|
||||
style="max-width: 125px"
|
||||
)= item.name
|
||||
|
||||
return yesterdayA < yesterdayB ? 1 : -1;
|
||||
});
|
||||
+dataTable(data.countries, 'Country', 'country')
|
||||
|
||||
tbody: each item, i in data.countries
|
||||
- const yesterday = item.timeSeriesDaily[item.timeSeriesDaily.length - 1].delta || 0;
|
||||
- const lastWeek = item.timeSeriesDaily[item.timeSeriesDaily.length - 1].value - item.timeSeriesDaily[item.timeSeriesDaily.length - 7].value;
|
||||
- const lastMonth = item.timeSeriesMonthly[item.timeSeriesMonthly.length - 1].delta || 0;
|
||||
tr(
|
||||
id=("row-" + item.safeName)
|
||||
data-name=item.name
|
||||
data-population=item.population
|
||||
data-total=item.total
|
||||
data-million=item.deathsPerMillion
|
||||
data-yesterday=yesterday
|
||||
data-week=lastWeek
|
||||
data-month=lastMonth
|
||||
data-growth=item.deathGrowthRate
|
||||
)
|
||||
td.sort-order= i + 1
|
||||
td: a.d-inline-block.text-truncate(href="./countries/" + item.safeName + ".html" style="max-width: 125px")= item.name
|
||||
td.text-right: +formatNumber(item.population)
|
||||
td.text-right: +formatNumber(item.total)
|
||||
td.text-right: +formatNumber(Math.round(item.deathsPerMillion))
|
||||
td.text-right.sorted: +formatNumber(yesterday)
|
||||
td.text-right: +formatNumber(lastWeek)
|
||||
td.text-right: +formatNumber(lastMonth)
|
||||
td.text-right= Number(item.deathGrowthRate * 100).toFixed(2) + '%'
|
||||
td
|
||||
canvas.mx-auto(id="sparkline-" + i width="200" height="50")
|
||||
script.
|
||||
makeSparkline(
|
||||
"sparkline-#{i}",
|
||||
#{JSON.stringify(item.timeSeriesDaily.slice(-14).map(x => x.value))},
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user