Aseem - Phase 2 - Improve filters planned vs actual cost chart#4310
Aseem - Phase 2 - Improve filters planned vs actual cost chart#4310aseemdeshmukh wants to merge 12 commits into
Conversation
…filters-plannedvsactual-costchart
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
aseemdeshmukh
added
the
High Priority - Please Review First
aseemdeshmukh
requested review from
1709abhishek,
Aswin20010,
ChinmayJoshi98,
ChitraSiddharthan,
DiyaWadhwani,
Hritvik111,
aayushshetty12,
abhirambj,
akshit0211,
dipti95,
shashank-madan and
sumedhkumar96
one-community
changed the title
Sriamshreddy000
left a comment
Sriamshreddy000
left a comment
There was a problem hiding this comment.
Hi Aseem,
I tested this PR locally, logged in as admin and navigated to Dashboard/TotalConstructionSummary and "Financials". The UI loads correctly, and both new features, the tooltips on bar hover and the “Reset Filter” button are working as expected. The text is clear and readable, and the chart displays properly in both light and dark modes. Everything looks good from my side.
I'm attaching screenshots for reference.
smohansatyaram
left a comment
smohansatyaram
left a comment
There was a problem hiding this comment.
Hi Aseem, I tested this PR locally. The UI updates look good, and both the tooltip hover and the reset filter button are working properly. The labels/text are readable, and the bar chart displays correctly in both light and dark mode. Everything seems to be functioning as expected on my side.
Raghu04122002
left a comment
Raghu04122002
left a comment
There was a problem hiding this comment.
I ran this PR locally, signed in as an admin, and checked http://localhost:5173/bmdashboard/totalconstructionsummary . The interface loaded without issues, the hover tooltips on the bars and the “Reset Filter” button are functioning correctly. The chart displayed properly in both light and dark themes and the text is readable
Prem203
left a comment
Prem203
left a comment
There was a problem hiding this comment.
Reviewed the PR with an admin account. The tooltip now appears over the bar graph over every filter and dark mode. The UI seems consistent and the graph does not leak out of its border.
The only issue is in tablet resolution the graph is cut off from the screen and in mobile devices the graph data is overlapping and not clearly visible.
bhanuanishakkineni
left a comment
bhanuanishakkineni
left a comment
There was a problem hiding this comment.
Hello Aseem,
I have reviewed this PR though checking out to this branch and logging in as an admin.
From my testing, I observed that the filters like project, category, start date, end date are aligned and reset filters button are working fine.
The issues I observed are:
The container is rigid and is not responsive. For shorter screen sizes, the filter container and the plots container are not shrinking, rather they are rigid and are not visible.
For this issue, I think you should use responsive grid instead of fixed.
Apart from that, can you explain what are the dummy cards in grid. Instead of using those to fill empty columns, try to span the columns
If switched to dark only background of the plots is changing to dark, rest of the container is light. Also some text is not visible in dark mode.
Try reducing font size in mobile screen size, for better readability.
PR.4310.testing.mp4
|
Anusha-Gali
left a comment
Anusha-Gali
left a comment
There was a problem hiding this comment.
Hi Aseem,
I have re-reviewed your PR locally and all the filters work as per requirement and the chart is visible in dark mode. Also the responsiveness i can see that you have updated the code for bigger screen size since that issue appears to be fixed but the issue still exists in the smaller screen size. Do let me know in case of any update.
roshini1212
left a comment
roshini1212
left a comment
There was a problem hiding this comment.
Hi Aseem,
Found a critical issue: the chart displays "Failed to load data" error and doesn't render any graph data.
|
Hi Aseem, while testing I came across an issue where the chart isn’t rendering and displays a “Failed to load financials” error. |
|
Hi @aseemdeshmukh the feature works as expected in both dark and light mode. The layout remains stable when resizing the window, but a small portion of the page gets cut off. |
|
Fixed the mobile version as much as possible and Jae has approved the mobile version resolution not working perfectly and if gets cut a bit. Thank you! |
Anusha-Gali
left a comment
Anusha-Gali
left a comment
There was a problem hiding this comment.
hi Aseem,
Thanks for the update. Since the main feature of tooltips, reset filter do work , i am approving the PR.
HemanthNidamanuru
left a comment
HemanthNidamanuru
left a comment
There was a problem hiding this comment.
Hi Aseem,
I reviewed the PR locally and verified that the tooltips are working properly, the text is readable, the reset filter button functions correctly.
rohanrastogi311
left a comment
rohanrastogi311
left a comment
There was a problem hiding this comment.
Hi Aseem,
The dark mode functionality needs improving. Check image below.
| const [endDate, setEndDate] = useState(''); | ||
| const [data, setData] = useState([]); | ||
| const [errorMessage, setErrorMessage] = useState(''); | ||
| const [windowWidth, setWindowWidth] = useState(window.innerWidth); // for responsiveness of labels |
This comment was marked as resolved.
This comment was marked as resolved.
Sorry, something went wrong.
ManojPuttaswamy
left a comment
ManojPuttaswamy
left a comment
There was a problem hiding this comment.
The bgColor, textColor, and gridColor variables are computed correctly but only on initial render, not when darkMode toggles
| {/* <div className={styles.card}> */} | ||
| <div style={{ width: '100%', padding: '0.5rem' }}> | ||
| <div style={{ textAlign: 'center', marginBottom: '0.75rem' }}> | ||
| <h4 style={{ margin: 0, color: '#000000ff', fontSize: '1.4rem' }}> |
There was a problem hiding this comment.
The color is hardcoded black even though darkMode and textColor are already computed and used elsewhere in the component.
saisandeepkoritala
left a comment
saisandeepkoritala
left a comment
There was a problem hiding this comment.
Hi Assem,
I ran your PR locally and filters are working as expected. The tooltips are working properly, the text is readable, the reset filter button functions correctly and when resized the UI didn't break. But the dark mode is causing styling issues for other components.
rajanidi1999
left a comment
rajanidi1999
left a comment
There was a problem hiding this comment.
Hi,
I have tested your PR locally and its running successfully as per instructions.
rithika-paii
left a comment
rithika-paii
left a comment
There was a problem hiding this comment.
Hi Aseem,
I reviewed this PR by checking out the branch and testing the changes locally as an admin. The filter functionality works well — filters such as project, category, start date, end date, and the reset filters button are aligned and functioning as expected.
However, I observed a few issues:
Responsiveness issue: The filter container and plots container are rigid and do not adapt to smaller screen sizes. On smaller screens, they do not shrink and are partially invisible. It would be better to use a responsive grid instead of fixed sizing to handle different screen sizes.
Grid layout concern: Could you clarify the use of dummy cards in the grid? Instead of using placeholder elements to fill empty columns, consider using column spanning for a cleaner layout.
Dark mode issue: In dark mode, only the plot's background changes, while the rest of the container remains in light mode. Additionally, some text is not visible, which affects readability.
Mobile readability: The font size appears large on smaller screens. Reducing the font size for mobile view would improve readability.
These issues should be addressed to ensure proper responsiveness, consistent styling, and a better user experience before this PR can be approved.
kunchalasireesha
left a comment
kunchalasireesha
left a comment
There was a problem hiding this comment.
Hi Aseem, it looks like this PR currently has merge conflicts with the base branch. Could you please rebase or merge the latest changes from development into your branch and resolve the conflicts? Once the build passes, I’ll finish the review.
saurabhdipte
left a comment
saurabhdipte
left a comment
There was a problem hiding this comment.
Hi Aseem,
I tested the PR locally by navigating to and checked the Financials section. The tooltips on the graph bars are working correctly, the text is readable, and the Reset Filter button functions as expected. However, I noticed two issues, in dark mode, the graph background turns dark navy which makes the bars and text difficult to read against the background (screenshot attached). Additionally, the Y-axis label is missing from the graph.
DeepighaJ
left a comment
DeepighaJ
left a comment
There was a problem hiding this comment.
Hi
Checkout to current branch and ran PR locally.
Logged in as Owner account.
Tooltip, Filters and Reset Filters are working as expected.
Dark mode does not displays properly.
Some text is not visible properly. Please refer below images.
|
Jaden300
left a comment
Jaden300
left a comment
There was a problem hiding this comment.
Tested the PR locally on the Planned vs Actual Cost Chart dashboard.
Dark mode styling appears to work correctly overall, and the updated chart text remains readable in both themes. Tooltip functionality on the visible financial chart bars is also working as expected.
However, some sections under the Financials dashboard do not load properly, including areas such as the Material Consumption view, which prevented full validation of tooltip behavior across all chart components.
Additionally, the “Reset Filter” button is not functioning correctly. Clicking it results in an “Error occurred” message instead of resetting the applied filters.
Overall, the primary chart UI updates are visible and partially functional, but there are still broken sections and filter reset issues that should be resolved before merge.
amaresh2001
left a comment
amaresh2001
left a comment
There was a problem hiding this comment.
Tested locally on branch: aseem-improve-filters-plannedvsactual-costchart
Tested:
- Planned vs Actual Cost chart loads correctly
- Hover tooltips show project name + planned/actual dollar values correctly
- The Reset Filter button clears all filters back to the default
- Project and Category dropdown filters update the chart correctly
- Chart bars, labels, and legend are readable
Issue:
Dark mode not fully implemented: the filter controls (Project, Category, Start Date, End Date, Reset Filter button) and section cards remain white/light-colored, creating an inconsistent appearance against the dark page background.
YSWFelicity
left a comment
YSWFelicity
left a comment
There was a problem hiding this comment.
Based on the instructions, light mode behaves mostly as expected. In dark mode, however, some other components render blank — this still needs improvement.
Mahitha-pasupuleti
left a comment
Mahitha-pasupuleti
left a comment
There was a problem hiding this comment.
Hello Aseem,
Tested this PR locally and verified the tooltip and Reset Filter functionality in the Financials section. The new features work as expected, and the layout appears clean, readable, and responsive in light mode. However, in dark mode, the chart and surrounding UI elements do not render as cleanly and appear somewhat inconsistent and cluttered compared to the light mode experience. While the functionality itself is working correctly, some styling refinements in dark mode would improve the overall user experience.
Abhi-R0211
left a comment
Abhi-R0211
left a comment
There was a problem hiding this comment.
Tested locally on branch aseem-improve-filters-plannedvsactual-costchart, logged in as admin, navigated to /bmdashboard/totalconstructionsummary -> Financials. Here is my analysis:
What's Working Well
- Light mode renders correctly — all three projects display with readable bars, labels, and y-axis values
- Tooltip on hover works as expected in light mode on desktop: shows project name, Planned, and Actual values with proper currency formatting (e.g. Project: Project B / Planned: $3,300 / Actual: $3,200)
- Project filter correctly narrows the chart to the selected project
- Category filter works correctly in combination with the project filter — Project A + Electrical shows Planned $1,500 / Actual $1,300
- Reset Filter clears all applied filters and restores the default chart view
Issues
- Dark mode — incomplete theming on filter controls and card container
In dark mode, only the chart plot area adopts a dark background. The filter controls (Project dropdown, Category dropdown, Start Date, End Date, Reset Filter button) and the surrounding card container remain white/light-colored, creating a visually inconsistent appearance against the dark page background. This has been flagged by prior reviewers and remains unresolved.
- Mobile (375px) — chart not scrollable, bars unreadable, tooltip non-functional
At 375px width the chart is not scrollable, bars are extremely narrow and cramped, x-axis labels are cut off, and the tooltip does not function.
- Tablet (768px) — chart not scrollable, filter row overflows
At tablet width the chart is also not scrollable. The filter row overflows its container, with the End Date field and Reset Filter button clipped off the right edge of the card.
AmaanSyed09
left a comment
AmaanSyed09
left a comment
There was a problem hiding this comment.
Verified:
-
Tooltip functionality is working correctly and displays project names with formatted planned and actual cost values.
-
Project and Category filters are functioning and update the chart based on the selected values.
-
The Reset Filter button correctly restores the default filter state.
-
Text, labels, and chart elements are readable in light mode.
Additional Observations:
-
Some Project + Category combinations return no results (for example, Project B + Electrical, Project B + Mechanical, etc.), while valid combinations display data correctly. During testing, data appeared only for:
Project A → Plumbing, Electrical
Project B → Plumbing, Structural
Project C → Electrical, Mechanical -
When no data matches the selected filters, the chart area becomes blank without any message indicating that no data is available for the selected criteria.
-
The date filters do not appear to work as expected. Changing the Start Date and End Date frequently results in the chart becoming empty, and I was unable to identify date ranges that produced different filtered results. It is unclear whether the selected dates are actually being applied to the dataset or if the available test data falls outside the selected ranges.
Issues Found:
-
Dark mode compatibility does not appear to be working correctly. In dark mode, all the section renders with a mostly white layout and poor text visibility, making it inconsistent with the rest of the dashboard and difficult to read.
-
Responsive behavior needs improvement on smaller screen sizes. During mobile viewport testing, portions of the chart and content were cut off horizontally, reducing readability and usability.
Screenshots attached:
Dnagabahiru
left a comment
Dnagabahiru
left a comment
There was a problem hiding this comment.
Tested the PR locally and verified the Financials section at /bmdashboard/totalconstructionsummary. Tooltips for the graph bars are working correctly, the text is readable in light mode, and the Reset Filter button functions as expected. The only issue identified is in dark mode, where the font/text is not visible due to a contrast or styling problem. Aside from the dark mode text visibility issue, the feature is working as expected.
|
Created a new PR and closing the current PR : #5369 |
20 participants
Description
Related PRS (if any):
NA
…
Main changes explained:
…
How to test:
a) tooltips are working properly for the bars in the graph
b) text is readable
c) reset filter button works
Screenshots or videos of changes:
Note:
Only new functionalities added in this PR is 1) Adding tooltips after hovering over the bars 2) Reset button to reset all the available filters.
Other changes made are only UI changes for the existing functionality.
ImproveFiltersUIPlannedVsActual-demo.mp4