krusty-is-cool/covid-dashboard

A simple dashboard

😷 Covid-19 Dashboard

A simple dashboard

Static version

GO !

Only HTLM, CSS (Bootstrap) and JavaScript. No server control on this repository. There is a flask (python) based back-end to deliver datasets.

Progressive Web App standard. You can install it on you desktop and your mobile devices. There is a service worker which manages caches to keep the app available when the device is offline. In addition, it slightly improves the performances. The dynamic cache that stores the datasets renews itself every hour, although datasets are updated daily.

Tested on:

OS	Browser	Status
Windows 10	Microsoft Edge 80	Ok
Windows 10	Google Chrome	Ok
iOS 14	Safari	Ok
iPadOS 14	Safari	Ok
Android 9	Google Chrome	Ok

Features

Select a country and get a nice graph of the daily/weekly new Covid-19 cases and deaths in this country. Moving average on 7 days to filter the data. More features coming soon !

Choose between three two major wordwide datasets:

• European Centre for Disease Prevention and Control.
• University of Oxford Blavatnik School of Govvernment
• Johns Hopkins University Centre for Systems Science and Engineering

Default country: France. Need to study the possibility to set default country depending on user's location in respect of their privacy.

Enhanced Data for France. Get 4 indicators of the epidemiological activity. Source: data.gouv.fr

Screenshots (desktop)

covid-dashboard's Issues

Issue: Safari iOS cache management fails

• New service workers are not token into account: user has to manually delete the website data in the parameters of Safari,
• After a reasonable period of time, when user hits "refresh" button, the app fails to load the updated data. The service worker seems not to be used by the navigator which may use its own caching system. See screenshot below. The user has to force close the app to reload data.

Feature: offer choice between several datasets

We can observe significant variation between datasets available. Ex: UK.

We could offer the user the choice between several datasets, so he could take into account those differences.

To implement this feature, we would need to:

• indentify datasets
• work on how to get them via HTTP request (or other)
• develop dedicated data processing functions
• update the view

Feature: cumulative cases using linear and log scale

We can add a new graph that shows the cumulative cases.

We can discuss about it.

Bug: ECDC's data has changed

The first dataset is now broken: no plot are displayed

Current behavior

• static-dashboard.js@68 requests data from https://opendata.ecdc.europa.eu/covid19/casedistribution/csv via CORS anywhere.
• static-dashboard.js@675 parse data returning an array of objects.
• static-dashboard.js@398 parse data to a plotly compatible format.

This last step produces an error about undefined cases variable :

Uncaught TypeError: cases is undefined
    updateNumbers https://www.coviddash.app/static-dashboard.js:423
    plotGraph https://www.coviddash.app/static-dashboard.js:844
    <anonymous> https://www.coviddash.app/static-dashboard.js:84
    send https://cdn.plot.ly/plotly-latest.min.js:20
    n https://cdn.plot.ly/plotly-latest.min.js:20
    f https://cdn.plot.ly/plotly-latest.min.js:20
static-dashboard.js:423:9

Workaround

Commit 6aed3ac491af18b0af81a5b1ca2929d252cc5e45 add a banner for this issue.

Causes

As explained by the above commit:

The ecdc daily number of new cases reported has shifted to a weekly data collection since the 14th of decembre (source).

The downloadable data file contains information on the 14-day notification rate of newly reported COVID-19 cases per 100 000 population and the 14-day notification rate of reported deaths per million population by week and country. Each row contains the corresponding data for a certain day and per country. The file is updated weekly. You may use the data in line with ECDC’s copyright policy.

Possible solution

Delete the ecdc choice from the dashboard.

Main content padding and plotly responsiveness

When reaching the github pages deployment, we can observe an incorrect padding behavior on the navbar and a lack of responsiveness for the graph.

Expected behavior

Content padding

The main container should use 100% of the viewport's width.

Responsiveness

Resizing the window should also resize the graph to match the new width.

Current behavior

Content padding

Background is colored in red

The main content is left and right padded by 15px.

Responsiveness

The plot is not listening for window resize events. The website was opened in fullscreen and resized down to 50%.

Possible solutions

These two files are responsible of the behavior:

• docs/index.html: The container-fluid css class introduces a 15px padding for both left and right direction: we can override both padding by adding the px-0 class to the divider.
• doc/static-dashboard.js: the built-in responsive parameter within Plotly's newPlot function allow us to listen for resizing events.

Few DOM/HTML issues on Apple mobile devices

1- The desactivated "Log" switches are not rendered as expected

Expected:

Observed:

Looks like a standard radio button.

2- When pivoting the sreen, the page appeares "zoomed in"

Before pivoting:

After:

3- The view badly reposition itself after switching between cases and deaths in graphs

Before clicking on "deaths":

After: