Aditya-feat: Implement Material Usage vs Cost Correlation Chart for BM Dashboard #4587
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
- Create materialCostCorrelationConstants.js with Redux action type constants - Add BM_MATERIAL_COST_CORRELATION endpoint to URL utilities - Define constants for fetch requests, filter updates, and reset actions
This reverts commit 9032777.
- Create materialCostCorrelationConstants.js with Redux action type constants - Add BM_MATERIAL_COST_CORRELATION endpoint to URL utilities - Define constants for fetch requests, filter updates, and reset actions
- Create materialCostCorrelationActions.js with action creators and thunk - Implement fetchMaterialCostCorrelation thunk with query parameter handling - Add date formatting helper for YYYY-MM-DD format - Create materialCostCorrelationReducer with initial state and switch cases - Register reducer in root reducer as materialCostCorrelation - Include error handling with toast notifications
- Create main MaterialCostCorrelationChart component with scatter and bar chart views - Implement FilterPanel with project, material type, and date range filters - Add ChartTypeToggle component for switching between chart types - Transform API data for Recharts consumption with proper data flattening - Implement custom tooltip with project, material, cost, and quantity details - Add color mapping for material types in scatter chart - Include loading, error, and empty state handling - Create barrel export for component directory
…st correlation - Implement CSS variables for theming with light and dark mode support - Style main chart component with responsive layout and proper spacing - Add comprehensive FilterPanel styling with react-select and datepicker support - Style ChartTypeToggle with active states and transitions - Add responsive media queries for tablet and mobile devices - Include focus-visible states for accessibility compliance - Style loading, error, and empty states with appropriate colors - Add proper tooltip and legend styling for both chart types
…ummary - Add MaterialCostCorrelationChart import to WeeklyProjectSummary component - Replace placeholder content at index 0 in Material Consumption section - Chart now appears as first card in Material Consumption section - Maintains existing card styling with weeklyProjectSummaryCard and normalCard classes
- Add comprehensive error handling in actions with validation, network, auth, and permission error detection - Implement date range and ObjectId validation before API calls - Add detailed console logging for debugging with timestamps and context - Enhance error display in component with error types, icons, and contextual hints - Add retry functionality for recoverable errors - Handle malformed responses with graceful fallbacks - Add optional chaining and fallback values for data transformation - Implement sessionStorage retry mechanism for authentication errors - Add reset filters button for empty state - Improve toast notification configuration with appropriate auto-close settings
- Remove all console.log, console.error, and console.warn statements - Replace with logger.logError for error logging - Replace with logger.logInfo for validation warnings - Remove debug console.log statements that are not needed in production - Ensure all logging goes through the logger service for proper error tracking
- Remove unused imports (BMError) and unused variables (meta, containerWidth) - Remove unused resize handler that was not being utilized - Add JSDoc comments to document component props and functionality - Add documentation for CustomTooltip, MaterialCostCorrelationChart, FilterPanel, and ChartTypeToggle components - Improve code maintainability by documenting complex logic sections
- Replace dual chart types (scatter and bar) with single ComposedChart - Add Line component for quantity data with dual Y-axes - Remove scatter chart functionality and toggle component - Update tooltip to show both cost and quantity values - Remove unused state, data transformations, and imports - Update chart information section to reflect combined visualization - Configure left Y-axis for cost and right Y-axis for quantity
- Delete ChartTypeToggle.jsx and ChartTypeToggle.module.css - No longer needed after converting to single combined chart - Chart type toggle functionality was removed in favor of combined bar+line visualization
- Remove chart information legend section from bottom of chart - Increase chart margins to accommodate axis labels (left: 80, right: 80, bottom: 100) - Add explicit width to Y-axes for proper label spacing - Truncate long project names on X-axis to prevent overflow - Remove X-axis label and adjust tick formatting - Set consistent font sizes for axis ticks (12px) - Add offsets to Y-axis labels for better positioning
- Reduce container padding from 20px to 12px - Reduce header margin-bottom from 24px to 12px - Reduce chart container padding from 24px to 12px - Reduce filter panel padding from 24px to 16px and margin-bottom from 24px to 12px - Reduce chart margins (top: 10px, sides: 60px, bottom: 80px) - Increase chart height from 500px to 600px to utilize freed space - Maintains UI integrity while maximizing chart visualization area
- Add responsive padding for tablets (1024px) and mobile devices - Reduce container padding progressively: 8px (1024px), 6px (768px), 4px (480px) - Reduce chart container padding for smaller screens - Reduce filter panel padding and margins for mobile devices - Add dynamic chart margins based on screen width - Add responsive chart height: 450px (mobile), 500px (tablet), 550px (small laptop), 600px (desktop) - Add window resize listener to update chart margins dynamically - Optimize spacing for iPhone XR, iPad, and other smaller screens
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Remove unnecessary if/else block where both branches executed identical toast.error calls. SonarQube issue resolved.
|
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Implements a new Material Usage vs Cost Correlation chart component for the BM Dashboard. The chart visualizes material quantity used vs total material cost per project using a combined bar/line chart (Recharts ComposedChart). Features include filtering (projects, material types, date ranges), dark mode support, responsive design, and error handling. Integrated into the Weekly Project Summary → Material Consumption section.
Related PRs (if any):
Main changes explained:
Created Files:
src/constants/bmdashboard/materialCostCorrelationConstants.jssrc/reducers/bmdashboard/materialCostCorrelationReducer.jssrc/actions/bmdashboard/materialCostCorrelationActions.jsprojectId(comma-separated),materialType(comma-separated),startDate(YYYY-MM-DD),endDate(YYYY-MM-DD)src/components/BMDashboard/MaterialCostCorrelation/MaterialCostCorrelationChart.jsxtotalCostK(blue #0088FE) on left Y-axis, Line chart:quantityUsed(orange #FF8042) on right Y-axissrc/components/BMDashboard/MaterialCostCorrelation/FilterPanel.jsxstate.bmProjectsandstate.bmInvTypes.listsrc/components/BMDashboard/MaterialCostCorrelation/MaterialCostCorrelationChart.module.csssrc/components/BMDashboard/MaterialCostCorrelation/FilterPanel.module.csssrc/components/BMDashboard/MaterialCostCorrelation/index.jsxModified Files:
src/utils/URL.js- AddedBM_MATERIAL_COST_CORRELATIONendpoint constantsrc/reducers/index.js- AddedmaterialCostCorrelationreducer to root reducersrc/components/BMDashboard/WeeklyProjectSummary/WeeklyProjectSummary.jsx- Integrated chart into Material Consumption section (index 0)Key Implementation Details:
/api/bm/materials/cost-correlation(GET) - Response:{ meta, data: [{ projectId, projectName, totals: { totalCostK, quantityUsed } }] }. Cost in USD,totalCostKpre-calculated. Empty filter arrays = fetch all items.useMemo.materialCostCorrelationmanagesloading,data,error,filters. Filter changes trigger auto-refetch via useEffect.state.theme.darkModeHow to test:
Aditya-feat/material-cost-correlation-chartrm -rf node_modules && yarn cache cleanyarn installand start the app:yarn start:localScreenshots:
TestVideo.mov
Notes:
useMemofor data transformation, API calls triggered on filter changes, and window resize listener cleaned up. Consider pagination for >100 projects.[MaterialCostCorrelation]prefix (replaces console statements)