Add car make selection

app/page.tsx

@@ -1,36 +1,15 @@
-import type { ChartData, ChartOptions } from "chart.js";
-import { LineChart } from "@/components/LineChart";
+import { Infographic } from "@/components/Infographic";
 import { getCarRegistrationByMake } from "@/lib/getCarRegistrationByMake";
-import { transformDataToDatasets } from "@/lib/transformDataToDatasets";
-import { generateUniqueRandomHexColours } from "@/lib/generateUniqueRandomHexColours";
 import { BASE_URL } from "@/config";
 import { WebSite, WithContext } from "schema-dts";
-import type { Car, ChartDataset, Dataset } from "@/types";
+import type { Car } from "@/types";
 
 const Home = async () => {
   // TODO: Temporary solution while building a more permanent one.
   const electricVehicles: Car[] = await getCarRegistrationByMake(
     `https://raw.githubusercontent.com/ruchernchong/singapore-ev-trends/main/public/data/M03-Car_Regn_by_make.csv`,
   );
 
-  const datasetColour: string[] =
-    generateUniqueRandomHexColours(electricVehicles);
-  const datasets: ChartDataset[] = transformDataToDatasets(
-    electricVehicles,
-  ).map((car: Dataset, i: number) => ({
-    ...car,
-    borderColor: datasetColour[i],
-  }));
-
-  const data: ChartData<"line"> = {
-    labels: [...new Set(electricVehicles.map(({ month }) => month))],
-    datasets,
-  };
-
-  const options: ChartOptions = {
-    maintainAspectRatio: false,
-  };
-
   const jsonLd: WithContext<WebSite> = {
     "@context": "https://schema.org",
     "@type": "WebSite",
@@ -50,9 +29,7 @@ const Home = async () => {
             Singapore <br className="md:hidden" /> EV Trends
           </h1>
         </div>
-        <div className="aspect-video w-full">
-          <LineChart data={data} options={options} />
-        </div>
+        <Infographic electricVehicles={electricVehicles} />
       </div>
     </section>
   );

components/Infographic.tsx

@@ -0,0 +1,74 @@
+"use client";
+
+import { useState } from "react";
+import { LineChart } from "@/components/LineChart";
+import { ChartData, ChartOptions } from "chart.js";
+import { generateUniqueRandomHexColours } from "@/lib/generateUniqueRandomHexColours";
+import { transformDataToDatasets } from "@/lib/transformDataToDatasets";
+import type { Car, ChartDataset, Dataset } from "@/types";
+
+type InfographicProps = {
+  electricVehicles: Car[];
+};
+
+export const Infographic = ({ electricVehicles }: InfographicProps) => {
+  const datasetColour: string[] =
+    generateUniqueRandomHexColours(electricVehicles);
+
+  const initialDatasets: ChartDataset[] = transformDataToDatasets(
+    electricVehicles,
+  ).map((car: Dataset, i: number) => {
+    const isPopular = car.data.some((item) => item >= 10);
+
+    return {
+      ...car,
+      borderColor: datasetColour[i],
+      checked: isPopular,
+    };
+  });
+
+  const [datasets, setDatasets] = useState(initialDatasets);
+
+  const data: ChartData<"line"> = {
+    labels: [...new Set(electricVehicles.map(({ month }) => month))],
+    datasets: datasets.filter(({ checked }) => checked),
+  };
+
+  const options: ChartOptions = {
+    maintainAspectRatio: false,
+  };
+
+  const handleMakeChange = (index: number) => () => {
+    const newDatasets = [...datasets];
+    newDatasets[index].checked = !datasets[index].checked;
+    setDatasets(newDatasets);
+  };
+
+  return (
+    <>
+      <div className="aspect-video w-full">
+        <LineChart data={data} options={options} />
+      </div>
+      <fieldset className="prose dark:prose-invert prose-neutral flex flex-wrap gap-2">
+        <legend>Make</legend>
+        {datasets.map(({ label, checked }, index) => {
+          const key = `make-${label}`;
+
+          return (
+            <>
+              <input
+                key={key}
+                type="checkbox"
+                id={key}
+                value={label}
+                defaultChecked={checked}
+                onChange={handleMakeChange(index)}
+              />
+              <label htmlFor={key}>{label}</label>
+            </>
+          );
+        })}
+      </fieldset>
+    </>
+  );
+};

types/index.ts

@@ -3,6 +3,7 @@ export interface Car {
   make: string;
   fuel_type: string;
   number: any;
+  selected?: boolean;
 }
 
 export type Dataset = {
@@ -12,4 +13,5 @@ export type Dataset = {
 
 export interface ChartDataset extends Dataset {
   borderColor: string;
+  checked: boolean;
 }