Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

report sorting on dashboard #4276

Merged
merged 8 commits into from
Feb 2, 2025
Merged

Conversation

UnderKoen
Copy link
Member

The sorting of reports on the dashboard

@actual-github-bot actual-github-bot bot changed the title fix: report sorting on dashboard [WIP] fix: report sorting on dashboard Jan 31, 2025
Copy link

netlify bot commented Jan 31, 2025

Deploy Preview for actualbudget ready!

Name Link
🔨 Latest commit 9d67360
🔍 Latest deploy log https://app.netlify.com/sites/actualbudget/deploys/679f8fb5867d9b000836eaa7
😎 Deploy Preview https://deploy-preview-4276.demo.actualbudget.org
📱 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 site configuration.

Copy link
Contributor

github-actions bot commented Jan 31, 2025

Bundle Stats — desktop-client

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count Total bundle size % Changed
15 6.71 MB → 6.71 MB (+4.12 kB) +0.06%
Changeset
File Δ Size
locale/nl.json 📈 +4.11 kB (+5.15%) 79.76 kB → 83.87 kB
src/components/reports/reports/GetCardData.tsx 📈 +62 B (+1.43%) 4.23 kB → 4.29 kB
src/components/reports/ReportSidebar.tsx 📈 +16 B (+0.08%) 18.95 kB → 18.97 kB
src/components/reports/ReportOptions.ts 📉 -6 B (-0.08%) 7.07 kB → 7.07 kB
src/components/reports/reports/CustomReport.tsx 📉 -29 B (-0.12%) 23.53 kB → 23.5 kB
src/components/reports/disabledList.ts 📉 -36 B (-0.85%) 4.16 kB → 4.12 kB
View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset File Size % Changed
static/js/nl.js 79.76 kB → 83.87 kB (+4.11 kB) +5.15%
static/js/ReportRouter.js 1.59 MB → 1.59 MB (+7 B) +0.00%

Smaller

No assets were smaller

Unchanged

Asset File Size % Changed
static/js/indexeddb-main-thread-worker-e59fee74.js 13.5 kB 0%
static/js/resize-observer.js 18.37 kB 0%
static/js/workbox-window.prod.es5.js 5.69 kB 0%
static/js/BackgroundImage.js 122.29 kB 0%
static/js/uk.js 111.11 kB 0%
static/js/AppliedFilters.js 10.52 kB 0%
static/js/en-GB.js 99.33 kB 0%
static/js/pt-BR.js 103.29 kB 0%
static/js/wide.js 102.8 kB 0%
static/js/useAccountPreviewTransactions.js 1.69 kB 0%
static/js/en.js 99.34 kB 0%
static/js/narrow.js 84.94 kB 0%
static/js/index.js 4.29 MB 0%

Copy link
Contributor

github-actions bot commented Jan 31, 2025

Bundle Stats — loot-core

Hey there, this message comes from a GitHub action that helps you and reviewers to understand how these changes affect the size of this project's bundle.

As this PR is updated, I'll keep you updated on how the bundle size is impacted.

Total

Files count Total bundle size % Changed
1 1.33 MB 0%

Changeset

No files were changed

View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

No assets were smaller

Unchanged

Asset File Size % Changed
kcab.worker.js 1.33 MB 0%

@UnderKoen UnderKoen changed the title [WIP] fix: report sorting on dashboard report sorting on dashboard Jan 31, 2025
Copy link
Contributor

coderabbitai bot commented Jan 31, 2025

Walkthrough

The changes introduce a new type, sortByOpType, across several report-related components to standardize and enforce type safety for sorting operations. Updates include changing default sorting values from strings like 'Descending' to lowercase 'desc', modifying variable and function signatures to use the new type, and explicitly defining option arrays. Components affected include ReportOptions, ReportSidebar, CustomReport, and GetCardData. Additionally, the SQL migration script has been updated to standardize sorting values in the database by converting varied string representations to consistent lowercase values. These modifications enhance clarity and consistency in the handling of sorting operations throughout the codebase.

Possibly related PRs

  • Add sorting option to custom reports #4141: The changes in the main PR are related to the modifications in the retrieved PR as both involve the introduction and usage of the sortByOpType type and the handling of sorting options in the report components, specifically in ReportOptions.ts and ReportSidebar.tsx.
  • fix: Custom Report Total Mode not showing offbudget transactions #3627 #3633: The changes in the main PR, which involve the introduction and modification of the sortByOpType type and its usage in the ReportOptions.ts file, are related to the updates in the retrieved PR that also modifies types and structures in the same file, although they focus on different aspects of type safety and entity handling.
  • Fix inconsistent legend coloring in custom reports #4162: The changes in the main PR are related to the introduction and usage of the sortByOpType type, which is also referenced in the retrieved PR for sorting operations, indicating a direct connection in how sorting is handled in both components.

Suggested labels

:sparkles: Merged

Suggested reviewers

  • matt-fidd
  • youngcw

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 92d9dee and 9d67360.

📒 Files selected for processing (1)
  • packages/loot-core/migrations/1738491452000__sorting_rename.sql (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (1)
  • packages/loot-core/migrations/1738491452000__sorting_rename.sql
⏰ Context from checks skipped due to timeout of 90000ms (4)
  • GitHub Check: build (macos-latest)
  • GitHub Check: build (windows-latest)
  • GitHub Check: build (ubuntu-latest)
  • GitHub Check: Analyze

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share
🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

  • Review comments: Directly reply to a review comment made by CodeRabbit. Example:
    • I pushed a fix in commit <commit_id>, please review it.
    • Generate unit testing code for this file.
    • Open a follow-up GitHub issue for this discussion.
  • Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
    • @coderabbitai generate unit testing code for this file.
    • @coderabbitai modularize this function.
  • PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
    • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
    • @coderabbitai read src/utils.ts and generate unit testing code.
    • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
    • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

  • @coderabbitai pause to pause the reviews on a PR.
  • @coderabbitai resume to resume the paused reviews.
  • @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
  • @coderabbitai full review to do a full review from scratch and review all the files again.
  • @coderabbitai summary to regenerate the summary of the PR.
  • @coderabbitai generate docstrings to generate docstrings for this PR. (Beta)
  • @coderabbitai resolve resolve all the CodeRabbit review comments.
  • @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
  • @coderabbitai help to get help.

Other keywords and placeholders

  • Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
  • Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
  • Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

  • You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
  • Please see the configuration documentation for more information.
  • If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

  • Visit our Documentation for detailed information on how to use CodeRabbit.
  • Join our Discord Community to get help, request features, and share feedback.
  • Follow us on X/Twitter for updates and announcements.

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: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 64df0e1 and 584a1b5.

⛔ Files ignored due to path filters (1)
  • upcoming-release-notes/4276.md is excluded by !**/*.md
📒 Files selected for processing (5)
  • packages/desktop-client/src/components/reports/ReportOptions.ts (3 hunks)
  • packages/desktop-client/src/components/reports/ReportSidebar.tsx (3 hunks)
  • packages/desktop-client/src/components/reports/reports/CustomReport.tsx (1 hunks)
  • packages/desktop-client/src/components/reports/reports/GetCardData.tsx (2 hunks)
  • packages/loot-core/src/types/models/reports.d.ts (1 hunks)
🧰 Additional context used
📓 Learnings (3)
packages/desktop-client/src/components/reports/ReportOptions.ts (1)
Learnt from: matt-fidd
PR: actualbudget/actual#4141
File: packages/loot-core/src/types/models/reports.d.ts:14-14
Timestamp: 2025-01-12T20:27:52.636Z
Learning: In the Actual Budget codebase's reports feature, `sortBy` in `CustomReportEntity` is typed as string to store user-friendly values ('Ascending'/'Descending'), while `sortByOpType` ('asc'/'desc') is used internally for operations.
packages/loot-core/src/types/models/reports.d.ts (1)
Learnt from: matt-fidd
PR: actualbudget/actual#4141
File: packages/loot-core/src/types/models/reports.d.ts:14-14
Timestamp: 2025-01-12T20:27:52.636Z
Learning: In the Actual Budget codebase's reports feature, `sortBy` in `CustomReportEntity` is typed as string to store user-friendly values ('Ascending'/'Descending'), while `sortByOpType` ('asc'/'desc') is used internally for operations.
packages/desktop-client/src/components/reports/ReportSidebar.tsx (1)
Learnt from: matt-fidd
PR: actualbudget/actual#4141
File: packages/loot-core/src/types/models/reports.d.ts:14-14
Timestamp: 2025-01-12T20:27:52.636Z
Learning: In the Actual Budget codebase's reports feature, `sortBy` in `CustomReportEntity` is typed as string to store user-friendly values ('Ascending'/'Descending'), while `sortByOpType` ('asc'/'desc') is used internally for operations.
⏰ Context from checks skipped due to timeout of 90000ms (6)
  • GitHub Check: Visual regression
  • GitHub Check: Functional
  • GitHub Check: build (macos-latest)
  • GitHub Check: build (windows-latest)
  • GitHub Check: build (ubuntu-latest)
  • GitHub Check: Analyze
🔇 Additional comments (7)
packages/loot-core/src/types/models/reports.d.ts (2)

14-14: LGTM! Type change aligns with internal operations.

The change to use sortByOpType aligns with the codebase's internal operations, where 'asc'/'desc' values are used instead of user-friendly values like 'Ascending'/'Descending'.


14-14: Verify the impact of making sortBy optional.

The change to make sortBy optional (with ?) is a breaking change that could affect existing code that assumes this property is always present.

Run the following script to verify the usage of sortBy in the codebase:

packages/desktop-client/src/components/reports/reports/GetCardData.tsx (1)

132-132: LGTM! Consistent usage of sorting options.

The sortByOp property is correctly passed to both spreadsheet creation functions, ensuring consistent sorting behavior across the application.

Also applies to: 153-153

packages/desktop-client/src/components/reports/ReportOptions.ts (2)

54-57: LGTM! Enhanced type safety for sort options.

The explicit type annotations for sortByOptions improve type safety and make the code more maintainable.


27-27: LGTM! Consistent value format.

The sortBy default value now uses the lowercase format ('desc') which aligns with the sortByOpType values.

packages/desktop-client/src/components/reports/ReportSidebar.tsx (2)

149-150: LGTM! Safe handling of optional sort values.

The function now accepts an optional parameter and provides a sensible default value of 'asc', ensuring backward compatibility.


304-309: LGTM! Type-safe select options.

The Select component props are correctly updated to handle the new type system:

  • onChange accepts optional sortByOpType
  • options use format for values
  • disabledKeys is properly cast to sortByOpType[]

@matt-fidd
Copy link
Contributor

/update-vrt

@matt-fidd matt-fidd self-assigned this Jan 31, 2025
@matt-fidd matt-fidd modified the milestone: v25.2.0 Jan 31, 2025
@matt-fidd
Copy link
Contributor

The VRT changes don't look quite right

@UnderKoen
Copy link
Member Author

/update-vrt

@UnderKoen UnderKoen force-pushed the UnderKoen/sorting-report-dashboard branch from 7cf781e to 83ab62c Compare February 1, 2025 11:51
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: 0

🧹 Nitpick comments (2)
packages/desktop-client/src/components/reports/disabledList.ts (2)

67-67: Consider removing redundant defaultSort values.

Some graph types (like 'AreaGraph') have disableSort: true but still specify a defaultSort value. Consider removing the defaultSort property for graph types where sorting is disabled to avoid confusion.

  {
    description: 'AreaGraph',
    disabledSplit: ['Category', 'Group', 'Payee', 'Account'],
    defaultSplit: 'Interval',
    disabledType: [],
    defaultType: 'Payment',
    disableLegend: true,
    disableSort: true,
-   defaultSort: 'desc',
  },

Also applies to: 75-75, 85-85, 93-93


107-107: Remove redundant defaultSort values from time graphs.

All graph types in timeGraphOptions have disableSort: true but still specify a defaultSort value. Since sorting is disabled for these graphs, the defaultSort property is redundant and should be removed.

  {
    description: 'TableGraph',
    disabledSplit: ['Interval'],
    defaultSplit: 'Category',
    disabledType: ['Net Payment', 'Net Deposit'],
    defaultType: 'Payment',
    disableLegend: true,
    disableLabel: true,
    disableSort: true,
-   defaultSort: 'desc',
  },
  {
    description: 'StackedBarGraph',
    disabledSplit: ['Interval'],
    defaultSplit: 'Category',
    disabledType: [],
    defaultType: 'Payment',
    disableSort: true,
-   defaultSort: 'desc',
  },
  {
    description: 'LineGraph',
    disabledSplit: ['Interval'],
    defaultSplit: 'Category',
    disabledType: [],
    defaultType: 'Payment',
    disableLegend: false,
    disableLabel: true,
    disableSort: true,
-   defaultSort: 'desc',
  },

Also applies to: 116-116, 127-127

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7cf781e and 83ab62c.

📒 Files selected for processing (3)
  • packages/desktop-client/src/components/reports/ReportSidebar.tsx (3 hunks)
  • packages/desktop-client/src/components/reports/disabledList.ts (7 hunks)
  • packages/loot-core/migrations/1736640000000__custom_report_sorting.sql (1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
  • packages/loot-core/migrations/1736640000000__custom_report_sorting.sql
  • packages/desktop-client/src/components/reports/ReportSidebar.tsx
🧰 Additional context used
📓 Learnings (1)
packages/desktop-client/src/components/reports/disabledList.ts (1)
Learnt from: matt-fidd
PR: actualbudget/actual#4141
File: packages/loot-core/src/types/models/reports.d.ts:14-14
Timestamp: 2025-01-12T20:27:52.636Z
Learning: In the Actual Budget codebase's reports feature, `sortBy` in `CustomReportEntity` is typed as string to store user-friendly values ('Ascending'/'Descending'), while `sortByOpType` ('asc'/'desc') is used internally for operations.
⏰ Context from checks skipped due to timeout of 90000ms (4)
  • GitHub Check: Wait for Netlify build to finish
  • GitHub Check: build (windows-latest)
  • GitHub Check: build (ubuntu-latest)
  • GitHub Check: Analyze
🔇 Additional comments (2)
packages/desktop-client/src/components/reports/disabledList.ts (2)

3-3: LGTM!

The type-only import is correctly implemented using the type keyword.


53-53: LGTM!

The type update improves type safety by constraining defaultSort to valid sort operations using sortByOpType.

@UnderKoen UnderKoen requested a review from matt-fidd February 1, 2025 12:06
Copy link
Contributor

@matt-fidd matt-fidd left a comment

Choose a reason for hiding this comment

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

Just one :)

…ting.sql

Co-authored-by: Matt Fiddaman <github@m.fiddaman.uk>
@matt-fidd
Copy link
Contributor

Actually, one more thing.

This doesn't work for existing edge users because of the migration. It's probably best to add another to fix the database instead of changing the first one.

@matt-fidd
Copy link
Contributor

Just going to try VRT again now to see if this fixes the original things we were seeing with the sorting in the original PR

/update-vrt

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: 0

🧹 Nitpick comments (1)
packages/loot-core/migrations/1738491452000__sorting_rename.sql (1)

3-7: Standardization of sort_by Column Values.

The ALTER TABLE statement updates the default value for sort_by to 'desc', and the subsequent UPDATE statements correctly convert legacy string representations to standardized lower-case values ('Descending' → 'desc', 'Ascending' → 'asc', 'Budget' → 'budget', 'Name' → 'name'). This aligns well with our internal type conventions and promotes consistency across the dataset.

Minor Note: Consider verifying that any unexpected or uncategorized values in the sort_by column are handled appropriately, if needed.

📜 Review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 266b656 and 92d9dee.

📒 Files selected for processing (1)
  • packages/loot-core/migrations/1738491452000__sorting_rename.sql (1 hunks)
🧰 Additional context used
📓 Learnings (1)
📓 Common learnings
Learnt from: matt-fidd
PR: actualbudget/actual#4141
File: packages/loot-core/src/types/models/reports.d.ts:14-14
Timestamp: 2025-01-12T20:27:52.636Z
Learning: In the Actual Budget codebase's reports feature, `sortBy` in `CustomReportEntity` is typed as string to store user-friendly values ('Ascending'/'Descending'), while `sortByOpType` ('asc'/'desc') is used internally for operations.
⏰ Context from checks skipped due to timeout of 90000ms (6)
  • GitHub Check: build (macos-latest)
  • GitHub Check: Analyze
  • GitHub Check: build (windows-latest)
  • GitHub Check: Wait for Netlify build to finish
  • GitHub Check: build (ubuntu-latest)
  • GitHub Check: compare
🔇 Additional comments (2)
packages/loot-core/migrations/1738491452000__sorting_rename.sql (2)

1-1: Transactional Integrity Initiation.

The BEGIN TRANSACTION; statement ensures that all subsequent modifications are executed atomically. This sets a solid foundation for safe migrations.


9-9: Transaction Completion.

The COMMIT; statement ensures that all the changes within the transaction are finalized. This is critical for maintaining data integrity post-migration.

Copy link
Contributor

@matt-fidd matt-fidd left a comment

Choose a reason for hiding this comment

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

This should fix the tests, ALTER COLUMN isn't supported in sqlite

Co-authored-by: Matt Fiddaman <github@m.fiddaman.uk>
Copy link
Contributor

@matt-fidd matt-fidd 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 fixing

@matt-fidd matt-fidd merged commit b14c77a into master Feb 2, 2025
20 checks passed
@matt-fidd matt-fidd deleted the UnderKoen/sorting-report-dashboard branch February 2, 2025 16:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants