From 3b7ebf6d1dfd5bff6ee6d0d98ca212ed3764d1b9 Mon Sep 17 00:00:00 2001
From: Ru Chern Chong <ruchern.chong@sgcarstrends.com>
Date: Sat, 24 Aug 2024 23:30:18 +0800
Subject: [PATCH] Update distribution pie chart

---
 app/cars/DistributionPieChart.tsx | 63 +++++++++++++++++++++++++++++++
 app/cars/page.tsx                 |  6 +--
 app/components/NavMenu.tsx        | 11 +++---
 app/globals.css                   |  2 +
 components/CarPieChart.tsx        | 50 ------------------------
 config/index.ts                   |  2 +-
 6 files changed, 74 insertions(+), 60 deletions(-)
 create mode 100644 app/cars/DistributionPieChart.tsx
 delete mode 100644 components/CarPieChart.tsx

diff --git a/app/cars/DistributionPieChart.tsx b/app/cars/DistributionPieChart.tsx
new file mode 100644
index 0000000..5ed7aba
--- /dev/null
+++ b/app/cars/DistributionPieChart.tsx
@@ -0,0 +1,63 @@
+"use client";
+
+import * as React from "react";
+import { Pie, PieChart } from "recharts";
+import {
+  type ChartConfig,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "@/components/ui/chart";
+
+interface Props {
+  data: Record<string, number>;
+  type: string;
+}
+
+interface ChartConfigItem {
+  label: string;
+}
+
+export const DistributionPieChart = ({ data, type }: Props) => {
+  const chartData = Object.entries(data)
+    .filter(([_, value]) => value)
+    .map(([key, value], index) => ({
+      label: key,
+      value,
+      fill: `hsl(var(--chart-${index + 1}))`,
+    }));
+
+  const chartConfig = {
+    type: {
+      label: type,
+    },
+    ...Object.keys(data).reduce<Record<string, ChartConfigItem>>(
+      (acc, key, index) => {
+        acc[key] = { label: key };
+
+        return acc;
+      },
+      {},
+    ),
+  } satisfies ChartConfig;
+
+  return (
+    <ChartContainer config={chartConfig} className="h-[300px] w-full">
+      <PieChart>
+        <ChartTooltip
+          content={<ChartTooltipContent labelKey="type" indicator="line" />}
+        />
+        <Pie
+          data={chartData}
+          dataKey="value"
+          nameKey="label"
+          innerRadius={60}
+          label
+        />
+        <ChartLegend content={<ChartLegendContent />} className="flex-wrap" />
+      </PieChart>
+    </ChartContainer>
+  );
+};
diff --git a/app/cars/page.tsx b/app/cars/page.tsx
index 89e5c2f..c61adad 100644
--- a/app/cars/page.tsx
+++ b/app/cars/page.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { ArrowUpRight } from "lucide-react";
-import { CarPieChart } from "@/components/CarPieChart";
+import { DistributionPieChart } from "@/app/cars/DistributionPieChart";
 import { Leaderboard } from "@/components/Leaderboard";
 import { MonthSelector } from "@/components/MonthSelector";
 import { StructuredData } from "@/components/StructuredData";
@@ -174,7 +174,7 @@ const CarsPage = async ({ searchParams }: Props) => {
                     <CardTitle>Total Registrations</CardTitle>
                   </CardHeader>
                   <CardContent>
-                    <p className="text-4xl font-bold text-blue-600">{total}</p>
+                    <p className="text-4xl font-bold text-primary">{total}</p>
                   </CardContent>
                 </Card>
                 <Card>
@@ -277,7 +277,7 @@ const StatisticsCard = ({
     </CardHeader>
     <CardContent>
       <div className="grid grid-cols-1 gap-4">
-        <CarPieChart data={data} />
+        <DistributionPieChart data={data} type={title} />
         <ul>
           {Object.entries(data)
             .filter(([_, value]) => value)
diff --git a/app/components/NavMenu.tsx b/app/components/NavMenu.tsx
index cd0ba53..1d3dea8 100644
--- a/app/components/NavMenu.tsx
+++ b/app/components/NavMenu.tsx
@@ -10,6 +10,7 @@ import {
   type LucideIcon,
   Menu,
   Search,
+  TrendingUp,
   Zap,
 } from "lucide-react";
 import { BrandLogo } from "@/components/BrandLogo";
@@ -49,13 +50,11 @@ export const NavMenu = () => {
                     className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
                     href="/cars"
                   >
-                    <div className="mb-2 mt-4 text-lg font-medium">
-                      Latest month
-                    </div>
+                    <TrendingUp className="h-6 w-6 stroke-primary" />
+                    <div className="mb-2 mt-4 text-lg font-medium">Monthly</div>
                     <p className="text-sm leading-tight text-muted-foreground">
-                      Beautifully designed components that you can copy and
-                      paste into your apps. Accessible. Customizable. Open
-                      Source.
+                      Car registration data for the latest month and previous
+                      months, broken down by fuel type and vehicle type.
                     </p>
                   </Link>
                 </NavigationMenuLink>
diff --git a/app/globals.css b/app/globals.css
index adc3151..e4b9f81 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -29,6 +29,7 @@
     --chart-3: 197 37% 24%;
     --chart-4: 43 74% 66%;
     --chart-5: 27 87% 67%;
+    --chart-6: 350 80% 60%;
   }
 
   .dark {
@@ -56,6 +57,7 @@
     --chart-3: 30 80% 55%;
     --chart-4: 280 65% 60%;
     --chart-5: 340 75% 55%;
+    --chart-6: 100 70% 50%;
   }
 }
 
diff --git a/components/CarPieChart.tsx b/components/CarPieChart.tsx
deleted file mode 100644
index 630bebf..0000000
--- a/components/CarPieChart.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-"use client";
-
-import * as React from "react";
-import { Pie, PieChart } from "recharts";
-import {
-  type ChartConfig,
-  ChartContainer,
-  ChartTooltip,
-  ChartTooltipContent,
-} from "@/components/ui/chart";
-
-interface CarPieChartProps {
-  data: Record<string, number>;
-}
-
-interface ChartConfigItem {
-  label: string;
-  color: string;
-}
-
-export const CarPieChart = ({ data }: CarPieChartProps) => {
-  const chartData = Object.entries(data)
-    .filter(([_, value]) => value)
-    .map(([key, value]) => ({
-      label: key,
-      value,
-      fill: `var(--color-${key})`,
-    }));
-
-  const chartConfig = Object.keys(data).reduce<Record<string, ChartConfigItem>>(
-    (acc, key, index) => {
-      acc[key] = {
-        label: key,
-        color: `hsl(var(--chart-${index + 1}))`,
-      };
-
-      return acc;
-    },
-    {},
-  ) satisfies ChartConfig;
-
-  return (
-    <ChartContainer config={chartConfig} className="h-[300px] w-full">
-      <PieChart>
-        <ChartTooltip content={<ChartTooltipContent indicator="line" />} />
-        <Pie data={chartData} dataKey="value" nameKey="label" label />
-      </PieChart>
-    </ChartContainer>
-  );
-};
diff --git a/config/index.ts b/config/index.ts
index 46428cf..fb36dde 100644
--- a/config/index.ts
+++ b/config/index.ts
@@ -46,7 +46,7 @@ export const FEATURE_FLAG_UNRELEASED =
   process.env.NEXT_PUBLIC_FEATURE_FLAG_UNRELEASED === "true";
 
 export const CAR_LINKS: LinkItem[] = [
-  { label: "Latest", href: "/cars" },
+  { label: "Monthly", href: "/cars" },
   {
     label: "Petrol",
     href: "/cars/petrol",