many, many changes

2 files changed, 44 insertions, 70 deletions

diff --git a/gui/src/components/app/App.tsx b/gui/src/components/app/App.tsx
index cd9f9ee..e9ef742 100644
--- a/gui/src/components/app/App.tsx
+++ b/gui/src/components/app/App.tsx
@@ -1,53 +1,33 @@
-import Category from '../../types/category';
-import Gbp from '../../types/currency/gbp';
+import { createResource, Match, Resource, Switch } from 'solid-js';
 import Histogram from '../histogram/Histogram'
 import './App.css'
+import { getAllCategories } from '../../ajax/backend';
+import { Category } from '../../types/category';
 
 function App() {
+  const [categories] = createResource(getAllCategories);
+
   return (
-    <>
-      <Histogram categories={categories} />
-    </>
-  )
+    <Switch>
+      <Match when={categories.state === 'ready'}>
+        <Histogram categories={(categories as Extract<Resource<Category[]>, { state: 'ready' }>)()} />
+      </Match>
+      <Match when={categories.state === 'pending'}>
+        <p>Loading...</p>
+      </Match>
+      <Match when={categories.state === 'unresolved'}>
+        <p>Unresolved!</p>
+      </Match>
+      <Match when={categories.state === 'errored'}>
+        <p>Error!</p>
+        <p>{JSON.stringify(categories.error, null, 2)}</p>
+        <p>{JSON.stringify(categories(), null, 2)}</p>
+      </Match>
+      <Match when={categories.state === 'refreshing'}>
+        <p>Refreshing!</p>
+      </Match>
+    </Switch>
+  );
 }
 
-const categories: Category[] = [
-  {
-    id: 0,
-    name: 'Groceries',
-    currentBalance: new Gbp(71, 37, 1),
-    currentBudget: {
-      quantity: new Gbp(65, 0, 1),
-      period: 7,
-    },
-  },
-  {
-    id: 1,
-    name: 'Stationery',
-    currentBalance: new Gbp(10, 12, -1),
-    currentBudget: {
-      quantity: new Gbp(12, 0, 1),
-      period: 30,
-    },
-  },
-  {
-    id: 2,
-    name: 'Holidays',
-    currentBalance: new Gbp(325, 0, 1),
-    currentBudget: {
-      quantity: new Gbp(1000, 0, 1),
-      period: 365,
-    },
-  },
-  {
-    id: 3,
-    name: 'Wages',
-    currentBalance: new Gbp(1025, 60, -1),
-    currentBudget: {
-      quantity: new Gbp(2167, 7, -1),
-      period: 30.25,
-    },
-  },
-].map(c => ({ ...c, balanceToBudgetRatio: c.currentBalance.valueOf() / c.currentBudget.quantity.valueOf() }));
-
 export default App
diff --git a/gui/src/components/histogram/Histogram.tsx b/gui/src/components/histogram/Histogram.tsx
index ee4b7b0..3a8309b 100644
--- a/gui/src/components/histogram/Histogram.tsx
+++ b/gui/src/components/histogram/Histogram.tsx
@@ -1,10 +1,18 @@
-import Category from "../../types/category";
+import { BalanceToBudgetRatio } from "../../types/balanceToBudgetRatio";
+import { Category } from "../../types/category";
 import './Histogram.scss';
 
 function Histogram({ categories }: Props) {
-  const maxAbsBalanceToBudgetRatio = Math.max(
-    ...categories.map((c) => Math.abs(c.balanceToBudgetRatio))
-  );
+  if (categories === null) {
+    return (
+      <p>No categories to show</p>
+    );
+  }
+
+  const balanceToBudgetRatioNormaliser = BalanceToBudgetRatio.makeNormaliser(...categories.map(c => c.balanceToBudgetRatio));
+  for (const category of categories) {
+    category.balanceToBudgetRatio = balanceToBudgetRatioNormaliser(category.balanceToBudgetRatio);
+  }
 
   return (
     <table>
@@ -19,27 +27,24 @@ function Histogram({ categories }: Props) {
       <tbody>
         {
           categories
-            .sort((c1, c2) => c1.balanceToBudgetRatio - c2.balanceToBudgetRatio)
-            .map((category) => Row({ category, maxAbsBalanceToBudgetRatio }))
+            .sort((c1, c2) => BalanceToBudgetRatio.compare(c1.balanceToBudgetRatio, c2.balanceToBudgetRatio))
+            .map((category) => Row({ category }))
         }
       </tbody>
     </table>
   );
 }
 
-function Row({ category, maxAbsBalanceToBudgetRatio }: RowProps) {
-  const normalisedRatio = category.balanceToBudgetRatio / maxAbsBalanceToBudgetRatio;
-  const variant = getRowVariant(new Number(normalisedRatio).valueOf());
-
+function Row({ category }: RowProps) {
   return (
     <tr>
       <td class="name">{category.name}</td>
       <td
-        class={`ratio ratio--${variant}`}
-        style={`--normal-abs-ratio: ${Math.abs(normalisedRatio)};`}
+        class={`ratio ratio--${category.balanceToBudgetRatio?.recommendedAction ?? ''}`}
+        style={`--normal-abs-ratio: ${Math.abs(category.balanceToBudgetRatio?.normalisedRatio ?? 0)};`}
       >
         <span class="ratio__text">
-          {category.balanceToBudgetRatio.toFixed(2)}
+          {category.balanceToBudgetRatio?.toString() ?? ''}
         </span>
         <span class="ratio__bar"></span>
       </td>
@@ -48,23 +53,12 @@ function Row({ category, maxAbsBalanceToBudgetRatio }: RowProps) {
   );
 }
 
-function getRowVariant(balanceToBudgetRatio: number) {
-  if (balanceToBudgetRatio < 0) {
-    return 'arrears';
-  }
-  if (balanceToBudgetRatio >= 1) {
-    return 'spend';
-  }
-  return 'save';
-}
-
 type Props = {
-  categories: Category[],
+  categories: Category[] | null,
 };
 
 type RowProps = {
   category: Category,
-  maxAbsBalanceToBudgetRatio: number,
 };
 
 export default Histogram;