feat: add net worth history chart

Author: Alen

src/app/dashboard/performance/net-worth-history/Chart.tsx

@@ -0,0 +1,137 @@
+import Decimal from "decimal.js";
+import {
+  Bar,
+  CartesianGrid,
+  ComposedChart,
+  Legend,
+  Line,
+  XAxis,
+  YAxis,
+} from "recharts";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "~/components/ui/card";
+import {
+  ChartConfig,
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "~/components/ui/chart";
+import { APP_CURRENCY } from "~/constants";
+import { calculateZeroInclusiveYAxisDomain } from "~/utils/chart";
+import { formatDate } from "~/utils/date";
+import { formatNumber } from "~/utils/number";
+
+type ChartDataItem = {
+  id: string;
+  timestamp: Date;
+  netValue: Decimal;
+  totalAssets: Decimal;
+  totalDebts: Decimal;
+};
+
+const netWorthChartConfig: ChartConfig = {
+  netWorth: {
+    label: "Net worth",
+    color: "var(--chart-3)",
+  },
+  totalAssets: {
+    label: "Assets",
+    color: "var(--chart-1)",
+  },
+  totalDebts: {
+    label: "Debts",
+    color: "var(--chart-2)",
+  },
+};
+
+export function Chart({ data }: { data: ChartDataItem[] }) {
+  const chartData = data.toReversed().map((nw) => ({
+    month: formatDate({
+      date: nw.timestamp,
+      options: {
+        dateStyle: undefined,
+        month: "short",
+      },
+    }),
+    netWorth: nw.netValue.toNumber(),
+    totalAssets: nw.totalAssets.toNumber(),
+    totalDebts: nw.totalDebts.toNumber(),
+  }));
+  console.log(data, chartData);
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Net worth history</CardTitle>
+        <CardDescription>All time</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <ChartContainer
+          config={netWorthChartConfig}
+          className="h-[15rem] w-full"
+        >
+          <ComposedChart accessibilityLayer data={chartData}>
+            <CartesianGrid vertical={false} />
+            <XAxis
+              dataKey="month"
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+            />
+
+            <YAxis
+              tickLine={false}
+              axisLine={false}
+              tickMargin={8}
+              domain={calculateZeroInclusiveYAxisDomain}
+              tickFormatter={(value: number) =>
+                formatNumber({
+                  value,
+                  options: {
+                    style: "currency",
+                    currency: APP_CURRENCY,
+                    maximumFractionDigits: 0,
+                  },
+                })
+              }
+            />
+
+            <ChartTooltip cursor={false} content={<ChartTooltipContent />} />
+
+            <Bar
+              dataKey="totalAssets"
+              fill="var(--color-totalAssets)"
+              barSize={30}
+              radius={4}
+              name="Assets"
+            />
+
+            <Bar
+              dataKey="totalDebts"
+              fill="var(--color-totalDebts)"
+              barSize={30}
+              radius={4}
+              name="Debts"
+            />
+
+            <Line
+              dataKey="netWorth"
+              type="monotone"
+              stroke="var(--color-netWorth)"
+              strokeWidth={3}
+              dot={false}
+              name="Net worth"
+            />
+
+            <Legend />
+          </ComposedChart>
+        </ChartContainer>
+      </CardContent>
+    </Card>
+  );
+}

src/app/dashboard/performance/net-worth-history/page.tsx

@@ -16,9 +16,15 @@ import { TableSkeleton } from "~/components/table-skeleton";
 import { DataTable } from "~/components/ui/data-table";
 import { DataTableColumns } from "~/components/ui/data-table-columns";
 import { useTable } from "~/hooks/useTable";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import { useState } from "react";
+import { Chart } from "./Chart";
+
+type Tab = "TABLE" | "CHART";
 
 export default function NwHistoryPage() {
   const { data = [], isPending } = api.netWorth.getAll.useQuery();
+  const [tab, setTab] = useState<Tab>("TABLE");
 
   const table = useTable({
     data,
@@ -48,9 +54,26 @@ export default function NwHistoryPage() {
       </header>
 
       <div className="mx-auto flex w-full max-w-screen-md flex-col gap-2 p-5">
-        <DataTableColumns table={table} className="self-end" />
+        <Tabs value={tab} onValueChange={(value) => setTab(value as Tab)}>
+          <div className="flex justify-between">
+            <TabsList>
+              <TabsTrigger value={"TABLE" satisfies Tab}>Table</TabsTrigger>
+              <TabsTrigger value={"CHART" satisfies Tab}>Chart</TabsTrigger>
+            </TabsList>
+
+            {tab === "TABLE" && (
+              <DataTableColumns table={table} className="self-end" />
+            )}
+          </div>
+
+          <TabsContent value={"TABLE" satisfies Tab}>
+            {isPending ? <TableSkeleton /> : <DataTable table={table} />}
+          </TabsContent>
 
-        {isPending ? <TableSkeleton /> : <DataTable table={table} />}
+          <TabsContent value={"CHART" satisfies Tab} className="mt-5">
+            <Chart data={data} />
+          </TabsContent>
+        </Tabs>
       </div>
     </>
   );