https://github.com/vishant007/datavisualizeapi
Fetching data from an API, visualizing it in a table format with pagination, search, and filtering options, and generating charts using Chart.js.
https://github.com/vishant007/datavisualizeapi
axios chartsjs react-dom react-icons react-table reactjs tailwindcss
Last synced: 2 months ago
JSON representation
Fetching data from an API, visualizing it in a table format with pagination, search, and filtering options, and generating charts using Chart.js.
- Host: GitHub
- URL: https://github.com/vishant007/datavisualizeapi
- Owner: vishant007
- Created: 2024-02-21T11:38:28.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-23T20:45:18.000Z (over 2 years ago)
- Last Synced: 2025-01-10T19:27:17.443Z (over 1 year ago)
- Topics: axios, chartsjs, react-dom, react-icons, react-table, reactjs, tailwindcss
- Language: JavaScript
- Homepage:
- Size: 505 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
## Features:
- API Integration: Fetched data from given API Endpoint.
- Showed data in a tabular format Implement
- Applied Pagination
- Search Bar (name)
- Filter Option (zone, device_brand)
- Download button to download the current data as a CSV.
- Bar Charts for mentioned conditions which was in assignment.
- Fully responsive
- Logic of code is mentioned in code through comments
## Tech-Stack:
- Axios, React, Tailwind-CSS, Charts.js, React-table, React-dom, React-icons
## Demo:
https://github.com/vishant007/altorsmartmobility-assignment/assets/64253459/e7aa9c24-22b7-4f12-a7ee-e7f4b4384252
## Steps To Run:
```bash
npm install
npm start
```