Neeraj Fix Demand Across Villages Graph Rendering Issue

[Neeraj-Kondaveeti]

Description

Related PRS (if any):

This frontend PR is related to the Development Backend PR.
…

Main changes explained:

• Updated the village analytics layout to improve responsive rendering behavior across screen sizes.
• Fixed chart container sizing issues affecting Recharts ResponsiveContainer.
• Added a fallback state for empty graph data.
• Adjusted chart margins and height to prevent graph collapse and improve rendering consistency.
• Improved responsiveness for the "By Village" analytics section without affecting existing functionality.
• Preserved existing dark mode support and filter behavior.

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/lbdashboard
6. Verify: "Demand across Villages" graph renders correctly.

Screenshots or videos of changes:

Note:

This PR focuses only on fixing the graph rendering.

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	d5d524c
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/6a2dc762991be100080daf76
😎 Deploy Preview	https://deploy-preview-5298--highestgoodnetwork-dev.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

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

[DeepighaJ]

-Checked out to current branch and tested PR locally.

• The "Comparing Villages" section displays a placeholder graph area instead of a rendered chart or empty-state message.
• Below are few suggestions not sure if its scope of this PR.
• Data labels in the line chart appear crowded and overlap, affecting readability.
• When hovering over a bar in the "Demand across Villages" chart, the hover/highlight background appears light/white and does not match the application's dark theme.

[HemanthNidamanuru]

Hi,

I tested this PR locally. The "Demand across Villages" graph renders correctly.

[Mahitha-pasupuleti]

Tested locally, and the changes work as expected. The village analytics layout renders correctly, and the graph is displaying properly without any collapse or sizing issues.

Minor suggestion:
The tooltip/hover popup (when hovering over the chart) could be improved by adding a subtle drop shadow to make it more visually distinct from the background. This would improve readability and overall UI clarity, especially in dense chart areas.

Overall, the implementation looks good and fixes the responsiveness issues effectively. Approving the PR.

[Neeraj-Kondaveeti]

-Checked out to current branch and tested PR locally.

• The "Comparing Villages" section displays a placeholder graph area instead of a rendered chart or empty-state message.
• Below are few suggestions not sure if its scope of this PR.
• Data labels in the line chart appear crowded and overlap, affecting readability.
• When hovering over a bar in the "Demand across Villages" chart, the hover/highlight background appears light/white and does not match the application's dark theme.

Hi Deepigha,

Thank you for taking the time to review the PR. The mentioned points / suggestions are not part of the PR (not in the scope of the PR). Please check the points to be tested in the PR description and if everything is working as intended with respect to the PR description, please approve the changes.

Thank You !

[sonarqubecloud]

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]

Thank you all, merging!