COVID-19 Dashboard

Live demo: https://covid-dashboard-13e6.onrender.com/

A small client-side dashboard that visualizes COVID-19 statistics (cases, deaths, recoveries) per country. The project is built using Vite and Chart.js and uses a bundled static dataset.

Features

• List of countries with aggregated totals for cases, deaths and recoveries.
• Search countries by name (live text input).
• Filter data by month (YYYY-MM) using the date input + Apply Filter.
• Sort by cases (click the "Country" column header).
• Bar chart showing Cases / Deaths / Recoveries per country.
• Pure client-side app — no backend required.

Tech stack

• Node.js (development)
• Vite (dev server / build)
• Chart.js (visualization)
• Vanilla JavaScript, HTML, CSS

Quick start (run locally)

Prerequisites:

• Node.js (version 16+ recommended)
• npm (or yarn)

Commands:

1. Open a terminal and change into the dashboard folder:

   cd covid-dashboard
   

2. Install dependencies:

   npm install
   

3. Start the development server:

   npm run dev
   

   Vite will start and show a local URL (usually http://localhost:5173). Open that in your browser.

4. Build for production:

   npm run build
   

5. Preview the production build locally:

   npm run preview
   

How to use the UI

• Search: Type a country name (partial or full) into the "Enter Country Name" input; the list updates as you type.
• Date filter: Select a month using the date input (it selects a YYYY-MM) and click "Apply Filter". This shows only records from that month.
  • The date input yields a value like 2022-03. The app converts it to YYYY-MM and filters by the time field in the data.
• Sort: Click the "Country" header (the element with id sort-country) to sort results by cases (descending).
• Chart: The bar chart updates to reflect the currently displayed list.

Example:

• Type "India" in the search field — the table will show aggregated totals for India.
• Choose 2022-02 and click Apply Filter — the dashboard shows only entries for that month.

Project structure (important files)

• covid-dashboard/
  • index.html — app entry point
  • main.js — main client-side logic: event listeners, DOM updates, Chart.js configuration
  • process-data.js — data aggregation and filtering logic
  • covid-data.js — static data array (country objects with statistics entries)
  • style.css — styling
  • package.json — scripts and dependencies
  • Screenshot (580).png — preview image

Data format and updating data

The app uses a static JS file: covid-dashboard/covid-data.js. Each country object looks like:

{
  country: "CountryName",
  statistics: [
    { time: "YYYY-MM", cases: 1234, deaths: 12, recoveries: 1000 },
    ...
  ]
}

To update or add data:

• Edit covid-dashboard/covid-data.js and add or modify country objects following the same shape.
• The dashboard reads this file at build/run time (client-side import). After changes, restart the dev server if necessary.

Processing logic:

• process-data.js exports processData(covidData, countryName, selectedDate)
  • When countryName is provided: filters countries whose name includes the query (case-insensitive) and returns aggregated totals.
  • When selectedDate is provided: filters each country's statistics by time === selectedDate and returns aggregated totals for that month.
  • If neither provided: returns aggregated totals for each country across all times.

Deployment notes

This is a static front-end project built with Vite. After npm run build the dist folder contains static assets ready for any static host:

• GitHub Pages, Netlify, Vercel, Render, or other static host providers work well.
• Existing live deployment (example): https://covid-dashboard-13e6.onrender.com/

Troubleshooting & known limitations

• The dataset is static and bundled into the client. For real-time data, replace the static data with an API call and adapt process-data.js.
• Large covid-data.js may increase bundle size — for production consider loading data asynchronously (fetch JSON) instead of importing a large JS file.
• The date picker expects an HTML date input; filter expects YYYY-MM. If date parsing fails, ensure your browser supports <input type="date">.
• If Chart.js chart fails to render:
  • Ensure the canvas element (#canvas) exists and Chart is properly imported (Chart.js v4 used here).
  • Check the browser console for errors.

Contributing

• Contributions are welcome. For this simple project:
  • Fork the repository.
  • Make changes in a feature branch.
  • Submit a pull request with a concise description of the change.
• Please open an issue for major changes or bugs before submitting a PR.

Contact / Questions

If you have questions or need help, open an issue in this repository.

Enjoy exploring the dashboard!