consolidated data tables

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] || {

tmpl/country.pug

@@ -7,71 +7,17 @@ block main
 
 	+heroChart
 
-	div#table.table-responsive: table.table.table-sm.table-hover.table-bordered
+	mixin renderItemName(item)
-		thead: tr
+		if item.name
-			th #
+			if item.counties && item.counties.length
-			th(data-col="name"): +sortableLinks("name") State/Province
+				a(href=("/countries/" + item.countrySafeName + "-" + item.safeName + ".html"))= item.name
-			if data.name === 'United States'
+			else
-				th.text-center(data-col="population"): +sortableLinks("population") Population
+				= item.name
-			th.text-center(data-col="total"): +sortableLinks("total") Deaths
+		else if item.state
-			if data.name === 'United States'
+			= item.state
-				th.text-center(data-col="million"): +sortableLinks("million") …/1M
+		else if item.country === 'United States'
-			th.text-center.sorted(data-col="yesterday"): +sortableLinks("yesterday") …since yesterday
+			em.text-muted All #{item.country}
-			th.text-center(data-col="week"): +sortableLinks("week") …since last week
+		else
-			th.text-center(data-col="month"): +sortableLinks("month") …month-to-date
+			em.text-muted Other #{item.country}
-			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;
-				}
 
-				return yesterdayA < yesterdayB ? 1 : -1;
+	+dataTable(data.states, 'State/Province', 'state')
-			});
-		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))},
-						);

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

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
+	mixin renderItemName(item)
-		thead: tr
+		if item.name
-			th #
+			= item.name
-			th(data-col="name"): +sortableLinks("name") County/Region
+		else
-			th.text-center(data-col="population"): +sortableLinks("population") Population
+			em.text-muted Other #{item.state}
-			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
 
-		-
+	+dataTable(data.counties, 'County/Region', 'county')
-			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))},
-						);

tmpl/world.pug

@@ -5,57 +5,11 @@ block main
 
 	+heroChart
 
-	div#table.table-responsive: table.table.table-sm.table-hover
+	mixin renderItemName(item)
-		thead: tr
+		a.d-inline-block.text-truncate(
-			th #
+			href="./countries/" + item.safeName + ".html"
-			th(data-col="name"): +sortableLinks("name") Country
+			style="max-width: 125px"
-			th.text-center(data-col="population"): +sortableLinks("population") Population
+		)= item.name
-			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);
-				}
 
-				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))},
-						);