diff --git a/generate.js b/generate.js index a3151c6..21c70d0 100755 --- a/generate.js +++ b/generate.js @@ -660,7 +660,7 @@ const processRecords = async () => { worldData.cases.timeSeriesMonthly = convertTsObjectToArray(worldData.cases.timeSeriesMonthly); worldData.deathGrowthRate = getGrowthRate(worldData.timeSeriesDaily); - worldData.casesGrowthRate = getGrowthRate(worldData.cases.timeSeriesDaily); + worldData.caseGrowthRate = getGrowthRate(worldData.cases.timeSeriesDaily); worldData.rollingAverageDaily = getRollingAverage(worldData); worldData.doublingDaily = getDoublingTime(worldData); worldData.cases.rollingAverageDaily = getRollingAverage(worldData.cases); diff --git a/tmpl/master.pug b/tmpl/master.pug index 18ee988..311612c 100644 --- a/tmpl/master.pug +++ b/tmpl/master.pug @@ -7,6 +7,10 @@ html 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; } @@ -463,13 +467,13 @@ html div.card.mb-4 div.card-body.position-relative div.position-absolute(style="top: 10px; right: 10px; z-index: 2;") - div.btn-group - button.btn.btn-secondary.btn-sm.set-axis-linear( + 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.btn-sm.set-axis-logarithmic( + button.btn.btn-secondary.set-axis-logarithmic( type="button" onclick="setAxisType('logarithmic')" autocomplete="off" @@ -478,12 +482,17 @@ html div.mx-auto.position-relative(style="max-width: 1024px; z-index: 1") canvas.mx-auto(id="main-chart" width="1024" height="576") - - const growthRate = '+' + (data.deathGrowthRate * 100).toFixed(2) + '%'; + const deathGrowthRate = '+' + (data.deathGrowthRate * 100).toFixed(2) + '%'; + const caseGrowthRate = '+' + (data.caseGrowthRate * 100).toFixed(2) + '%'; const population = 'pop. ' + data.population.toLocaleString(); - const deathsPerMillion = Math.round(data.deathsPerMillion).toLocaleString() + '/MM'; + 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(); const heroTitle = [ - 'Covid-19: ' + data.name, - `${population} | ${deathsPerMillion} | ${growthRate}` + `Covid-19: ${data.name} (${population})`, + `${totalCases} cases (${casesPerMillion}, ${caseGrowthRate})`, + `${totalDeaths} deaths (${deathsPerMillion}, ${deathGrowthRate})`, ]; script. makeHeroChart( @@ -505,8 +514,8 @@ html 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 : 5)) Cases - th.text-center.font-weight-bold.deaths-bg-dark(colspan=(hasPopulation ? 6 : 5)) Deaths + th.text-center.font-weight-bold.cases-bg-dark(colspan=(hasPopulation ? 7 : 5)) Cases + th.text-center.font-weight-bold.deaths-bg-dark(colspan=(hasPopulation ? 7 : 5)) Deaths th.text-center.font-weight-bold.other-bg-dark(colspan="2") Other thead.headers: tr th.geo-bg # @@ -519,7 +528,10 @@ html 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-last7"): +sortableLinks("cases-last7") Last 7 + 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 th.cases-bg(data-col="cases-growth"): +sortableLinks("cases-growth") Growth if hasPopulation @@ -527,11 +539,14 @@ html 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="last7"): +sortableLinks("last7") Last 7 + 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.deaths-bg(data-col="growth"): +sortableLinks("growth") Growth th.other-bg(data-col="cfr"): +sortableLinks("cfr") - acronym(title="Case Fatality Rate" style="border-bottom: 1px dotted #999999; cursor: help;") CFR + acronym(title="Case Fatality Rate") CFR th.text-center.other-bg Trend - @@ -557,6 +572,10 @@ html 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 || '_') @@ -566,12 +585,16 @@ html 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 ) @@ -585,14 +608,18 @@ html 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(casesLast7) + td.text-right: code: +formatNumber(casesLast14) + if hasPopulation + td.text-right: code: +formatNumber(Math.round(casesLast14Avg)) td.text-right: code= Number(item.caseGrowthRate * 100).toFixed(2) + '%' 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(last7) + td.text-right: code: +formatNumber(last14) + if hasPopulation + td.text-right: code: +formatNumber(Math.round(last14Avg)) td.text-right: code= Number(item.deathGrowthRate * 100).toFixed(2) + '%' td.text-right: code= Number(item.caseFatalityRate * 100).toFixed(2) + '%' td @@ -699,6 +726,13 @@ html 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); @@ -725,10 +759,14 @@ html 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':