added hero chart to world index

generate.js

@@ -71,7 +71,7 @@ const processGlobalDeaths = async () => {
 	console.log(`parsed US deaths CSV in ${Date.now() - start}ms`);
 
 	// tsGlobalRecords = tsGlobalRecords.filter((record) => {
-	// 	return record['Country/Region'] === 'US';
+	// 	return record['Country/Region'] === 'Spain';
 	// });
 
 	// state/county data is separated for the US and doesn't need to be rolled up
@@ -328,17 +328,63 @@ const processGlobalDeaths = async () => {
 		};
 	});
 
+	const worldData = {
+		name: 'The World',
+		safeName: 'the-world',
+		total: 0,
+		countries: countryArr,
+		timeSeriesDaily: {},
+		timeSeriesMonthly: {},
+	};
+
+	countryArr.forEach((countryData) => {
+		worldData.total += countryData.total;
+
+		countryData.timeSeriesDaily.forEach((ts) => {
+			worldData.timeSeriesDaily[ts.key] = worldData.timeSeriesDaily[ts.key] || {
+				value: 0,
+				delta: 0,
+			};
+			worldData.timeSeriesDaily[ts.key].value += ts.value;
+			worldData.timeSeriesDaily[ts.key].delta += ts.delta;
+		});
+
+		countryData.timeSeriesMonthly.forEach((ts) => {
+			worldData.timeSeriesMonthly[ts.key] = worldData.timeSeriesMonthly[ts.key] || {
+				value: 0,
+				delta: 0,
+			};
+			worldData.timeSeriesMonthly[ts.key].value += ts.value;
+			worldData.timeSeriesMonthly[ts.key].delta += ts.delta;
+		});
+	});
+
+	worldData.timeSeriesDaily = Object.keys(worldData.timeSeriesDaily).sort().map((date) => {
+		return {
+			key: date,
+			value: worldData.timeSeriesDaily[date].value,
+			delta: worldData.timeSeriesDaily[date].delta,
+		};
+	});
+	worldData.timeSeriesMonthly = Object.keys(worldData.timeSeriesMonthly).sort().map((date) => {
+		return {
+			key: date,
+			value: worldData.timeSeriesMonthly[date].value,
+			delta: worldData.timeSeriesMonthly[date].delta,
+		};
+	});
+
 	console.log(`transformed data in ${Date.now() - start}ms`);
 
 	start = Date.now();
-	const allTmpl = path.join(templatesDir, 'all.pug');
+	const worldTmpl = path.join(templatesDir, 'world.pug');
-	const allHtml = pug.renderFile(allTmpl, {
+	const worldHtml = pug.renderFile(worldTmpl, {
-		data: countryArr,
+		data: worldData,
 		$title: 'The World'
 	});
 
 	const targetFile = path.join(publicDir, 'index.html');
-	fs.writeFileSync(targetFile, allHtml);
+	fs.writeFileSync(targetFile, worldHtml);
 	console.log(`wrote to ${targetFile} in ${Date.now() - start}ms`);
 	// fs.writeFileSync(path.join(publicDir, 'countries.json'), JSON.stringify(countryArr, null, '  '));
 

tmpl/country.pug

@@ -5,17 +5,7 @@ block main
 		a.float-right(href="/" style="font-size: 50%") ◀ All Countries
 		=data.name
 
-	div.card.mb-4
+	+heroChart
-		div.card-body
-			canvas.mx-auto(id="main-chart" width="800" height="450")
-			script.
-				makeHeroChart(
-					'main-chart',
-					!{JSON.stringify(data.name || '')},
-					!{JSON.stringify(data.timeSeriesDaily.map(x => x.key))},
-					!{JSON.stringify(data.timeSeriesDaily.map(x => x.value))},
-					!{JSON.stringify(data.timeSeriesDaily.map(x => x.delta))},
-				);
 
 	div#table.table-responsive: table.table.table-sm.table-hover.table-bordered
 		thead: tr

tmpl/master.pug

@@ -94,6 +94,7 @@ html
 							display: true,
 							position: 'top',
 							text: title,
+							fontSize: 18,
 						},
 						tooltips: {
 							intersect: false,
@@ -132,6 +133,19 @@ html
 				span
 					block
 
+		mixin heroChart(title)
+			div.card.mb-4
+				div.card-body
+					canvas.mx-auto(id="main-chart" width="800" height="450")
+					script.
+						makeHeroChart(
+							'main-chart',
+							!{JSON.stringify(data.name || '')},
+							!{JSON.stringify(data.timeSeriesDaily.map(x => x.key))},
+							!{JSON.stringify(data.timeSeriesDaily.map(x => x.value))},
+							!{JSON.stringify(data.timeSeriesDaily.map(x => x.delta))},
+						);
+
 		div.container
 			h1 Covid-19 Data
 			p.text-muted: em.

tmpl/state.pug

@@ -5,17 +5,7 @@ block main
 		a.float-right(href=("/countries/" + data.countrySafeName + ".html") style="font-size: 50%") ◀ #{data.country}
 		=data.name + ' - ' + data.country
 
-	div.card.mb-4
+	+heroChart
-		div.card-body
-			canvas.mx-auto(id="main-chart" width="800" height="450")
-			script.
-				makeHeroChart(
-					'main-chart',
-					!{JSON.stringify(data.name || '')},
-					!{JSON.stringify(data.timeSeriesDaily.map(x => x.key))},
-					!{JSON.stringify(data.timeSeriesDaily.map(x => x.value))},
-					!{JSON.stringify(data.timeSeriesDaily.map(x => x.delta))},
-				);
 
 	div#table.table-responsive: table.table.table-sm.table-hover
 		thead: tr

tmpl/world.pug

@@ -1,7 +1,10 @@
 extends ./master.pug
 
 block main
-	h2 Country Rollup
+	h2 All Countries
+
+	+heroChart
+
 	div#table.table-responsive: table.table.table-sm.table-hover
 		thead: tr
 			th #
@@ -12,7 +15,7 @@ block main
 			th.text-center(data-col="month"): +sortableLinks("month") …month-to-date
 			th Last 14 days
 		-
-			data.sort((a, b) => {
+			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) {
@@ -22,7 +25,7 @@ block main
 				return yesterdayA < yesterdayB ? 1 : -1;
 			});
 
-		tbody: each item, i in data
+		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;