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

♻️ refactored cash-flow report from victory to recharts #2260

Merged
merged 12 commits into from
Jan 22, 2024

Conversation

MatissJanis
Copy link
Member

No description provided.

Copy link

netlify bot commented Jan 20, 2024

Deploy Preview for actualbudget ready!

Name Link
🔨 Latest commit 02bdd09
🔍 Latest deploy log https://app.netlify.com/sites/actualbudget/deploys/65ad3140b6e350000813473c
😎 Deploy Preview https://deploy-preview-2260.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 20, 2024

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
10 5.09 MB → 4.98 MB (-115.72 kB) -2.22%
Changeset (largest 100 files by percent change)
File Δ Size
src/components/reports/graphs/CashFlowGraph.tsx 📈 +2.73 kB (+150.05%) 1.82 kB → 4.56 kB
node_modules/d3-shape/src/constant.js 📈 +2 B (+2.70%) 74 B → 76 B
node_modules/d3-format/src/precisionRound.js 📈 +4 B (+2.68%) 149 B → 153 B
node_modules/d3-format/src/precisionPrefix.js 📈 +4 B (+2.60%) 154 B → 158 B
node_modules/d3-format/src/precisionFixed.js 📈 +2 B (+2.44%) 82 B → 84 B
node_modules/d3-format/src/exponent.js 📈 +2 B (+2.33%) 86 B → 88 B
node_modules/lodash/_WeakMap.js 📈 +4 B (+2.15%) 186 B → 190 B
node_modules/d3-shape/src/math.js 📈 +8 B (+1.92%) 416 B → 424 B
src/components/reports/spreadsheets/cash-flow-spreadsheet.tsx 📈 +120 B (+1.87%) 6.26 kB → 6.38 kB
src/components/reports/chart-theme.ts 📈 +57 B (+1.75%) 3.19 kB → 3.24 kB
node_modules/recharts/es6/chart/ComposedChart.js 📈 +6 B (+1.63%) 367 B → 373 B
node_modules/d3-shape/src/symbol/square.js 📈 +2 B (+1.53%) 131 B → 133 B
node_modules/d3-shape/src/symbol/circle.js 📈 +2 B (+1.35%) 148 B → 150 B
node_modules/d3-shape/src/symbol/diamond.js 📈 +4 B (+1.33%) 301 B → 305 B
node_modules/lodash/isBoolean.js 📈 +8 B (+1.10%) 728 B → 736 B
node_modules/lodash/_baseUniq.js 📈 +20 B (+1.09%) 1.79 kB → 1.81 kB
node_modules/postcss-value-parser/lib/index.js 📈 +6 B (+1.07%) 562 B → 568 B
node_modules/lodash/_baseSetToString.js 📈 +6 B (+0.96%) 625 B → 631 B
node_modules/lodash/_createRange.js 📈 +8 B (+0.96%) 836 B → 844 B
node_modules/lodash/_getAllKeysIn.js 📈 +4 B (+0.88%) 457 B → 461 B
node_modules/d3-shape/src/symbol/wye.js 📈 +6 B (+0.85%) 702 B → 708 B
node_modules/lodash/_createSet.js 📈 +4 B (+0.83%) 483 B → 487 B
node_modules/d3-shape/src/area.js 📈 +24 B (+0.81%) 2.9 kB → 2.93 kB
node_modules/d3-shape/src/line.js 📈 +12 B (+0.78%) 1.51 kB → 1.52 kB
node_modules/lodash/_arrayIncludes.js 📈 +4 B (+0.77%) 520 B → 524 B
node_modules/postcss-value-parser/lib/unit.js 📈 +8 B (+0.72%) 1.09 kB → 1.1 kB
node_modules/recharts/es6/chart/LineChart.js 📈 +2 B (+0.71%) 283 B → 285 B
node_modules/recharts/es6/chart/AreaChart.js 📈 +2 B (+0.71%) 283 B → 285 B
node_modules/d3-path/src/path.js 📈 +30 B (+0.69%) 4.25 kB → 4.28 kB
node_modules/lodash/_baseEvery.js 📈 +4 B (+0.65%) 615 B → 619 B
node_modules/lodash/_baseIndexOf.js 📈 +4 B (+0.64%) 625 B → 629 B
node_modules/lodash/max.js 📈 +4 B (+0.62%) 642 B → 646 B
node_modules/lodash/min.js 📈 +4 B (+0.62%) 642 B → 646 B
node_modules/d3-shape/src/stack.js 📈 +8 B (+0.62%) 1.26 kB → 1.27 kB
node_modules/recharts/es6/chart/Sankey.js 📈 +166 B (+0.60%) 26.83 kB → 26.99 kB
node_modules/lodash/mapValues.js 📈 +8 B (+0.58%) 1.34 kB → 1.35 kB
node_modules/d3-shape/src/path.js 📈 +2 B (+0.56%) 354 B → 356 B
node_modules/recharts/es6/chart/BarChart.js 📈 +2 B (+0.55%) 361 B → 363 B
node_modules/lodash/isString.js 📈 +4 B (+0.52%) 772 B → 776 B
node_modules/lodash/sortBy.js 📈 +8 B (+0.47%) 1.65 kB → 1.66 kB
node_modules/lodash/flatMap.js 📈 +4 B (+0.47%) 857 B → 861 B
node_modules/lodash/_getSymbols.js 📈 +4 B (+0.45%) 880 B → 884 B
node_modules/lodash/every.js 📈 +8 B (+0.43%) 1.82 kB → 1.83 kB
node_modules/d3-shape/src/symbol/cross.js 📈 +2 B (+0.43%) 467 B → 469 B
node_modules/lodash/sumBy.js 📈 +4 B (+0.43%) 938 B → 942 B
node_modules/lodash/isNumber.js 📈 +4 B (+0.42%) 942 B → 946 B
node_modules/lodash/uniqBy.js 📈 +4 B (+0.38%) 1.03 kB → 1.03 kB
node_modules/d3-shape/src/arc.js 📈 +32 B (+0.37%) 8.49 kB → 8.52 kB
node_modules/d3-shape/src/symbol/star.js 📈 +2 B (+0.36%) 563 B → 565 B
src/components/reports/spreadsheets/calculateLegend.ts 📈 +2 B (+0.31%) 655 B → 657 B
node_modules/lodash/debounce.js 📈 +18 B (+0.29%) 6 kB → 6.02 kB
node_modules/lodash/throttle.js 📈 +8 B (+0.29%) 2.69 kB → 2.7 kB
node_modules/d3-scale/src/linear.js 📈 +4 B (+0.28%) 1.39 kB → 1.39 kB
node_modules/lodash/map.js 📈 +4 B (+0.25%) 1.54 kB → 1.54 kB
node_modules/lodash/_equalByTag.js 📈 +8 B (+0.21%) 3.64 kB → 3.65 kB
node_modules/recharts/es6/util/DataUtils.js 📈 +6 B (+0.17%) 3.53 kB → 3.53 kB
src/components/reports/graphs/BarLineGraph.tsx 📈 +6 B (+0.15%) 3.78 kB → 3.79 kB
node_modules/recharts-scale/es6/util/utils.js 📈 +6 B (+0.15%) 3.94 kB → 3.95 kB
node_modules/fast-equals/dist/esm/index.mjs 📈 +26 B (+0.13%) 19.38 kB → 19.4 kB
src/components/reports/graphs/SankeyGraph.tsx 📈 +4 B (+0.12%) 3.31 kB → 3.31 kB
src/components/reports/graphs/LineGraph.tsx 📈 +4 B (+0.11%) 3.61 kB → 3.61 kB
src/components/reports/graphs/BarGraph.tsx 📈 +6 B (+0.09%) 6.84 kB → 6.84 kB
node_modules/recharts/es6/chart/generateCategoricalChart.js 📈 +76 B (+0.08%) 91.51 kB → 91.58 kB
src/components/reports/graphs/StackedBarGraph.tsx 📈 +4 B (+0.08%) 4.84 kB → 4.85 kB
src/components/reports/graphs/NetWorthGraph.tsx 📈 +4 B (+0.07%) 5.4 kB → 5.4 kB
node_modules/reduce-css-calc/dist/lib/reducer.js 📈 +6 B (+0.07%) 8.12 kB → 8.13 kB
node_modules/recharts/es6/cartesian/Area.js 📈 +16 B (+0.07%) 23.91 kB → 23.93 kB
node_modules/recharts-scale/es6/getNiceTickValues.js 📈 +6 B (+0.06%) 10.36 kB → 10.37 kB
src/components/reports/graphs/AreaGraph.tsx 📈 +4 B (+0.06%) 7.03 kB → 7.04 kB
node_modules/recharts/es6/cartesian/Bar.js 📈 +10 B (+0.05%) 20.24 kB → 20.25 kB
node_modules/recharts/es6/component/Tooltip.js 📈 +6 B (+0.04%) 13.74 kB → 13.75 kB
node_modules/recharts/es6/cartesian/Line.js 📈 +10 B (+0.04%) 22.94 kB → 22.95 kB
node_modules/decimal.js-light/decimal.mjs 📈 +20 B (+0.04%) 48.44 kB → 48.46 kB
node_modules/d3-format/src/locale.js 📈 +2 B (+0.03%) 5.68 kB → 5.69 kB
node_modules/recharts/es6/util/DOMUtils.js 📈 +2 B (+0.03%) 6.86 kB → 6.86 kB
node_modules/recharts/es6/cartesian/CartesianAxis.js 📈 +4 B (+0.02%) 16.57 kB → 16.58 kB
node_modules/recharts/es6/component/Label.js 📈 +4 B (+0.02%) 17.5 kB → 17.5 kB
node_modules/recharts/es6/cartesian/getTicks.js 📈 +2 B (+0.02%) 10.39 kB → 10.4 kB
node_modules/recharts/es6/component/Text.js 📈 +2 B (+0.02%) 10.68 kB → 10.68 kB
node_modules/recharts/es6/polar/PolarAngleAxis.js 📈 +2 B (+0.02%) 11.05 kB → 11.05 kB
node_modules/recharts/es6/polar/PolarRadiusAxis.js 📈 +2 B (+0.02%) 11.89 kB → 11.89 kB
node_modules/recharts/es6/polar/Pie.js 📈 +4 B (+0.02%) 23.79 kB → 23.8 kB
node_modules/recharts/es6/util/CartesianUtils.js 📈 +2 B (+0.02%) 12.03 kB → 12.03 kB
node_modules/recharts/es6/cartesian/Brush.js 📈 +4 B (+0.02%) 24.52 kB → 24.52 kB
node_modules/recharts/es6/util/ChartUtils.js 📈 +6 B (+0.02%) 37.18 kB → 37.19 kB
node_modules/recharts/es6/cartesian/Scatter.js 📈 +2 B (+0.01%) 18.45 kB → 18.46 kB
node_modules/victory-vendor/es/d3-shape.js +0 B (0%) 0 B → 0 B
node_modules/victory-core/es/victory-label/victory-label.js 📉 -2 B (-0.01%) 22.69 kB → 22.69 kB
node_modules/victory-core/es/victory-util/axis.js 📉 -2 B (-0.01%) 13.63 kB → 13.63 kB
node_modules/victory-core/es/victory-transition/victory-transition.js 📉 -2 B (-0.02%) 10.23 kB → 10.22 kB
node_modules/victory-core/es/victory-animation/victory-animation.js 📉 -2 B (-0.02%) 10.14 kB → 10.14 kB
node_modules/victory-bar/es/path-helper-methods.js 📉 -4 B (-0.02%) 18.11 kB → 18.1 kB
node_modules/victory-axis/es/helper-methods.js 📉 -6 B (-0.03%) 21.87 kB → 21.87 kB
node_modules/victory-chart/es/victory-chart.js 📉 -2 B (-0.03%) 6.41 kB → 6.41 kB
node_modules/victory-core/es/victory-util/add-events.js 📉 -6 B (-0.03%) 17.93 kB → 17.92 kB
node_modules/victory-shared-events/es/victory-shared-events.js 📉 -6 B (-0.04%) 16.28 kB → 16.28 kB
node_modules/react-fast-compare/index.js 📉 -2 B (-0.04%) 4.79 kB → 4.79 kB
node_modules/victory-polar-axis/es/victory-polar-axis.js 📉 -6 B (-0.05%) 12.95 kB → 12.95 kB
node_modules/victory-core/es/victory-primitives/arc.js 📉 -2 B (-0.05%) 3.83 kB → 3.83 kB
node_modules/victory-polar-axis/es/helper-methods.js 📉 -8 B (-0.06%) 14 kB → 14 kB
View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

No assets were bigger

Smaller

Asset File Size % Changed
static/js/ReportRouter.js 1.95 MB → 1.84 MB (-115.72 kB) -5.78%

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/BackgroundImage.js 122.29 kB 0%
static/js/ButtonLink.js 379 B 0%
static/js/narrow.js 81.84 kB 0%
static/js/BalanceTooltip.js 6.06 kB 0%
static/js/FiltersMenu.js 28.92 kB 0%
static/js/wide.js 239.36 kB 0%
static/js/index.js 2.64 MB 0%

Copy link
Contributor

github-actions bot commented Jan 20, 2024

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.24 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.24 MB 0%

Copy link
Member

Choose a reason for hiding this comment

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

Would it be possible to get the thin bars again? Or just thinner?

Choose a reason for hiding this comment

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

I kinda like the fatter bars, they add vibrancy the thin ones always seemed a bit harder to read. No shaming please. :)

Copy link
Member

Choose a reason for hiding this comment

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

The wide bars feel more cluttered to me. I believe white space is part of Actual's design language and the different bars seem to go against that.

Choose a reason for hiding this comment

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

Can see what you're saying, possibly some room in the middle?

For what it's worth sizes are all over the place in live, although there's always generous spacing as you noted.

One month (Skinny):
image

Three months (Skinny):
image

Six months (Thick):
image

One year (Medium):
image

All time (Skinny):
image

@Teprifer
Copy link

(Images from the same budget file.)

Y axis has less increments, not inherently bad, just looks like it's scaling a bit above where the max value is.

Live:
image

PR
image

I think it'd be good to have the number formatting applies to the axis though(in my case, commas), per live.

X axis is showing more increments, I'm in favour as it's still not crowded:
Live:
image
PR:
image

Minor:
Privacy mode replaced the Y axis values with "..." instead of bluring, this is inconsistent with how the feature affects values elsewhere.

  • Mouse over doesn't show the value (it does in live with blur).
    Worth noting that on live they aren't changed by privacy mode at all (a bug imo).

@youngcw
Copy link
Member

youngcw commented Jan 20, 2024

the x-axis is funky when looking at small date ranges. The spacing is not consistent.
image

@MatissJanis
Copy link
Member Author

MatissJanis commented Jan 20, 2024

Thanks for the review @youngcw and @Teprifer !

Couple of updates:

  1. Y axis will now have 8 ticks
  2. Y axis ticks will be formatted as numbers (i.e. with coma separators or other formats - depending on users prefs)
  3. Bar charts now have max size

Things that aren't done:

  • Y axis + fancy privacy blur mode - sadly this won't be possible as recharts is a SVG drawing; it is possible to do blurs with SVG, but because the ticks are so close to the edge - a sharp edge is visible on the blur thus making it look broken; as for consistency: the three dots approach is used for all recharts implementations we have now that support privacy mode (check custom reports);
  • inconsistent X axis gaps: this is actually a feature of recharts; it tries to fit as many ticks on the x-axis as possible. If the tick text is too long: it skips adding these ticks. Which is why you're seeing some gaps where a long text would have been. We could override this logic with manual tick definitions, however, this has a very high likelihood of having overlapping tick contents for some resolutions. It's hard to predict when and how it might happen. Which is why I'd recommend sticking with the default recharts logic here. scratch that - it is actually pretty trivial to define the min gap between the ticks; updated; this should give us a bit more breathing room

@MatissJanis
Copy link
Member Author

Found one more bug and patched it: transfers value was not showing in the tooltip.

@youngcw
Copy link
Member

youngcw commented Jan 20, 2024

This is a related issue. I don't know if we care to actual change anything. #2237
the tl;dr is that the report separates out transfers from expenses, but the report dash card doesn't so the numbers show up different.

@youngcw
Copy link
Member

youngcw commented Jan 20, 2024

Found one more bug and patched it: transfers value was not showing in the tooltip.

Im still not seeing transfers in the hover tooltip.

@MatissJanis
Copy link
Member Author

@youngcw I think that's a fair point, but I'd prefer if we kept the scope here minimal: purely a refactor with minimal changes to the UX/functionality. We can circle back afterwards for improvements (for example: I'd really like to add 2x separate Y-axis instead of 1x to better scale the graph.. or perhaps change the scale to sqrt)

@MatissJanis
Copy link
Member Author

Found one more bug and patched it: transfers value was not showing in the tooltip.

Im still not seeing transfers in the hover tooltip.

You'd only see them if there were any transfers. So for testing this my recommendation is: open demo or your local app and find a time period with transfer (by hovering on the graph and finding a tooltip that has a transfer in it..).

Once you found one: open the preview link here and locate the same exact timeframe. The transfer should show up here too.

@youngcw
Copy link
Member

youngcw commented Jan 20, 2024

Found one more bug and patched it: transfers value was not showing in the tooltip.

Im still not seeing transfers in the hover tooltip.

You'd only see them if there were any transfers. So for testing this my recommendation is: open demo or your local app and find a time period with transfer (by hovering on the graph and finding a tooltip that has a transfer in it..).

Once you found one: open the preview link here and locate the same exact timeframe. The transfer should show up here too.

Ok, I see it now. Its being smarter than I expected.

@Teprifer
Copy link

The animations are darned smooth, but the one for line feels like it takes too long to get to its final state because it is slowing down the closer it gets. It completes well after the bars have finished moving.

Thoughts, have it take 20-30% less time, either by removing the slow down aspect, or spend more time at the faster rate and have the slow down over a shorter time period. Depending on what's possible or feels good etc.

I agree on having two y-axis, the bars are barely nearly invisible when looking at the smaller time frames in my budget. When doing so I think youngcw's comment above about bar thickness would need to be taken in to account as the bars would be much bigger vertically.

@joel-jeremy
Copy link
Contributor

We should not blur the amounts in the tooltip when hovering over the graphs IMO since there will be no way for the user to show those values without disabling privacy mode.

@MatissJanis
Copy link
Member Author

Changes:

  • removed privacy mode from tooltips (makes sense IMO)
  • reduced animation duration from 1.5s to 1s

@MatissJanis MatissJanis merged commit a4e97e0 into master Jan 22, 2024
19 checks passed
@MatissJanis MatissJanis deleted the matiss/cash-flow branch January 22, 2024 08:34
@trafico-bot trafico-bot bot added ✨ Merged Pull Request has been merged successfully and removed ✅ Approved labels Jan 22, 2024
FlorianLang06 pushed a commit to FlorianLang06/actual that referenced this pull request Mar 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
✨ Merged Pull Request has been merged successfully
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants