persist fava filters in urls

README.md

@@ -56,6 +56,7 @@ The following variables and functions are available:
 * `ledger.ccy`: shortcut for the first configured operating currency of the ledger
 * `ledger.accounts`: declared accounts of the ledger
 * `ledger.commodities`: declared commodities of the ledger
+* `helpers.urlFor(url)`: add current Fava filter parameters to url
 * `utils`: the return value of the `utils` code of the dashboard configuration
 
 **Jinja2 panels:**

example/dashboards.yaml

@@ -125,8 +125,8 @@ dashboards:
           const query = panel.queries.find((q) => q.name === event.seriesName);
           if (query) {
             const [month, year] = event.name.split("/");
-            const link = query.link.replaceAll("#", "%23").replace("{time}", `${year}-${month.padStart(2, "0")}`);
-            window.open(link);
+            const link = query.link.replace("{time}", `${year}-${month.padStart(2, "0")}`);
+            window.open(helpers.urlFor(link));
           }
         },
       };
@@ -223,8 +223,8 @@ dashboards:
         ],
         onClick: (event) => {
           const [month, year] = event.name.split("/");
-          const link = panel.queries[0].link.replaceAll("#", "%23").replace("{time}", `${year}-${month.padStart(2, "0")}`);
-          window.open(link);
+          const link = panel.queries[0].link.replace("{time}", `${year}-${month.padStart(2, "0")}`);
+          window.open(helpers.urlFor(link));
         },
       };
 
@@ -290,8 +290,8 @@ dashboards:
         ],
         onClick: (event) => {
           const [month, year] = event.name.split("/");
-          const link = panel.queries[0].link.replaceAll("#", "%23").replace("{time}", `${year}-${month.padStart(2, "0")}`);
-          window.open(link);
+          const link = panel.queries[0].link.replace("{time}", `${year}-${month.padStart(2, "0")}`);
+          window.open(helpers.urlFor(link));
         },
       };
 
@@ -584,8 +584,8 @@ dashboards:
         [clickEvt]: (event) => {
           const account = "Income" + event.treePathInfo.map((i) => i.name).join(":");
           const time = new URLSearchParams(window.location.search).get("time") ?? "";
-          const link = panel.queries[0].link.replaceAll("#", "%23").replace("{account}", account).replace("{time}", time);
-          window.open(link);
+          const link = panel.queries[0].link.replace("{account}", account).replace("{time}", time);
+          window.open(helpers.urlFor(link));
         },
       };
 
@@ -633,14 +633,14 @@ dashboards:
         [clickEvt]: (event) => {
           const account = "Expenses" + event.treePathInfo.map((i) => i.name).join(":");
           const time = new URLSearchParams(window.location.search).get("time") ?? "";
-          const link = panel.queries[0].link.replaceAll("#", "%23").replace("{account}", account).replace("{time}", time);
-          window.open(link);
+          const link = panel.queries[0].link.replace("{account}", account).replace("{time}", time);
+          window.open(helpers.urlFor(link));
         },
       };
 
   - title: Recurring, Regular and Irregular Expenses 🔁
     width: 50%
-    link: /beancount/income_statement/?filter=#recurring
+    link: /beancount/income_statement/
     queries:
     - name: Recurring
       bql: |
@@ -703,8 +703,8 @@ dashboards:
           const query = panel.queries.find((q) => q.name === event.seriesName);
           if (query) {
             const [month, year] = event.name.split("/");
-            const link = query.link.replaceAll("#", "%23").replace("{time}", `${year}-${month.padStart(2, "0")}`);
-            window.open(link);
+            const link = query.link.replace("{time}", `${year}-${month.padStart(2, "0")}`);
+            window.open(helpers.urlFor(link));
           }
         },
       };
@@ -754,8 +754,8 @@ dashboards:
         ],
         onClick: (event) => {
           const [month, year] = event.name.split("/");
-          const link = panel.queries[0].link.replaceAll("#", "%23").replace("{time}", `${year}-${month.padStart(2, "0")}`);
-          window.open(link);
+          const link = panel.queries[0].link.replace("{time}", `${year}-${month.padStart(2, "0")}`);
+          window.open(helpers.urlFor(link));
         },
       };
 
@@ -825,10 +825,9 @@ dashboards:
         })),
         onClick: (event) => {
           const link = panel.queries[0].link
-            .replaceAll("#", "%23")
             .replace("{account}", accounts[event.dataIndex])
             .replace("{time}", event.seriesName);
-          window.open(link);
+          window.open(helpers.urlFor(link));
         },
       };
 
@@ -898,8 +897,8 @@ dashboards:
           },
         ],
         onClick: (event) => {
-          const link = panel.queries[0].link.replaceAll("#", "%23").replace("{time}", event.name);
-          window.open(link);
+          const link = panel.queries[0].link.replace("{time}", event.name);
+          window.open(helpers.urlFor(link));
         },
       };
 
@@ -961,8 +960,8 @@ dashboards:
           },
         ],
         onClick: (event) => {
-          const link = panel.queries[0].link.replaceAll("#", "%23").replace("{travel}", event.name);
-          window.open(link);
+          const link = panel.queries[0].link.replace("{travel}", event.name);
+          window.open(helpers.urlFor(link));
         },
       };
 
@@ -1040,8 +1039,8 @@ dashboards:
         onClick: (event, node) => {
           if (node.name === "Savings") return;
           const time = new URLSearchParams(window.location.search).get("time") ?? "";
-          const link = panel.queries[0].link.replaceAll("#", "%23").replace("{account}", node.name).replace("{time}", time);
-          window.open(link);
+          const link = panel.queries[0].link.replace("{account}", node.name).replace("{time}", time);
+          window.open(helpers.urlFor(link));
         },
       };
 
@@ -1152,8 +1151,8 @@ dashboards:
         onClick: (event) => {
           if (event.seriesName === "Projection") return;
           const [month, year] = event.name.split("/");
-          const link = panel.queries[0].link.replaceAll("#", "%23").replace("{time}", `${year}-${month.padStart(2, "0")}`);
-          window.open(link);
+          const link = panel.queries[0].link.replace("{time}", `${year}-${month.padStart(2, "0")}`);
+          window.open(helpers.urlFor(link));
         },
       };
 

frontend/src/extension.ts

@@ -1,15 +1,26 @@
 import { Bootstrap, Dashboard, Ledger, Utils } from "./types";
 import * as Panels from "./panels";
+import * as helpers from "./helpers";
+import { urlFor } from "./helpers";
 
 function renderDashboard(ext: any, dashboard: Dashboard, ledger: Ledger, utils: Utils) {
+    // add Fava filter parameters to panel links
+    for (const elem of document.querySelectorAll(".panel a")) {
+        const link = elem as HTMLAnchorElement;
+        if (!link.getAttribute("href").includes("://")) {
+            link.href = urlFor(link.href);
+        }
+    }
+
+    // render panel
     for (let i = 0; i < dashboard.panels.length; i++) {
         const panel = dashboard.panels[i];
         if (!panel.type || !(panel.type in Panels)) {
             continue;
         }
 
         const elem = document.getElementById(`panel${i}`) as HTMLDivElement;
-        const ctx = { ext, ledger, utils, panel };
+        const ctx = { ext, ledger, utils, helpers, panel };
         Panels[panel.type](ctx, elem);
     }
 }

frontend/src/helpers.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated
+ */
 export const iterateMonths = (dateFirst: string, dateLast: string) => {
     console.warn(
         "helpers.iterateMonths() is deprecated, please define this function in utils.inline in dashboards.yaml",
@@ -19,6 +22,9 @@ export const iterateMonths = (dateFirst: string, dateLast: string) => {
     return months;
 };
 
+/**
+ * @deprecated
+ */
 export const iterateYears = (dateFirst: string, dateLast: string) => {
     console.warn(
         "helpers.iterateMonths() is deprecated, please define this function in utils.inline in dashboards.yaml",
@@ -40,6 +46,9 @@ interface AccountTreeNode {
     value: number;
 }
 
+/**
+ * @deprecated
+ */
 export const buildAccountTree = (
     rows: any[],
     valueFn: (row: any) => number,
@@ -69,3 +78,24 @@ export const buildAccountTree = (
     }
     return accountTree;
 };
+
+// https://github.com/beancount/fava/blob/fb59849ccd4535f808d295594e6db7d8a5d249a6/frontend/src/stores/url.ts#L5-L12
+const urlSyncedParams = ["account", "charts", "conversion", "filter", "interval", "time"];
+
+/**
+ * add current Fava filter parameters to url
+ */
+export const urlFor = (url: string) => {
+    url = url.replaceAll("#", "%23");
+
+    const currentURL = new URL(window.location.href);
+    const newURL = new URL(url, window.location.href);
+
+    for (const param of urlSyncedParams) {
+        if (currentURL.searchParams.has(param) && !newURL.searchParams.has(param)) {
+            newURL.searchParams.set(param, currentURL.searchParams.get(param)!);
+        }
+    }
+
+    return newURL.toString();
+};

frontend/src/panels.ts

@@ -1,5 +1,4 @@
 import * as echartslib from "echarts";
-import * as helpers from "./helpers";
 import { render_d3sankey } from "./sankey";
 import { PanelCtx } from "./types";
 
@@ -16,9 +15,8 @@ function runFunction(src: string, args: Record<string, any>): Promise<any> {
 function runScript(ctx: PanelCtx) {
     return runFunction(ctx.panel.script!, {
         ...ctx,
-        // pass 'fava' and 'helpers' for backwards compatibility
+        // pass 'fava' for backwards compatibility
         fava: ctx.ledger,
-        helpers,
     });
 }
 

frontend/src/types.ts

@@ -1,3 +1,5 @@
+import * as helpers from "./helpers";
+
 export interface Bootstrap {
     dashboard: Dashboard;
     ledger: Ledger;
@@ -10,16 +12,19 @@ export interface Dashboard {
 }
 
 export interface PanelCtx {
-    // Fava [`ExtensionContext`](https://github.com/beancount/fava/blob/main/frontend/src/extensions.ts)
+    /** Fava [`ExtensionContext`](https://github.com/beancount/fava/blob/main/frontend/src/extensions.ts) */
     ext: any;
 
-    // metadata of the Beancount ledger
+    /** metadata of the Beancount ledger */
     ledger: Ledger;
 
-    // return value of the `utils` code of the dashboard configuration
+    /** various helper functions */
+    helpers: typeof helpers;
+
+    /** return value of the `utils` code of the dashboard configuration */
     utils: Utils;
 
-    // current (augmented) panel definition. The results of the BQL queries can be accessed with `panel.queries[i].result`.
+    /** current (augmented) panel definition. The results of the BQL queries can be accessed with `panel.queries[i].result`. */
     panel: Panel;
 }
 
@@ -33,22 +38,22 @@ interface Panel {
 }
 
 export interface Ledger {
-    // first date in the current date filter
+    /** first date in the current date filter */
     dateFirst: string;
 
-    // last date in the current date filter
+    /** last date in the current date filter */
     dateLast: string;
 
-    // configured operating currencies of the ledger
+    /** configured operating currencies of the ledger */
     operatingCurrencies: string[];
 
-    // shortcut for the first configured operating currency of the ledger
+    /** shortcut for the first configured operating currency of the ledger */
     ccy: string;
 
-    // declared accounts of the ledger
+    /** declared accounts of the ledger */
     accounts: any[];
 
-    // declared commodities of the ledger
+    /** declared commodities of the ledger */
     commodities: any[];
 }