Dashboards with Beancount and Fava
For a few years, I’ve switched from an Excel sheet to Beancount for tracking my finances, and Fava for visualizing them. Fava already comes with many different views and reports, and I wanted to extend it with additional charts. I do like dashboards and data visualizations, and luckily I stumbled upon Apache ECharts recently. ECharts is an open-source library to declaratively describe and generate different types of charts.
Creating custom dashboards
To create a custom dashboard, I need to somehow tie the financial data in Beancount together with ECharts. Beancount already comes with a SQL-like language to query the data stored in the Beancount ledger. I just need some code to run the Beancount queries, transform the data based on the chart and finally align the panels in a dashboard.
It turns out that this was quite an easy task, and a couple of hours later I had a prototype:
- First, it reads the
- Then it executes the queries of each panel.
- Finally, it renders an HTML file (Fava is a Flask-based web application) with the entire dashboard configuration (including the query results) embedded in a
- First, it iterates over each panel
scriptfield to transform the query results into a supported panel configuration (currently HTML, ECharts, and d3-sankey panels are supported)
- Lastly, it renders the panel based on its type
I built a couple of example dashboards to showcase the functionality: dashboards.yaml. Installation instructions, documentation, and screenshots are available in the project repository: fava-dashboards.