mdebray/tvl-depot
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(wpcarro/ynab): Proof-of-concept viz for finances

Browse source 
After experimenting with existing "data engineering solutions" like
datasette, periscope, I think rolling my own dataviz for this project might be
easiest (surprisingly).

**Wish List:**
- Benthos job to dump my financial transactions into a SQL table.
- Scatter plot of expenses (or just transactions generally).
  - Support filtering the data using "Simple Select" query language.
- Stacked histogram of income/expenses with a line overlaying the "idealized"
  savings.

Change-Id: Iec2948641dba8c4c6d5ad19a0e1ea142b81198af
Reviewed-on: https://cl.tvl.fyi/c/depot/+/7784
Tested-by: BuildkiteCI
Reviewed-by: wpcarro <wpcarro@gmail.com>
This commit is contained in:
William Carroll 2023-01-06 10:16:56 -08:00 committed by wpcarro
parent 1d59d3ba8f
commit 899828adeb
3 changed files with 85 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
users/wpcarro/ynabsql/dataviz/index.css Normal file
View file

@ -0,0 +1 @@
/* testing */

12
users/wpcarro/ynabsql/dataviz/index.html Normal file
View file

@ -0,0 +1,12 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="stylesheet" href="./index.css" />
</head>
<body>
<canvas id="mount"></canvas>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<script src="./index.js"></script>
</body>
</html>

72
users/wpcarro/ynabsql/dataviz/index.js Normal file
View file

@ -0,0 +1,72 @@
const colors = {
red: 'rgb(255, 99, 132)',
orange: 'rgb(255, 159, 64)',
yellow: 'rgb(255, 205, 86)',
green: 'rgb(75, 192, 192)',
blue: 'rgb(54, 162, 235)',
purple: 'rgb(153, 102, 255)',
grey: 'rgb(201, 203, 207)'
};
function randomExpense() {
// 10/1000 expenses are O(1,000)
// 100/2000 expenses are O(100)
// 1,000/2000 expenses are O(10)
// 10,000/2000 expenses are O(1)
const r = Math.random();
if (r <= 0.02) {
return Math.floor(Math.random() * 5000);
} else if (r <= 0.1) {
return Math.floor(Math.random() * 1000);
} else if (r <= 0.5) {
return Math.floor(Math.random() * 100);
} else {
return Math.floor(Math.random() * 10);
}
}
// Browser starts to choke around 10,000 data points.
function generateData() {
return Array(2000).fill(0).map(x => ({
// select a random day [0, 365]
x: Math.floor(Math.random() * 365),
// select a random USD amount in the range [1, 5,000]
y: randomExpense(),
// TODO(wpcarro): Attach transaction to `metadata` key.
metadata: { foo: 'bar' },
}));
}
////////////////////////////////////////////////////////////////////////////////
// Main
////////////////////////////////////////////////////////////////////////////////
const mount = document.getElementById('mount');
new Chart(mount, {
type: 'scatter',
data: {
datasets: [
{
label: 'Expenses',
data: generateData(),
backgroundColor: colors.red,
}
],
},
options: {
plugins: {
tooltip: {
callbacks: {
title: function (x) {
return `$${x[0].raw.y}`;
},
label: function (x) {
return JSON.stringify(x.raw.metadata);
},
},
},
},
},
})