123 lines
4.5 KiB
JavaScript
123 lines
4.5 KiB
JavaScript
import React, { useState, useEffect } from "react";
|
|
import ObjectTypeProportionPieChart from "./charts/ObjectTypeProportionPieChart";
|
|
import LoadingOverlay from "./LoadingOverlay.jsx";
|
|
import HeatmapContainer from "./charts/HeatmapContainer";
|
|
|
|
const Statistics = () => {
|
|
const [transientTypes, setTransientTypes] = useState([]);
|
|
const [trainTypes, setTrainTypes] = useState([]);
|
|
const [trainStatuses, setTrainStatuses] = useState([]);
|
|
const [coordinates, setCoordinates] = useState([]);
|
|
const [loading, setLoading] = useState(true);
|
|
const [heatmapLoading, setHeatmapLoading] = useState(true);
|
|
const [error, setError] = useState("");
|
|
|
|
// Fetch transient data separately
|
|
useEffect(() => {
|
|
const fetchTransientData = async () => {
|
|
try {
|
|
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");
|
|
const transientData = await transientResponse.json();
|
|
|
|
let transientTypes = [];
|
|
let trainTypes = [];
|
|
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'));
|
|
|
|
if (item.objectType === "IrishRailTrain") {
|
|
trainTypes.push(item.trainTypeFull);
|
|
trainStatuses.push(item.trainStatusFull);
|
|
}
|
|
}
|
|
|
|
setTransientTypes(transientTypes);
|
|
setTrainTypes(trainTypes);
|
|
setTrainStatuses(trainStatuses);
|
|
} catch (err) {
|
|
setError("Failed to fetch transient data");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
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 (error) return <p className="text-center text-red-500">{error}</p>;
|
|
|
|
return (
|
|
<div
|
|
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"
|
|
>
|
|
<div className="mx-auto px-4 flex flex-wrap gap-4 pt-[4vh] justify-center">
|
|
|
|
<div className="bg-white shadow-md rounded-lg p-4 flex items-center justify-center"
|
|
style={{width: "420px", height: "420px"}}>
|
|
{heatmapLoading ? (
|
|
<p className="text-center text-gray-500">Loading Heatmap...</p>
|
|
) : (
|
|
<HeatmapContainer coordinates={coordinates}/>
|
|
)}
|
|
</div>
|
|
|
|
|
|
<div className="bg-white shadow-md rounded-lg p-4">
|
|
<ObjectTypeProportionPieChart
|
|
label={`Live Transport Types`}
|
|
dataList={transientTypes}
|
|
/>
|
|
</div>
|
|
|
|
<div className="bg-white shadow-md rounded-lg p-4">
|
|
<ObjectTypeProportionPieChart
|
|
label={`Live Train Types`}
|
|
dataList={trainTypes}
|
|
/>
|
|
</div>
|
|
|
|
<div className="bg-white shadow-md rounded-lg p-4">
|
|
<ObjectTypeProportionPieChart
|
|
label={`Live Train Statuses`}
|
|
dataList={trainStatuses}
|
|
/>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Statistics;
|