{"id":18562857,"url":"https://github.com/kiranwankhade/marbleai","last_synced_at":"2026-05-16T11:02:22.483Z","repository":{"id":224806625,"uuid":"763525955","full_name":"kiranwankhade/marbleAI","owner":"kiranwankhade","description":"Figma Design For Mable AI","archived":false,"fork":false,"pushed_at":"2024-02-29T07:33:13.000Z","size":1456,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-17T12:45:44.818Z","etag":null,"topics":["react","reactchartjs","reactdatepicker","reactmodal","reacttsx"],"latest_commit_sha":null,"homepage":"https://marbleai.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/kiranwankhade.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-02-26T13:13:24.000Z","updated_at":"2024-02-27T18:49:25.000Z","dependencies_parsed_at":null,"dependency_job_id":"e28d9cc8-12d0-4bd0-af68-726c9ec328de","html_url":"https://github.com/kiranwankhade/marbleAI","commit_stats":null,"previous_names":["kiranwankhade/marbleai"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiranwankhade%2FmarbleAI","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiranwankhade%2FmarbleAI/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiranwankhade%2FmarbleAI/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/kiranwankhade%2FmarbleAI/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/kiranwankhade","download_url":"https://codeload.github.com/kiranwankhade/marbleAI/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254394726,"owners_count":22063984,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","reactchartjs","reactdatepicker","reactmodal","reacttsx"],"created_at":"2024-11-06T22:11:12.165Z","updated_at":"2025-10-23T22:52:15.723Z","avatar_url":"https://github.com/kiranwankhade.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Assignment README\n\n## Web Application Development\n\nThis 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.\n\n### Features Implemented:\n\n1. **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.\n\n2. **Date Range Picker**: Optionally, a date range picker is included at the top of the panel, enabling users to select periods for comparison.\n\n### Mock Data:\n\nThe assignment utilizes mock data provided within the template. However, modifications or additions to the mock data can be made as needed for the assignment.\n\n### Figma Design Reference:\n\nThe design prototype for the component to be created/integrated can be found in the provided Figma link. [Figma Design: Figma, Prototype](https://www.figma.com/)\n\n### Tech Stack:\n\n- **React**: Utilized for building the frontend components and managing the UI.\n- **@refinedev/core**: Library used for CRUD operations and data management.\n- **dayjs**: Dependency for date manipulation and formatting.\n- **recharts**: Used for rendering responsive and customizable charts within the application.\n- **react-icons**: Provides access to a library of icons for UI elements.\n- **react-date-range**: Component utilized for implementing the date range picker functionality.\n- **Modal**: Component for displaying modal dialogs in the application.\n\n## Implementation Details:\n\nThe 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. \n\n### Components:\n\n1. **Dashboard Component**: This component serves as the main dashboard interface, displaying the comparison panels and other relevant information.\n\n2. **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.\n\n### Screenshots:\n\n# Assignment README\n\n## Web Application Development\n\nThis 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.\n\n### Features Implemented:\n\n1. **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.\n\n2. **Date Range Picker**: Optionally, a date range picker is included at the top of the panel, enabling users to select periods for comparison.\n\n### Mock Data:\n\nThe assignment utilizes mock data provided within the template. However, modifications or additions to the mock data can be made as needed for the assignment.\n\n### Figma Design Reference:\n\nThe design prototype for the component to be created/integrated can be found in the provided Figma link. [Figma Design: Figma, Prototype](https://www.figma.com/)\n\n### Tech Stack:\n\n- **React**: Utilized for building the frontend components and managing the UI.\n- **@refinedev/core**: Library used for CRUD operations and data management.\n- **dayjs**: Dependency for date manipulation and formatting.\n- **recharts**: Used for rendering responsive and customizable charts within the application.\n- **react-icons**: Provides access to a library of icons for UI elements.\n- **react-date-range**: Component utilized for implementing the date range picker functionality.\n- **Modal**: Component for displaying modal dialogs in the application.\n\n## Implementation Details:\n\nThe 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. \n\n### Components:\n\n1. **Dashboard Component**: This component serves as the main dashboard interface, displaying the comparison panels and other relevant information.\n\n2. **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.\n\n### Screenshots:\n\n1. **Initialize**\n![MA8](https://github.com/kiranwankhade/marbleAI/assets/49937312/9cfba400-5a63-4b15-91e6-470453122df1)\n\n2. **Data Fetch**\n![MA9](https://github.com/kiranwankhade/marbleAI/assets/49937312/1bcb9120-5196-4602-a497-78f98d99d19c)\n\n\n![MA4](https://github.com/kiranwankhade/marbleAI/assets/49937312/5396ed19-144e-4c2f-a4a3-05086a0dc475)\n\n3. **Date Picker**\n\n![MA10](https://github.com/kiranwankhade/marbleAI/assets/49937312/7e3ca7ad-7646-40a8-a225-9194bf1cdd69)\n\n\n\n4. **After Date Selected**\n\n\n![MA7](https://github.com/kiranwankhade/marbleAI/assets/49937312/63746689-1739-4c5d-9829-cf6ba7b34e62)\n\n### Instructions:\n\nTo run the web application:\n\n1. Clone the repository to your local machine.\n2. Navigate to the project directory.\n3. Install dependencies using `npm install` or `yarn install`.\n4. Start the development server using `npm start` or `yarn start`.\n5. Access the application in your web browser at the specified URL.\n\n## Notes:\n\nPlease 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.\n\nFor any further inquiries or assistance, feel free to contact the repository owner.\n\n\n\n### Instructions:\n\nTo run the web application:\n\n1. Clone the repository to your local machine.\n2. Navigate to the project directory.\n3. Install dependencies using `npm install` or `yarn install`.\n4. Start the development server using `npm start` or `yarn start`.\n5. Access the application in your web browser at the specified URL.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiranwankhade%2Fmarbleai","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkiranwankhade%2Fmarbleai","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkiranwankhade%2Fmarbleai/lists"}