aindreas/fyp
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[frontend]: Add train statuses & train types pie charts

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2025-03-12 23:16:29 +00:00
parent 07e3d5cff5
commit 2d7addfb25
1 changed files with 74 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
frontend/src/components/Statistics.jsx
View File

@ -4,6 +4,8 @@ import LoadingOverlay from "./LoadingOverlay.jsx";
const Statistics = () => { const Statistics = () => {
const [transientTypes, setTransientTypes] = useState([]); const [transientTypes, setTransientTypes] = useState([]);
const [trainTypes, setTrainTypes] = useState([]);
const [trainStatuses, setTrainStatuses] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [error, setError] = useState(""); const [error, setError] = useState("");
@ -13,13 +15,60 @@ const Statistics = () => {
const response = await fetch("https://281bc6mcm5.execute-api.us-east-1.amazonaws.com/transient_data"); const response = await fetch("https://281bc6mcm5.execute-api.us-east-1.amazonaws.com/transient_data");
if (!response.ok) throw new Error("Network response was not ok"); if (!response.ok) throw new Error("Network response was not ok");
const rawData = await response.json(); const transientData = await response.json();
const transientTypes = rawData let transientTypes = [];
.map((item) => item.objectType) let trainTypes = [];
.map((type) => type.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/([A-Z])([A-Z][a-z])/g, '$1 $2')); let trainStatuses = [];
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'));
switch (item.objectType) {
case "IrishRailTrain":
let trainType;
switch (item.trainType) {
case "M":
trainType = "Mainline";
break;
case "S":
trainType = "Suburban";
break;
case "D":
trainType = "DART";
break;
default:
trainType = "Unknown";
}
trainTypes.push(trainType);
let trainStatus;
switch (item.trainStatus) {
case "R":
trainStatus = "Running";
break;
case "T":
trainStatus = "Terminated";
break;
case "N":
trainStatus = "Not yet running";
break;
default:
trainStatus = "Unknown";
}
trainStatuses.push(trainStatus);
break;
}
}
setTransientTypes(transientTypes); setTransientTypes(transientTypes);
setTrainStatuses(trainStatuses);
setTrainTypes(trainTypes);
} catch (err) { } catch (err) {
setError("Failed to fetch data"); setError("Failed to fetch data");
} finally { } finally {
@ -49,18 +98,27 @@ const Statistics = () => {
> >
<div <div
className="mx-auto px-4 flex flex-wrap gap-4 pt-[4vh] justify-center"> className="mx-auto px-4 flex flex-wrap gap-4 pt-[4vh] justify-center">
{transientTypes.length > 0 ? ( <div className="bg-white shadow-md rounded-lg p-4">
transientTypes.slice(0, 6).map((type, index) => ( <ObjectTypeProportionPieChart
<div key={index} className="bg-white shadow-md rounded-lg p-4"> label={`Transport Types`}
<ObjectTypeProportionPieChart dataList={transientTypes}
label={`Transport Type Proportion ${index + 1}`} />
dataList={transientTypes} </div>
/>
</div> <div className="bg-white shadow-md rounded-lg p-4">
)) <ObjectTypeProportionPieChart
) : ( label={`Train Types`}
<p className="col-span-full text-center text-gray-500">No data available</p> dataList={trainTypes}
)} />
</div>
<div className="bg-white shadow-md rounded-lg p-4">
<ObjectTypeProportionPieChart
label={`Train Statuses`}
dataList={trainStatuses}
/>
</div>
</div> </div>
</div> </div>
); );