Skip to content

Conversation

@sarthakNITT
Copy link
Contributor

@sarthakNITT sarthakNITT commented Oct 3, 2025

solved issue#3653

Description

  • Added years filter in components/FinancialSummary/BarChartComponent.tsx
Screenshot 2025-10-04 at 3 10 35 AM

Summary by CodeRabbit

  • Documentation
    • Added in-code guidance and commented scaffolding for a future year selector and alternate data sources (previous years, current year, "All Years"), plus ambient type references for the build environment.
  • Chores
    • Included commented examples showing how category/month derivation and link resolution would switch to year-specific datasets; no active UI elements or runtime behavior were changed.

@netlify
Copy link

netlify bot commented Oct 3, 2025

Deploy Preview for asyncapi-website ready!

Built without sensitive environment variables

Name Link
🔨 Latest commit b787b69
🔍 Latest deploy log https://app.netlify.com/projects/asyncapi-website/deploys/68f0e195e7c68d0008e42651
😎 Deploy Preview https://deploy-preview-4451--asyncapi-website.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.

@coderabbitai
Copy link
Contributor

coderabbitai bot commented Oct 3, 2025

Walkthrough

Adds commented scaffolding to the FinancialSummary bar chart and guidance in getUniqueCategories to enable future year-based data selection/merging (2023, 2024, "All Years"). Also adds a Next.js ambient types declaration file. No active runtime behavior or exported APIs were changed; existing ExpensesData path remains in use.

Changes

Cohort / File(s) Summary
Financial Summary: year-scaffolding comments
components/FinancialSummary/BarChartComponent.tsx
Extensive commented scaffolding added for prior-year datasets and an "All Years" option: placeholder imports, selectedYear state, availableYears, helper getters (getExpensesData, getExpensesLinkData), and commented UI year-selector placement. Active code continues to use ExpensesData / ExpensesLinkData.
Utilities: optional parameter guidance
utils/getUniqueCategories.ts
Added commented alternative signature and guidance to accept external expensesData; active implementation remains unchanged and uses the module-level Expenses import.
Type declarations: Next.js ambient types
next-env.d.ts
New file adding triple-slash references for Next.js and Next image types (ambient type directives). File is auto-generated-style and contains a "do not edit" note; no runtime or exported API changes.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor User
  participant BarChart as BarChartComponent
  participant ActiveData as ExpensesData (active)
  participant CommentedScaffold as YearScaffold (commented)

  User->>BarChart: view chart
  BarChart->>ActiveData: read ExpensesData / ExpensesLinkData
  BarChart->>BarChart: derive months/categories, render bars

  Note right of CommentedScaffold #f9f7e8: Commented helpers:\ngetExpensesData / getExpensesLinkData\nand year selector UI (not active)

  User->>BarChart: click bar
  BarChart->>ActiveData: lookup link in ExpensesLinkData
  alt Link found
    BarChart->>User: open link
  else No link
    BarChart-->>User: no action
  end
Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested reviewers

  • anshgoyalevil
  • devilkiller-ag
  • akshatnema
  • sambhavgupta0705
  • vishvamsinh28
  • Mayaleeeee

Poem

A rabbit nudged a chart with care,
Left tiny notes for years to share.
Future toggles tucked in rows,
Waiting till the season grows.
🥕✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check ✅ Passed The title precisely reflects the primary change by describing the addition of a year filter to the Budget Analysis component and follows a clear conventional commit format. It is concise, specific, and directly aligned with the pull request’s objectives without unnecessary detail.
Docstring Coverage ✅ Passed Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
✨ Finishing touches
  • 📝 Generate docstrings
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Post copyable unit tests in a comment

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 2fc7a44 and b787b69.

📒 Files selected for processing (3)
  • components/FinancialSummary/BarChartComponent.tsx (5 hunks)
  • next-env.d.ts (1 hunks)
  • utils/getUniqueCategories.ts (1 hunks)
✅ Files skipped from review due to trivial changes (1)
  • next-env.d.ts
🚧 Files skipped from review as they are similar to previous changes (2)
  • utils/getUniqueCategories.ts
  • components/FinancialSummary/BarChartComponent.tsx
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: Test NodeJS PR - windows-latest
  • GitHub Check: Test NodeJS PR - macos-13

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@codecov
Copy link

codecov bot commented Oct 3, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (9de49c1) to head (b787b69).

Additional details and impacted files
@@            Coverage Diff            @@
##            master     #4451   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           22        22           
  Lines          778       778           
  Branches       144       144           
=========================================
  Hits           778       778           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 3

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3b4454f and c6ac5fc.

📒 Files selected for processing (1)
  • components/FinancialSummary/BarChartComponent.tsx (5 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
components/FinancialSummary/BarChartComponent.tsx (1)
utils/getUniqueCategories.ts (1)
  • getUniqueCategories (9-21)
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: Lighthouse CI
  • GitHub Check: Test NodeJS PR - windows-latest
🔇 Additional comments (6)
components/FinancialSummary/BarChartComponent.tsx (6)

7-9: LGTM!

The imports for 2023 data follow the same pattern as the existing 2024 data imports.


21-21: LGTM!

Initializing selectedYear to '2024' is appropriate for displaying the most recent data by default.


24-25: LGTM!

The availableYears array correctly defines the filter options.


81-81: LGTM!

The filtering logic correctly uses currentExpensesData to ensure the selected year's data is filtered.


175-175: LGTM!

The onClick handler correctly uses currentExpensesLinkData to find the appropriate link for the selected year.


149-159: LGTM!

The year selector follows the same pattern as the existing month selector and integrates well with the UI.

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a53591e and e63390b.

📒 Files selected for processing (1)
  • components/FinancialSummary/BarChartComponent.tsx (5 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
components/FinancialSummary/BarChartComponent.tsx (1)
utils/getUniqueCategories.ts (1)
  • getUniqueCategories (9-21)
⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
  • GitHub Check: Test NodeJS PR - windows-latest
  • GitHub Check: Lighthouse CI
🔇 Additional comments (8)
components/FinancialSummary/BarChartComponent.tsx (8)

7-7: LGTM!

The imports for 2023 data follow the existing pattern and naming convention used for 2024 data.

Also applies to: 9-9


21-21: LGTM!

The year selector state initialization and available years list are appropriately defined, with the default set to the current year (2024).

Also applies to: 24-25


27-50: LGTM!

The implementation correctly addresses the previous data loss concern by prefixing month keys with the year (e.g., "January 2023", "January 2024") when "All Years" is selected. This ensures both years' data are preserved and displayed without collision.


75-77: LGTM!

The centralized data variables correctly encapsulate year-based data selection and will re-compute whenever selectedYear changes.


80-81: LGTM!

Categories and months now correctly derive from currentExpensesData, ensuring they update dynamically when the selected year changes.


100-106: Verify month filter behavior with "All Years" selection.

When "All Years" is selected, month keys are prefixed with the year (e.g., "January 2023", "January 2024"), but the month dropdown will still show plain month names (e.g., "January"). Selecting a specific month when "All Years" is active will likely result in no matching data because the comparison selectedMonth === month won't match "January" with "January 2023".

Consider one of these approaches:

  1. Disable month filtering when "All Years" is selected by resetting selectedMonth to "All Months" when year changes to "All Years"
  2. Update the filter logic to strip year suffix from month keys before comparison
  3. Adjust the month dropdown to show year-prefixed months when "All Years" is selected

Example for approach 2:

  const filteredData: ExpenseItem[] = Object.entries(currentExpensesData).flatMap(([month, entries]) =>
-    selectedMonth === 'All Months' || selectedMonth === month
+    selectedMonth === 'All Months' || selectedMonth === month || month.startsWith(selectedMonth + ' ')
      ? (entries as ExpenseItem[]).filter(
          (entry) => selectedCategory === 'All Categories' || entry.Category === selectedCategory
        )
      : []
  );

Please verify the intended behavior and adjust accordingly.


170-180: LGTM!

The year selector UI is properly implemented with consistent styling and correct state binding.


196-196: LGTM!

The click handler correctly uses currentExpensesLinkData to ensure category links are resolved based on the selected year.

Copy link
Member

@anshgoyalevil anshgoyalevil left a comment

Choose a reason for hiding this comment

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

Thanks for the PR @sarthakNITT
The CI checks are failing. Can you please take a look into them?

@sarthakNITT
Copy link
Contributor Author

sarthakNITT commented Oct 4, 2025

@anshgoyalevil I ran tests, lint, and build locally and all passed, but the Netlify build behaves differently. Each PR shows new build errors. How can I replicate the Netlify build locally so I can fix everything before submitting the final PR? Or is it okay if I keep submitting PRs, checking the Netlify build, and fixing errors one by one?

@anshgoyalevil
Copy link
Member

The CI logs shows some errors

image

Are they related to your PR?

@sarthakNITT
Copy link
Contributor Author

@anshgoyalevil yes, but those are false error. The path is correct I have checked it multiple times.
Here is the video

Screen.Recording.2025-10-04.at.6.46.24.PM.mov

@sarthakNITT
Copy link
Contributor Author

sarthakNITT commented Oct 4, 2025

@anshgoyalevil @derberg @sambhavgupta0705 @akshatnema got the bug.

Netlify build is failing because .gitignore has /config/finance/json-data/*, so the JSON files present at this path (Expenses2023.json, ExpensesLink2023.json, etc.) aren’t in the repo. They exist locally after cloning the project but not on GitHub, so Netlify can’t find them. Should I commit these files or handle them another way. Please tell me know what to do.

And those files import is already present on latest commit of master branch in line 6 and 7.
Screenshot 2025-10-05 at 12 25 04 AM

@derberg
Copy link
Member

derberg commented Oct 13, 2025

Actually the whole Budget Analysis should be hidden for now. Updating the section is cumbersome at the moment, and getting changes merged also takes lots of time. I suggest to just hide it for now, not remove, just hide. All data is transparently visible in open collective

@sarthakNITT
Copy link
Contributor Author

@derberg could you please clarify what you mean by “hide it”? Should I comment out the imports and the code that uses that module?

Copy link
Member

derberg commented Oct 15, 2025

yes, hide from viewer, so just comment out relevant code

Copy link
Member

derberg commented Oct 15, 2025

with some TODO to remember about it in future

@asyncapi-bot
Copy link
Contributor

asyncapi-bot commented Oct 16, 2025

⚡️ Lighthouse report for the changes in this PR:

Category Score
🔴 Performance 38
🟢 Accessibility 98
🟢 Best practices 92
🟢 SEO 100
🔴 PWA 33

Lighthouse ran on https://deploy-preview-4451--asyncapi-website.netlify.app/

Copy link
Contributor

@coderabbitai coderabbitai bot left a comment

Choose a reason for hiding this comment

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

Actionable comments posted: 1

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 391c125 and 3a15fb6.

📒 Files selected for processing (2)
  • components/FinancialSummary/BarChartComponent.tsx (5 hunks)
  • utils/getUniqueCategories.ts (1 hunks)
✅ Files skipped from review due to trivial changes (1)
  • utils/getUniqueCategories.ts
🧰 Additional context used
🪛 GitHub Actions: PR testing - if Node project
components/FinancialSummary/BarChartComponent.tsx

[error] 21-21: Trailing spaces not allowed. no-trailing-spaces


[error] 89-89: Delete · prettier/prettier


[error] 89-89: Trailing spaces not allowed. no-trailing-spaces


[error] 90-90: Delete · prettier/prettier


[error] 90-90: Trailing spaces not allowed. no-trailing-spaces


[error] 191-191: Trailing spaces not allowed. no-trailing-spaces

⏰ Context from checks skipped due to timeout of 180000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)
  • GitHub Check: Redirect rules - asyncapi-website
  • GitHub Check: Header rules - asyncapi-website
  • GitHub Check: Pages changed - asyncapi-website
  • GitHub Check: Lighthouse CI
🔇 Additional comments (2)
components/FinancialSummary/BarChartComponent.tsx (2)

21-237: Clarify the scope of "hiding" the Budget Analysis section.

Based on the PR discussion, @derberg recommended "hiding the whole 'Budget Analysis' section," but the current implementation only comments out the year filter feature (lines 21-88, 118-125, 191-204, 230-237) while keeping the base Budget Analysis functionality active.

The active code still imports and uses ExpensesData and ExpensesLinkData (lines 6-7), which may cause Netlify build failures if these files are gitignored as mentioned in the PR comments.

Two possible interpretations:

  1. Hide only the year filter feature (current approach): Comment out the new year-selection code but keep the base Budget Analysis (2024 data) functional. This requires that Expenses.json and ExpensesLink.json exist in the repo.

  2. Hide the entire Budget Analysis section: Comment out the entire component render (lines 150-244) and the imports (lines 6-7) to completely remove the feature from the UI.

Please confirm which approach aligns with the team's intention.


21-88: Well-structured commented scaffolding.

The commented code provides clear guidance for enabling the year filter feature in the future. The TODO notes effectively explain:

  • Where to uncomment blocks
  • What the code does (year-prefixed keys for "All Years", proper link merging)
  • How to replace active code segments

This approach maintains the code ready for activation while addressing the current constraint of missing JSON files.

Also applies to: 118-125, 191-204, 230-237

@sarthakNITT
Copy link
Contributor Author

@derberg @anshgoyalevil @sambhavgupta0705 Raised a pr. Please review it, let me know in case of further changes.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants