{"id":25452786,"url":"https://github.com/yllvar/my-react-dashboard","last_synced_at":"2025-05-16T13:10:30.353Z","repository":{"id":274434796,"uuid":"922879383","full_name":"yllvar/my-react-dashboard","owner":"yllvar","description":"my-react-dashboard","archived":false,"fork":false,"pushed_at":"2025-02-03T11:42:43.000Z","size":43,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-17T23:41:56.319Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"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/yllvar.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":"2025-01-27T08:54:10.000Z","updated_at":"2025-02-03T11:42:46.000Z","dependencies_parsed_at":"2025-02-17T23:41:40.767Z","dependency_job_id":"237eeb26-338c-4b2c-9c7a-2f385acf61a9","html_url":"https://github.com/yllvar/my-react-dashboard","commit_stats":null,"previous_names":["yllvar/my-react-dashboard"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yllvar%2Fmy-react-dashboard","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yllvar%2Fmy-react-dashboard/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yllvar%2Fmy-react-dashboard/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/yllvar%2Fmy-react-dashboard/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/yllvar","download_url":"https://codeload.github.com/yllvar/my-react-dashboard/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254535822,"owners_count":22087399,"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":[],"created_at":"2025-02-17T23:41:35.751Z","updated_at":"2025-05-16T13:10:30.332Z","avatar_url":"https://github.com/yllvar.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-assessment\n\n## Node version 20.x\n\n## Instructions\nPlease clone this repo and do the following assessment:\n\nCreate a resize and reposition using appropriate libs to the below charts and tables with the following mock data from Redux.\n- tables\n- line charts\n- pie charts\n- bar charts\n\n_____\n# React Assessment - Project Documentation\n\n## Project Overview\nThis documentation covers the modifications and enhancements made to the original react-assessment project, implementing a responsive dashboard with resizable and repositionable components using Redux for state management.\n\n## Known Issues and Solutions\n\n1. Chart resize performance\n\n1.1. Implemented debouncing\n\n1.2. Added size change detection\n\n\n2. Mobile layout optimization\n\n2.1. Added specific breakpoints\n\n2.2. Modified minimum widget sizes\n\n## Usage Instructions\n\n### Widget Interaction\n\n1. **Repositioning**\n\n1. Drag widgets using the header bar\n2. Widgets automatically snap to grid\n3. Layout saves automatically\n\n\n2. **Resizing**\n\n1. Use the bottom-right corner handle\n2. Maintains minimum sizes\n3. Responsive content scaling\n\n\n### Data Management\n\n- All data is managed through Redux\n- Real-time updates reflect immediately\n- Persistent state management\n- Type-safe data handling\n\n## Major Changes and Implementations\n\n### 1. Dashboard Layout Implementation\n- Implemented responsive grid layout using `react-grid-layout`\n- Added drag-and-drop functionality for widget repositioning\n- Implemented widget resizing with maintained aspect ratios\n- Created a responsive layout system for different screen sizes (lg, md, sm)\n\n### 2. Data Visualization Components\n#### Charts Implementation\n1. **Line Chart (Monthly Performance)**\n   - Implemented using Recharts\n   - Displays sales, revenue, and profit metrics\n   - Responsive design with automatic resizing\n   - Real-time data updates from Redux store\n\n2. **Pie Chart (Category Distribution)**\n   - Shows product category distribution\n   - Interactive tooltips and legends\n   - Custom color scheme implementation\n   - Percentage calculations and display\n\n3. **Bar Chart (Quarterly Sales)**\n   - Comparison between online and offline sales\n   - Responsive axes and grid\n   - Interactive data display\n   - Custom styling and animations\n\n#### Tables Implementation\n1. **Users Table**\n   - Sortable columns\n   - Status indicators with color coding\n   - Responsive design with horizontal scrolling\n   - Efficient data rendering\n\n2. **Products Table**\n   - Product inventory display\n   - Price formatting\n   - Stock level indicators\n   - Category organization\n\n### 3. State Management\n- Implemented Redux store with separate slices:\n  - `chartSlice`: Manages all chart data\n  - `tableSlice`: Handles table data\n- Added actions for data updates\n- Implemented selectors for efficient data access\n\n### 4. Styling and UI Improvements\n- Implemented responsive design patterns\n- Added widget headers with drag handles\n- Improved resize handles visibility and usability\n- Implemented consistent spacing and typography\n- Enhanced visual hierarchy with proper padding and margins\n\n### 5. Performance Optimizations\n- Implemented React.memo for performance\n- Added useMemo and useCallback hooks\n- Optimized Redux selectors\n- Improved component rendering efficiency\n\n#### Dependencies Added\n```json\n{\n  \"@reduxjs/toolkit\": \"^2.1.0\",\n  \"react-redux\": \"^8.0.2\",\n  \"recharts\": \"^2.15.0\",\n  \"react-grid-layout\": \"^1.3.4\",\n  \"react-resizable\": \"^3.0.4\"\n}\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyllvar%2Fmy-react-dashboard","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fyllvar%2Fmy-react-dashboard","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fyllvar%2Fmy-react-dashboard/lists"}