Fix layout for Treemap in electric cars page

sgcarstrends · Jan 1, 2024 · cf8bbbd · cf8bbbd
1 parent 8127bb4
commit cf8bbbd
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 10 deletions.
diff --git a/app/(cars)/page.tsx b/app/(cars)/page.tsx
@@ -8,7 +8,7 @@ import {
   POPULAR_MAKES_THRESHOLD,
 } from "@/config";
 import { sortByMake } from "@/utils/sortByMake";
-import type { Car } from "@/types";
+import { Car } from "@/types";
 import { WebSite, WithContext } from "schema-dts";
 import { fetchApi } from "@/utils/fetchApi";
 
@@ -17,14 +17,15 @@ export const runtime = "edge";
 const Home = async () => {
   const electricCars = await fetchApi<Car[]>(API_URL, { cache: "no-store" });
 
-  const totals = new Map();
-  electricCars.forEach((car) => {
-    if (totals.has(car.make)) {
-      totals.set(car.make, totals.get(car.make) + car.number);
+  const totals: Map<string, number> = new Map();
+  electricCars.forEach(({ make, number }) => {
+    if (totals.has(make)) {
+      totals.set(make, (totals.get(make) as number) + number);
     } else {
-      totals.set(car.make, car.number);
+      totals.set(make, number);
     }
   });
+
   const popularMakes = Array.from(totals, ([make, number]) => ({
     make,
     number,

diff --git a/app/coe/page.tsx b/app/coe/page.tsx
@@ -23,7 +23,7 @@ const COEPage = async () => {
     monthlyResults.filter(({ bidding_no }) => bidding_no === biddingRound);
 
   return (
-    <div className="mx-auto flex max-w-7xl flex-col gap-y-8">
+    <div className="flex flex-col gap-y-8">
       <HistoricalResult data={historicalResults} />
       {biddingRounds.map((round) => {
         return (

diff --git a/components/CarTreemap.tsx b/components/CarTreemap.tsx
@@ -30,7 +30,7 @@ export const CarTreemap = ({ data, popularMakes }: CarTreemapProps) => {
   const filteredCars = useMemo(
     () =>
       cars.filter((car) =>
-        popularMakes.some(({ make }: Pick<Car, "make">) => make === car.make),
+        popularMakes.some(({ make }: Car) => make === car.make),
       ),
     [cars, popularMakes],
   );
@@ -61,13 +61,13 @@ export const CarTreemap = ({ data, popularMakes }: CarTreemapProps) => {
   return (
     filteredCars && (
       <div className="flex flex-col items-center gap-y-4">
-        <div className="h-[600px] w-full md:w-[600px]">
+        <div className="w-full">
           <ApexChart
             options={options}
             series={series}
             type="treemap"
             width="100%"
-            height="100%"
+            height={600}
           />
         </div>
         <label htmlFor="months-select">