Merge pull request #18 from ruchernchong/17-remove-charts-and-use-res…

…ponsive-tables-only-for-mobile-viewport Fix squashed charts on mobile
sgcarstrends · Jan 9, 2024 · 0604274 · 0604274
2 parents ddd396a + 69d975b
commit 0604274
Show file tree

Hide file tree

Showing 6 changed files with 44 additions and 39 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 { Car } from "@/types";
+import { Car, PopularMake } from "@/types";
 import { WebSite, WithContext } from "schema-dts";
 import { fetchApi } from "@/utils/fetchApi";
 
@@ -26,7 +26,7 @@ const Home = async () => {
     }
   });
 
-  const popularMakes = Array.from(totals, ([make, number]) => ({
+  const popularMakes: PopularMake[] = Array.from(totals, ([make, number]) => ({
     make,
     number,
   }))

diff --git a/components/CarInfographic.tsx b/components/CarInfographic.tsx
@@ -20,13 +20,6 @@ export const CarInfographic = ({
     new Date(),
   );
 
-  const grid = {
-    padding: {
-      left: 90,
-      right: 90,
-    },
-  };
-
   const chartOptions = {
     chart: {
       id: "target-chart",
@@ -46,9 +39,7 @@ export const CarInfographic = ({
       categories,
     },
     yaxis: {
-      title: {
-        text: "Number of Registrations",
-      },
+      title: { text: "Number of Registrations" },
     },
     tooltip: {
       intersect: false,
@@ -57,7 +48,6 @@ export const CarInfographic = ({
         format: "MMM yyyy",
       },
     },
-    grid,
   };
 
   const brushOptions = {
@@ -71,7 +61,7 @@ export const CarInfographic = ({
       selection: {
         enabled: true,
         xaxis: {
-          min: subMonths(latestMonth, 6).getTime(),
+          min: subMonths(latestMonth, 3).getTime(),
           max: latestMonth.getTime(),
         },
       },
@@ -83,6 +73,7 @@ export const CarInfographic = ({
       max: latestMonth.getTime(),
     },
     yaxis: {
+      show: false,
       tickAmount: 1,
     },
     legend: { show: false },

diff --git a/components/CarTreemap.tsx b/components/CarTreemap.tsx
@@ -4,13 +4,13 @@ import dynamic from "next/dynamic";
 import { compareAsc, format, parseISO } from "date-fns";
 import { API_URL, CHART_COLOURS } from "@/config";
 import { fetchApi } from "@/utils/fetchApi";
-import { Car } from "@/types";
+import { Car, PopularMake } from "@/types";
 
 const ApexChart = dynamic(() => import("react-apexcharts"), { ssr: false });
 
 interface CarTreemapProps {
   data: Car[];
-  popularMakes: any;
+  popularMakes: PopularMake[];
 }
 
 export const CarTreemap = ({ data, popularMakes }: CarTreemapProps) => {
@@ -30,7 +30,7 @@ export const CarTreemap = ({ data, popularMakes }: CarTreemapProps) => {
   const filteredCars = useMemo(
     () =>
       cars.filter((car) =>
-        popularMakes.some(({ make }: Car) => make === car.make),
+        popularMakes.some(({ make }: PopularMake) => make === car.make),
       ),
     [cars, popularMakes],
   );
@@ -41,12 +41,26 @@ export const CarTreemap = ({ data, popularMakes }: CarTreemapProps) => {
     },
     dataLabels: {
       enabled: true,
+      formatter: (text: string, opts: { value: number }) =>
+        `${text} - ${opts.value}`,
     },
     colors: CHART_COLOURS,
     title: {
       text: `Electric Car Make Distribution for ${selectedMonth}`,
       align: "center" as "center",
     },
+    xaxis: {
+      show: false,
+      labels: {
+        show: false,
+      },
+      axisBorder: {
+        show: false,
+      },
+      axisTicks: {
+        show: false,
+      },
+    },
   };
 
   const series = [

diff --git a/components/HistoricalResult.tsx b/components/HistoricalResult.tsx
@@ -81,7 +81,6 @@ export const HistoricalResult = ({ data }: HistoricalResultProps) => {
     colors: CHART_COLOURS,
     stroke: { curve: "smooth" as "smooth", width: 3 },
     dataLabels: { enabled: false },
-    fill: { opacity: 0.8 },
     title: { text: "Historical COE Results", align: "center" as "center" },
     xaxis: {
       type: "datetime" as "datetime",
@@ -98,14 +97,11 @@ export const HistoricalResult = ({ data }: HistoricalResultProps) => {
           new Intl.NumberFormat("en-SG", {
             style: "currency",
             currency: "SGD",
+            maximumFractionDigits: 0,
           }).format(value),
+        align: "left" as "left",
       },
-    },
-    grid: {
-      padding: {
-        left: 90,
-        right: 90,
-      },
+      floating: true,
     },
   };
 
@@ -132,6 +128,7 @@ export const HistoricalResult = ({ data }: HistoricalResultProps) => {
       max: latestMonth.getTime(),
     },
     yaxis: {
+      show: false,
       tickAmount: 1,
     },
     legend: { show: false },

diff --git a/components/MonthlyResult.tsx b/components/MonthlyResult.tsx
@@ -49,6 +49,8 @@ export const MonthlyResult = ({ data }: MonthlyResultProps) => {
     },
     dataLabels: {
       enabled: true,
+      enabledOnSeries: [3],
+      // enabled: true,
       formatter: (value: number, option: any) => {
         if (option.seriesIndex === 3) {
           return new Intl.NumberFormat("en-SG", {
@@ -60,13 +62,13 @@ export const MonthlyResult = ({ data }: MonthlyResultProps) => {
         return value;
       },
     },
-    plotOptions: {
-      bar: {
-        dataLabels: {
-          position: "center",
-        },
-      },
-    },
+    // plotOptions: {
+    //   bar: {
+    //     dataLabels: {
+    //       position: "center",
+    //     },
+    //   },
+    // },
     stroke: { curve: "smooth" as "smooth", width: [0, 0, 0, 4] },
     colors: CHART_COLOURS,
     title: {
@@ -80,31 +82,30 @@ export const MonthlyResult = ({ data }: MonthlyResultProps) => {
       categories,
     },
     yaxis: [
-      { seriesName: "Quotas", title: { text: "Number of Bids" } },
+      {
+        show: false,
+        seriesName: "Quotas",
+      },
       { show: false, seriesName: "Quotas" },
       { show: false, seriesName: "Quotas" },
       {
         opposite: true,
-        title: { text: "Quota Premium ($)" },
         labels: {
           formatter: (value: number) =>
             new Intl.NumberFormat("en-SG", {
               style: "currency",
               currency: "SGD",
+              maximumFractionDigits: 0,
             }).format(value),
+          align: "right" as "right",
         },
+        floating: true,
       },
     ],
     tooltip: {
       shared: true,
       intersect: false,
     },
-    grid: {
-      padding: {
-        left: 120,
-        right: 120,
-      },
-    },
   };
 
   const series = [

diff --git a/types/index.ts b/types/index.ts
@@ -8,6 +8,8 @@ export interface Car {
   selected?: boolean;
 }
 
+export type PopularMake = Pick<Car, "make" | "number">;
+
 export type Dataset = {
   name: string;
   data: number[];