Add date range selection for COE trends

sgcarstrends · Oct 13, 2024 · 55c54ff · 55c54ff
1 parent e06c960
commit 55c54ff
Show file tree

Hide file tree

Showing 2 changed files with 75 additions and 34 deletions.
diff --git a/app/coe/(prices)/page.tsx b/app/coe/(prices)/page.tsx
@@ -11,7 +11,12 @@ import {
   CardTitle,
 } from "@/components/ui/card";
 import { API_URL, SITE_URL } from "@/config";
-import { type COEBiddingResult, type COEResult, RevalidateTags } from "@/types";
+import {
+  type COEBiddingResult,
+  type COEResult,
+  type Month,
+  RevalidateTags,
+} from "@/types";
 import { fetchApi } from "@/utils/fetchApi";
 import type { Metadata } from "next";
 import type { WebPage, WithContext } from "schema-dts";
@@ -30,16 +35,23 @@ export const generateMetadata = async (): Promise<Metadata> => {
   };
 };
 
-const COEPricesPage = async () => {
-  const params = new URLSearchParams();
+const COEPricesPage = async ({ searchParams }) => {
+  const params = new URLSearchParams(searchParams);
   params.append("sort", "month");
   params.append("orderBy", "asc");
   const queryString = params.toString();
 
-  const coeResults = await fetchApi<COEResult[]>(
+  const getCoeResults = await fetchApi<COEResult[]>(
     `${API_URL}/coe?${queryString}`,
-    { next: { tags: [RevalidateTags.COE] } },
+    {
+      next: { tags: [RevalidateTags.COE] },
+    },
   );
+  const getMonths = await fetchApi<Month[]>(`${API_URL}/coe/months`);
+  const [coeResults, months] = (await Promise.all([
+    getCoeResults,
+    getMonths,
+  ])) as [COEResult[], Month[]];
 
   const groupedData = coeResults.reduce<COEBiddingResult[]>(
     (acc: any, item) => {
@@ -79,7 +91,7 @@ const COEPricesPage = async () => {
         <Typography.H1>COE Results</Typography.H1>
         <div className="grid gap-4 lg:grid-cols-12">
           <div className="grid grid-cols-1 gap-4 lg:col-span-8">
-            <COEPremiumChart data={data} />
+            <COEPremiumChart data={data} months={months} />
           </div>
           <div className="grid grid-cols-1 gap-4 lg:col-span-4">
             <COECategories />

diff --git a/components/COEPremiumChart.tsx b/components/COEPremiumChart.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { type CSSProperties, useMemo, useState } from "react";
+import { type CSSProperties, useEffect, useMemo, useState } from "react";
+import { usePathname, useRouter } from "next/navigation";
 import { numberFormat } from "@ruchernchong/number-format";
 import { CartesianGrid, Label, Line, LineChart, XAxis, YAxis } from "recharts";
 import useStore from "@/app/store";
-import { UnreleasedFeature } from "@/components/UnreleasedFeature";
 import {
   Card,
   CardContent,
@@ -27,30 +27,52 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { formatDateToMonthYear } from "@/utils/formatDateToMonthYear";
-import type { COEBiddingResult, COECategory } from "@/types";
+import type { COEBiddingResult, COECategory, Month } from "@/types";
 
 interface Props {
   data: COEBiddingResult[];
+  months: Month[];
 }
 
-export const COEPremiumChart = ({ data }: Props) => {
+export const COEPremiumChart = ({ data, months }: Props) => {
+  const router = useRouter();
+  const pathname = usePathname();
+
   const categories = useStore(({ categories }) => categories);
 
   const [timeRange, setTimeRange] = useState("360d");
 
+  useEffect(() => {
+    const params = new URLSearchParams();
+
+    switch (timeRange) {
+      case "ALL":
+        params.append("from", months[months.length - 1]);
+        params.append("to", months[0]);
+        break;
+      case "YTD":
+        params.append("from", `${new Date().getFullYear()}-01`);
+        params.append("to", months[0]);
+        break;
+      default:
+    }
+
+    router.push(`${pathname}?${params.toString()}`);
+  }, [months, pathname, router, timeRange]);
+
   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;
-        })
+        // .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 (
@@ -68,6 +90,12 @@ export const COEPremiumChart = ({ data }: Props) => {
 
   const chartConfig = {} satisfies ChartConfig;
 
+  const TIME_RANGES = [
+    { timeRange: "360d", label: "Last 12 Months" },
+    { timeRange: "YTD", label: "Year to Date" },
+    { timeRange: "ALL", label: "All Time" },
+  ];
+
   return (
     <Card>
       <CardHeader className="flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row">
@@ -77,21 +105,22 @@ export const COEPremiumChart = ({ data }: Props) => {
             Showing the last 12 months of historical trends
           </CardDescription>
         </div>
-        <UnreleasedFeature>
-          <Select value={timeRange} onValueChange={setTimeRange}>
-            <SelectTrigger className="w-[160px] rounded-lg sm:ml-auto">
-              <SelectValue placeholder="Last 12 months" />
-            </SelectTrigger>
-            <SelectContent className="rounded-xl">
-              <SelectItem value="360d" className="rounded-lg">
-                Last 12 months
-              </SelectItem>
-              <SelectItem value="1800d" className="rounded-lg">
-                Last 5 years
+        <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>
-        </UnreleasedFeature>
+            ))}
+          </SelectContent>
+        </Select>
       </CardHeader>
       <CardContent className="p-6">
         <ChartContainer config={chartConfig} className="h-[400px] w-full">