Fix squashed charts on mobile

sgcarstrends · Jan 9, 2024 · 956a2e1 · 956a2e1
1 parent 027738c
commit 956a2e1
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 34 deletions.
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
@@ -41,12 +41,25 @@ export const CarTreemap = ({ data, popularMakes }: CarTreemapProps) => {
     },
     dataLabels: {
       enabled: true,
+      formatter: (text, opts) => `${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 = [