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:

1. First, it reads the dashboards.yaml configuration file.

2. Then it executes the queries of each panel.

3. 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 <script> element.

4. On page load, JavaScript code builds the charts:

5. First, it iterates over each panel

6. Then it executes JavaScript code of the script field to transform the query results into a supported panel configuration (currently HTML, ECharts, and d3-sankey panels are supported)

7. 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.