fava-dashboards allows creating custom dashboards in Fava.
Example dashboards with random data:
pip install fava-dashboards
Enable this plugin in Fava by adding the following lines to your ledger:
2010-01-01 custom "fava-extension" "fava_dashboards"
The plugin looks by default for a dashboards.tsx file (or .ts, .jsx, .js) in the directory of the Beancount ledger (e.g. if you run fava personal.beancount, the dashboards.tsx file should be in the same directory as personal.beancount).
The location of the dashboards.tsx configuration file can be customized:
2010-01-01 custom "fava-extension" "fava_dashboards" "{
'config': '/path/to/dashboards.tsx'
}"
To get TypeScript type support, download fava-dashboards.d.ts and place it next to dashboards.tsx.
Please take a look at the example dashboards configuration dashboards.tsx, which uses most of the functionality described below.
The configuration file can contain multiple dashboards, and a dashboard contains one or more panels.
A panel has a relative width (e.g. 50% for 2 columns, or 33.3% for 3 column layouts) and a absolute height.
title: title of the panel. Default: unsetwidth: width of the panel. Default: 100%height: height of the panel. Default: 400pxlink: optional link target of the panel header.kind: panel kind. Must be one ofhtml,echarts,d3_sankey,tableorreact.spec: a JavaScript function which generates a valid spec depending on the panelkind.
The following variables and functions are available:
panel: the current panel definitionledger.dateFirst: start date of the current date filter, or first transaction date of the ledgerledger.dateLast: end date of the current date filter, or last transaction date of the ledgerledger.filterFirst: start date of the current date filter, or null if no date filter is setledger.filterLast: end date of the current date filter, or null if no date filter is setledger.operatingCurrencies: configured operating currencies of the ledgerledger.ccy: shortcut for the first configured operating currency of the ledgerledger.accounts: declared accounts of the ledgerledger.commodities: declared commodities of the ledgerledger.query(bql): executes the specified BQL queryledger.urlFor(url): add current Fava filter parameters to url
The spec code of HTML panels must return valid HTML.
The HTML code will be rendered in the panel.
The spec code of Apache ECharts panels must return valid Apache ECharts chart options.
Please take a look at the ECharts examples to get familiar with the available chart types and options.
The spec code of d3-sankey panels must return valid d3-sankey chart options.
Please take a look at the example dashboard configuration dashboards.tsx.
The spec code of table panels must return valid MUI X Data Grid props.
The spec code of React panels must return a valid JSX element.
Please note that the code must not return a Promise (i.e. async/await is not supported).
cd example; fava example.beancount
This plugin consists of a Python backend and a TypeScript frontend.
Install uv and Node.js 22, run make deps to install the dependencies, and make dev to run the Fava dev server with auto-rebuild.
Before submitting a PR, please run make build to build the frontend in production mode, and add the compiled frontend to the PR.
Thanks to Martin Blais and all contributors of Beancount, Jakob Schnitzer, Dominik Aumayr and all contributors of Fava, and to all contributors of Apache ECharts, D3.js and d3-sankey.