Manoj cost prediction line chart

[Manoj99Q]

Description

Related PRS (if any):

This frontend PR is related to the OneCommunityGlobal/HGNRest#1528 backend PR. Checkout the backend too

…

Main changes explained:

• Created a CostPredictionChart for full page view of the bar chart at route /bmdashboard/cost-prediction
• Crated a card component of the same to be displayed at /bmdashboard/totalconstructionsummary under Financials
• Added filters to select project ID and categories in the chart component.

How to test:

1. check into current branch
2. do npm install and npm run start:local to run this PR locally
3. Clear site data/cache
4. log as any user
5. Navigate to http://localhost:3000/bmdashboard/totalconstructionsummary
6. First verify the card view component displays a sample preview chart under Financials
7. Click on the card view to navigate to /bmdashboard/cost-prediction route and you will get the Full page view of Cost tracking chart.
8. By using the project ID filter and categories options; test the component retrieves the corresponding data and renders the chart accordingly

Screenshots or videos of changes:

[netlify]

✅ Deploy Preview for highestgoodnetwork-dev ready!

Name	Link
🔨 Latest commit	2236784
🔍 Latest deploy log	https://app.netlify.com/projects/highestgoodnetwork-dev/deploys/68a8d67d60632300076173af
😎 Deploy Preview	https://deploy-preview-3738--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.

[beblicarl]

This feature works as intended and the code is great

[sankargalla]

I have reviewed the PR and tested the CostPredictionChart on the frontend by checking out the corresponding backend branch. The Project ID filter and category options correctly retrieve and display the relevant data. The chart renders as expected, with each category visually distinguished using different colors. As per the requirements, the X and Y axes are labeled appropriately, and hovering over the chart displays tooltips with cost values. The CostPredictionChart functions correctly in both dark and light modes.

Observations:

1. The legend uses identical symbols for both actual and predicted costs, making it difficult to distinguish between them visually.
2. When the graph transitions to show predicted data, the tooltip displays an empty label.

[sirisudheeksha]

Pulled frontend PR #3738 and ran it locally .Everything works as described

[csk731]

I reviewed PR #3738 by running it locally. Everything is working as expected in both light and dark modes. No issues were found.

[guna3005]

tested backend and frontend and everything works as expected

[uhakruthi1]

The feature functions exactly as expected, and the code quality is excellent.

[ShravyaKudlu]

It looks good, but I have a few change requests:

• The graph is currently overflowing its container.
• Could you add a div above the Actual vs Planned section and use flex-direction: row so they display side by side?
• Alternatively:
  • Set overflow: scroll as shown, or
  • Increase the min height of the first graph to 300px

Please choose the option that best maintains the layout and usability

[kanishkagarwal6101]

For me the chart is not loading and is throwing error in fetching. The bar graph is overflowing, the fixes that shravya said before me sound good for that issue.

[Manoj99Q]

Made changes to only have card view component. Removed Fullpage view.
@kanishkagarwal6101 Can you verify whether you checked out the corresponding backend branch.

[surajmaraboina]

chart is not loading and is throwing error in fetching. The bar graph is overflowing(#3738 ).

[Manoj99Q]

@ShravyaKudlu The bar chart is not part of my pull request. But I will try to fix the overflow issue if possible.

[one-community]

Thank you all, merging!