feat(wpcarro/ynabsql): Proof-of-concept demo r/5741

Hacked this together during my week-off while I was in Telluride, CO. The git
history is quite sloppy; so is some of the code. But it (mostly) works as a
demo, and that was the point.

Change-Id: Icfbc277090b69a802c00becdbd162652e4e8e156
Reviewed-on: https://cl.tvl.fyi/c/depot/+/7904
Reviewed-by: wpcarro <wpcarro@gmail.com>
Tested-by: BuildkiteCI
Autosubmit: wpcarro <wpcarro@gmail.com>

1 files changed, 66 insertions, 0 deletions

diff --git a/users/wpcarro/ynabsql/dataviz/chart.js b/users/wpcarro/ynabsql/dataviz/chart.js
new file mode 100644
index 000000000000..7ec8f00aae06
--- /dev/null
+++ b/users/wpcarro/ynabsql/dataviz/chart.js
@@ -0,0 +1,66 @@
+const colors = {
+  red: 'rgb(255, 45, 70)',
+  green: 'rgb(75, 192, 35)',
+};
+
+////////////////////////////////////////////////////////////////////////////////
+// Main
+////////////////////////////////////////////////////////////////////////////////
+
+const mount = document.getElementById('mount');
+
+const chart = new Chart(mount, {
+  type: 'scatter',
+  data: {
+    datasets: [
+      {
+        label: 'Revenue',
+        data: data.data.transactions.filter(x => x.Inflow > 0).map(x => ({
+          x: x.Date,
+          y: x.Inflow,
+          metadata: x,
+        })),
+        backgroundColor: colors.green,
+      },
+      {
+        label: 'Expenses',
+        data: data.data.transactions.filter(x => x.Outflow).map(x => ({
+          x: x.Date,
+          y: x.Outflow,
+          metadata: x,
+        })),
+        backgroundColor: colors.red,
+      },
+    ],
+  },
+  options: {
+    scales: {
+      x: {
+        type: 'time',
+        title: {
+          display: true,
+          text: 'Date',
+        },
+      },
+      y: {
+        title: {
+          display: true,
+          text: 'Amount ($USD)'
+        },
+      },
+    },
+    plugins: {
+      tooltip: {
+        callbacks: {
+          title: function(x) {
+            return `$${x[0].raw.y} (${x[0].raw.metadata.Date.toLocaleDateString()})`;
+          },
+          label: function(x) {
+            const { Category, Payee, Memo } = x.raw.metadata;
+            return `${Payee} - ${Category} (${Memo})`;
+          },
+        },
+      },
+    },
+  },
+});