POC Recharts charting library

[shaankhosla]

This PR is associated with #1739 and serves as a POC that Recharts is a suitable replacement for our current charting library. In this PR, I've recreated the NetWorth graph with Recharts in a very simple, rough way.

[netlify]

✅ Deploy Preview for actualbudget ready!

Name	Link
🔨 Latest commit	73471ab
🔍 Latest deploy log	https://app.netlify.com/sites/actualbudget/deploys/6525cb1e380aec00077d4306
😎 Deploy Preview	https://deploy-preview-1740.demo.actualbudget.org
📱 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 site configuration.

[github-actions]

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
16	2.49 MB → 2.82 MB (+340.94 kB)	+13.39%

Changeset (largest 100 files by percent change)

File	Δ	Size
../../node_modules/reduce-css-calc/dist/parser.js	🆕 +118.79 kB	0 B → 118.79 kB
../../node_modules/recharts/es6/chart/generateCategoricalChart.js	🆕 +93.06 kB	0 B → 93.06 kB
../../node_modules/decimal.js-light/decimal.js	🆕 +52.12 kB	0 B → 52.12 kB
../../node_modules/recharts/es6/util/ChartUtils.js	🆕 +38.41 kB	0 B → 38.41 kB
../../node_modules/recharts/es6/cartesian/Brush.js	🆕 +24.91 kB	0 B → 24.91 kB
../../node_modules/recharts/es6/cartesian/Area.js	🆕 +24.56 kB	0 B → 24.56 kB
../../node_modules/recharts/es6/cartesian/Bar.js	🆕 +20.98 kB	0 B → 20.98 kB
../../node_modules/fast-equals/dist/esm/index.mjs	🆕 +19.75 kB	0 B → 19.75 kB
../../node_modules/react-smooth/es6/Animate.js	🆕 +18.24 kB	0 B → 18.24 kB
../../node_modules/recharts/es6/component/Label.js	🆕 +17.75 kB	0 B → 17.75 kB
../../node_modules/react-transition-group/Transition.js	🆕 +17.29 kB	0 B → 17.29 kB
../../node_modules/recharts/es6/cartesian/CartesianAxis.js	🆕 +16.97 kB	0 B → 16.97 kB
../../node_modules/recharts/es6/cartesian/CartesianGrid.js	🆕 +15.77 kB	0 B → 15.77 kB
../../node_modules/react-resize-detector/build/index.esm.js	🆕 +14.32 kB	0 B → 14.32 kB
../../node_modules/recharts/es6/component/Tooltip.js	🆕 +14.02 kB	0 B → 14.02 kB
../../node_modules/recharts/es6/util/CartesianUtils.js	🆕 +12.31 kB	0 B → 12.31 kB
../../node_modules/recharts-scale/es6/getNiceTickValues.js	🆕 +12.01 kB	0 B → 12.01 kB
../../node_modules/recharts/es6/util/ReactUtils.js	🆕 +11.95 kB	0 B → 11.95 kB
../../node_modules/react-transition-group/CSSTransition.js	🆕 +11.83 kB	0 B → 11.83 kB
../../node_modules/recharts/es6/component/Legend.js	🆕 +11.74 kB	0 B → 11.74 kB
../../node_modules/recharts/es6/component/Text.js	🆕 +10.97 kB	0 B → 10.97 kB
../../node_modules/recharts/es6/cartesian/getTicks.js	🆕 +10.68 kB	0 B → 10.68 kB
../../node_modules/recharts/es6/shape/Sector.js	🆕 +10.51 kB	0 B → 10.51 kB
../../node_modules/recharts/es6/component/DefaultLegendContent.js	🆕 +10.49 kB	0 B → 10.49 kB
../../node_modules/recharts/es6/shape/Rectangle.js	🆕 +10.1 kB	0 B → 10.1 kB
../../node_modules/recharts/es6/util/types.js	🆕 +9.55 kB	0 B → 9.55 kB
../../node_modules/recharts/es6/util/PolarUtils.js	🆕 +9.42 kB	0 B → 9.42 kB
../../node_modules/react-smooth/es6/AnimateGroupChild.js	🆕 +9.24 kB	0 B → 9.24 kB
../../node_modules/eventemitter3/index.js	🆕 +8.93 kB	0 B → 8.93 kB
../../node_modules/reduce-css-calc/dist/lib/reducer.js	🆕 +8.14 kB	0 B → 8.14 kB
../../node_modules/recharts/es6/cartesian/ReferenceLine.js	🆕 +7.88 kB	0 B → 7.88 kB
../../node_modules/react-smooth/es6/configUpdate.js	🆕 +7.73 kB	0 B → 7.73 kB
../../node_modules/recharts/es6/component/DefaultTooltipContent.js	🆕 +7.62 kB	0 B → 7.62 kB
../../node_modules/recharts/es6/component/LabelList.js	🆕 +7.54 kB	0 B → 7.54 kB
../../node_modules/react-smooth/es6/easing.js	🆕 +7.32 kB	0 B → 7.32 kB
../../node_modules/react-transition-group/TransitionGroup.js	🆕 +7.31 kB	0 B → 7.31 kB
../../node_modules/recharts/es6/component/ResponsiveContainer.js	🆕 +6.89 kB	0 B → 6.89 kB
../../node_modules/recharts/es6/util/DOMUtils.js	🆕 +6.85 kB	0 B → 6.85 kB
../../node_modules/react-smooth/es6/util.js	🆕 +6.22 kB	0 B → 6.22 kB
../../node_modules/recharts/es6/cartesian/ErrorBar.js	🆕 +6.12 kB	0 B → 6.12 kB
../../node_modules/reduce-css-calc/node_modules/postcss-value-parser/lib/parse.js	🆕 +6.02 kB	0 B → 6.02 kB
../../node_modules/recharts/es6/shape/Curve.js	🆕 +5.93 kB	0 B → 5.93 kB
../../node_modules/recharts/es6/shape/Symbols.js	🆕 +5.79 kB	0 B → 5.79 kB
../../node_modules/recharts/es6/chart/AccessibilityManager.js	🆕 +5.46 kB	0 B → 5.46 kB
../../node_modules/recharts/es6/cartesian/ReferenceArea.js	🆕 +5.29 kB	0 B → 5.29 kB
../../node_modules/react-transition-group/ReplaceTransition.js	🆕 +4.96 kB	0 B → 4.96 kB
../../node_modules/react-transition-group/utils/ChildMapping.js	🆕 +4.88 kB	0 B → 4.88 kB
../../node_modules/recharts/es6/cartesian/ReferenceDot.js	🆕 +4.83 kB	0 B → 4.83 kB
../../node_modules/recharts/es6/shape/Cross.js	🆕 +4.45 kB	0 B → 4.45 kB
../../node_modules/recharts-scale/es6/util/utils.js	🆕 +3.96 kB	0 B → 3.96 kB
../../node_modules/recharts/es6/util/DataUtils.js	🆕 +3.78 kB	0 B → 3.78 kB
../../node_modules/recharts/es6/util/DetectReferenceElementsDomain.js	🆕 +3.1 kB	0 B → 3.1 kB
../../node_modules/react-smooth/es6/AnimateManager.js	🆕 +2.71 kB	0 B → 2.71 kB
../../node_modules/recharts-scale/es6/util/arithmetic.js	🆕 +2.6 kB	0 B → 2.6 kB
../../node_modules/css-unit-converter/index.js	🆕 +2.57 kB	0 B → 2.57 kB
../../node_modules/recharts/es6/util/CssPrefixUtils.js	🆕 +2.34 kB	0 B → 2.34 kB
../../node_modules/recharts/es6/container/Surface.js	🆕 +2.17 kB	0 B → 2.17 kB
../../node_modules/reduce-css-calc/dist/lib/stringifier.js	🆕 +2.02 kB	0 B → 2.02 kB
../../node_modules/lodash/every.js	🆕 +1.83 kB	0 B → 1.83 kB
../../node_modules/recharts/es6/container/Layer.js	🆕 +1.7 kB	0 B → 1.7 kB
../../node_modules/lodash/sortBy.js	🆕 +1.63 kB	0 B → 1.63 kB
../../node_modules/lodash/map.js	🆕 +1.58 kB	0 B → 1.58 kB
../../node_modules/reduce-css-calc/dist/index.js	🆕 +1.57 kB	0 B → 1.57 kB
../../node_modules/lodash/_unicodeToArray.js	🆕 +1.55 kB	0 B → 1.55 kB
../../node_modules/classnames/index.js	🆕 +1.38 kB	0 B → 1.38 kB
../../node_modules/lodash/mapValues.js	🆕 +1.31 kB	0 B → 1.31 kB
../../node_modules/reduce-css-calc/node_modules/postcss-value-parser/lib/stringify.js	🆕 +1.15 kB	0 B → 1.15 kB
../../node_modules/react-transition-group/utils/PropTypes.js	🆕 +1.12 kB	0 B → 1.12 kB
../../node_modules/react-smooth/es6/AnimateGroup.js	🆕 +1022 B	0 B → 1022 B
../../node_modules/reduce-css-calc/dist/lib/convert.js	🆕 +985 B	0 B → 985 B
../../node_modules/recharts/es6/shape/Dot.js	🆕 +982 B	0 B → 982 B
../../node_modules/reduce-css-calc/node_modules/postcss-value-parser/lib/unit.js	🆕 +953 B	0 B → 953 B
../../node_modules/lodash/_hasUnicode.js	🆕 +949 B	0 B → 949 B
../../node_modules/lodash/isNaN.js	🆕 +911 B	0 B → 911 B
../../node_modules/lodash/_baseExtremum.js	🆕 +897 B	0 B → 897 B
../../node_modules/lodash/isNumber.js	🆕 +886 B	0 B → 886 B
../../node_modules/recharts/es6/util/getEveryNthWithCondition.js	🆕 +860 B	0 B → 860 B
../../node_modules/recharts/es6/util/LogUtils.js	🆕 +833 B	0 B → 833 B
../../node_modules/lodash/flatMap.js	🆕 +812 B	0 B → 812 B
../../node_modules/lodash/_createCaseFirst.js	🆕 +811 B	0 B → 811 B
../../node_modules/lodash/_baseSlice.js	🆕 +756 B	0 B → 756 B
../../node_modules/lodash/isBoolean.js	🆕 +681 B	0 B → 681 B
../../node_modules/lodash/_baseEvery.js	🆕 +625 B	0 B → 625 B
../../node_modules/dom-helpers/class/addClass.js	🆕 +622 B	0 B → 622 B
../../node_modules/lodash/max.js	🆕 +614 B	0 B → 614 B
../../node_modules/lodash/min.js	🆕 +614 B	0 B → 614 B
../../node_modules/reduce-css-calc/node_modules/postcss-value-parser/lib/index.js	🆕 +607 B	0 B → 607 B
../../node_modules/react-transition-group/index.js	🆕 +604 B	0 B → 604 B
../../node_modules/lodash/_arrayEvery.js	🆕 +597 B	0 B → 597 B
../../node_modules/dom-helpers/class/removeClass.js	🆕 +568 B	0 B → 568 B
../../node_modules/recharts/es6/util/Global.js	🆕 +563 B	0 B → 563 B
../../node_modules/recharts/es6/chart/AreaChart.js	🆕 +547 B	0 B → 547 B
../../node_modules/lodash/_castSlice.js	🆕 +517 B	0 B → 517 B
../../node_modules/lodash/upperFirst.js	🆕 +470 B	0 B → 470 B
../../node_modules/recharts/es6/cartesian/XAxis.js	🆕 +469 B	0 B → 469 B
../../node_modules/lodash/_stringToArray.js	🆕 +450 B	0 B → 450 B
../../node_modules/react-smooth/es6/setRafTimeout.js	🆕 +445 B	0 B → 445 B
../../node_modules/recharts/es6/cartesian/YAxis.js	🆕 +435 B	0 B → 435 B
../../node_modules/reduce-css-calc/node_modules/postcss-value-parser/lib/walk.js	🆕 +425 B	0 B → 425 B
../../node_modules/recharts/es6/util/ShallowEqual.js	🆕 +383 B	0 B → 383 B

View detailed bundle breakdown

Added

Asset	File Size	% Changed
static/js/848.chunk.js	0 B → 760.98 kB (+760.98 kB)	-

Removed

Asset	File Size	% Changed
static/js/678.chunk.js	420.74 kB → 0 B (-420.74 kB)	-100%

Bigger

Asset	File Size	% Changed
static/js/reports.chunk.js	29.23 kB → 29.92 kB (+709 B)	+2.37%

Smaller

No assets were smaller

Unchanged

Asset	File Size	% Changed
static/js/main.js	1.12 MB	0%
static/media/Inter-italic.var.woff2	239.29 kB	0%
static/media/Inter-roman.var.woff2	221.86 kB	0%
static/js/713.chunk.js	156.56 kB	0%
static/js/wide-components.chunk.js	126.79 kB	0%
static/js/231.chunk.js	117.37 kB	0%
static/js/narrow-components.chunk.js	43.24 kB	0%
static/js/473.chunk.js	13 kB	0%
static/js/389.chunk.js	12.77 kB	0%
static/js/resize-observer-polyfill.chunk.js	8.88 kB	0%
static/css/main.css	7.41 kB	0%
asset-manifest.json	2.07 kB	0%
index.html	1.66 kB	0%
static/media/browser-server.js	903 B	0%

[github-actions]

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
2	2.22 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.23 MB	0%
xfo.xfo.kcab.worker.js	1014.46 kB	0%

[shall0pass]

I think this looks very promising. Thanks for putting this together!

[joel-jeremy]

A few observations:

• The networth graph seem to have fewer y axis values than before and before, the y axis values are increments of thousands e.g. 2,000, 4,000, 6,000 or 50,000, 100,000, 150,000
• In the overview page, is it possible to just print the line and leave out the x and y axis?

Other than above comments, this looks promising :)

[shaankhosla]

A few observations:

* The networth graph seem to have fewer y axis values than before and before, the y axis values are increments of thousands e.g. 2,000, 4,000, 6,000 or 50,000, 100,000, 150,000

* In the overview page, is it possible to just print the line and leave out the x and y axis?

Other than above comments, this looks promising :)

Thanks for your thoughts, glad you think it looks promising. I've incorporated all of your feedback :)

[shaankhosla]

@joel-jeremy @MatissJanis is there anything else either of you would like to see included in this PR to consider the Recharts POC complete and #1739 merged (aside from passing tests)?

[joel-jeremy]

The overview is still showing the axes:

The previous is just a line:

[MatissJanis]

👋 Really like the direction this is heading. Using recharts does make the surface API much simpler for engineers building reports. Good job!

Some notes:

• can we make the homepage chart more closely resemble the existing one? as in: no paddings/margins in the card; no pills; area instead of line chart;
• homepage: can we remove the "drawing" animation? currently the loading spinner shows up and disappears; and then there is a half a second delay until the graph is finally drawn on the screen - makes the whole interaction feel slow
• homepage: missing tooltips on hover
• homepage: wrong cursor used on hover
• full page graph: there's too much padding/margin on the left side
• full page graph: missing margin between the aggregated value (total) and the graph
• full page graph: tooltip - "NetWorth :" should be changed to "Net Worth:"; it is also missing a lot of other information -assets, debts, etc.
• full page graph: could we make it area graph to a bit more closely resemble what we have?
• full page graph: the edges on the chart are too round; can we reduce the rounding (or remove it entirely)?

[MatissJanis]

Code looks overall very good. I'm almost happy to merge it. Lets just fix the small issues raised :)

Thanks for your work on this!

[MatissJanis]

Looks good! Now we just need to fix the VRT e2e test.

Here's instructions how to run them and update the screenshots: https://github.com/actualbudget/actual/blob/master/packages/desktop-client/README.md

[joel-jeremy]

Very cool! Thank you so much for your contribution :)

[MatissJanis]

Perfect!

[shaankhosla]

Amazing! Thanks for all your help @MatissJanis