chore: replace static description with dynamic timeframe label

Author: oxcened

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

@@ -25,6 +25,7 @@ import { APP_CURRENCY } from "~/constants";
 import { calculateZeroInclusiveYAxisDomain } from "~/utils/chart";
 import { formatDate } from "~/utils/date";
 import { formatNumber } from "~/utils/number";
+import { Timeframe } from "./page";
 
 type ChartDataItem = {
   id: string;
@@ -49,7 +50,13 @@ const netWorthChartConfig: ChartConfig = {
   },
 };
 
-export function Chart({ data }: { data: ChartDataItem[] }) {
+export function Chart({
+  data,
+  selectedTimeframe,
+}: {
+  data: ChartDataItem[];
+  selectedTimeframe: Timeframe;
+}) {
   const chartData = data.map((nw) => ({
     month: formatDate({
       date: nw.timestamp,
@@ -68,7 +75,7 @@ export function Chart({ data }: { data: ChartDataItem[] }) {
     <Card>
       <CardHeader>
         <CardTitle>Net worth history</CardTitle>
-        <CardDescription>All time</CardDescription>
+        <CardDescription>{selectedTimeframe.label}</CardDescription>
       </CardHeader>
       <CardContent>
         <ChartContainer

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

@@ -30,7 +30,7 @@ import { isAfter, subYears } from "date-fns";
 
 type Tab = "TABLE" | "CHART";
 type TimeframeId = "1Y" | "3Y" | "5Y" | "All";
-type Timeframe = {
+export type Timeframe = {
   id: TimeframeId;
   label: string;
   fromDate?: Date;
@@ -95,11 +95,12 @@ export default function NwHistoryPage() {
     },
   });
 
+  const timeframe = chartTimeframes.find(
+    (timeframe) => timeframe.id === chartTimeframe,
+  );
+
   const chartData = useMemo(() => {
     const startingData = data.toReversed();
-    const timeframe = chartTimeframes.find(
-      (timeframe) => timeframe.id === chartTimeframe,
-    );
     if (!timeframe?.fromDate) return startingData;
     const startIndex = findStartIndex(startingData, timeframe?.fromDate);
     return startingData.slice(startIndex);
@@ -162,7 +163,7 @@ export default function NwHistoryPage() {
           </TabsContent>
 
           <TabsContent value={"CHART" satisfies Tab}>
-            <Chart data={chartData} />
+            <Chart data={chartData} selectedTimeframe={timeframe} />
           </TabsContent>
         </Tabs>
       </div>