henryzt/covid-19-timeline-data-visualizer

Coronavirus UK and world data visualizer with interactive timeline using Vue.js and Naive UI - Covid19 dashboard

COVID-19 Data Visualizer & Interactive Timeline

Coronavirus UK and world data visualiser with interactive timeline using vue and bootstrap

covid19.henryzt.com

Running on covid19.henryzt.com and covid19.uclcssa.cn.

Screenshots

(to be updated)

Charts and Data

Confirmed Cases Bar Race Animation

Region Maps

Detailed Region List

Country Drop Down Select

Data Source

• Data API provided by disease.sh
• Designed with Naive-UI and ECharts
• This project is open-sourced at the github repository here, pull requests and issues are welcomed!

Contributors

• @henryz00
• @Davi-X
• @jieyouxu 
• @robinWongM
• @magetron

covid-19-timeline-data-visualizer's Issues

Ignore package-lock.json and yarn.lock

It looks like contributors might be using different tooling (yarn vs npm) which generate different lockfiles respectively.

Keep only one of the lock files and specify which package manager to use, or else you likely will get different build results depending on which package manager you are using.

Since this is a website and not a CLI tool or binary, you do not need to include the package lock files anyways.

Consider ignoring both package-lock.json and yarn.lock.

Couldn't install and run the server locally

Hello! :)

What is done:

1. Forked this repo
2. Cloned it from there
3. Now tried to install the dependencies

What is seen:

• Seen while running the command npm install

• To find what dependency was failing, installed one by one, and found that vue-fusioncharts was the one.

• And this is what I get when trying to run the server

Versions/Machine configurations:

Node - 8.9.4
npm - 5.6.0
Windows - OS 10

Thank you!

Performance improvements

On mobile platforms, the webpage can become less responsive (i.e. frame rate can drop below 60 FPS, especially on older/weaker mobile platforms).

I see that in your run-time dependencies you depend on d3, highcharts, apexcharts and fushioncharts. These dependencies are not light weight by any means.

Consider incorporating something like webpack or rollup to do several tasks:

• Dead code elimination (tree-shaking) to reduce built .js size.
• Serve the run-time javascript through multiple files to mitigate blocking time on waiting for a large single file (see webpack chunks).
• Minification (reduce whitespaces, reduce build javascript size, reduce network bandwidth usage).
• Consider dynamic imports import() as recommeded in webpack so you need not load everything at once (see Code Splitting | Webpack Guides).

Ignore generated files

The dist/ directory contains generated files which should be ignored, as it is extremely easy to become stale.

For deployment, consider configuring a CI/CD (such as Travis). Might be easier if you write a small build script that:

• Deletes dist/ if it exists.
• Runs suitable build commands.
• Upload the generated files to the correct remote.