From 4f4ed2bca2f92b1fc2ac39b0359c803592b9fe13 Mon Sep 17 00:00:00 2001
From: Andrew <andreasohaodha@proton.me>
Date: Tue, 25 Mar 2025 10:43:22 +0000
Subject: [PATCH] [frontend]: Add train lateness pie chart

---
 frontend/src/components/Statistics.jsx | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/frontend/src/components/Statistics.jsx b/frontend/src/components/Statistics.jsx
index 2e95022..48ba782 100644
--- a/frontend/src/components/Statistics.jsx
+++ b/frontend/src/components/Statistics.jsx
@@ -7,6 +7,7 @@ const Statistics = () => {
     const [transientTypes, setTransientTypes] = useState([]);
     const [trainTypes, setTrainTypes] = useState([]);
     const [trainStatuses, setTrainStatuses] = useState([]);
+    const [trainLatenesses, setTrainLatenesses] = useState([]);
     const [coordinates, setCoordinates] = useState([]);
     const [loading, setLoading] = useState(true);
     const [heatmapLoading, setHeatmapLoading] = useState(true);
@@ -23,6 +24,7 @@ const Statistics = () => {
                 let transientTypes = [];
                 let trainTypes = [];
                 let trainStatuses = [];
+                let trainLatenesses = [];
 
                 for (const item of transientData) {
                     transientTypes.push(item.objectType.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/([A-Z])([A-Z][a-z])/g, '$1 $2'));
@@ -30,12 +32,14 @@ const Statistics = () => {
                     if (item.objectType === "IrishRailTrain") {
                         trainTypes.push(item.trainTypeFull);
                         trainStatuses.push(item.trainStatusFull);
+                        trainLatenesses.push(item.trainPunctualityStatus);
                     }
                 }
 
                 setTransientTypes(transientTypes);
                 setTrainTypes(trainTypes);
                 setTrainStatuses(trainStatuses);
+                setTrainLatenesses(trainLatenesses);
             } catch (err) {
                 setError("Failed to fetch transient data");
             } finally {
@@ -114,6 +118,12 @@ const Statistics = () => {
                     />
                 </div>
 
+                <div className="bg-white shadow-md rounded-lg p-4">
+                    <ObjectTypeProportionPieChart
+                        label={`Live Train Latenesses`}
+                        dataList={trainLatenesses}
+                    />
+                </div>
             </div>
         </div>
     );