chore(wpcarro/ynabsql): Delete stale files

This also removes the globally available `data.data.transactions`.

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

users/wpcarro/ynabsql/dataviz/chart.js

@@ -1,66 +0,0 @@
-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})`;
-          },
-        },
-      },
-    },
-  },
-});

users/wpcarro/ynabsql/dataviz/components.jsx

@@ -132,14 +132,6 @@ const usd = new Intl.NumberFormat('en-US', {
     currency: 'USD',
 });
 
-const categories = data.data.transactions.reduce((xs, x) => {
-    if (!(x.Category in xs)) {
-        xs[x.Category] = [];
-    }
-    xs[x.Category].push(x);
-    return xs;
-}, {});
-
 const queries = {
     housing: 'Category:/(rent|electric)/',
     food: 'Category:/(eating|alcohol|grocer)/',
@@ -581,8 +573,8 @@ class SavingsRateLineChart extends React.Component {
 class App extends React.Component {
     constructor(props) {
         super(props);
-        const query = 'Account:/checking/ (Inflow>1000 OR Outflow>1000)';
-        const allTransactions = data.data.transactions;
+        const query = 'Account:/checking/';
+        const allTransactions = [];
         const savingsView = 'after:"01/01/2022"';
         const inflowQuery = 'Account:/checking/';
         const outflowQuery = 'Account:/checking/ -Category:/(stocks|crypto)/';
@@ -713,6 +705,13 @@ class App extends React.Component {
     render() {
         const sum = this.state.filteredTransactions.reduce((acc, { Outflow }) => acc + Outflow, 0);
         const savedSum = Object.values(this.state.saved).reduce((acc, sum) => acc + sum, 0);
+        const categories = this.state.allTransactions.reduce((acc, x) => {
+            if (!(x.Category in acc)) {
+                acc[x.Category] = [];
+            }
+            acc[x.Category].push(x);
+            return acc;
+        }, {});
 
         let view = null;
         if (this.state.view === 'query') {
@@ -738,6 +737,7 @@ class App extends React.Component {
         } else if (this.state.view === 'savings') {
             view = (
                 <SavingsView
+                    categories={categories}
                     sensitive={this.state.sensitive}
                     savingsView={this.state.savingsView}
                     inflowQuery={this.state.inflowQuery}
@@ -924,6 +924,7 @@ function classifyRate(x) {
 
 const SavingsView = ({
     sensitive,
+    categories,
     savingsView,
     inflowQuery,
     outflowQuery,

users/wpcarro/ynabsql/dataviz/index.html

@@ -12,18 +12,8 @@
   </head>
   <body class="container">
     <div id="mount"></div>
-
-    <!-- chart.js -->
-    <script src="./cdn/chart.js"></script>
-    <script src="./cdn/date_fns.js"></script>
-    <script src="./cdn/chartjs-adapter-date-fns.bundle.min.js"></script>
-    <!-- react.js -->
-    <script src="./cdn/react.development.js" crossorigin></script>
-    <script src="./cdn/react-dom.development.js" crossorigin></script>
-    <script src="./cdn/babel.min.js"></script>
     <!-- depot JS -->
     <script src="./cdn/slx.js"></script>
-    <script src="./data.js"></script>
-    <script src="./components.js" type="text/babel"></script>
+    <script src="./components.jsx" type="module"></script>
   </body>
 </html>