Display balance evolution chart

moneymgr_web/src/api/MovementsApi.ts

@@ -1,6 +1,6 @@
 import { APIClient } from "./ApiClient";
 
-type Balances = Record<number, number>;
+export type Balances = Record<number, number>;
 
 export interface MovementUpdate {
   account_id: number;

moneymgr_web/src/api/StatsApi.ts

@@ -7,6 +7,8 @@ export interface GlobalStats {
   total_files_size: number;
 }
 
+export type StatBalanceVariation = Record<string, number> & { time: number };
+
 export class StatsApi {
   /**
    * Get global statistics
@@ -19,4 +21,20 @@ export class StatsApi {
       })
     ).data;
   }
+
+  /**
+   * Get balance variation statistics
+   */
+  static async BalanceVariationStats(
+    start: number,
+    end: number,
+    interval: number
+  ): Promise<StatBalanceVariation[]> {
+    return (
+      await APIClient.exec({
+        uri: `/stats/balance_variation?start=${start}&end=${end}&interval=${interval}`,
+        method: "GET",
+      })
+    ).data;
+  }
 }

moneymgr_web/src/routes/HomeRoute.tsx

@@ -1,22 +1,49 @@
+import FolderCopyIcon from "@mui/icons-material/FolderCopy";
 import FunctionsIcon from "@mui/icons-material/Functions";
+import ImportExportIcon from "@mui/icons-material/ImportExport";
 import RefreshIcon from "@mui/icons-material/Refresh";
+import ScaleIcon from "@mui/icons-material/Scale";
 import { Grid, IconButton, Paper, Tooltip, Typography } from "@mui/material";
+import { LineChart } from "@mui/x-charts/LineChart";
+import { filesize } from "filesize";
 import React from "react";
-import { GlobalStats, StatsApi } from "../api/StatsApi";
+import { GlobalStats, StatBalanceVariation, StatsApi } from "../api/StatsApi";
+import { useAccounts } from "../hooks/AccountsListProvider";
+import { fmtDateFromTime, time } from "../utils/DateUtils";
+import { AmountWidget } from "../widgets/AmountWidget";
 import { AsyncWidget } from "../widgets/AsyncWidget";
 import { MoneyMgrWebRouteContainer } from "../widgets/MoneyMgrWebRouteContainer";
-import ImportExportIcon from "@mui/icons-material/ImportExport";
-import FolderCopyIcon from "@mui/icons-material/FolderCopy";
-import ScaleIcon from "@mui/icons-material/Scale";
-import { filesize } from "filesize";
-import { AmountWidget } from "../widgets/AmountWidget";
 
 export function HomeRoute(): React.ReactElement {
+  const account = useAccounts();
+
   const loadKey = React.useRef(1);
+
   const [global, setGlobal] = React.useState<GlobalStats | undefined>();
+  const [lastYear, setLastYear] = React.useState<
+    StatBalanceVariation[] | undefined
+  >();
 
   const load = async () => {
     setGlobal(await StatsApi.GetGlobal());
+    const lastyear = await StatsApi.BalanceVariationStats(
+      time() - 3600 * 24 * 365,
+      time(),
+      3600 * 24
+    );
+
+    // Manually compute sum
+    for (const entry of lastyear) {
+      let sum = 0;
+
+      for (const a of account.list.list) {
+        sum += entry[a.id.toString()];
+      }
+
+      entry["sum"] = sum;
+    }
+
+    setLastYear(lastyear);
   };
 
   const reload = async () => {
@@ -40,17 +67,19 @@ export function HomeRoute(): React.ReactElement {
         loadKey={loadKey.current}
         load={load}
         errMsg="Failed to load statistics!"
-        build={() => <StatsDashboard global={global!} />}
+        build={() => <StatsDashboard global={global!} lastYear={lastYear!} />}
       />
     </MoneyMgrWebRouteContainer>
   );
 }
 
-export function StatsDashboard(p: { global: GlobalStats }): React.ReactElement {
+export function StatsDashboard(p: {
+  global: GlobalStats;
+  lastYear: StatBalanceVariation[];
+}): React.ReactElement {
   return (
     <>
       <Grid container spacing={2}>
-        {" "}
         <StatTile
           title="Global balance"
           value={<AmountWidget amount={p.global.global_balance} />}
@@ -72,6 +101,22 @@ export function StatsDashboard(p: { global: GlobalStats }): React.ReactElement {
           icon={<ScaleIcon />}
         />
       </Grid>
+
+      <Grid container spacing={2}>
+        <Grid size={6}>
+          <StatChart label="Last week" start={time() - 3600 * 24 * 7} {...p} />
+        </Grid>
+        <Grid size={6}>
+          <StatChart
+            label="Last month"
+            start={time() - 3600 * 24 * 31}
+            {...p}
+          />
+        </Grid>
+        <Grid size={12}>
+          <StatChart label="Last year" {...p} />
+        </Grid>
+      </Grid>
     </>
   );
 }
@@ -82,22 +127,81 @@ export function StatTile(p: {
   icon: React.ReactElement;
 }): React.ReactElement {
   return (
-    <Grid size={4}>
-      <Paper elevation={5} style={{ padding: "10px" }}>
-        <div
-          style={{
-            display: "flex",
-            flexDirection: "row",
-            alignItems: "center",
-          }}
-        >
-          {p.icon}
-          <Typography variant="h5" style={{ flex: 1 }}>
-            {p.title}
-          </Typography>
-          {p.value}
-        </div>
+    <Grid size={{ sm: 6, md: 4, lg: 3 }}>
+      <Paper
+        elevation={5}
+        style={{
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          padding: "10px",
+          height: "80%",
+        }}
+      >
+        {p.icon}
+        <Typography variant="h6" style={{ margin: "0em 1em", flex: 1 }}>
+          {p.title}
+        </Typography>
+        {p.value}
       </Paper>
     </Grid>
   );
 }
+
+export function StatChart(p: {
+  label: string;
+  start?: number;
+  lastYear: StatBalanceVariation[];
+}): React.ReactElement {
+  const accounts = useAccounts();
+
+  return (
+    <div style={{ marginBottom: "50px", marginTop: "20px" }}>
+      <Typography
+        variant="subtitle1"
+        style={{ textAlign: "center", fontWeight: "bold" }}
+      >
+        {p.label}
+      </Typography>
+      <LineChart
+        dataset={p.lastYear}
+        yAxis={[
+          {
+            width: 70,
+          },
+        ]}
+        xAxis={[
+          {
+            id: "Date",
+            dataKey: "time",
+            scaleType: "time",
+            min: p.start,
+            valueFormatter: fmtDateFromTime,
+          },
+        ]}
+        series={[
+          {
+            id: 0,
+            label: "Total",
+            dataKey: "sum",
+            stack: "total",
+            area: false,
+            showMark: false,
+          },
+          ...accounts.list.list.map((a) => {
+            return {
+              id: a.id,
+              label: a.name,
+              dataKey: a.id.toString(),
+              stack: "total",
+              area: false,
+              showMark: false,
+            };
+          }),
+        ]}
+        height={400}
+        hideLegend
+      />
+    </div>
+  );
+}

moneymgr_web/src/utils/DateUtils.tsx

@@ -18,3 +18,13 @@ export function dateToTime(date: Dayjs | undefined): number | undefined {
 export function time(): number {
   return Math.floor(new Date().getTime() / 1000);
 }
+
+/**
+ * Format date from unix time (secondes since Epoch)
+ */
+export function fmtDateFromTime(time: number): string {
+  const d = new Date(time * 1000);
+  return `${d.getDate().toString().padStart(2, "0")}/${(d.getMonth() + 1)
+    .toString()
+    .padStart(2, "0")}/${d.getFullYear()}`;
+}