Add function to return count for electric vehicles

app/page.tsx

@@ -1,6 +1,12 @@
-import Image from 'next/image'
+import Image from "next/image";
+import { getCarRegistrationByMake } from "@/lib/getCarRegistrationByMake";
+
+const Home = async () => {
+  const electricVehicles = await getCarRegistrationByMake(
+    `http://localhost:3000/data/M03-Car_Regn_by_make.csv`,
+  );
+  console.log(electricVehicles);
 
-export default function Home() {
   return (
     <main className="flex min-h-screen flex-col items-center justify-between p-24">
       <div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
@@ -15,7 +21,7 @@ export default function Home() {
             target="_blank"
             rel="noopener noreferrer"
           >
-            By{' '}
+            By{" "}
             <Image
               src="/vercel.svg"
               alt="Vercel Logo"
@@ -38,7 +44,6 @@ export default function Home() {
           priority
         />
       </div>
-
       <div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
         <a
           href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
@@ -47,7 +52,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Docs{' '}
+            Docs{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -64,7 +69,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Learn{' '}
+            Learn{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -81,7 +86,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Templates{' '}
+            Templates{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -98,7 +103,7 @@ export default function Home() {
           rel="noopener noreferrer"
         >
           <h2 className={`mb-3 text-2xl font-semibold`}>
-            Deploy{' '}
+            Deploy{" "}
             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
               -&gt;
             </span>
@@ -109,5 +114,7 @@ export default function Home() {
         </a>
       </div>
     </main>
-  )
-}
+  );
+};
+
+export default Home;

config/index.ts

@@ -0,0 +1,6 @@
+export const FUEL_TYPE = {
+  DIESEL: "Diesel",
+  ELECTRIC: "Electric",
+  OTHERS: "Others",
+  PETROL: "Petrol",
+};

lib/getCarRegistrationByMake.ts

@@ -0,0 +1,37 @@
+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());
+  const carRegistrationByMake: Car[] = d3.csvParse(csvContent, (car: Car) => ({
+    ...car,
+    number: +car.number,
+  }));
+
+  return carRegistrationByMake
+    .filter(
+      ({ fuel_type, number }) =>
+        fuel_type === FUEL_TYPE.ELECTRIC && number !== 0,
+    )
+    .reduce((result: Car[], item: Car) => {
+      const { month, make, fuel_type, vehicle_type } = item;
+      const existingItem = result.find(
+        (item) => item.month === month && item.make === make,
+      );
+
+      if (existingItem) {
+        existingItem.number += item.number;
+      } else {
+        result.push({
+          month,
+          make,
+          fuel_type,
+          vehicle_type,
+          number: item.number,
+        });
+      }
+
+      return result;
+    }, []);
+};

package.json

@@ -9,23 +9,25 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "d3": "^7.8.5",
+    "next": "14.0.0",
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.0.0"
+    "react-dom": "^18"
   },
   "devDependencies": {
+    "@types/d3": "^7.4.2",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "autoprefixer": "^10",
+    "aws-cdk-lib": "2.101.1",
+    "constructs": "10.2.69",
     "eslint": "^8",
     "eslint-config-next": "14.0.0",
     "postcss": "^8",
     "prettier": "^3.0.3",
-    "tailwindcss": "^3",
-    "typescript": "^5",
     "sst": "^2.32.2",
-    "aws-cdk-lib": "2.101.1",
-    "constructs": "10.2.69"
+    "tailwindcss": "^3",
+    "typescript": "^5"
   }
 }