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

[frontend]: Optimise statistics page loading

Browse Source
This commit is contained in:
Aindréas Ó hAodha
2025-03-25 10:37:54 +00:00
parent 14181b7019
commit 9a91d5cd89
1 changed files with 35 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,10 +9,12 @@ const Statistics = () => {
const [trainStatuses, setTrainStatuses] = useState([]); const [trainStatuses, setTrainStatuses] = useState([]);
const [coordinates, setCoordinates] = useState([]); const [coordinates, setCoordinates] = useState([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [heatmapLoading, setHeatmapLoading] = useState(true);
const [error, setError] = useState(""); const [error, setError] = useState("");
// Fetch transient data separately
useEffect(() => { useEffect(() => {
const fetchData = async () => { const fetchTransientData = async () => {
try { try {
const transientResponse = await fetch("https://281bc6mcm5.execute-api.us-east-1.amazonaws.com/transient_data"); const transientResponse = await fetch("https://281bc6mcm5.execute-api.us-east-1.amazonaws.com/transient_data");
if (!transientResponse.ok) throw new Error("Network response was not ok"); if (!transientResponse.ok) throw new Error("Network response was not ok");
@ -22,35 +24,44 @@ const Statistics = () => {
let trainTypes = []; let trainTypes = [];
let trainStatuses = []; let trainStatuses = [];
const coordsResponse = await fetch("https://kc0re7ep0b.execute-api.us-east-1.amazonaws.com/return_all_coordinates");
if (!coordsResponse.ok) throw new Error("Network response was not ok");
const coordsData = await coordsResponse.json();
const coords = await coordsData["coordinates"]
for (const item of transientData) { 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')); transientTypes.push(item.objectType.replace(/([a-z])([A-Z])/g, '$1 $2').replace(/([A-Z])([A-Z][a-z])/g, '$1 $2'));
if (item.objectType === "IrishRailTrain") { if (item.objectType === "IrishRailTrain") {
let trainType = item.trainType === "M" ? "Mainline" : item.trainType === "S" ? "Suburban" : item.trainType === "D" ? "DART" : "Unknown"; trainTypes.push(item.trainTypeFull);
trainTypes.push(trainType); trainStatuses.push(item.trainStatusFull);
let trainStatus = item.trainStatus === "R" ? "Running" : item.trainStatus === "T" ? "Terminated" : item.trainStatus === "N" ? "Not yet running" : "Unknown";
trainStatuses.push(trainStatus);
} }
} }
setTransientTypes(transientTypes); setTransientTypes(transientTypes);
setTrainStatuses(trainStatuses);
setTrainTypes(trainTypes); setTrainTypes(trainTypes);
setCoordinates(coords); setTrainStatuses(trainStatuses);
} catch (err) { } catch (err) {
setError("Failed to fetch data"); setError("Failed to fetch transient data");
} finally { } finally {
setLoading(false); setLoading(false);
} }
}; };
fetchData(); fetchTransientData();
}, []);
// Fetch heatmap coordinates separately
useEffect(() => {
const fetchCoordinates = async () => {
try {
const coordsResponse = await fetch("https://kc0re7ep0b.execute-api.us-east-1.amazonaws.com/return_all_coordinates");
if (!coordsResponse.ok) throw new Error("Network response was not ok");
const coordsData = await coordsResponse.json();
setCoordinates(coordsData["coordinates"]);
} catch (err) {
setError("Failed to fetch heatmap data");
} finally {
setHeatmapLoading(false);
}
};
fetchCoordinates();
}, []); }, []);
if (loading) return <LoadingOverlay message={"Fetching data..."} />; if (loading) return <LoadingOverlay message={"Fetching data..."} />;
@ -70,13 +81,18 @@ const Statistics = () => {
}} }}
className="min-h-screen w-full flex flex-col bg-white pt-[7vh] px-4" className="min-h-screen w-full flex flex-col bg-white pt-[7vh] px-4"
> >
<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">
<div className="bg-white shadow-md rounded-lg p-4"> <div className="bg-white shadow-md rounded-lg p-4 flex items-center justify-center"
<HeatmapContainer coordinates={coordinates}/> style={{width: "420px", height: "420px"}}>
{heatmapLoading ? (
<p className="text-center text-gray-500">Loading Heatmap...</p>
) : (
<HeatmapContainer coordinates={coordinates}/>
)}
</div> </div>
<div className="bg-white shadow-md rounded-lg p-4"> <div className="bg-white shadow-md rounded-lg p-4">
<ObjectTypeProportionPieChart <ObjectTypeProportionPieChart
label={`Live Transport Types`} label={`Live Transport Types`}