https://github.com/shikhu51197/materailui-dashboard

This React component integrates Chart.js to create a line chart representing revenue data over a period and a doughnut chart representing revenue growth.
https://github.com/shikhu51197/materailui-dashboard

chartjs expressjs figma material-ui nodejs react-chartjs-2 reactjs

Last synced: 3 months ago
JSON representation

This React component integrates Chart.js to create a line chart representing revenue data over a period and a doughnut chart representing revenue growth.

• Host: GitHub
• URL: https://github.com/shikhu51197/materailui-dashboard
• Owner: shikhu51197
• Created: 2024-01-27T20:13:08.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-02-04T22:10:37.000Z (over 1 year ago)
• Last Synced: 2025-01-31T15:41:39.918Z (5 months ago)
• Topics: chartjs, expressjs, figma, material-ui, nodejs, react-chartjs-2, reactjs
• Language: JavaScript
• Homepage: https://chakr-innovation-pvt-ltd-ckli.vercel.app/
• Size: 1.58 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
> 💻 PROJECT NAME ✨ => 💻  : Revenue Chart Dashboard 🧑‍🏫




✨ Welcome to my Chakr-Innovation Dashboard! This application allows users to explore Revenue & Profit Chart data in a user-friendly interface.

---

[![Backend Deploy to Render ](https://img.shields.io/badge/Backend_Deployed_Render_Link-0A66C2?style=for-the-badge&logo=ko-fi&logoColor=white)](https://chakr.onrender.com/api/downsampled)

[![Deployed App Vercel Link](https://img.shields.io/badge/Deployed_App_Vercel_Link-000?style=for-the-badge&logo=ko-fi&logoColor=white)](https://chakr-innovation-pvt-ltd-ckli.vercel.app/)

---

## 🔗 Profile Links✨

| Resume | Github                                                                                                                                   | Linkedin                                                                                                                                                            | Portfolio                                                                                                                                    | Blogger                                                                                                                                                           | Medium                                                                                                                                    |

| ------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------- |

| [![Resume](https://img.shields.io/badge/my_Resume-E75480?style=for-the-badge&logo=ko-fi&logoColor=white)](https://drive.google.com/file/d/1YE62u2ChjmlR-EKeqZ75UvFMg_KcY86T/view?usp=sharing) | [![github](https://img.shields.io/badge/github-1DA1F2?style=for-the-badge&logo=github&logoColor=white)](https://github.com/shikhu51197/)| [![linkedin](https://img.shields.io/badge/linkedin-0A66C2?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/shikha-gupta-12a2b5199) |[![portfolio](https://img.shields.io/badge/my_portfolio-18A303?style=for-the-badge&logo=ionic&logoColor=white)](https://shikhu51197.github.io/) |[![Blogger](https://img.shields.io/badge/Blogger-FE5A1D?style=for-the-badge&logo=Blogger&logoColor=white)](https://wwwartificial-intelligence.blogspot.com/) |[![Medium](https://img.shields.io/badge/Medium-000?style=for-the-badge&logo=Medium&logoColor=white)](https://medium.com/@sg780060) |  

---

## 💫Tech-Stack->

- #### For Frontend:-

  

   - `HTML5`

   - `CSS3`

   - `JavaScript`

   - `ReactJS`

    

 - #### For Backend:-

   

   - `NodeJS`

   - `ExpressJS`

     

- #### For deploy database:- 

    

   - `Render`

   

- #### For Styling:-

  

  - `MaterialUi`

  

- #### For live Project: -

  - `Vercel`

  

---

## ⭕Steps to run our project:

✨Clone the repository.

✨Run the command `npm install` in both the frontend and backend folders.

✨Run the command `npm run dev` in the backend folder.

✨Run the command `npm start` in the frontend folder on localhost:3000.

---

# About Project✨ - 

This React component integrates Chart.js to create a line chart representing revenue data over a period and a doughnut chart representing revenue growth and also done ui according to the given Figma design.

## Features ✨:-

- Fetches revenue data from an API endpoint using Axios.

- Calculates and displays the revenue growth percentage.

- Utilizes the Chart.js library for creating interactive charts.

- Responsive design with adjustable options.

- used backend to sort data and make api for downsampling data.

# Usage

     Ensure that the Axios and react-chartjs-2 libraries are installed:-

    Customize the API endpoint in the Axios request inside the useEffect to match your data source.

    Adjust the chart data, styling, and options based on your specific requirements.

---

# Package.json(Dependency)✨:-

 | Serial No  | Backend  |  Frontend     |

| ----------- | ---------|-------------- |

| 1 | nodemon  | Materialui |

| 2 | body-parser  | react-chartjs-2 |

| 3 | cors  | react |

| 4 | express | axios |

---

    

Contributing

     💻 Contributions are welcome! Please follow the standard guidelines for contributing.

---

✨Thank You✨