covid19/tmpl/master.pug

doctype

html
	head
		title= $title + ' | Covid-19'
		meta(charset="utf8")
		link(rel="stylesheet" href="/bootstrap.css")
		script(src="/Chart.bundle.js")
		style.
			acronym, abbr {
				border-bottom: 1px dotted #999999;
				cursor: help;
			}
			table td {
				vertical-align: middle !important;
			}
			th.sorted, td.sorted {
				background-color: #e0eaf7;
			}
			thead.headers th {
				position: sticky;
				top: 0;
			}
			thead.headers th:after {
				content: '';
				position: absolute;
				left: 0;
				width: 100%;
				bottom: -1px;
				border-bottom: 2px solid #b5b5b5;
			}
			.hero-tooltip table {
				border-collapse: collapse;
			}
			.hero-tooltip th, .hero-tooltip td {
				padding: 2px 4px;
			}
			.hero-tooltip {
				position: absolute;
				top: 0;
				left: 0;
				opacity: 0;
				pointer-events: none;
				background-image: linear-gradient(to bottom, rgba(52, 52, 52, 0.75), rgba(24, 24, 24, 0.75));
				color: white;
				text-shadow: 1px 1px 1px black;
				border-radius: 2px;
				box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.75);
				z-index: 1;
			}
			.tooltip-bordered {
				border-top: 1px solid #707070;
			}
			[class^="tooltip-color-"] {
				width: 10px;
				height: 10px;
				border: 2px solid black;
				display: inline-block;
			}
			[class^="tooltip-value-"] {
				text-align: right;
				font-family: monospace;
			}
			.geo-bg-dark {
				background-color: #8e8e8e;
				color: white;
			}
			.cases-bg-dark {
				background-color: #aaa55e;
				color: white;
			}
			.deaths-bg-dark {
				background-color: #a65353;
				color: white;
			}
			.other-bg-dark {
				background-color: #336556;
				color: white;
			}
			.geo-bg {
				background-color: #eeeeee;
			}
			.cases-bg {
				background-color: #f9f6d5;
			}
			.deaths-bg {
				background-color: #eac8c8;
			}
			.other-bg {
				background-color: #9ed0c2;
			}
			.table-sm {
				font-size: 80%;
			}
			.table-sm code {
				font-size: 110%;
				color: inherit;
			}

		script.
			Chart.pluginService.register({
				beforeDraw: (chart) => {
					const ctx = chart.chart.ctx;
					ctx.save();
					ctx.fillStyle = 'white';
					ctx.fillRect(0, 0, chart.width, chart.height);
					ctx.restore();
				}
			});

			// https://stackoverflow.com/a/45172506
			Chart.defaults.lineVerticalTooltip = Chart.defaults.line;
			Chart.controllers.lineVerticalTooltip = Chart.controllers.line.extend({
				draw: function(ease) {
					Chart.controllers.line.prototype.draw.call(this, ease);

					if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
						const activePoint = this.chart.tooltip._active[0];
						const ctx = this.chart.ctx;
						const x = activePoint.tooltipPosition().x;
						const topY = this.chart.legend.bottom;
						const bottomY = this.chart.chartArea.bottom;

						ctx.save();
						ctx.beginPath();
						ctx.moveTo(x, topY);
						ctx.lineTo(x, bottomY);
						ctx.lineWidth = 1;
						ctx.strokeStyle = 'rgba(96, 96, 96, 0.75)';
						ctx.stroke();
						ctx.restore();
					}
				}
			});

			const charts = {
				logarithmic: false,
				heroCharts: [],
				trends: [],
				heroMaxValues: [],
			};

			function makeSparkline(id, deathData, caseData) {
				// const canvas = document.getElementById(id);
				// const maxValue = caseData.reduce((max, value) => Math.max(max, value), 0);
				// const max = maxValue > 0 ? Math.pow(10, Math.ceil(Math.log10(maxValue))) : 0
				// const chart = new Chart(canvas.getContext('2d'), {
				// 	type: 'line',
				// 	data: {
				// 		labels: new Array(deathData.length),
				// 		datasets: [
				// 			{
				// 				data: caseData,
				// 				borderColor: 'rgb(161,150,20)',
				// 				borderWidth: 1,
				// 				backgroundColor: 'rgba(161,150,20, 0.25)',
				// 				fill: '1',
				// 			},
				// 			{
				// 				data: deathData,
				// 				borderColor: 'rgb(196, 64, 64)',
				// 				borderWidth: 1,
				// 				backgroundColor: 'rgba(196, 64, 64, 0.25)',
				// 				fill: 'origin',
				// 			},
				// 		],
				// 	},
				// 	options: {
				// 		responsive: false,
				// 		legend: {
				// 			display: false,
				// 		},
				// 		elements: {
				// 			point: {
				// 				radius: 0,
				// 			},
				// 		},
				// 		tooltips: {
				// 			enabled: false,
				// 		},
				// 		scales: {
				// 			yAxes: [
				// 				{
				// 					display: false,
				// 					type: 'logarithmic',
				// 					ticks: {
				// 						precision: 0,
				// 						beginAtZero: true,
				// 						min: 0,
				// 						max: Math.max(max, 2), // this is necessary for some reason
				// 						callback: value => Number(value.toString()),
				// 					}
				// 				},
				// 			],
				// 			xAxes: [
				// 				{
				// 					display: false,
				// 				},
				// 			],
				// 		}
				// 	}
				// });

				// charts.trends.push({
				// 	chart,
				// 	maxValue,
				// });
			}

			function setAxisType(type) {
				charts.heroCharts.forEach((chart, i) => {
					const axis = chart.options.scales.yAxes[0];
					if (type === 'logarithmic') {
						axis.type = 'logarithmic';
						const maxLogPower = Math.ceil(Math.log10(charts.heroMaxValues[i]));
						axis.ticks.max = Math.pow(10, maxLogPower);
						axis.ticks.callback = value => Number(value.toString()).toLocaleString();
					} else {
						axis.type = 'linear';
						delete axis.ticks.max;
						axis.ticks.callback = value => value;
					}

					chart.update();

					const selector = '.set-axis-' + type;
					const otherSelector = type === 'linear' ?
						'.set-axis-logarithmic' :
						'.set-axis-linear';

					document.querySelector(selector).disabled = true;
					document.querySelector(otherSelector).disabled = false;
				});

				charts.trends.forEach((data) => {
					const axis = data.chart.options.scales.yAxes[0];
					if (type === 'logarithmic') {
						axis.type = 'logarithmic';
						const maxLogPower = Math.ceil(Math.log10(data.maxValue));
						axis.ticks.max = Math.pow(10, maxLogPower);
						axis.ticks.callback = value => Number(value.toString()).toLocaleString();
					} else {
						axis.type = 'linear';
						delete axis.ticks.max;
						axis.ticks.callback = value => value;
					}

					data.chart.update();
				});
			}

			function makeHeroChart(
				id,
				type,
				title,
				labels,
				cumulative,
				daily,
				rollingAverage,
			) {
				const canvas = document.getElementById(id);
				const maxValue = cumulative.reduce((max, value) => Math.max(max, value), 0);
				charts.heroMaxValues.push(maxValue);

				const firstNonZeroDeathIndex = cumulative.findIndex(value => value > 0);
				const start = Math.max(0, firstNonZeroDeathIndex - 2);
				const end = cumulative.length;

				const totalData = cumulative.slice(start, end);
				const newData = daily.slice(start, end);
				const rollingData = rollingAverage.slice(start, end);

				const months = [ 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec' ];

				const realLabels = labels
					.slice(start, end)
					.map((date) => date.replace(/\d{4}-(\d\d?)-(\d\d?)/, (_, m, d) => `${months[Number(m) - 1]} ${Number(d)}`));

				const pointRadius = 1;

				const totalColor = type === 'cases' ? [220, 126, 26 ] : [194, 57, 57];
				const dailyColor = type === 'cases' ? [83, 83, 83 ] : [83, 83, 83 ];
				const rollingColor = type === 'cases' ? [187, 178, 16] : [208, 105, 167];

				charts.heroCharts.push(new Chart(canvas.getContext('2d'), {
					type: 'lineVerticalTooltip',
					data: {
						labels: realLabels,
						datasets: [
							{
								label: 'Cumulative',
								data: totalData,
								fill: '2',
								borderColor: 'rgba(' + totalColor.join(',') + ')',
								backgroundColor: 'rgba(' + totalColor.join(',') + ',0.25)',
								borderWidth: 1,
								pointRadius,
							},
							{
								label: 'New',
								data: newData,
								fill: false,
								borderColor: 'rgba(' + dailyColor.join(',') + ',0.15)',
								backgroundColor: 'rgba(' + dailyColor.join(',') + ',0.15)',
								borderWidth: 1,
								pointRadius,
							},
							{
								label: 'New (7 day avg.)',
								data: rollingData,
								fill: 'origin',
								borderColor: 'rgba(' + rollingColor.join(',') + ')',
								backgroundColor: 'rgba(' + rollingColor.join(',') + ',0.25)',
								borderWidth: 1,
								pointRadius,
							},

						],
					},
					options: {
						responsive: true,
						title: {
							display: true,
							position: 'top',
							text: title,
							fontSize: 18,
						},
						tooltips: {
							intersect: false,
							axis: 'x',
							enabled: false,
							custom: function(tooltipModel) {
								const tooltipEl = document.getElementById('hero-tooltip-' + type);

								if (tooltipModel.opacity === 0) {
									tooltipEl.style.opacity = '0';
									return;
								}

								if (tooltipModel.dataPoints) {
									const getDataPoint = (index) => tooltipModel.dataPoints.find(point => point.datasetIndex === index);

									tooltipEl.querySelector('.tooltip-title').textContent = tooltipModel.title.join(' ');
									const setData = (cls, index, colorIndex) => {
										colorIndex = typeof(colorIndex) === 'number' ? colorIndex : index;
										const dataPoint = getDataPoint(index);
										tooltipEl.querySelector('.tooltip-value-' + cls).textContent = dataPoint ?
											Number(dataPoint.value).toLocaleString() :
											'n/a';
										const colorDataPoint = getDataPoint(colorIndex);
										if (colorDataPoint) {
											const realColorIndex = tooltipModel.dataPoints.indexOf(colorDataPoint);
											const color = tooltipModel.labelColors[realColorIndex];
											if (color) {
												const colorEl = tooltipEl.querySelector('.tooltip-color-' + cls);
												colorEl.style.backgroundColor = color.backgroundColor;
												colorEl.style.borderColor = color.borderColor;
											}
										}
									};

									setData(type + '-total', 0);
									setData(type + '-new', 1, 2);
								}

								const position = this._chart.canvas.getBoundingClientRect();

								tooltipEl.style.opacity = '1';
								tooltipEl.style.fontFamily = tooltipModel._bodyFontFamily;
								tooltipEl.style.fontSize = tooltipModel.bodyFontSize + 'px';
								tooltipEl.style.fontStyle = tooltipModel._bodyFontStyle;
								tooltipEl.style.padding = tooltipModel.yPadding + 'px ' + tooltipModel.xPadding + 'px';

								const tooltipSize = tooltipEl.getBoundingClientRect();
								const chartArea = this._chart.chartArea;
								const chartHeight = chartArea.bottom - chartArea.top;
								tooltipEl.style.left = (position.left + window.pageXOffset + tooltipModel.x) + 'px';
								tooltipEl.style.top = (position.top + window.pageYOffset + chartArea.top + (chartHeight / 2) - (tooltipSize.height / 2)) + 'px';
							}
						},
						scales: {
							yAxes: [
								{
									display: true,
									type: 'logarithmic',
									ticks: {
										precision: 0,
										beginAtZero: true,
										min: 0,
										max: Math.pow(10, Math.ceil(Math.log10(maxValue))),
										callback: value => Number(value.toString()).toLocaleString(),
									},
									afterBuildTicks: (axis, ticks) => {
										if (axis.type === 'logarithmic') {
											return ticks.filter((value) => {
												const logValue = Math.log10(value);
												return value === 0 || Math.round(logValue) === logValue;
											});
										}

										return ticks;
									},
								},
							],
							xAxes: [
								{
									display: true,
								},
							],
						}
					}
				}));
			}
	body
		mixin formatNumber(num)
			= Number(num).toLocaleString()

		mixin sortableLinks(col, notCentered)
			div.d-flex(class=(!notCentered ? "justify-content-center" : ""))
				div.sortables.mr-2(style="font-size: 50%")
					a(href="#sort:" + col + ":asc") ▲
					br
					a(href="#sort:" + col + ":desc") ▼
				div
					block

		mixin heroChart()
			div.card.mb-4
				div.card-body.position-relative
					div.row
						div.col-12.col-lg-6.position-relative
							canvas.mx-auto(id="main-chart-cases" width="512" height="288")
						div.col-12.col-lg-6.position-relative
							canvas.mx-auto(id="main-chart-deaths" width="512" height="288")
					-
						const population = 'pop. ' + data.population.toLocaleString();
						const deathsPerMillion = Math.round(data.deathsPerMillion).toLocaleString() + '/1M';
						const casesPerMillion = Math.round(data.casesPerMillion).toLocaleString() + '/1M';
						const totalDeaths = data.total.toLocaleString();
						const totalCases = data.cases.total.toLocaleString();
						let name = data.name;
						if (data.county) {
							name += ', ' + data.state;
						}
						if (data.country) {
							name += ', ' + data.country;
						}
						const heroCasesTitle = [
							`Covid-19: ${name} (${population})`,
							`${totalCases} cases (${casesPerMillion})`,
						];
						const heroDeathsTitle = [
							`Covid-19: ${name} (${population})`,
							`${totalDeaths} deaths (${deathsPerMillion})`,
						];
					script.
						makeHeroChart(
							'main-chart-cases',
							'cases',
							!{JSON.stringify(heroCasesTitle)},
							!{JSON.stringify(data.cases.timeSeriesDaily.map(x => x.key))},
							!{JSON.stringify(data.cases.timeSeriesDaily.map(x => x.value))},
							!{JSON.stringify(data.cases.timeSeriesDaily.map(x => x.delta))},
							!{JSON.stringify(data.cases.rollingAverageDaily.map(x => x.delta))},
						);
						makeHeroChart(
							'main-chart-deaths',
							'deaths',
							!{JSON.stringify(heroDeathsTitle)},
							!{JSON.stringify(data.timeSeriesDaily.map(x => x.key))},
							!{JSON.stringify(data.timeSeriesDaily.map(x => x.value))},
							!{JSON.stringify(data.timeSeriesDaily.map(x => x.delta))},
							!{JSON.stringify(data.rollingAverageDaily.map(x => x.delta))},
						);

		mixin dataTable(items, label, type)
			- const hasPopulation = type !== 'state' || data.name === 'United States';

			div#table: table.table.table-sm.table-hover
				thead: tr
					th.text-center.font-weight-bold.geo-bg-dark(colspan=(hasPopulation ? 3 : 2)) Geography
					th.text-center.font-weight-bold.cases-bg-dark(colspan=(hasPopulation ? 6 : 4)) Cases
					th.text-center.font-weight-bold.deaths-bg-dark(colspan=(hasPopulation ? 6 : 4)) Deaths
					th.text-center.font-weight-bold.other-bg-dark(colspan="2") Other
				thead.headers: tr
					th.geo-bg #
					th.geo-bg(data-col="name"): +sortableLinks("name", true)= label
					if hasPopulation
						th.geo-bg(data-col="population"): +sortableLinks("population") Population

					if hasPopulation
						th.cases-bg(data-col="cases-million"): +sortableLinks("cases-million") per 1M
					th.cases-bg(data-col="cases-total"): +sortableLinks("cases-total") Total
					th.cases-bg(data-col="cases-today"): +sortableLinks("cases-today") Today
					th.cases-bg(data-col="cases-yesterday"): +sortableLinks("cases-yesterday") Yesterday
					th.cases-bg(data-col="cases-last14"): +sortableLinks("cases-last14"): abbr(title="Last 14 days") L14
					if hasPopulation
						th.cases-bg(data-col="cases-last14-million")
							+sortableLinks("cases-last14-million"): abbr(title="Last 14 days per million residents") L14/1M

					if hasPopulation
						th.deaths-bg(data-col="million"): +sortableLinks("million") per 1M
					th.deaths-bg(data-col="total"): +sortableLinks("total") Total
					th.sorted.deaths-bg(data-col="today"): +sortableLinks("today") Today
					th.deaths-bg(data-col="yesterday"): +sortableLinks("yesterday") Yesterday
					th.deaths-bg(data-col="last14"): +sortableLinks("last14"): abbr(title="Last 14 days") L14
					if hasPopulation
						th.deaths-bg(data-col="last14-million")
							+sortableLinks("last14-million"): abbr(title="Last 14 days per million residents") L14/1M

					th.other-bg(data-col="cfr"): +sortableLinks("cfr")
						acronym(title="Case Fatality Rate") CFR
					//th.text-center.other-bg Trend

				-
					items.sort((a, b) => {
						try {
							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;
						} catch (e) {
							return 0;
						}
					});

				tbody: each item, i in items
					-
						const getValue = offset => (item.timeSeriesDaily[item.timeSeriesDaily.length - offset] || {}).value || 0;
						const getDelta = offset => (item.timeSeriesDaily[item.timeSeriesDaily.length - offset] || {}).delta || 0;
						const getValueCases = offset => (item.cases.timeSeriesDaily[item.cases.timeSeriesDaily.length - offset] || {}).value || 0;
						const getDeltaCases = offset => (item.cases.timeSeriesDaily[item.cases.timeSeriesDaily.length - offset] || {}).delta || 0;
						const today = getDelta(1);
						const yesterday = getDelta(2);
						const last7 = getValue(1) - getValue(7);
						const casesToday = getDeltaCases(1);
						const casesLast7 = getValueCases(1) - getValueCases(7);
						const casesYesterday = getDeltaCases(2);
						const last14 = getValue(1) - getValue(14);
						const casesLast14 = getValueCases(1) - getValueCases(14);
						const last14Avg = hasPopulation && item.population ? last14 * 1000000 / item.population : null;
						const casesLast14Avg = hasPopulation && item.population ? casesLast14 * 1000000 / item.population : null;
					tr(
						id=("row-" + (item.safeName || '_'))
						data-name=(item.name || '_')
						data-cases-total=item.cases.total
						data-cases-today=casesToday
						data-cases-last7=casesLast7
						data-cases-million=item.casesPerMillion
						data-cases-yesterday=casesYesterday
						data-cases-growth=item.caseGrowthRate
						data-cases-last14=casesLast14
						data-cases-last14-million=casesLast14Avg
						data-population=item.population
						data-total=item.total
						data-million=item.deathsPerMillion
						data-today=today
						data-yesterday=yesterday
						data-last7=last7
						data-last14=last14
						data-last14-million=last14Avg
						data-growth=item.deathGrowthRate
						data-cfr=item.caseFatalityRate
					)
						td.sort-order= i + 1
						td: +renderItemName(item)
						if hasPopulation
							td.text-right: code: +formatNumber(item.population)

						if hasPopulation
							td.text-right: code: +formatNumber(Math.round(item.casesPerMillion))
						td.text-right: code: +formatNumber(item.cases.total)
						td.text-right: code: +formatNumber(casesToday)
						td.text-right: code: +formatNumber(casesYesterday)
						td.text-right: code: +formatNumber(casesLast14)
						if hasPopulation
							td.text-right: code: +formatNumber(Math.round(casesLast14Avg))
						if hasPopulation
							td.text-right: code: +formatNumber(Math.round(item.deathsPerMillion))
						td.text-right: code: +formatNumber(item.total)
						td.text-right.sorted: code: +formatNumber(today)
						td.text-right: code: +formatNumber(yesterday)
						td.text-right: code: +formatNumber(last14)
						if hasPopulation
							td.text-right: code: +formatNumber(Math.round(last14Avg))
						td.text-right: code= Number(item.caseFatalityRate * 100).toFixed(2) + '%'
						//td
						//	canvas.mx-auto(id="sparkline-" + i width="100" height="35")
						//	script.
						//		makeSparkline(
						//			"sparkline-#{i}",
						//			#{JSON.stringify(item.rollingAverageDaily.slice(-14).map(x => x.delta))},
						//			#{JSON.stringify(item.cases.rollingAverageDaily.slice(-14).map(x => x.delta))},
						//		);

		div.container-fluid.mt-2(style="max-width: 1600px")
			h1.text-center Covid-19 Data
			div.d-flex.justify-content-around.font-italic.small
				div
					- const generationDate = new Date().toISOString();
					| Data from #[a(href="https://github.com/CSSEGISandData/COVID-19") Johns Hopkins CSSE]
				div
					| Generated: #[time.generation-date(datetime=generationDate title=generationDate)= generationDate]
				div
					- const lastUpdateISO = lastUpdate.toISOString();
					| Data updated: #[time.update-date(datetime=lastUpdateISO title=lastUpdateISO)= lastUpdateISO]

			hr

			div.main-content.mt-4.position-relative
				div.position-absolute(style="z-index: 2; left: 50%; transform: translateX(-50%) translateY(12%);")
					div.btn-group.btn-group-sm
						button.btn.btn-secondary.set-axis-linear(
							type="button"
							onclick="setAxisType('linear')"
							autocomplete="off"
						) Linear
						button.btn.btn-secondary.set-axis-logarithmic(
							type="button"
							onclick="setAxisType('logarithmic')"
							autocomplete="off"
							disabled
						) Logarithmic
				block main

		div#hero-tooltip-cases.hero-tooltip
			div.text-center(style="font-size: 125%"): strong.tooltip-title
			table.tooltip-bordered
				tr
					td: span.tooltip-color-cases-total
					th Total Cases
					td.tooltip-value-cases-total
				tr
					td: span.tooltip-color-cases-new
					th New Cases
					td.tooltip-value-cases-new

		div#hero-tooltip-deaths.hero-tooltip
			div.text-center(style="font-size: 125%"): strong.tooltip-title
			table.tooltip-bordered
				tr
					td: span.tooltip-color-deaths-total
					th Total Deaths
					td.tooltip-value-deaths-total
				tr
					td: span.tooltip-color-deaths-new
					th New Deaths
					td.tooltip-value-deaths-new

		script.
			(function() {
				const table = document.getElementById('table');
				const headerRow = table.querySelector('thead.headers 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);
					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.localeCompare(bName);
							}

							if (aValue === null) {
								return 1;
							}
							if (bValue === null) {
								return -1;
							}

							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 (newSortDir === 'asc') {
									return aName.localeCompare(bName);
								}

								return bName.localeCompare(aName);
							});
							resortTable('name');
							break;
						case 'total':
						case 'cases-total':
						case 'cases-today':
						case 'cases-yesterday':
						case 'cases-million':
						case 'cases-last7':
						case 'cases-last14':
						case 'cases-last14-million':
						case 'cases-growth':
						case 'today':
						case 'yesterday':
						case 'last7':
						case 'last14':
						case 'last14-million':
						case 'population':
						case 'million':
						case 'growth':
						case 'cfr':
							sortByNumberThenName(value);
							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);

				const setDate = (selector) => {
					const node = document.querySelector(selector);
					node.textContent = new Date(node.getAttribute('datetime')).toLocaleString();
				};

				setDate('.generation-date');
				setDate('.update-date');
			}());