feat(cashflow): deep-link category labels to filtered transactions (#2083)

* feat(cashflow): deep-link category labels to filtered transactions

Clicking a category's text label in the dashboard cashflow Sankey chart
now navigates to the transactions page filtered by that category and the
cashflow's active period date range. The colored node bar keeps its
existing zoom-into-subcategories behavior; structural nodes (Cash Flow,
Surplus) do not navigate.

URL-building lives in a pure, unit-tested utils/transactions_filter_url
module (mirroring utils/sankey_zoom) pinned in the importmap. Period dates
are threaded from the dashboard view into the Stimulus controller via data
values. This matches the existing donut chart's click-to-filter behavior.

* Update app/javascript/controllers/sankey_chart_controller.js

Co-authored-by: Guillem Arias Fauste <gariasf@proton.me>
Signed-off-by: Will Wilson <will@willwilson.uk>

---------

Signed-off-by: Will Wilson <will@willwilson.uk>
Co-authored-by: Guillem Arias Fauste <gariasf@proton.me>
This commit is contained in:
Will Wilson
2026-06-11 20:21:56 +01:00
committed by GitHub
parent 749d54dd96
commit d908560ed9
6 changed files with 102 additions and 4 deletions

View File

@@ -0,0 +1,23 @@
// Category nodes in the cashflow Sankey have ids prefixed income_/expense_
// (incl. *_sub_). Structural nodes (cash_flow_node, surplus_node) are not
// categories and must not deep-link to transactions.
export function isNavigableCategoryNode(id) {
return /^(income|expense)_/.test(id);
}
// Builds a relative deep link to the transactions index, filtered by a single
// category name and (optionally) a start/end date range. Mirrors the params
// the transactions search form submits: q[categories][], q[start_date],
// q[end_date].
export function buildCategoryTransactionsUrl({
name,
startDate,
endDate,
basePath = "/transactions",
}) {
const params = new URLSearchParams();
params.append("q[categories][]", name);
if (startDate) params.append("q[start_date]", startDate);
if (endDate) params.append("q[end_date]", endDate);
return `${basePath}?${params.toString()}`;
}