diff --git a/app/page.tsx b/app/page.tsx index c3dc601..e08a5e2 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,9 +1,9 @@ -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( @@ -11,16 +11,14 @@ const Home = async () => { ); 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, }; diff --git a/lib/getCarRegistrationByMake.ts b/lib/getCarRegistrationByMake.ts index 3203768..c6c98a3 100644 --- a/lib/getCarRegistrationByMake.ts +++ b/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 => { + 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, diff --git a/lib/transformDataToDatasets.ts b/lib/transformDataToDatasets.ts index 14ebca0..a7a32b0 100644 --- a/lib/transformDataToDatasets.ts +++ b/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; }; diff --git a/types/index.ts b/types/index.ts index 6246c26..bbfc622 100644 --- a/types/index.ts +++ b/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; +}