Clean up

app/page.tsx

@@ -1,26 +1,24 @@
-import Image from "next/image";
+import type { ChartData } from "chart.js";
 import { LineChart } from "@/components/LineChart";
 import { getCarRegistrationByMake } from "@/lib/getCarRegistrationByMake";
 import { transformDataToDatasets } from "@/lib/transformDataToDatasets";
 import { generateUniqueRandomHexColours } from "@/lib/generateUniqueRandomHexColours";
-import { Car } from "@/types";
+import type { ChartDataset, Dataset } from "@/types";
 
 const Home = async () => {
   const electricVehicles = await getCarRegistrationByMake(
     `http://localhost:3000/data/M03-Car_Regn_by_make.csv`,
   );
 
   const datasetColour = generateUniqueRandomHexColours(electricVehicles);
-  const datasets = transformDataToDatasets(electricVehicles).map(
-    (ev: Car, i: number) => {
-      return {
-        ...ev,
-        borderColor: datasetColour[i],
-      };
-    },
-  );
+  const datasets: ChartDataset[] = transformDataToDatasets(
+    electricVehicles,
+  ).map((car: Dataset, i: number) => ({
+    ...car,
+    borderColor: datasetColour[i],
+  }));
 
-  const data = {
+  const data: ChartData<"line"> = {
     labels: [...new Set(electricVehicles.map(({ month }) => month))],
     datasets,
   };

lib/getCarRegistrationByMake.ts

@@ -2,14 +2,16 @@ import * as d3 from "d3";
 import { FUEL_TYPE } from "@/config";
 import type { Car } from "@/types";
 
-export const getCarRegistrationByMake = async (filePath: string) => {
-  const csvContent = await fetch(filePath).then((res) => res.text());
+export const getCarRegistrationByMake = async (
+  filePath: string,
+): Promise<Car[]> => {
+  const csvContent: string = await fetch(filePath).then((res) => res.text());
   const carRegistrationByMake: Car[] = d3.csvParse(csvContent, (car: Car) => ({
     ...car,
     number: +car.number,
   }));
 
-  const electricCars = carRegistrationByMake
+  const electricCars: Car[] = carRegistrationByMake
     .filter(
       ({ fuel_type, number }) =>
         fuel_type === FUEL_TYPE.ELECTRIC && number !== 0,

lib/transformDataToDatasets.ts

@@ -1,18 +1,29 @@
-export const transformDataToDatasets = (inputData) => {
-  const transformedData = inputData.map((item) => ({
-    label: item.make,
-    data: [item.number],
+import type { Car, Dataset } from "@/types";
+
+export const transformDataToDatasets = (inputData: Car[]): Dataset[] => {
+  const transformedData: Dataset[] = inputData.map(({ make, number }: Car) => ({
+    label: make,
+    data: [number],
   }));
 
-  const datasets = transformedData.reduce((acc, item) => {
-    const existingDataset = acc.find((dataset) => dataset.label === item.label);
-    if (existingDataset) {
-      existingDataset.data.push(item.data[0]);
-    } else {
-      acc.push(item);
-    }
-    return acc;
-  }, []);
+  const datasets: Dataset[] = transformedData.reduce(
+    (acc: Dataset[], item: Dataset) => {
+      const existingDataset = acc.find(
+        (dataset) => dataset.label === item.label,
+      );
+
+      if (existingDataset) {
+        existingDataset.data.push(item.data[0]);
+      } else {
+        acc.push(item);
+      }
+
+      return acc;
+    },
+    [],
+  );
+
+  console.log({ datasets });
 
   return datasets;
 };

types/index.ts

@@ -4,3 +4,12 @@ export interface Car {
   fuel_type: string;
   number: any;
 }
+
+export type Dataset = {
+  label: string;
+  data: number[];
+};
+
+export interface ChartDataset extends Dataset {
+  borderColor: string;
+}