add parsing and displaying of transactions

2022-03-24 09:50:47 +01:00
parent c0bbe81b02
commit 48c1aac18c
14 changed files with 324 additions and 74 deletions
@@ -0,0 +1,58 @@
+import React from "react";
+import { Line } from "react-chartjs-2";
+import {
+  Chart,
+  CategoryScale,
+  LinearScale,
+  PointElement,
+  LineElement,
+  Title,
+  Tooltip,
+  Legend,
+} from "chart.js";
+import styles from "./Graph.module.sass";
+
+export default function Graph(props) {
+  Chart.register(
+    CategoryScale,
+    LinearScale,
+    PointElement,
+    LineElement,
+    Title,
+    Tooltip,
+    Legend
+  );
+
+  const accounts = [
+    ...new Set(
+      props.transactions
+        .map((txn) => {
+          return txn.parts.map((part) => {
+            return part.account;
+          });
+        })
+        .flat()
+    ),
+  ];
+
+  return (
+    <div className={styles.graph}>
+      <Line
+        options={{ responsive: true, maintainAspectRatio: false }}
+        data={{
+          labels: ["JAN", "FEB", "MAR"],
+          datasets: accounts.map((account) => {
+            return {
+              label: account,
+              data: [1, 2, 4],
+              // backgroundColor: getComputedStyle(
+                // document.documentElement
+              // ).getPropertyValue("--color-blue"),
+              // borderColor: document.documentElement.style.getPropertyValue("--color-blue"),
+            };
+          }),
+        }}
+      />
+    </div>
+  );
+}
@@ -0,0 +1,9 @@
+.graph
+    border-radius: var(--card-radius)
+    background-color: var(--color-white)
+    margin: 10px
+    padding: 20px
+    width: 60%
+    height: 20vh
+    font-family: "Montserrat"
+    font-weight: 300