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

[WIP] Feature/sankey chart #4156

Open
wants to merge 8 commits into
base: master
Choose a base branch
from

Conversation

spezzino
Copy link
Contributor

Attempt to revive the Sankey Chart (#1919), removed due to it being abandoned.

Enhancements over the previous implementation:

  • Updated the files to align them with current code style
  • Added theme colours
  • Added privacy blockers
  • Added common widget filters, live/static mode, saving name, rename/remove actions

@actual-github-bot actual-github-bot bot changed the title Feature/sankey chart [WIP] Feature/sankey chart Jan 15, 2025
Copy link

netlify bot commented Jan 15, 2025

Deploy Preview for actualbudget ready!

Name Link
🔨 Latest commit cfba5b0
🔍 Latest deploy log https://app.netlify.com/sites/actualbudget/deploys/67889e5ca9f49a00081098a8
😎 Deploy Preview https://deploy-preview-4156.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 15, 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
13 6.02 MB → 6.1 MB (+73.9 kB) +1.20%
Changeset
File Δ Size
node_modules/recharts/es6/chart/Sankey.js 🆕 +26.16 kB 0 B → 26.16 kB
src/components/reports/reports/Sankey.tsx 🆕 +5.54 kB 0 B → 5.54 kB
src/components/reports/spreadsheets/sankey-spreadsheet.ts 🆕 +5.15 kB 0 B → 5.15 kB
src/components/reports/graphs/SankeyGraph.tsx 🆕 +3.12 kB 0 B → 3.12 kB
node_modules/recharts/es6/context/chartLayoutContext.js 🆕 +2.99 kB 0 B → 2.99 kB
src/components/reports/reports/SankeyCard.tsx 🆕 +2.44 kB 0 B → 2.44 kB
node_modules/lodash/sumBy.js 🆕 +943 B 0 B → 943 B
node_modules/lodash/_baseSum.js 🆕 +602 B 0 B → 602 B
node_modules/recharts/es6/util/calculateViewBox.js 🆕 +570 B 0 B → 570 B
node_modules/recharts/es6/cartesian/ZAxis.js 📈 +3.9 kB (+1967.98%) 203 B → 4.1 kB
node_modules/recharts/es6/cartesian/YAxis.js 📈 +5.04 kB (+1206.78%) 428 B → 5.46 kB
node_modules/recharts/es6/cartesian/XAxis.js 📈 +5.03 kB (+1114.50%) 462 B → 5.48 kB
node_modules/recharts/es6/cartesian/ReferenceDot.js 📈 +3.2 kB (+76.34%) 4.19 kB → 7.38 kB
node_modules/recharts/es6/cartesian/ErrorBar.js 📈 +4.43 kB (+74.43%) 5.96 kB → 10.39 kB
node_modules/recharts/es6/cartesian/ReferenceArea.js 📈 +3.14 kB (+68.09%) 4.61 kB → 7.75 kB
node_modules/recharts/es6/cartesian/ReferenceLine.js 📈 +3.14 kB (+42.01%) 7.48 kB → 10.63 kB
src/components/reports/ReportRouter.tsx 📈 +314 B (+14.28%) 2.15 kB → 2.45 kB
node_modules/fast-equals/dist/esm/index.mjs 📈 +2.01 kB (+10.39%) 19.39 kB → 21.4 kB
node_modules/recharts/es6/component/DefaultTooltipContent.js 📈 +561 B (+7.60%) 7.2 kB → 7.75 kB
node_modules/recharts/es6/util/getLegendProps.js 📈 +231 B (+6.45%) 3.5 kB → 3.73 kB
src/hooks/useFeatureFlag.ts 📈 +23 B (+6.44%) 357 B → 380 B
node_modules/recharts/es6/component/Cursor.js 📈 +259 B (+6.37%) 3.97 kB → 4.22 kB
src/components/settings/Experimental.tsx 📈 +221 B (+5.19%) 4.16 kB → 4.37 kB
node_modules/recharts/es6/util/ReactUtils.js 📈 +495 B (+4.73%) 10.21 kB → 10.7 kB
node_modules/recharts/es6/util/BarUtils.js 📈 +178 B (+4.08%) 4.26 kB → 4.44 kB
src/components/reports/Overview.tsx 📈 +592 B (+3.91%) 14.79 kB → 15.37 kB
node_modules/recharts/es6/util/ChartUtils.js 📈 +1.19 kB (+3.07%) 38.75 kB → 39.94 kB
node_modules/lodash/memoize.js 📈 +68 B (+3.05%) 2.17 kB → 2.24 kB
node_modules/recharts/es6/chart/generateCategoricalChart.js 📈 +1.23 kB (+1.57%) 78.17 kB → 79.39 kB
node_modules/recharts/es6/chart/AccessibilityManager.js 📈 +76 B (+1.30%) 5.69 kB → 5.77 kB
node_modules/recharts/es6/component/Text.js 📈 +141 B (+1.30%) 10.57 kB → 10.7 kB
node_modules/recharts/es6/util/PolarUtils.js 📈 +112 B (+1.22%) 8.97 kB → 9.08 kB
node_modules/recharts/es6/shape/Dot.js 📈 +7 B (+0.89%) 786 B → 793 B
node_modules/lodash/_getNative.js 📈 +4 B (+0.87%) 460 B → 464 B
node_modules/recharts-scale/es6/util/utils.js 📈 +4 B (+0.10%) 3.94 kB → 3.95 kB
src/components/reports/spreadsheets/net-worth-spreadsheet.ts 📈 +2 B (+0.06%) 3.4 kB → 3.41 kB
src/components/reports/reports/NetWorthCard.tsx 📈 +2 B (+0.05%) 3.87 kB → 3.88 kB
src/components/reports/reports/NetWorth.tsx 📈 +2 B (+0.03%) 6.26 kB → 6.27 kB
node_modules/recharts/es6/util/types.js 📈 +1 B (+0.01%) 11.48 kB → 11.48 kB
node_modules/recharts/es6/util/CartesianUtils.js 📉 -8 B (-0.07%) 11.86 kB → 11.86 kB
node_modules/react-aria-components/dist/utils.mjs 📉 -7 B (-0.08%) 8.54 kB → 8.53 kB
node_modules/recharts/es6/polar/Pie.js 📉 -32 B (-0.13%) 23.58 kB → 23.54 kB
node_modules/@react-aria/overlays/dist/useModal.mjs 📉 -7 B (-0.22%) 3.14 kB → 3.14 kB
node_modules/@react-aria/overlays/dist/Overlay.mjs 📉 -7 B (-0.29%) 2.32 kB → 2.31 kB
node_modules/recharts/es6/shape/Polygon.js 📉 -28 B (-0.49%) 5.58 kB → 5.55 kB
node_modules/recharts/es6/component/ResponsiveContainer.js 📉 -56 B (-0.60%) 9.08 kB → 9.02 kB
node_modules/recharts/es6/shape/Curve.js 📉 -32 B (-0.61%) 5.15 kB → 5.12 kB
node_modules/recharts/es6/component/Label.js 📉 -109 B (-0.61%) 17.35 kB → 17.25 kB
node_modules/react-smooth/es6/AnimateManager.js 📉 -18 B (-0.65%) 2.69 kB → 2.67 kB
node_modules/recharts/es6/shape/Rectangle.js 📉 -77 B (-0.77%) 9.77 kB → 9.7 kB
node_modules/recharts/es6/shape/Sector.js 📉 -81 B (-0.78%) 10.12 kB → 10.04 kB
node_modules/react-smooth/es6/easing.js 📉 -56 B (-0.83%) 6.6 kB → 6.55 kB
node_modules/react-smooth/es6/Animate.js 📉 -161 B (-0.87%) 18 kB → 17.85 kB
node_modules/recharts/es6/shape/Trapezoid.js 📉 -73 B (-1.01%) 7.08 kB → 7.01 kB
node_modules/recharts/es6/util/ActiveShapeUtils.js 📉 -109 B (-1.05%) 10.09 kB → 9.98 kB
node_modules/recharts/es6/util/ReduceCSSCalc.js 📉 -95 B (-1.09%) 8.54 kB → 8.45 kB
node_modules/recharts/es6/cartesian/getTicks.js 📉 -81 B (-1.19%) 6.66 kB → 6.58 kB
node_modules/recharts/es6/cartesian/Area.js 📉 -296 B (-1.21%) 23.82 kB → 23.53 kB
node_modules/recharts/es6/cartesian/Bar.js 📉 -268 B (-1.27%) 20.64 kB → 20.38 kB
node_modules/recharts/es6/container/Surface.js 📉 -28 B (-1.31%) 2.09 kB → 2.06 kB
node_modules/recharts/es6/component/LabelList.js 📉 -109 B (-1.51%) 7.07 kB → 6.96 kB
node_modules/react-dom/index.js 📉 -7 B (-1.52%) 460 B → 453 B
node_modules/recharts/es6/util/ScatterUtils.js 📉 -28 B (-1.58%) 1.73 kB → 1.71 kB
node_modules/clsx/dist/clsx.m.js 📉 -6 B (-1.70%) 353 B → 347 B
node_modules/recharts/es6/container/Layer.js 📉 -28 B (-1.75%) 1.57 kB → 1.54 kB
node_modules/recharts/es6/cartesian/Line.js 📉 -454 B (-1.89%) 23.47 kB → 23.03 kB
node_modules/recharts/es6/cartesian/Scatter.js 📉 -366 B (-1.96%) 18.2 kB → 17.84 kB
node_modules/recharts/es6/util/DOMUtils.js 📉 -81 B (-1.99%) 3.97 kB → 3.89 kB
node_modules/recharts/es6/shape/Symbols.js 📉 -109 B (-2.00%) 5.33 kB → 5.22 kB
node_modules/recharts/es6/cartesian/Brush.js 📉 -522 B (-2.03%) 25.1 kB → 24.59 kB
node_modules/recharts/es6/cartesian/CartesianAxis.js 📉 -425 B (-2.50%) 16.58 kB → 16.16 kB
node_modules/recharts/es6/shape/Cross.js 📉 -109 B (-2.57%) 4.14 kB → 4.03 kB
node_modules/react-smooth/es6/configUpdate.js 📉 -227 B (-2.85%) 7.78 kB → 7.56 kB
node_modules/recharts/es6/cartesian/CartesianGrid.js 📉 -500 B (-2.98%) 16.4 kB → 15.91 kB
node_modules/recharts/es6/util/tooltip/translate.js 📉 -155 B (-3.03%) 4.99 kB → 4.84 kB
node_modules/recharts/es6/polar/PolarAngleAxis.js 📉 -339 B (-3.05%) 10.87 kB → 10.53 kB
node_modules/recharts/es6/component/Legend.js 📉 -351 B (-3.11%) 11.01 kB → 10.67 kB
node_modules/recharts/es6/polar/PolarRadiusAxis.js 📉 -375 B (-3.13%) 11.7 kB → 11.34 kB
node_modules/recharts/es6/util/CssPrefixUtils.js 📉 -81 B (-3.60%) 2.2 kB → 2.12 kB
node_modules/recharts/es6/component/Tooltip.js 📉 -322 B (-4.08%) 7.71 kB → 7.4 kB
node_modules/recharts/es6/component/DefaultLegendContent.js 📉 -492 B (-4.55%) 10.56 kB → 10.08 kB
node_modules/recharts/es6/component/TooltipBoundingBox.js 📉 -571 B (-5.52%) 10.09 kB → 9.54 kB
node_modules/react-smooth/es6/util.js 📉 -1.23 kB (-31.17%) 3.95 kB → 2.72 kB
node_modules/react-smooth/es6/AnimateGroupChild.js 🔥 -279 B (-100%) 279 B → 0 B
node_modules/react-smooth/es6/AnimateGroup.js 🔥 -186 B (-100%) 186 B → 0 B
View detailed bundle breakdown

Added

No assets were added

Removed

No assets were removed

Bigger

Asset File Size % Changed
static/js/ReportRouter.js 1.59 MB → 1.66 MB (+73.69 kB) +4.53%
static/js/index.js 3.78 MB → 3.78 MB (+216 B) +0.01%

Smaller

No assets were smaller

Unchanged

Asset File Size % Changed
static/js/BackgroundImage.js 122.29 kB 0%
static/js/useAccountPreviewTransactions.js 1.63 kB 0%
static/js/indexeddb-main-thread-worker-e59fee74.js 13.5 kB 0%
static/js/en-GB.js 96.9 kB 0%
static/js/uk.js 120.47 kB 0%
static/js/en.js 96.91 kB 0%
static/js/resize-observer.js 18.37 kB 0%
static/js/AppliedFilters.js 10.21 kB 0%
static/js/workbox-window.prod.es5.js 5.69 kB 0%
static/js/wide.js 106.04 kB 0%
static/js/narrow.js 84.3 kB 0%

Copy link
Contributor

github-actions bot commented Jan 15, 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%

@spezzino spezzino force-pushed the feature/sankey-chart branch from b5e167c to fceb57d Compare January 15, 2025 05:43
@spezzino spezzino force-pushed the feature/sankey-chart branch from fceb57d to 8b6d305 Compare January 15, 2025 05:44
@spezzino spezzino force-pushed the feature/sankey-chart branch from 8b6d305 to 2c834e6 Compare January 15, 2025 05:59
@youngcw
Copy link
Member

youngcw commented Jan 15, 2025

There are a few quirks that Ive seen so far.

Strange loopback thing. This only happens on some window sizes and some month ranges. Its fairly consistent on one month windows.
image

Crossover of spending. This was happening in the original sankey stuff and looks to still be around now.
image

@spezzino
Copy link
Contributor Author

There are a few quirks that Ive seen so far.

Strange loopback thing. This only happens on some window sizes and some month ranges. Its fairly consistent on one month windows.

Crossover of spending. This was happening in the original sankey stuff and looks to still be around now.

thanks for your feedback, @youngcw. Would you be able to provide a sample budget for the issues you found?

@dkhalife
Copy link

Looks like we're working towards the same goal: #4142
wanna compare & combine efforts? I don't mind who drives the PR, just want to make sure we don't duplicate efforts

one thing people were split between is whether to add this under widget types for custom report or a separate standalone report like net worth. What's your thought?
also join us on Discord, we have this channel for discussing Sankey integration

@youngcw
Copy link
Member

youngcw commented Jan 16, 2025

There are a few quirks that Ive seen so far.
Strange loopback thing. This only happens on some window sizes and some month ranges. Its fairly consistent on one month windows.
Crossover of spending. This was happening in the original sankey stuff and looks to still be around now.

thanks for your feedback, @youngcw. Would you be able to provide a sample budget for the issues you found?

Im struggling to recreate the issues. Those screenshots came from a demo file. Im able to consistently get that second line crossing issue with my personal budget, but im not able to get that first one again.

@spezzino
Copy link
Contributor Author

Looks like we're working towards the same goal: #4142 wanna compare & combine efforts? I don't mind who drives the PR, just want to make sure we don't duplicate efforts

one thing people were split between is whether to add this under widget types for custom report or a separate standalone report like net worth. What's your thought? also join us on Discord, we have this channel for discussing Sankey integration

I don't have a preference, however I would like to drive this to completion with the minimum requirements and then iterate over to add more features

Copy link
Contributor

👋 Hi! It looks like this PR has not had any changes for a week now. Would you like someone to review this PR? If so - please remove the "[WIP]" prefix from the PR title. That will let the community know that this PR is open for a review.

@github-actions github-actions bot added the Stale label Jan 25, 2025
Copy link

@dkhalife dkhalife left a comment

Choose a reason for hiding this comment

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

Changes look good to me for an initial version

}: SankeyNodeProps) {
const privacyMode = usePrivacyMode();
const isOut = x + width + 6 > containerWidth;
let payloadValue = Math.round(payload.value / 1000).toString();

Choose a reason for hiding this comment

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

this is a bit opinionated and assumes groups will ladder up to at least this amount. Was this done to address a spacing issue?

/>
<text
textAnchor={isOut ? 'end' : 'start'}
x={isOut ? x - 6 : x + width + 6}

Choose a reason for hiding this comment

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

6 is a magic number here that needs to match with line 36 and below. Perhaps just create a constant so it is clear for future maintenance

@@ -0,0 +1,202 @@
// @ts-strict-ignore

Choose a reason for hiding this comment

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

curious what this is actually ignoring

@github-actions github-actions bot removed the Stale label Jan 26, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants