Skip to content

Neeraj Add Amount Label and Extend Graph Bars in Resource Usage Chart#4494

Merged
one-community merged 5 commits intodevelopmentfrom
Neeraj_Add_Amount_Label_and_Extend_Material_Bars
Apr 17, 2026
Merged

Neeraj Add Amount Label and Extend Graph Bars in Resource Usage Chart#4494
one-community merged 5 commits intodevelopmentfrom
Neeraj_Add_Amount_Label_and_Extend_Material_Bars

Conversation

@Neeraj-Kondaveeti
Copy link
Copy Markdown
Contributor

@Neeraj-Kondaveeti Neeraj-Kondaveeti commented Dec 5, 2025 •
edited
Loading

Description

image image

Related PRS (if any):

To test this frontend PR you need to checkout the development backend PR.
…

Main changes explained:

  • Updated ResourceUsage.jsx
    • Added Amount Y-axis label above the chart as requested in task description.
    • Improved dark mode styling for chart labels, dropdowns, insight cards, and tooltip for proper visibility.
    • Extended Material bars to match updated UI requirement.
  • Added unit test file
    • ResourceUsage.test.jsx
    • Added test coverage for:
      • Rendering of component title.
      • Changing resource type via dropdown.
      • Rendering insights grid.
      • Validating dark-mode class application.

How to test:

  1. check into current branch
  2. do npm install and ... to run this PR locally
  3. Clear site data/cache
  4. log as admin user
  5. Navigate to : http://localhost:5173/communityportal/reports/resourceusage
  6. Verify the following:
    • The label "Amount" appears over Y axis.
    • The chart should show all material bars (A–G) as in the Figma design for complete data representation.

Screenshots or videos of changes:

image

Note:

The component is mock-data driven and does not affect backend API calls.

@netlify
Copy link
Copy Markdown

netlify Bot commented Dec 5, 2025 •
edited
Loading

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit a157437
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/693224fe0bb20700082ee4b1
😎 Deploy Preview https://deploy-preview-4494--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@Neeraj-Kondaveeti Neeraj-Kondaveeti added the do not review Do not review or look at code without full context label Dec 5, 2025
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented Dec 5, 2025

Quality Gate Passed Quality Gate passed

Issues
10 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

@Neeraj-Kondaveeti Neeraj-Kondaveeti changed the title Add amount label, extend material bars, and include unit tests for Re… Neeraj Add Amount Label and Extend Graph Bars in Resource Usage Chart Dec 5, 2025
@Neeraj-Kondaveeti Neeraj-Kondaveeti added High Priority and removed do not review Do not review or look at code without full context labels Dec 5, 2025
Prem203
Prem203 approved these changes Dec 5, 2025
View reviewed changes
Copy link
Copy Markdown
Contributor

@Prem203 Prem203 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed the PR with an admin account and the feature works as expected. The Y axis is now labelled with amount and the visualization covers A through G. The graph is centered and visible correctly in different screen sizes.

image image

@beblicarl
Copy link
Copy Markdown
Contributor

beblicarl commented Jan 15, 2026

This feature works as intended and the code is great

image

@beblicarl beblicarl self-requested a review January 15, 2026 10:57
beblicarl
beblicarl previously approved these changes Jan 15, 2026
View reviewed changes
@one-community one-community added High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible and removed High Priority labels Mar 21, 2026
@Neeraj-Kondaveeti Neeraj-Kondaveeti force-pushed the Neeraj_Add_Amount_Label_and_Extend_Material_Bars branch from a157437 to 613fa32 Compare March 23, 2026 02:39
@netlify
Copy link
Copy Markdown

netlify Bot commented Mar 23, 2026 •
edited
Loading

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name Link
🔨 Latest commit 4c9d263
🔍 Latest deploy log https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/69e17e79e02ec90008edc883
😎 Deploy Preview https://deploy-preview-4494--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Anusha-Gali
Anusha-Gali previously approved these changes Apr 11, 2026
View reviewed changes
Copy link
Copy Markdown

@Anusha-Gali Anusha-Gali left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Neeraj,

I have reviewed your PR locally and it works as per requirement.

Image Image Image

HemanthNidamanuru
HemanthNidamanuru previously approved these changes Apr 11, 2026
View reviewed changes
Copy link
Copy Markdown

@HemanthNidamanuru HemanthNidamanuru left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hi Neeraj,

I tested this PR locally and everything is working as expected:

  1. The 'Amount' label is displaying correctly on the Y axis
  2. All material bars (A-G) are visible and rendering correctly
  3. Hover tooltips are showing the Returned and Loaned values for each material

Everything looks consistent in both light and dark mode.

Image Image

@Neeraj-Kondaveeti Neeraj-Kondaveeti force-pushed the Neeraj_Add_Amount_Label_and_Extend_Material_Bars branch from 613fa32 to 8d6a38d Compare April 17, 2026 00:04
@sonarqubecloud
Copy link
Copy Markdown

sonarqubecloud Bot commented Apr 17, 2026

Quality Gate Passed Quality Gate passed

Issues
0 New issues
0 Accepted issues

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

See analysis details on SonarQube Cloud

@one-community
Copy link
Copy Markdown
Member

one-community commented Apr 17, 2026

Thank you all, merging!

@one-community one-community merged commit 0821129 into development Apr 17, 2026
10 checks passed
@one-community one-community mentioned this pull request Apr 23, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@beblicarl beblicarl beblicarl left review comments

@HemanthNidamanuru HemanthNidamanuru HemanthNidamanuru left review comments

+2 more reviewers

@Prem203 Prem203 Prem203 approved these changes

@Anusha-Gali Anusha-Gali Anusha-Gali left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

High Priority - Please Review First This is an important PR we'd like to get merged as soon as possible

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

6 participants

@Neeraj-Kondaveeti @beblicarl @one-community @Prem203 @Anusha-Gali @HemanthNidamanuru