[frontend]: Fix spacing of Statistics page

frontend/src/components/LoadingOverlay.jsx

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 const LoadingOverlay = ({ message }) => (
     <div style={{
         position: "absolute", top: 0, left: 0, width: "100%", height: "100%",
-        background: "rgba(0, 0, 0, 0.5)", display: "flex",
+        background: "rgba(0, 0, 0, 0.85)", display: "flex",
         alignItems: "center", justifyContent: "center", textAlign: "center",
         color: "white", fontSize: "20px", fontWeight: "bold",
         zIndex: 1000

frontend/src/components/Statistics.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect } from "react";
 import ObjectTypeProportionPieChart from "./charts/ObjectTypeProportionPieChart";
 import LoadingOverlay from "./LoadingOverlay.jsx";
 
@@ -18,8 +18,8 @@ const Statistics = () => {
                 const transientTypes = rawData
                     .map((item) => item.objectType)
                     .map((type) => type.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/([A-Z])([A-Z][a-z])/g, '$1 $2'));
-                setTransientTypes(transientTypes);
 
+                setTransientTypes(transientTypes);
             } catch (err) {
                 setError("Failed to fetch data");
             } finally {
@@ -35,10 +35,33 @@ const Statistics = () => {
 
     return (
         <div
-            style={{ height: "100vh", width: "100vw", display: "flex", position: "relative", paddingTop: "5vh" }}
-            className="min-h-screen flex flex-col items-center justify-center bg-gray-100 p-4"
+            style={{
+                height: "100vh",
+                width: "100%",
+                display: "flex",
+                position: "relative",
+                padding: "4vh",
+                paddingTop: "7vh",
+                backgroundColor: "white",
+                overflowX: "hidden"
+            }}
+            className="min-h-screen w-full flex flex-col bg-white pt-[7vh] px-4"
         >
-            <ObjectTypeProportionPieChart label="Current Transport Type Proportion" dataList={transientTypes} />
+            <div
+                className="mx-auto px-4 flex flex-wrap gap-4 pt-[4vh] jut stify-center">
+                {transientTypes.length > 0 ? (
+                    transientTypes.slice(0, 6).map((type, index) => (
+                        <div key={index} className="bg-white shadow-md rounded-lg p-4">
+                            <ObjectTypeProportionPieChart
+                                label={`Transport Type Proportion ${index + 1}`}
+                                dataList={transientTypes}
+                            />
+                        </div>
+                    ))
+                ) : (
+                    <p className="col-span-full text-center text-gray-500">No data available</p>
+                )}
+            </div>
         </div>
     );
 };

frontend/src/components/charts/ObjectTypeProportionPieChart.jsx

@@ -18,7 +18,7 @@ const ObjectTypeProportionPieChart = ({ label, dataList }) => {
     return (
         <div className="flex flex-col items-center p-4 bg-white shadow-lg rounded-lg w-full max-w-md">
             <h2 className="text-xl font-semibold text-center mb-4">{label}</h2>
-            <ResponsiveContainer width={300} height={300}>
+            <ResponsiveContainer width={350} height={300}>
                 <PieChart>
                     <Pie
                         data={chartData}

frontend/src/index.css

@@ -95,6 +95,8 @@ body, html, #root {
   padding: 0;
   box-sizing: border-box;
   overflow-x: hidden;
+  background-color: white;
+  overflow-x: hidden;
 }
 
 .leaflet-marker-icon {