尧图网页设计 
Actual Budget 桑基图新功能在 Spent 视图中显示账户间转账Show Transfers【免费下载链接】actualA local-first personal finance app项目地址: https://gitcode.com/GitHub_Trending/ac/actual导读本文围绕 Actual Budget 仓库中一条即将发布的 release note 展开——「为 Sankey Spent 视图新增显示转账transfers的选项」。桑基图Sankey是 Actual Budget 仪表盘与报表模块中用于可视化资金流向的实验性图表本篇将说明该选项的启用方法、适用场景、底层实现原理含转账配对、净额计算、方向判定以及与「Group accounts in Spent view」选项的交互行为帮助你在预算分析中准确追踪「收入进账户 → 账户间划转 → 消费支出」的完整资金链路。功能背景Sankey 报告与 Spent 视图Actual Budget 的 Sankey 图表可视化预算中各个「桶」bucket之间的资金流动——例如收入如何流入账户、资金如何被分配到类别、支出如何从账户流向类别。图表强调流动的相对大小让主要路径与资金去向一目了然详见 Sankey 报告文档。图表包含两种主要视图模式Spent已支出展示收入如何流入账户以及这些钱如何被花掉默认层级链为Payee收入方→ Income category收入类别→ Account账户→ Category group类别组→ Category类别Budgeted已预算展示可用于预算的资金以及它在各类别间的分配。在默认的 Spent 视图下图表展示的是「收入/支出」流向账户之间的转账transfer并不会出现在图中——两条互为镜像的转账交易会相互抵消不构成收入或支出。本次新增的showTransfers选项正是为了把这类账户间划转也纳入可视化让资金在账户间的真实流动轨迹一目了然。如何在界面上启用该功能作为 Sankey 报表的显示选项提供入口位于图表工具栏右侧的Options选项菜单中对应 Sankey.tsx 中的OptionsButton组件打开任一 Sankey 报告通过报表页面或仪表盘 Sankey 卡片进入完整报告将视图模式切换为Spent点击工具栏右上角的Options按钮勾选Show transfers in Spent view在 Spent 视图中显示转账。菜单项的定义位于 Sankey.tsx 第 421–425 行其文案为Show transfers in Spent view切换状态由showTransfers布尔值控制{ name: show-transfers, text: t(Show transfers in Spent view), toggle: showTransfers, }该开关的状态会持久化到仪表盘小部件的meta中完整报告页通过useState读取widget?.meta?.showTransfers ?? false作为默认值并在点击Save widget时写回meta.showTransfers仪表盘卡片组件 SankeyCard.tsx 同样通过meta?.showTransfers ?? false读取并参与图表数据构建。对应的数据模型字段定义于 dashboard.ts 的SankeyWidget[meta]中showTransfers?: boolean;也就是说未配置时默认关闭false转账不会出现在图表中开启后报表与卡片会同步展示转账链路。底层实现转账数据如何被提取与建模该功能的实现集中在 sankey-spreadsheet.ts它把showTransfers从 UI 一路传递到图表的构建过程。参数传递链路createBaseGraphSpreadsheet接收showTransfers参数默认false在 Spent 模式下调用createTransactionsSpreadsheet并仅在开关开启时额外拉取转账数据第 397–405 行let transferData: TransferPair[] []; if (showTransfers) { transferData await fetchTransferData( conditionsOpKey, filters, start, end, ); }随后createTransactionsGraph(data, transferData, groupAccounts)负责把转账以「账户 → 账户」的链路加入图中。转账交易的查询条件fetchTransferData使用 AQL 查询筛选转账交易第 604–648 行核心条件为.filter({ transfer_id: { $ne: null }, account.offbudget: false })即必须携带transfer_id成对转账的关联标识并且来源账户必须是**在预算内on-budget**的账户。值得注意的是查询同样会叠加用户在报表中设置的过滤条件与日期范围因此转账数据与支出数据共享同一套筛选逻辑。配对、净额与方向判定原始查询结果只是单条转账记录必须按transfer_id配对才能得到「从账户 A 到账户 B」的有向边。aggregateTransferPairs完成了这一建模第 650–693 行严格配对按transfer_id id将两条记录配对无法配对的记录被忽略去重与净额对同一对账户A|B把所有转账金额累加得到净值方向按净值符号确定净额为零的成对转账会被完全剔除filter(([, value]) value ! 0)方向约定金额为负的一侧是资金流出方source正值一侧是流入方target。这部分逻辑由单元测试 sankey-spreadsheet.test.ts 直接验证例如keeps transfer direction when source account id sorts after destination即使流出账户的 ID 字典序靠后方向依然正确nets reciprocal transfers and omits zero-value pairs往返对等转账相互抵消后净额为零的配对不产生任何链路。测试充分印证了实现中的方向保持与净额聚合行为。加入图结构createTransactionsGraph在收到转账数据后为每个转账对添加两个账户节点并在它们之间建立金额为pair.amount的有向链路第 967–975 行if (transferData transferData.length 0 !groupAccounts) { transferData.forEach((pair: TransferPair) { addAccountNode(pair.fromAccountId, pair.fromAccountName); addAccountNode(pair.toAccountId, pair.toAccountName); addValueToLink(graph, pair.fromAccountId, pair.toAccountId, pair.amount); }); }于是Spent 视图的层级链中会出现「账户 → 账户」的横向流动例如从「工资卡」流向「信用卡」的还款划转、从「储蓄账户」流入「日常账户」的补给都会以一条带金额的链路直观呈现。与「Group accounts」选项的交互该功能与已有的Group accounts in Spent view在 Spent 视图中合并账户选项存在明确交互两者叠加时的行为已写入实现开启Group accounts后所有账户会被合并为单个Income/All accounts节点代码中以SpecialNodeKeys.AllAccounts表示上述转账链路代码显式要求!groupAccounts才执行——账户被合并时转账链路不再单独绘制因为此时已经不存在可区分的账户对。对应地Sankey 报告文档的快速排查章节也提示当账户被合并时单账户细节会被隐藏需要关闭该选项才能看到逐账户的资金流见 sankey-report.md 的「Per-account details hidden when accounts are grouped」条目。测试用例keeps category groups after all account sublayers when transfers exist亦验证了转账存在时类别组层级的正确性。使用建议与注意事项什么时候开启当你的消费主要发生在与收入账户不同的账户上例如工资入账在 A 账户日常支出走信用卡且希望直观看到「资金如何从 A 账户流到信用卡」时开启该选项价值最大——这正对应 Sankey 文档中关于合并账户选项的典型场景。与净额合并的关系同一对账户间多次往返的转账会被净额化净额为零的配对不显示因此图中不会出现无意义的双向往返链路这是刻意的设计而非缺陷。过滤联动转账查询与支出查询共享同一组报表过滤条件因此账户/类别等过滤同样作用于转账链路。仅限 Spent 视图菜单文案明确限定为 Spent 视图Budgeted 视图走的是预算数据的独立构建路径createBudgetSpreadsheet不涉及转账逻辑。相关资源功能入口与状态管理Sankey.tsx仪表盘卡片实现SankeyCard.tsx转账数据提取、配对与图构建sankey-spreadsheet.ts转账配对与图结构单元测试sankey-spreadsheet.test.ts小部件元数据模型含showTransfers字段dashboard.tsSankey 报告完整使用指南sankey-report.md【免费下载链接】actualA local-first personal finance app项目地址: https://gitcode.com/GitHub_Trending/ac/actual创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Actual Budget 桑基图新功能：在 Spent 视图中显示账户间转账（Show Transfers）
Actual Budget 桑基图新功能在 Spent 视图中显示账户间转账Show Transfers【免费下载链接】actualA local-first personal finance app项目地址: https://gitcode.com/GitHub_Trending/ac/actual导读本文围绕 Actual Budget 仓库中一条即将发布的 release note 展开——「为 Sankey Spent 视图新增显示转账transfers的选项」。桑基图Sankey是 Actual Budget 仪表盘与报表模块中用于可视化资金流向的实验性图表本篇将说明该选项的启用方法、适用场景、底层实现原理含转账配对、净额计算、方向判定以及与「Group accounts in Spent view」选项的交互行为帮助你在预算分析中准确追踪「收入进账户 → 账户间划转 → 消费支出」的完整资金链路。功能背景Sankey 报告与 Spent 视图Actual Budget 的 Sankey 图表可视化预算中各个「桶」bucket之间的资金流动——例如收入如何流入账户、资金如何被分配到类别、支出如何从账户流向类别。图表强调流动的相对大小让主要路径与资金去向一目了然详见 Sankey 报告文档。图表包含两种主要视图模式Spent已支出展示收入如何流入账户以及这些钱如何被花掉默认层级链为Payee收入方→ Income category收入类别→ Account账户→ Category group类别组→ Category类别Budgeted已预算展示可用于预算的资金以及它在各类别间的分配。在默认的 Spent 视图下图表展示的是「收入/支出」流向账户之间的转账transfer并不会出现在图中——两条互为镜像的转账交易会相互抵消不构成收入或支出。本次新增的showTransfers选项正是为了把这类账户间划转也纳入可视化让资金在账户间的真实流动轨迹一目了然。如何在界面上启用该功能作为 Sankey 报表的显示选项提供入口位于图表工具栏右侧的Options选项菜单中对应 Sankey.tsx 中的OptionsButton组件打开任一 Sankey 报告通过报表页面或仪表盘 Sankey 卡片进入完整报告将视图模式切换为Spent点击工具栏右上角的Options按钮勾选Show transfers in Spent view在 Spent 视图中显示转账。菜单项的定义位于 Sankey.tsx 第 421–425 行其文案为Show transfers in Spent view切换状态由showTransfers布尔值控制{ name: show-transfers, text: t(Show transfers in Spent view), toggle: showTransfers, }该开关的状态会持久化到仪表盘小部件的meta中完整报告页通过useState读取widget?.meta?.showTransfers ?? false作为默认值并在点击Save widget时写回meta.showTransfers仪表盘卡片组件 SankeyCard.tsx 同样通过meta?.showTransfers ?? false读取并参与图表数据构建。对应的数据模型字段定义于 dashboard.ts 的SankeyWidget[meta]中showTransfers?: boolean;也就是说未配置时默认关闭false转账不会出现在图表中开启后报表与卡片会同步展示转账链路。底层实现转账数据如何被提取与建模该功能的实现集中在 sankey-spreadsheet.ts它把showTransfers从 UI 一路传递到图表的构建过程。参数传递链路createBaseGraphSpreadsheet接收showTransfers参数默认false在 Spent 模式下调用createTransactionsSpreadsheet并仅在开关开启时额外拉取转账数据第 397–405 行let transferData: TransferPair[] []; if (showTransfers) { transferData await fetchTransferData( conditionsOpKey, filters, start, end, ); }随后createTransactionsGraph(data, transferData, groupAccounts)负责把转账以「账户 → 账户」的链路加入图中。转账交易的查询条件fetchTransferData使用 AQL 查询筛选转账交易第 604–648 行核心条件为.filter({ transfer_id: { $ne: null }, account.offbudget: false })即必须携带transfer_id成对转账的关联标识并且来源账户必须是**在预算内on-budget**的账户。值得注意的是查询同样会叠加用户在报表中设置的过滤条件与日期范围因此转账数据与支出数据共享同一套筛选逻辑。配对、净额与方向判定原始查询结果只是单条转账记录必须按transfer_id配对才能得到「从账户 A 到账户 B」的有向边。aggregateTransferPairs完成了这一建模第 650–693 行严格配对按transfer_id id将两条记录配对无法配对的记录被忽略去重与净额对同一对账户A|B把所有转账金额累加得到净值方向按净值符号确定净额为零的成对转账会被完全剔除filter(([, value]) value ! 0)方向约定金额为负的一侧是资金流出方source正值一侧是流入方target。这部分逻辑由单元测试 sankey-spreadsheet.test.ts 直接验证例如keeps transfer direction when source account id sorts after destination即使流出账户的 ID 字典序靠后方向依然正确nets reciprocal transfers and omits zero-value pairs往返对等转账相互抵消后净额为零的配对不产生任何链路。测试充分印证了实现中的方向保持与净额聚合行为。加入图结构createTransactionsGraph在收到转账数据后为每个转账对添加两个账户节点并在它们之间建立金额为pair.amount的有向链路第 967–975 行if (transferData transferData.length 0 !groupAccounts) { transferData.forEach((pair: TransferPair) { addAccountNode(pair.fromAccountId, pair.fromAccountName); addAccountNode(pair.toAccountId, pair.toAccountName); addValueToLink(graph, pair.fromAccountId, pair.toAccountId, pair.amount); }); }于是Spent 视图的层级链中会出现「账户 → 账户」的横向流动例如从「工资卡」流向「信用卡」的还款划转、从「储蓄账户」流入「日常账户」的补给都会以一条带金额的链路直观呈现。与「Group accounts」选项的交互该功能与已有的Group accounts in Spent view在 Spent 视图中合并账户选项存在明确交互两者叠加时的行为已写入实现开启Group accounts后所有账户会被合并为单个Income/All accounts节点代码中以SpecialNodeKeys.AllAccounts表示上述转账链路代码显式要求!groupAccounts才执行——账户被合并时转账链路不再单独绘制因为此时已经不存在可区分的账户对。对应地Sankey 报告文档的快速排查章节也提示当账户被合并时单账户细节会被隐藏需要关闭该选项才能看到逐账户的资金流见 sankey-report.md 的「Per-account details hidden when accounts are grouped」条目。测试用例keeps category groups after all account sublayers when transfers exist亦验证了转账存在时类别组层级的正确性。使用建议与注意事项什么时候开启当你的消费主要发生在与收入账户不同的账户上例如工资入账在 A 账户日常支出走信用卡且希望直观看到「资金如何从 A 账户流到信用卡」时开启该选项价值最大——这正对应 Sankey 文档中关于合并账户选项的典型场景。与净额合并的关系同一对账户间多次往返的转账会被净额化净额为零的配对不显示因此图中不会出现无意义的双向往返链路这是刻意的设计而非缺陷。过滤联动转账查询与支出查询共享同一组报表过滤条件因此账户/类别等过滤同样作用于转账链路。仅限 Spent 视图菜单文案明确限定为 Spent 视图Budgeted 视图走的是预算数据的独立构建路径createBudgetSpreadsheet不涉及转账逻辑。相关资源功能入口与状态管理Sankey.tsx仪表盘卡片实现SankeyCard.tsx转账数据提取、配对与图构建sankey-spreadsheet.ts转账配对与图结构单元测试sankey-spreadsheet.test.ts小部件元数据模型含showTransfers字段dashboard.tsSankey 报告完整使用指南sankey-report.md【免费下载链接】actualA local-first personal finance app项目地址: https://gitcode.com/GitHub_Trending/ac/actual创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考