Purav taking over for Juhitha-Reddy create injury trend chart - #5439
Purav taking over for Juhitha-Reddy create injury trend chart#5439pixelpix13 wants to merge 13 commits into
Conversation
…lters. Takes over PR #4063 on a fresh development base, wires trend-data APIs correctly, and fixes review issues around project filtering, filter layout, and dark mode. Co-authored-by: Cursor <cursoragent@cursor.com>
✅ Deploy Preview for highestgoodnetwork-dev ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
…link. Align title, legend, and filters; add month/year date dropdowns, responsive layout, All Projects demo data, and a BM Dashboard menu entry for the chart. Co-authored-by: Cursor <cursoragent@cursor.com>
…from those series. Ensures demo injuries are never unlinked from a project, and each project filter shows its own trend instead of a single shared dataset. Co-authored-by: Cursor <cursoragent@cursor.com>
… every project. Fixes identical charts across project filters by rendering linked demo profiles instead of the unfiltered API payload. Co-authored-by: Cursor <cursoragent@cursor.com>
Keeps the chart link gated to BM Dashboard routes like the other BM project menu items. Co-authored-by: Cursor <cursoragent@cursor.com>
Fixes the menu gate that only matched /bmdashboard/* so the link appears after entering BM Dashboard without changing the chart route. Co-authored-by: Cursor <cursoragent@cursor.com>
Replace Date relational comparisons with month-index math and remove unreachable demo-mode branches that failed the quality gate. Co-authored-by: Cursor <cursoragent@cursor.com>
one-community
added
the
High Priority - Please Review First
There was a problem hiding this comment.
Tested this locally on Purav-taking-over-Injury-Trend-Chart branch and found a relevant issue.
Date fields don't switch to dark mode - On the Injuries Tracking chart, the "Start date" and "End date" inputs stay in light styling (white/light background) when dark mode is toggled on.
RuthwikHM
left a comment
RuthwikHM
left a comment
There was a problem hiding this comment.
Tested this locally and things are working fine. Found one small issue in dark mode though. The date pickers do not respect dark mode colors. See the screenshots attached below.
DeepighaJ
left a comment
DeepighaJ
left a comment
There was a problem hiding this comment.
Tested the PR against all the listed requirements.
Everything is working as expected, including Injuries Tracking visibility, project filtering, ALL totals, date/month/year selectors, chart data/labels/tooltips, responsive layout, light/dark mode, empty-space handling, and BM-protected direct navigation.
One issue found: In Dark Mode, the Start Date and End Date picker text/values appear in white, which reduces readability/visibility. Please update the date picker styling for dark mode.
Other than this, all tested functionality is working as expected.
linlin-husky
left a comment
linlin-husky
left a comment
There was a problem hiding this comment.
tested on the local brand. Most of the checking points work fine. However, I found the below two issues.
- injury list is available outside the BM Dashboard: When I clicking the total construction summary below the report, the injury list is visible below the BM dashboards under the Other Links. Pls refer to the below image.
- in the right upper date picking area, click the right date picking area, the left date is visible. However, when clicking the left date picking area, the right is invisible, which looks misleading to user. User may assume they can not enter the right data picking area because it disappeared. Pls refer to the below image.
Address dark-mode date pickers, keep both date inputs visible when a calendar opens, and hide Injuries Tracking outside true BM Dashboard context. Co-authored-by: Cursor <cursoragent@cursor.com>
Remove centered portal modal behavior while keeping dark-mode input/calendar styling and overflow fixes so both date fields stay visible. Co-authored-by: Cursor <cursoragent@cursor.com>
Layer the end date field above the start calendar popper and widen the dates filter column so both inputs stay visible. Co-authored-by: Cursor <cursoragent@cursor.com>
Match start date styling by relying on shared input styles instead of white backgrounds on date picker wrappers. Co-authored-by: Cursor <cursoragent@cursor.com>
Stop raising the end date input above its clear icon while keeping the field layered above the start calendar popper. Co-authored-by: Cursor <cursoragent@cursor.com>
|
|
This feature works as intended, and the code is great |
ShreyasB02
left a comment
ShreyasB02
left a comment
There was a problem hiding this comment.
Tested and verified all the changes including the latest fixes.
All these work :
- Chart title: Injuries Tracking, legend (Serious / Medium / Low Level), and aligned Project + Dates filters
- Project dropdown lists projects; switching projects changes the chart (Building 1 ≠ akv_test ≠ ALL)
- ALL shows higher totals than any single project (sum of project-linked data)
- Date pickers support month + year dropdowns; clearing dates shows a multi-month window
- Legend, axis labels, data labels, and project name in tooltip
- Light and dark mode look correct.
- Direct navigation to /bmdashboard/injurychart still requires BM access (BMProtectedRoute)
Changes requested:
- Start date later than end date should not be allowed.
- When switched to tablet view in portrait mode, there is a lot of empty space at the bottom after the graph, unlike mobile view on iPhone 14 Pro and Samsung Galaxy S20 Ultra.
Thank you.
8 participants
Frontend PR — Injury Trend Line Chart (Phase 2)
Description
Takes over and finishes the frontend work from #4063 (
Juhitha_Create_Injury_Trend_Chart) on a freshdevelopmentbase.Implements the Injuries Tracking line chart for Phase 2 Summary Dashboard with Project and Date filters, dark mode styling, responsive layout, BM Dashboard menu access, and project-linked demo data. Integrates with backend Injury Trend APIs for monthly counts by severity.
Implements #Phase2-InjuryTrend
Related PRs
Main changes explained
InjuryTrendChartcomponent with Recharts multi-line chart:Month/ counts), and data labelsGET /bm/injuries/trend-databy project ObjectIds + date rangeGET /bm/injuries/project-injury/bmdashboardor/bmdashboard/...)/bmdashboard/injurychart(BMProtectedRoute)How to test
Purav-taking-over-Injury-Trend-Chart(this PR)yarn installREACT_APP_APIENDPOINT=http://localhost:4500/apiyarn start:localyarn dev(ornpm run dev) on port4500/bmdashboard)./bmdashboard/injurychart./bmdashboard/injurychartstill requires BM access (BMProtectedRoute)Screenshots
Light mode
Dark mode
Video
pr.2304.5439.mp4
Note