[frontend]: Fix spacing of Statistics page

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>
     );
 };