react-app-simple-dashboard-page-pwa

A Simple Dashboard page using React JS, a JavaScript library to make awesome UI by Facebook and Chart JS for plotting charts.

This application uses component oriented UI creation paradigm. All components are written in JSX and ES6 style and are combined to get a single build for production purpose using Webpack 5.

Babel is used to transpile all JSX code to vanilla JavaScript. For UI creation HTML5 and CSS3 are used. Fontawesome icons are added for aesthetic purpose.

This is a responsive web application for viewing in both Mobile and Desktop.

All the charts are drawn by a popular library named react-chartjs-2 . It is a Progressive Web Application(PWA).

Features

1. Code is rewritten with latest version of React JS.
2. Latest features of JavaScript i.e. ESNext is used.
3. Charts are plotted with react-chatjs-2.
4. This is a Simple Dashboard page Application.

Charts

• Charts are upadated when user changes the hourly watching rate of channel viewing.
• Maximum and minimum values of the hourly rate is 24 and 0 respectively.

• Three types of chart namely Pie, Doughnut and Bar is available.
• Tooltips on each of the graph is supported.
• Legend and title showing for data indication is supported.

Carousel

• Next image can be seen by clicking > button. Next button will not be shown when the last image is reached.
• Previous image can be seen clicking < button. While loading the first image previous button will not be there for obvious reason.

7. No database / storage is there. So no changes are persistant.
8. As it is a Progressive Web Application(PWA) it supports features like installability, offline load through manifest.json and Service Worker.
9. Some of Unit Test Cases are added using Jest and React Testing Library.

Installation

Clone the repository:

$ git clone https://github.com/anijitsao/react-app-simple-dashboard-page-pwa.git

Navigate inside the directory and install all the dependencies:

$ cd react-app-simple-dashboard-page-pwa

# install dependencies
$ npm install

Now run the application

$ npm start

# Optional to run test cases
$ npm test

Open the localhost:8080/ in a web browser. Change the hourly watching values of the popular channels and see the changes in the graph. Choose the graph types from DOUGHNUT, PIE and BAR for different types of output.

tested with latest version of Google Chrome and Mozilla Firefox

Screenshots

Some screens of the application is given below for better understanding.

Desktop as well as Mobile version of the screenshots are given side by side.

Home Screen

Pie Chart

Bar Chart

Tooltips of each chart