diff --git a/generate.js b/generate.js index 6b1f22b..e277ca7 100755 --- a/generate.js +++ b/generate.js @@ -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] || { diff --git a/tmpl/country.pug b/tmpl/country.pug index f67e2be..c35a9c1 100644 --- a/tmpl/country.pug +++ b/tmpl/country.pug @@ -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') diff --git a/tmpl/master.pug b/tmpl/master.pug index 51909ea..50d11d7 100644 --- a/tmpl/master.pug +++ b/tmpl/master.pug @@ -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 diff --git a/tmpl/state.pug b/tmpl/state.pug index 5f274d3..a8bb5bf 100644 --- a/tmpl/state.pug +++ b/tmpl/state.pug @@ -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') diff --git a/tmpl/world.pug b/tmpl/world.pug index 3dca5c0..1fd5fed 100644 --- a/tmpl/world.pug +++ b/tmpl/world.pug @@ -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))}, - );