From 785656644f1435c59f1a295a80e622ab889a2b2b Mon Sep 17 00:00:00 2001 From: tmont Date: Mon, 27 Apr 2020 16:10:38 -0700 Subject: [PATCH] added hero chart to world index --- generate.js | 56 +++++++++++++++++++++++++++++++++---- tmpl/country.pug | 12 +------- tmpl/master.pug | 14 ++++++++++ tmpl/state.pug | 12 +------- tmpl/{all.pug => world.pug} | 9 ++++-- 5 files changed, 73 insertions(+), 30 deletions(-) rename tmpl/{all.pug => world.pug} (94%) diff --git a/generate.js b/generate.js index 8076f86..045f315 100755 --- a/generate.js +++ b/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 allHtml = pug.renderFile(allTmpl, { - data: countryArr, + const worldTmpl = path.join(templatesDir, 'world.pug'); + const worldHtml = pug.renderFile(worldTmpl, { + 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, ' ')); diff --git a/tmpl/country.pug b/tmpl/country.pug index ae256d4..b736149 100644 --- a/tmpl/country.pug +++ b/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 - 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))}, - ); + +heroChart div#table.table-responsive: table.table.table-sm.table-hover.table-bordered thead: tr diff --git a/tmpl/master.pug b/tmpl/master.pug index 5b1a739..a470b3e 100644 --- a/tmpl/master.pug +++ b/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. diff --git a/tmpl/state.pug b/tmpl/state.pug index b627e13..2c5c757 100644 --- a/tmpl/state.pug +++ b/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 - 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))}, - ); + +heroChart div#table.table-responsive: table.table.table-sm.table-hover thead: tr diff --git a/tmpl/all.pug b/tmpl/world.pug similarity index 94% rename from tmpl/all.pug rename to tmpl/world.pug index 97c8df2..48022b7 100644 --- a/tmpl/all.pug +++ b/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;