many, many changes

1 files changed, 19 insertions, 25 deletions

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;