Merge pull request #49 from Robert-M-Lucas/dev-SCRUM-78

Added Graphs

src/pages/dashboard/DashboardPage.tsx

@@ -20,6 +20,12 @@ import goalTracking from "./goal tracking tile/GoalTrackingTile.tsx";
 import motivationTile from "./motivation tile/MotivationTile.tsx";
 import AddTransactionTile from "./add transaction tile/AddTransactionTile.tsx";
 import tipOfTheDayTile from "./tip of the day tile/TipOfTheDayTile.tsx";
+import savingsGraphTile from "./graph tiles/SavingsGraphTile.tsx";
+import needsGraphTile from "./graph tiles/NeedsGraphTile.tsx";
+import wantsGraphTile from "./graph tiles/WantsGraphTile.tsx";
+import balanceGraphTile from "./graph tiles/BalanceGraphTile.tsx";
+import incomeGraphTile from "./graph tiles/IncomeGraphTile.tsx";
+import expenseGraphTile from "./graph tiles/ExpenseGraphTile.tsx";
 
 export default function Dashboard() {
     // const [balance, setBalance] = useState(0);
@@ -109,12 +115,18 @@ export default function Dashboard() {
         TileElement.newTSX(() => totalTile(transactions), 2, 1, columns),
         TileElement.newTSX(() => (goalSettingTile(userPrefs, forceUpdatePrefs)), 2, 2, columns),
         TileElement.newTSX(tipOfTheDayTile, 2, 1, columns),
+        TileElement.newTSX(() => savingsGraphTile(transactions, userPrefs), 3, 2, columns),
+        TileElement.newTSX(() => needsGraphTile(transactions, userPrefs), 3, 2, columns),
+        TileElement.newTSX(() => wantsGraphTile(transactions, userPrefs), 3, 2, columns),
+        TileElement.newTSX(() => balanceGraphTile(transactions), 3, 2, columns),
+        TileElement.newTSX(() => incomeGraphTile(transactions), 3, 2, columns),
+        TileElement.newTSX(() => expenseGraphTile(transactions), 3, 2, columns),
         TileElement.newTSX(() => goalTracking(transactions, userPrefs), 3, 1, columns),
         TileElement.newTSX(() => motivationTile(transactions, userPrefs), 1, 1, columns),
         TileElement.newTSX(() => AddTransactionTile(forceUpdateTransactions), 1, 1, columns),
-        TileElement.newGraph(transactionPoints.raw, 3, 2, columns),
-        TileElement.newGraph(transactionPoints.in, 3, 2, columns),
-        TileElement.newGraph(transactionPoints.out, 3, 2, columns),
+        // TileElement.newGraph(transactionPoints.raw, 3, 2, columns),
+        // TileElement.newGraph(transactionPoints.in, 3, 2, columns),
+        // TileElement.newGraph(transactionPoints.out, 3, 2, columns),
     ];
 
     const renderTile: RenderTileFunction<TileElement> = ({ data, isDragging }) => (

src/pages/dashboard/graph tiles/BalanceGraphTile.tsx

@@ -0,0 +1,70 @@
+import {Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from "recharts";
+import {Transaction} from "../../../utils/transaction.ts";
+import strftime from "strftime";
+import {round} from "lodash";
+
+export default function balanceGraphTile(transactions: Transaction[]) {
+    const data: {
+        date: string,
+        amount: number,
+    }[] = [];
+
+    let currentBalance = 0;
+
+    if (transactions.length == 0) {
+        return <p>No Data</p>;
+    }
+
+    const revTransactions = transactions.slice().reverse();
+
+    let currentDate = revTransactions[0].dateTime;
+
+    for (const transaction of revTransactions) {
+        const transDate = strftime("%d/%m/%y", new Date(transaction.dateTime));
+
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+            const date = strftime("%d/%m/%y", new Date(currentDate));
+            if (date === transDate) {
+                break;
+            }
+            if (date === data[data.length - 1].date) {
+                currentDate += 8.64e7;
+                continue;
+            }
+            data.push(
+                {
+                    date: date,
+                    amount: round(currentBalance, 2),
+                }
+            )
+            currentDate += 8.64e7;
+        }
+
+        currentBalance += transaction.amount;
+
+        const val = {
+            date: transDate,
+            amount: round(currentBalance, 2),
+        };
+
+        if (data.length > 0 && data[data.length - 1].date === transDate) {
+            data[data.length - 1] = val;
+        }
+        else {
+            data.push(val)
+        }
+    }
+
+    return <>
+        <p>Balance</p>
+        <ResponsiveContainer width={"100%"} height={"100%"}>
+            <LineChart data={data} margin={{top: 0, left: 0, right: 25, bottom: 0}}>
+                <XAxis dataKey="date"/>
+                <YAxis/>
+                <Tooltip/>
+                <Line type="monotone" dataKey="amount" stroke="#8884d8" dot={false}/>
+            </LineChart>
+        </ResponsiveContainer>
+    </>;
+}

src/pages/dashboard/graph tiles/ExpenseGraphTile.tsx

@@ -0,0 +1,72 @@
+import {Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from "recharts";
+import {Transaction} from "../../../utils/transaction.ts";
+import strftime from "strftime";
+import {round} from "lodash";
+
+export default function expenseGraphTile(transactions: Transaction[]) {
+    const data: {
+        date: string,
+        amount: number,
+    }[] = [];
+
+    let currentExpenses = 0;
+
+    if (transactions.length == 0) {
+        return <p>No Data</p>;
+    }
+
+    const revTransactions = transactions.slice().reverse();
+
+    let currentDate = revTransactions[0].dateTime;
+
+    for (const transaction of revTransactions) {
+        const transDate = strftime("%d/%m/%y", new Date(transaction.dateTime));
+
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+            const date = strftime("%d/%m/%y", new Date(currentDate));
+            if (date === transDate) {
+                break;
+            }
+            if (date === data[data.length - 1].date) {
+                currentDate += 8.64e7;
+                continue;
+            }
+            data.push(
+                {
+                    date: date,
+                    amount: round(-currentExpenses, 2),
+                }
+            )
+            currentDate += 8.64e7;
+        }
+
+        if (transaction.amount < 0) {
+            currentExpenses += transaction.amount;
+        }
+
+        const val = {
+            date: transDate,
+            amount: round(-currentExpenses, 2),
+        };
+
+        if (data.length > 0 && data[data.length - 1].date === transDate) {
+            data[data.length - 1] = val;
+        }
+        else {
+            data.push(val)
+        }
+    }
+
+    return <>
+        <p>Expenses</p>
+        <ResponsiveContainer width={"100%"} height={"100%"}>
+            <LineChart data={data} margin={{top: 0, left: 0, right: 25, bottom: 0}}>
+                <XAxis dataKey="date"/>
+                <YAxis/>
+                <Tooltip/>
+                <Line type="monotone" dataKey="amount" stroke="rgb(202, 15, 15)" dot={false}/>
+            </LineChart>
+        </ResponsiveContainer>
+    </>;
+}

src/pages/dashboard/graph tiles/IncomeGraphTile.tsx

@@ -0,0 +1,72 @@
+import {Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from "recharts";
+import {Transaction} from "../../../utils/transaction.ts";
+import strftime from "strftime";
+import {round} from "lodash";
+
+export default function incomeGraphTile(transactions: Transaction[]) {
+    const data: {
+        date: string,
+        amount: number,
+    }[] = [];
+
+    let currentIncome = 0;
+
+    if (transactions.length == 0) {
+        return <p>No Data</p>;
+    }
+
+    const revTransactions = transactions.slice().reverse();
+
+    let currentDate = revTransactions[0].dateTime;
+
+    for (const transaction of revTransactions) {
+        const transDate = strftime("%d/%m/%y", new Date(transaction.dateTime));
+
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+            const date = strftime("%d/%m/%y", new Date(currentDate));
+            if (date === transDate) {
+                break;
+            }
+            if (date === data[data.length - 1].date) {
+                currentDate += 8.64e7;
+                continue;
+            }
+            data.push(
+                {
+                    date: date,
+                    amount: round(currentIncome, 2),
+                }
+            )
+            currentDate += 8.64e7;
+        }
+
+        if (transaction.amount > 0) {
+            currentIncome += transaction.amount;
+        }
+
+        const val = {
+            date: transDate,
+            amount: round(currentIncome, 2),
+        };
+
+        if (data.length > 0 && data[data.length - 1].date === transDate) {
+            data[data.length - 1] = val;
+        }
+        else {
+            data.push(val)
+        }
+    }
+
+    return <>
+        <p>Income</p>
+        <ResponsiveContainer width={"100%"} height={"100%"}>
+            <LineChart data={data} margin={{top: 0, left: 0, right: 25, bottom: 0}}>
+                <XAxis dataKey="date"/>
+                <YAxis/>
+                <Tooltip/>
+                <Line type="monotone" dataKey="amount" stroke="green" dot={false}/>
+            </LineChart>
+        </ResponsiveContainer>
+    </>;
+}

src/pages/dashboard/graph tiles/NeedsGraphTile.tsx

@@ -0,0 +1,81 @@
+import {Line, LineChart, ResponsiveContainer, Tooltip, XAxis, YAxis} from "recharts";
+import {Transaction} from "../../../utils/transaction.ts";
+import {UserPrefs} from "../../../utils/user_prefs.ts";
+import strftime from "strftime";
+import {round} from "lodash";
+
+export default function needsGraphTile(transactions: Transaction[], userPrefs: UserPrefs) {
+    const data: {
+        date: string,
+        amount: number,
+        goal: number
+    }[] = [];
+
+    let currentIncome = 0;
+    let currentNeeds = 0;
+
+    if (transactions.length == 0) {
+        return <p>No Data</p>;
+    }
+
+    const revTransactions = transactions.slice().reverse();
+
+    let currentDate = revTransactions[0].dateTime;
+
+    for (const transaction of revTransactions) {
+        const transDate = strftime("%d/%m/%y", new Date(transaction.dateTime));
+
+        // eslint-disable-next-line no-constant-condition
+        while (true) {
+            const date = strftime("%d/%m/%y", new Date(currentDate));
+            if (date === transDate) {
+                break;
+            }
+            if (date === data[data.length - 1].date) {
+                currentDate += 8.64e7;
+                continue;
+            }
+            data.push(
+                {
+                    date: date,
+                    amount: round(-currentNeeds, 2),
+                    goal: round(currentIncome * userPrefs.getNeedsBudget(), 2),
+                }
+            )
+            currentDate += 8.64e7;
+        }
+
+        if (transaction.amount > 0) {
+            currentIncome += transaction.amount;
+        }
+        if (transaction.getCategoryCategory() == "Needs") {
+            currentNeeds += transaction.amount;
+        }
+
+        const val = {
+            date: transDate,
+            amount: round(-currentNeeds, 2),
+            goal: round(currentIncome * userPrefs.getNeedsBudget(), 2),
+        };
+
+        if (data.length > 0 && data[data.length - 1].date === transDate) {
+            data[data.length - 1] = val;
+        }
+        else {
+            data.push(val)
+        }
+    }
+
+    return <>
+        <p>Needs</p>
+        <ResponsiveContainer width={"100%"} height={"100%"}>
+            <LineChart data={data} margin={{top: 0, left: 0, right: 25, bottom: 0}}>
+                <XAxis dataKey="date"/>
+                <YAxis/>
+                <Tooltip/>
+                <Line type="monotone" dataKey="amount" stroke="#8884d8" dot={false}/>
+                <Line type="monotone" dataKey="goal" stroke="rgb(202, 15, 15)" dot={false}/>
+            </LineChart>
+        </ResponsiveContainer>
+    </>;
+}