From 50ed9583878569ff69233186dfdd59e8ec2978c1 Mon Sep 17 00:00:00 2001
From: Ru Chern Chong <ruchern.chong@sgcarstrends.com>
Date: Mon, 14 Oct 2024 02:44:02 +0800
Subject: [PATCH] Add more date range for selection

---
 components/COEPremiumChart.tsx | 125 +++++++++++++++++++++------------
 1 file changed, 80 insertions(+), 45 deletions(-)

diff --git a/components/COEPremiumChart.tsx b/components/COEPremiumChart.tsx
index d596d9b..c1041f1 100644
--- a/components/COEPremiumChart.tsx
+++ b/components/COEPremiumChart.tsx
@@ -3,6 +3,8 @@
 import { type CSSProperties, useEffect, useMemo, useState } from "react";
 import { usePathname, useRouter } from "next/navigation";
 import { numberFormat } from "@ruchernchong/number-format";
+import { parse, subMonths, subYears } from "date-fns";
+import { CalendarIcon } from "lucide-react";
 import { CartesianGrid, Label, Line, LineChart, XAxis, YAxis } from "recharts";
 import useStore from "@/app/store";
 import {
@@ -34,26 +36,63 @@ interface Props {
   months: Month[];
 }
 
+interface TimeRange {
+  timeRange: string;
+  label: string;
+}
+
+const LAST_12_MONTHS = (30 * 12).toString();
+const LAST_5_YEARS = (5 * 30 * 12).toString();
+const LAST_10_YEARS = (10 * 30 * 12).toString();
+
 export const COEPremiumChart = ({ data, months }: Props) => {
   const router = useRouter();
   const pathname = usePathname();
 
   const categories = useStore(({ categories }) => categories);
 
-  const [timeRange, setTimeRange] = useState("360d");
+  const [timeRange, setTimeRange] = useState(LAST_12_MONTHS);
 
+  // TODO: Tidy up
   useEffect(() => {
     const params = new URLSearchParams();
 
+    const formatMonth = (date: Date) => {
+      const year = date.getFullYear();
+      const month = ("0" + date.getMonth()).slice(-2);
+      return `${year}-${month}`;
+    };
+
     switch (timeRange) {
-      case "ALL":
-        params.append("from", months[months.length - 1]);
+      case LAST_12_MONTHS:
+        params.append(
+          "from",
+          `${formatMonth(subMonths(parse(months[0], "yyyy-MM", new Date()), 12))}`,
+        );
+        params.append("to", months[0]);
+        break;
+      case LAST_5_YEARS:
+        params.append(
+          "from",
+          `${formatMonth(subYears(parse(months[0], "yyyy-MM", new Date()), 5))}`,
+        );
+        params.append("to", months[0]);
+        break;
+      case LAST_10_YEARS:
+        params.append(
+          "from",
+          `${formatMonth(subYears(parse(months[0], "yyyy-MM", new Date()), 10))}`,
+        );
         params.append("to", months[0]);
         break;
       case "YTD":
         params.append("from", `${new Date().getFullYear()}-01`);
         params.append("to", months[0]);
         break;
+      case "ALL":
+        params.append("from", months[months.length - 1]);
+        params.append("to", months[0]);
+        break;
       default:
     }
 
@@ -62,36 +101,27 @@ export const COEPremiumChart = ({ data, months }: Props) => {
 
   const filteredData: COEBiddingResult[] = useMemo(
     () =>
-      data
-        // .filter((item) => {
-        //   const date = new Date(item.month);
-        //   const now = new Date();
-        //   let daysToSubtract = 360;
-        //   if (timeRange === "1800d") {
-        //     daysToSubtract = 1800;
-        //   }
-        //   now.setDate(now.getDate() - daysToSubtract);
-        //   return date >= now;
-        // })
-        .map((item) =>
-          Object.entries(item).reduce((acc: any, [key, value]) => {
-            if (
-              key === "month" ||
-              (key.startsWith("Category") && categories[key as COECategory])
-            ) {
-              acc[key] = value;
-            }
-
-            return acc;
-          }, {}),
-        ),
-    [categories, data, timeRange],
+      data.map((item) =>
+        Object.entries(item).reduce((acc: any, [key, value]) => {
+          if (
+            key === "month" ||
+            (key.startsWith("Category") && categories[key as COECategory])
+          ) {
+            acc[key] = value;
+          }
+
+          return acc;
+        }, {}),
+      ),
+    [categories, data],
   );
 
   const chartConfig = {} satisfies ChartConfig;
 
-  const TIME_RANGES = [
-    { timeRange: "360d", label: "Last 12 Months" },
+  const TIME_RANGES: TimeRange[] = [
+    { timeRange: LAST_12_MONTHS, label: "Last 12 Months" },
+    { timeRange: LAST_5_YEARS, label: "Last 5 Years" },
+    { timeRange: LAST_10_YEARS, label: "Last 10 Years" },
     { timeRange: "YTD", label: "Year to Date" },
     { timeRange: "ALL", label: "All Time" },
   ];
@@ -105,22 +135,27 @@ export const COEPremiumChart = ({ data, months }: Props) => {
             {`Showing ${TIME_RANGES.find((range) => range.timeRange === timeRange)?.label.toLowerCase()} of COE prices`}
           </CardDescription>
         </div>
-        <Select value={timeRange} onValueChange={setTimeRange}>
-          <SelectTrigger className="w-[160px] rounded-lg sm:ml-auto">
-            <SelectValue placeholder="Last 12 months" />
-          </SelectTrigger>
-          <SelectContent className="rounded-xl">
-            {TIME_RANGES.map(({ timeRange, label }) => (
-              <SelectItem
-                key={timeRange}
-                value={timeRange}
-                className="rounded-lg"
-              >
-                {label}
-              </SelectItem>
-            ))}
-          </SelectContent>
-        </Select>
+        <div>
+          <Select value={timeRange} onValueChange={setTimeRange}>
+            <SelectTrigger className="rounded-lg sm:ml-auto">
+              <SelectValue placeholder="Last 12 months" />
+            </SelectTrigger>
+            <SelectContent className="rounded-xl">
+              {TIME_RANGES.map(({ timeRange, label }) => (
+                <SelectItem
+                  key={timeRange}
+                  value={timeRange}
+                  className="rounded-lg"
+                >
+                  <div className="flex items-center rounded-lg">
+                    <CalendarIcon className="mr-2 h-4 w-4" />
+                    {label}
+                  </div>
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
       </CardHeader>
       <CardContent className="p-6">
         <ChartContainer config={chartConfig} className="h-[400px] w-full">