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, 0 insertions, 72 deletions

diff --git a/users/wpcarro/ynabsql/dataviz/index.js b/users/wpcarro/ynabsql/dataviz/index.js
deleted file mode 100644
index 4a6aaa5d1bde..000000000000
--- a/users/wpcarro/ynabsql/dataviz/index.js
+++ /dev/null
@@ -1,72 +0,0 @@
-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);
-          },
-        },
-      },
-    },
-  },
-})