Update distribution pie chart

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>
+  );
+};

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)

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>

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%;
   }
 }
 

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",