Adds GUI with basic histogram

1 files changed, 53 insertions, 0 deletions

diff --git a/gui/src/components/app/App.tsx b/gui/src/components/app/App.tsx
new file mode 100644
index 0000000..cd9f9ee
--- /dev/null
+++ b/gui/src/components/app/App.tsx
@@ -0,0 +1,53 @@
+import Category from '../../types/category';
+import Gbp from '../../types/currency/gbp';
+import Histogram from '../histogram/Histogram'
+import './App.css'
+
+function App() {
+  return (
+    <>
+      <Histogram categories={categories} />
+    </>
+  )
+}
+
+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