https://github.com/saikiran76/charts

https://github.com/saikiran76/charts

javascript react react-chartjs-2 react-icons reactjs recharts

Last synced: 25 days ago
JSON representation

• Host: GitHub
• URL: https://github.com/saikiran76/charts
• Owner: saikiran76
• Created: 2024-06-01T16:29:47.000Z (about 2 years ago)
• Default Branch: master
• Last Pushed: 2024-06-02T17:26:49.000Z (about 2 years ago)
• Last Synced: 2025-01-01T14:46:32.240Z (over 1 year ago)
• Topics: javascript, react, react-chartjs-2, react-icons, reactjs, recharts
• Language: JavaScript
• Homepage: https://charts-pi-three.vercel.app
• Size: 587 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Charts Dashboard

## Techstack





## Overview

This is a Dashboard page built using React which makes use of libraries like `react-charts-2` , `recharts` for chart components. Based on the network security related data for different kind of activities like anamoilies, or potential or suspicious activities. (while connection to MYSQL Database)

For more visit the official docs of react-spring, Firebase, material-ui(mui-rte): 

`https://recharts.org/en-US/`

`https://react-chartjs-2.js.org/components`

`https://www.chartjs.org/docs/latest/getting-started/`

## Report on Component Structure and Managament of states 

### Component Structure

### Chart Components

- Pie Chart/ Dashbord component

- Area plot Component

- BarChart component

## Snaps of the project

![image](https://github.com/saikiran76/Charts/assets/80874246/281832ae-d7db-4d1f-8a92-4b39967009b7)

![image](https://github.com/saikiran76/Charts/assets/80874246/be71b967-7d11-4617-8656-48d79c9fce46)

![image](https://github.com/saikiran76/Charts/assets/80874246/3353c011-1833-4c55-b6c5-d5ef200c3f55)

![image](https://github.com/saikiran76/Charts/assets/80874246/cd2b578e-ecc1-407c-aab2-ea276c9409b6)

## Local Setup

1) Clone the project using the command `git clone https://github.com/saikiran76/Charts.git`

2) cd into the project: `cd Charts`

3) Install the required dependencies using: `npm install`

4) Start and run the project on local host: `npm start`