This repository contains the code for a frontend assignment aimed at creating a single-page app for a GreenMentor Assignment. The project is designed to replicate the UI provided in the Figma design and implement various functionalities outlined in the problem statement.
-
Sidebar:
- Four options and one button.
- Clicking on the first option (Energy) should open collapsible multiple options.
-
Date Filters:
- Filtering out data for selected dates.
-
Charts and Tables:
- Populate charts and tables using the provided dataset.
- Legends can be switched off/on in all charts.
- The pie chart should adjust back to 100% based on the new distribution when any legend is switched off.
-
Supplier Table:
- YOY increase/decrease highlighted with colors (red for positive, green for negative) and the appropriate arrow type.
-
Responsiveness:
- Application should be responsive for multiple screen sizes.
-
Bonus:
- Bonus points for replicating the frame as it is in the Figma design.
- HTML
- CSS
- JavaScript
- React.js
- Chakra UI
- ReactChart2.js
- chart.js
- Clone the Repository:
bash git clone https://github.com/lovkumar120169/greenmentor_assignment.git
- Navigate to the Project Directory:
bash cd greenmentor-assignment
- Install Dependencies:
bash npm install
- Run the Application:
bash npm start
Open your browser and visit http://localhost:3000 to view the application.
Check out the live demo on Netlify.