Rithika taking over for Aditya-feat: Implement Material Usage vs Cost Correlation Chart for BM Dashboard - #4587
Conversation
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
one-community
added
the
High Priority - Please Review First
Anusha-Gali
left a comment
Anusha-Gali
left a comment
There was a problem hiding this comment.
Hi Aditya,
I have reviewed your PR locally and the functionality works as expected in both the modes. However the chart is not mobile responsive.
Hi Anusha, Screen.Recording.2026-02-18.at.8.06.51.PM.mov |
Anusha-Gali
left a comment
Anusha-Gali
left a comment
There was a problem hiding this comment.
Hi Aditya,
Thank you fixing the issue but this led to other issues popping up i.e
The below is how it looks on my mac with browser at 75% setting, you can compare this with my older images to see the difference
The below is how it looks on my mac with browser at 100% setting
You can also see how the toggle pretty much covers the chart
|
Hi Anusha, Screen.Recording.2026-03-02.at.8.01.53.PM.mov |
rithika-paii
changed the title
f166112 to
40ee4a8
Compare
DeepighaJ
left a comment
DeepighaJ
left a comment
There was a problem hiding this comment.
- X-axis currently displays project names instead of Quantity of materials used as specified in design requirements.
- Tooltip does not include Cost per Unit information.
- Legend differentiates metrics rather than material types.
- On selecting All material or All project its not shown selected in the dropdown.
|
Hi @DeepighaJ, All the requested changes have been addressed:
Also resolved the merge conflict with development and fixed all SonarQube issues. Please re-review when you get a chance. Thank you! |
4f52710 to
4cf399f
Compare
|
8afb26a to
5aefbd4
Compare
There was a problem hiding this comment.
Ran and tested the following PR locally
Verified the following:
- Test chart has the tooltip when hovered
- Dark Mode works
Testing in Light Mode
Recording.2026-06-27.003458.mp4
Testing in Dark Mode
Recording.2026-06-27.004023.mp4
Issues:
-
Expanding the Materical Consumption section causes the section to expand but everything after the Material Usage vs. Cost Correlation component gets deformed. And there's a bunch of empty white space.
-
The Projects and Material Types filter isn't fully working. I believe it is filtering given the bar chart visually changes, but the filter selection always states "All Projects" and "All Materials" are always filtered. Tried removing the filter, clearing it or selecting other filter options , and Reset All Filters, but same outcome.
-
In smaller browser sizes, there's a lot of empty space that could be used.
-
Hover tooltip has some issues
- Quantity in the hover tool tip has .00. Should just be a whole number.
- Instead of Project Name for the X axis label, it uses Project ID and some are blank
- Quantity in the hover tool tip has .00. Should just be a whole number.
c2e9c5e to
b123dac
Compare
DeepighaJ
left a comment
DeepighaJ
left a comment
There was a problem hiding this comment.
- The chart does not fully reflect the selected filters. Multiple material types are selected, but only Cement and Sand are displayed. If other selected materials have no data, the UI should indicate this; otherwise, all selected materials should be represented.
- The calendar needs improvement.
HemanthNidamanuru
left a comment
HemanthNidamanuru
left a comment
There was a problem hiding this comment.
Hi,
I tested this PR locally.
The chart does not fully reflect the selected filters. Multiple material types are selected, but only Cement and Sand are displayed.
Also, the selected date styling needs improvement in dark mode, and the typed values in the Projects and Material Types fields are not clearly visible in dark mode.
kzou55
left a comment
kzou55
left a comment
There was a problem hiding this comment.
Hi Rithika,
I ran and tested the PR alongside its associated backend again.
Issues
- The Projects and Material Types filter has some issues. When the user first filters by one of the dropdown and the chooses the filter "All Projects" or "All Material", those options fail to get selected.
Recording.2026-07-04.185759.mp4
-
The bar chart/graph isn't showing all the materials sometimes.
-
If the chart shows no data, shouldn't it "No data available for selected filters"?
-
Date filter error. Can't reset the section if there was an error. Clicking retry just causes the same issue to occur. Have to refresh to revert back the error. A bit inconsistent to replicate. But this occurs when a user selects a valid start and end date. Only to clear the start date, which makes it think the start date is today. Sometimes clearing the start date is fine, other times, it gets the issue below.
Recording.2026-07-04.185506.mp4
6849a9d to
434e1d2
Compare
|
Hi @DeepighaJ @kzou55 @HemanthNidamanuru, Thanks for the detailed feedback — all issues reported across these reviews are now fixed: "All Projects"/"All Materials" reset bug: root cause was that handleProjectChange/handleMaterialTypeChange couldn't distinguish "user picked a real option while 'All' was showing" from "user picked 'All' while a real option was showing" — both produced identical intermediate state, so clicking "All" after a real selection silently did nothing. Fixed by comparing against the previous filter state to tell these cases apart. All frontend tests pass (2104 passed, 9 skipped) and stylelint is clean. Let me know if anything else comes up on retest. |
HemanthNidamanuru
left a comment
HemanthNidamanuru
left a comment
There was a problem hiding this comment.
Hi Aditya,
I tested this PR locally on the Aditya-feat/material-cost-correlation-chart branch.
I was able to navigate to BM Dashboard → Weekly Project Summary → Material Consumption section, but the Material Usage vs Cost Correlation title and graph are not loading/rendering even after clicking retry and reset filters buttons.
Because of this, I’m unable to properly verify the filters, tooltip, Y-axis/X-axis labels, responsive behavior, dark mode, error states, and chart integration.
DeepighaJ
left a comment
DeepighaJ
left a comment
There was a problem hiding this comment.
Hi
- Tested the PR locally and the previously mentioned issues are resolved and the graph is loading. 0 or No data avaialble is handled and the issue is fixed.
- The calendar allows future dates as well and the icon is not calendar icon, a circle is shown instead.
- The total Material Cost per project graph values needs improvement in dark mode. Does this come under scope for this PR?
kzou55
left a comment
kzou55
left a comment
There was a problem hiding this comment.
Hi Rithika,
I ran and tested the PR and its associated backend locally again.
Verified
- Confirmed that all the functionality remains the same
- The issue where the user first filters by one of the dropdown and then chooses the filter "All Projects" or "All Material", previously those options fail to get selected, but the issue has been resolved
- The issue with the chart not including certain material types when selected in the filter has been fixed.
- Unable to replicate the start date clearing that caused the issue where it would make the chart crash. Believe this issue is fixed now.
Recording.2026-07-10.230653.mp4
…le and tablet - Add breakpoints for mobile (≤480), iPad Mini (≤768), iPad Pro (≤1024) - X-axis: vertical labels (-90°) on mobile/tablet small, interval to show ~5-8 labels - X-axis: shorter truncation on small screens (8/10/12 chars) - Y-axis: short labels (Cost ×1k$, Qty Used) and narrower width on ≤768px - Responsive margins and chart height by viewport Co-authored-by: Cursor <cursoragent@cursor.com>
…viewports - Add min-width: 0 on container and chartContainer for flex shrink - Add overflow-x: auto and touch scrolling on chart container - Add box-sizing: border-box on container Co-authored-by: Cursor <cursoragent@cursor.com>
…ter grid - Move preset date-range shortcuts to full-width row below filter grid - Reduce filter grid min column width (280px -> 160px) and gap for flexibility - Simplify preset button layout; remove mobile-only column/full-width overrides Made-with: Cursor
- Replace window resize listener with ResizeObserver on chart container - Breakpoints now based on rendered container width (narrow <500px, medium <700px) - Reduces min-heights so chart height adapts to grid column width Made-with: Cursor
…yout - Render Material Consumption as single grid with three cards (chart, quantity, cost) - Add materialConsumptionGrid styles; single column on viewport <=768px - Add padding-bottom to container so scroll-to-top button does not obscure content Made-with: Cursor
…px for tablets Add media query so materialConsumptionGrid uses single column on tablet screens for better readability before the existing 768px small-screen breakpoint. Made-with: Cursor
…ignment and nested ternary
…ialCostCorrelationChart
…rialCostCorrelation
…formatting, project/material name fallback
…/material name labels
…ark mode issues in Material Cost Correlation chart
… styling, legend contrast
4c64054 to
cf213fd
Compare
|
7 participants
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)