kiranwankhade / marbleai

Figma Design For Mable AI

Assignment README

Web Application Development

This repository contains the implementation of a web application feature as part of an assignment. The goal is to utilize the provided template and integrate a comparison feature for selected metrics in two different time periods. Additionally, there is an option to include a date range picker to allow users to customize the time periods for comparison.

Features Implemented:

1. Metric Comparison Panel: Replaces or edits the existing charts panel in the provided template to display the comparison of selected metrics in two time periods.

2. Date Range Picker: Optionally, a date range picker is included at the top of the panel, enabling users to select periods for comparison.

Mock Data:

The assignment utilizes mock data provided within the template. However, modifications or additions to the mock data can be made as needed for the assignment.

Figma Design Reference:

The design prototype for the component to be created/integrated can be found in the provided Figma link. Figma Design: Figma, Prototype

Tech Stack:

• React: Utilized for building the frontend components and managing the UI.
• @refinedev/core: Library used for CRUD operations and data management.
• dayjs: Dependency for date manipulation and formatting.
• recharts: Used for rendering responsive and customizable charts within the application.
• react-icons: Provides access to a library of icons for UI elements.
• react-date-range: Component utilized for implementing the date range picker functionality.
• Modal: Component for displaying modal dialogs in the application.

Implementation Details:

The assignment has been implemented following best architectural and coding practices. The UI is designed to be bug-free and match the look and feel of the provided design in the Figma link.

Components:

1. Dashboard Component: This component serves as the main dashboard interface, displaying the comparison panels and other relevant information.

2. LineChart Component: Handles the rendering of line charts for the selected metrics. It also includes the functionality for the date range picker and options editing.

Screenshots:

Assignment README

Web Application Development

This repository contains the implementation of a web application feature as part of an assignment. The goal is to utilize the provided template and integrate a comparison feature for selected metrics in two different time periods. Additionally, there is an option to include a date range picker to allow users to customize the time periods for comparison.

Features Implemented:

1. Metric Comparison Panel: Replaces or edits the existing charts panel in the provided template to display the comparison of selected metrics in two time periods.

2. Date Range Picker: Optionally, a date range picker is included at the top of the panel, enabling users to select periods for comparison.

Mock Data:

The assignment utilizes mock data provided within the template. However, modifications or additions to the mock data can be made as needed for the assignment.

Figma Design Reference:

The design prototype for the component to be created/integrated can be found in the provided Figma link. Figma Design: Figma, Prototype

Tech Stack:

• React: Utilized for building the frontend components and managing the UI.
• @refinedev/core: Library used for CRUD operations and data management.
• dayjs: Dependency for date manipulation and formatting.
• recharts: Used for rendering responsive and customizable charts within the application.
• react-icons: Provides access to a library of icons for UI elements.
• react-date-range: Component utilized for implementing the date range picker functionality.
• Modal: Component for displaying modal dialogs in the application.

Implementation Details:

The assignment has been implemented following best architectural and coding practices. The UI is designed to be bug-free and match the look and feel of the provided design in the Figma link.

Components:

1. Dashboard Component: This component serves as the main dashboard interface, displaying the comparison panels and other relevant information.

2. LineChart Component: Handles the rendering of line charts for the selected metrics. It also includes the functionality for the date range picker and options editing.

Screenshots:

1. Initialize

2. Data Fetch

3. Date Picker

4. After Date Selected

Instructions:

To run the web application:

1. Clone the repository to your local machine.
2. Navigate to the project directory.
3. Install dependencies using npm install or yarn install.
4. Start the development server using npm start or yarn start.
5. Access the application in your web browser at the specified URL.

Notes:

Please refer to the documentation within the codebase for detailed explanations of implementation decisions, assumptions made, and additional instructions for running and using the web application.

For any further inquiries or assistance, feel free to contact the repository owner.

Instructions:

To run the web application:

1. Clone the repository to your local machine.
2. Navigate to the project directory.
3. Install dependencies using npm install or yarn install.
4. Start the development server using npm start or yarn start.
5. Access the application in your web browser at the specified URL.