Aayush create line chart showing total injuries over time frontend by aayushshetty12 · Pull Request #3995 · OneCommunityGlobal/HighestGoodNetworkApp

aayushshetty12 · 2025-08-30T07:07:52Z

Description

Related PRS (if any):

This frontend PR is related to the #1687 backend PR.
…

Main changes explained:

Developed a UI using Chart.js to display the Line chart
Module.css for styling
Route to navigate to a new page
Axios calls to the backend to retrieve data
Actions and Reducers for redux store management
…

How to test:

check into current branch
do npm install and ... to run this PR locally
Clear site data/cache
log as admin user
go to /bmdashboard/injuriesovertimechart
test with different dropdown filters.
verify this new feature works in dark mode

Screenshots or videos of changes:

demo.mp4

…oodNetworkApp into development

…ighestGoodNetworkApp into development

netlify · 2025-08-30T07:07:57Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`c542414`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/68b2a34b6f7f3100085ee412
😎 Deploy Preview	https://deploy-preview-3995--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

laharinandipati

The new injuries-over-time API, schema, and router work as described and return the expected time-series per project; no regressions observed.

Screen.Recording.2025-10-03.at.1.02.52.PM.mov

ShradhaMBhadrannavar

Issue: Graph doesn’t render and filters don’t populate or affect results.

Steps:

npm install → npm run start:local

Cleared cache/site data, logged in as Admin

Navigate to /bmdashboard/injuriesovertimechart/

Expected: graph visible; filters show options and update results

Actual: graph area blank; filters show no options / no effect on change

Please address and let me know when to retest.

apoorvajainrp21 · 2025-10-20T03:54:20Z

No data is loading:

sanjeev29 · 2025-10-22T15:38:06Z

Tested the PR changes locally on the Chrome browser. The line chart renders correctly in light and dark mode. The filters on the data work as expected.

tomkkl · 2025-10-24T09:27:10Z

Hi Aayush,

When I tested this, it says that there are no data available. Unlike the others, there were no existing projects to test from. I am not sure if this is an error or if this was intentional. Please check and see if you get similar results on your end

Vinay944924 · 2025-11-01T21:56:49Z

Hi Aayush,

I ran this PR locally but the graphs are not being rendered and they are blank and I cant see any options. So could you please verify this issue.

Sriamshreddy000 · 2025-11-07T07:28:00Z

Tested this PR along with Backend PR #1687.
Left my feedback there regarding a build issue on ARM64 (Apple Silicon) systems.

Anusha-Gali

Hi Aayush,

I have reviewed this PR locally, similar to other i too am not able to see any projects and the screen says "No Data Available"

bhanuanishakkineni

Hello Aayush,
I have tested this PR's frontend and backend. Please find the requested changes from backend PR#1687.
Apart from that, the chart is working fine in both light and dark mode and is responsive. Filters are working fine. But below are the UI issues I identified.
In the dark mode, increase the filters text contrast as it is hard to read them.
While changing projects filter, that is while adding or removing projects from the filter, the lines from the graph are changing colors which is a bit confusing. Please look into it and assign fixed color to the projects.
Also, in smaller screen sizes (mobile) its date selector is going out of window and is not able to choose dates from previous months.

PR.3995+.1687.mp4

SwathiAngadi · 2025-12-10T02:09:09Z

Hi Aayush,

Tried to review your PR. Similar to others I am also not able to see any projects and the page says "No Data Available".

…l-injuries-over-time-frontend

netlify · 2025-12-31T02:09:06Z

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	`55bd4b8`
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69d85068cdc90a000813fd2a
😎 Deploy Preview	https://deploy-preview-3995--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify project configuration.

sonarqubecloud · 2026-01-01T09:55:28Z

Quality Gate passed

Issues
15 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
2.2% Duplication on New Code

See analysis details on SonarQube Cloud

Anusha-Gali

Hi Aayush,

I have re-reviewed your PR locally and it works as per requirement in both the modes.

abhinav-TB · 2026-01-05T06:30:29Z

Hi Ayush , I have tested this PR locally. I did not find any data for injuries

Vikas-8055

Hi Aayush, I tested this PR locally along with backend PR #1687. Similar to other reviewers, I am also not able to see any projects and the page displays "No Data Available"

Shravan-neelamsetty

Hi @aayushshetty12, I have tested this PR locally by checking out the aayush-create-line-chart-showing-total-injuries-over-time-frontend branch and navigating to /bmdashboard/injuriesovertimechart. The page loads successfully and displays the title "Injuries over time (Jan 1 2024 - Dec 31 2024)" along with all filter dropdowns (Projects, Start date, End date, Injury Types, Departments, Severity) which render correctly and are functional. However, the chart area displays "No Data Available" and no line chart is rendered

Ganesh112001

I tested the Injuries Over Time line chart feature which consists of frontend PR #3995 on the aayush-create-line-chart-showing-total-injuries-over-time-frontend branch and backend PR #1687. After checking out both branches, installing dependencies, and starting both servers, I logged in as admin and navigated to /bmdashboard/injuriesovertimechart. However, the line chart does not display any data despite the page loading correctly. The chart area renders but remains empty with no injury data points visible. I tested all five filters (Project, Date, Type, Department, Severity) but none populate the chart with data. This suggests either the backend is not returning data, the API endpoint is not working correctly, or there's a data fetching issue between frontend and backend. I verified dark mode styling works for the empty chart container, and no console errors were observed. The feature cannot be fully verified until the data display issue is resolved.

roshini1212

Hi Aayush,

Tested PR #3995 locally on branch aayush-create-line-chart-showing-total-injuries-over-time-frontend. The /bmdashboard/injuriesovertimechart page loads correctly, but there are no options in the dropdown box and also I am getting "No Data Available".

maithili20 · 2026-02-06T21:20:46Z

Hi @aayushshetty12 ,
I have re-reviewed your PR locally Kudos to the amazing work. It works as per requirement in both dark and light modes.

video1372896020.mp4

Suggestion: it would be helpful if the UI visually distinguished selected filter values (similar to how projects are differentiated by line color on the chart). Currently, when multiple values are selected under Injury Type/Department/Severity, it’s not clear which count maps to which selection. For instance, in the attached image I selected Fall and Slip, but the displayed numbers don’t indicate which one is Fall vs Slip. Could we add labels for the selected filter values?

Sakshitapkir03 · 2026-02-18T02:31:58Z

I reviewd the PR locally on my Chrome browser, cleared the cache, even though after rendering it says No Data Available, it should show the line graph chart. It shows same for each drop down and date select.
Below are the screenshot in both light and dark mode.

Vishnu10-hub

Hi Aayush,

Tried to review your PR. I am not able to see any projects and the page says

No Data Available.

naznin07

Fixed parameter bug.

ManojPuttaswamy · 2026-03-13T02:17:11Z

src/components/BMDashboard/InjuriesOverTime/InjuriesOverTimeChart.jsx

+        department: selDepts,
+        severity: selSeverities,
+      }),
+    ).finally(() => setLoading(false));


There's no .catch() block, so if the API call fails the loading spinner will stop but the user sees nothing — no error message, no empty state explanation.

ManojPuttaswamy · 2026-03-13T02:21:37Z

src/components/BMDashboard/InjuriesOverTime/InjuriesOverTimeChart.jsx

+
+  return (
+    <div className={`${styles.wrapper} ${darkMode ? styles.wrapperDark : ''}`}>
+      <h2 className={styles.title}>Injuries over time (Jan 1 2024 - Dec 31 2024)</h2>


The title is hardcoded but the component has a dynamic dateRange filter. The title should reflect the actual selected range

naznin07 · 2026-03-20T15:40:26Z

src/components/BMDashboard/InjuriesOverTime/InjuriesOverTimeChart.jsx

+  const [selSeverities, setSelSeverities] = useState([]);
+
+  useEffect(() => {
+    setLoading(true);


useEffect loading handling.

SharadhaKasiviswanathan · 2026-04-06T00:50:31Z

src/components/BMDashboard/InjuriesOverTime/InjuriesOverTimeChart.jsx

+  useEffect(() => {
+    setLoading(true);
+    dispatch(
+      fetchInjuriesOverTime({


Tested the chart filter flow, and the filter UI looks added properly, but the selected values are dispatched as projectId, date, injuryType, department, and severity, while the API action reads projectIds, startDate, endDate, types, departments, and severities. I also see the severity block writing into params.departments instead of a severity param. Filter request mapping could be checked if the selected filters are not being serialized correctly for the API call in this flow.

…me-frontend' of https://github.com/OneCommunityGlobal/HighestGoodNetworkApp into aayush-create-line-chart-showing-total-injuries-over-time-frontend

sonarqubecloud · 2026-04-10T01:21:49Z

Quality Gate passed

Issues
15 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
2.4% Duplication on New Code

See analysis details on SonarQube Cloud

aayushshetty12 added 8 commits August 21, 2025 00:28

Merge branch 'main' of https://github.com/OneCommunityGlobal/HighestG…

ba20c91

…oodNetworkApp into development

Merge branch 'development' of https://github.com/OneCommunityGlobal/H…

3d7e13c

…ighestGoodNetworkApp into development

feat(ui): initial setup

f5228ce

feat(ui): initial setup

4082bbc

feat(ui): created actions, local states and api constants

69decfd

fixed errors

117f1fd

added line chart and reducers

4b7b9c1

added year in X-axis

c542414

aayushshetty12 mentioned this pull request Aug 30, 2025

Aayush create line chart showing total injuries over time backend OneCommunityGlobal/HGNRest#1687

Open

one-community added the High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible label Sep 28, 2025

laharinandipati previously approved these changes Oct 3, 2025

View reviewed changes

ShradhaMBhadrannavar suggested changes Oct 8, 2025

View reviewed changes

sanjeev29 previously approved these changes Oct 22, 2025

View reviewed changes

Anusha-Gali requested changes Nov 14, 2025

View reviewed changes

bhanuanishakkineni suggested changes Dec 2, 2025

View reviewed changes

Merge branch 'development' into aayush-create-line-chart-showing-tota…

0773ec3

…l-injuries-over-time-frontend

aayushshetty12 dismissed stale reviews from sanjeev29 and laharinandipati via 0773ec3 December 31, 2025 02:09

aayushshetty12 added 4 commits December 30, 2025 21:17

resolved merge conflicts

ff9f6b5

resolved merge conflicts

6bac106

resolved merge conflicts

680385c

fixed darkMode and data fetch

3353691

fixed sonarcode issues

b8ffbef

Anusha-Gali previously approved these changes Jan 3, 2026

View reviewed changes

aayushshetty12 requested review from bhanuanishakkineni and removed request for bhanuanishakkineni January 3, 2026 21:36

Vikas-8055 reviewed Jan 15, 2026

View reviewed changes

Shravan-neelamsetty reviewed Jan 17, 2026

View reviewed changes

Ganesh112001 requested changes Jan 23, 2026

View reviewed changes

roshini1212 requested changes Feb 5, 2026

View reviewed changes

Vishnu10-hub suggested changes Mar 6, 2026

View reviewed changes

naznin07 approved these changes Mar 7, 2026

View reviewed changes

ManojPuttaswamy requested changes Mar 13, 2026

View reviewed changes

naznin07 suggested changes Mar 20, 2026

View reviewed changes

SharadhaKasiviswanathan reviewed Apr 6, 2026

View reviewed changes

resolved merge conflicts

390458b

aayushshetty12 dismissed Anusha-Gali’s stale review via 390458b April 7, 2026 06:42

aayushshetty12 and others added 5 commits April 9, 2026 03:12

fixed github comments

ca055d3

Resolved merge conflict

accb265

fixed lint issue

266e356

Merge branch 'aayush-create-line-chart-showing-total-injuries-over-ti…

3c97db7

…me-frontend' of https://github.com/OneCommunityGlobal/HighestGoodNetworkApp into aayush-create-line-chart-showing-total-injuries-over-time-frontend

Update yarn.lock

55bd4b8

Uh oh!

Conversation

aayushshetty12 commented Aug 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related PRS (if any):

Main changes explained:

How to test:

Screenshots or videos of changes:

Uh oh!

netlify bot commented Aug 30, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for highestgoodnetwork-dev ready!

Uh oh!

laharinandipati left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ShradhaMBhadrannavar left a comment

Choose a reason for hiding this comment

Uh oh!

apoorvajainrp21 commented Oct 20, 2025

Uh oh!

sanjeev29 commented Oct 22, 2025

Uh oh!

tomkkl commented Oct 24, 2025

Uh oh!

Vinay944924 commented Nov 1, 2025

Uh oh!

Sriamshreddy000 commented Nov 7, 2025

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

bhanuanishakkineni left a comment

Choose a reason for hiding this comment

Uh oh!

SwathiAngadi commented Dec 10, 2025

Uh oh!

netlify bot commented Dec 31, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for highestgoodnetwork-dev ready!

Uh oh!

sonarqubecloud bot commented Jan 1, 2026

Quality Gate passed

Uh oh!

Anusha-Gali left a comment

Choose a reason for hiding this comment

Uh oh!

abhinav-TB commented Jan 5, 2026

Uh oh!

Vikas-8055 left a comment

Choose a reason for hiding this comment

Uh oh!

Shravan-neelamsetty left a comment

Choose a reason for hiding this comment

Uh oh!

Ganesh112001 left a comment

Choose a reason for hiding this comment

Uh oh!

roshini1212 left a comment

Choose a reason for hiding this comment

Uh oh!

maithili20 commented Feb 6, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Sakshitapkir03 commented Feb 18, 2026

Uh oh!

Vishnu10-hub left a comment

Choose a reason for hiding this comment

Uh oh!

naznin07 left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ManojPuttaswamy Mar 13, 2026

Choose a reason for hiding this comment

Uh oh!

ManojPuttaswamy Mar 13, 2026

Choose a reason for hiding this comment

aayushshetty12 commented Aug 30, 2025 •

edited

Loading

netlify bot commented Aug 30, 2025 •

edited

Loading

laharinandipati left a comment •

edited

Loading

netlify bot commented Dec 31, 2025 •

edited

Loading

maithili20 commented Feb 6, 2026 •

edited

Loading

naznin07 left a comment •

edited

Loading

naznin07 Mar 20, 2026 •

edited

Loading