-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
115 lines (101 loc) · 4.26 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>recTrack - Northeastern Recreation Tracker</title>
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/PapaParse/5.1.0/papaparse.min.js"></script>
<style>
.js-plotly-plot .plotly .modebar svg {
display: inline;
}
#plot {
width: 100%;
max-width: 1000px;
height: 70vh;
}
</style>
</head>
<body class="bg-gray-100 flex flex-col items-center justify-center min-h-screen p-4">
<header class="w-full max-w-4xl text-center mb-6">
<h1 class="text-4xl font-bold text-gray-800">recTrack</h1>
<p class="text-lg text-gray-600">A lightweight tracker for Northeastern University's recreation website: <a href="https://recreation.northeastern.edu" class="text-blue-500">recreation.northeastern.edu</a></p>
</header>
<section class="w-full max-w-4xl bg-white p-6 rounded-lg shadow-lg mb-6">
<h2 class="text-2xl font-semibold text-gray-700 mb-2">How It Works</h2>
<ul class="list-disc list-inside text-gray-600">
<li>GitHub Actions automates the scraping process on a regular schedule.</li>
<li>Data is fetched periodically from the Northeastern recreation website.</li>
<li>The graph below shows the number of people at various recreation facilities over time.</li>
</ul>
</section>
<div id="loader" class="flex flex-col items-center justify-center">
<div class="w-16 h-16 border-4 border-gray-300 border-t-blue-500 rounded-full animate-spin"></div>
<p class="mt-2 text-lg text-gray-700">Loading...</p>
</div>
<div id="plot" class="bg-white shadow-lg p-4"></div>
<script>
document.getElementById("plot").style.display = "none";
Papa.parse("https://thechesirecat.github.io/recTrack/output.csv", {
download: true,
header: true,
dynamicTyping: true,
complete: function (results) {
console.log("CSV Data Loaded:", results.data);
document.getElementById("loader").classList.add("hidden");
document.getElementById("plot").style.display = "block";
var data = results.data;
var traces = [];
var dataByLocation = {};
data.forEach(row => {
if (!row.updated || !row.location_name || row.last_count === undefined) return;
row.updated = new Date(row.updated);
if (isNaN(row.updated)) return;
if (!(row.location_name in dataByLocation)) {
dataByLocation[row.location_name] = [];
}
dataByLocation[row.location_name].push(row);
});
console.log("Processed Locations:", Object.keys(dataByLocation));
Object.keys(dataByLocation).forEach(location => {
var dates = dataByLocation[location].map(row => row.updated.toISOString());
var counts = dataByLocation[location].map(row => row.last_count);
console.log(`Location: ${location}, Dates:`, dates);
console.log(`Location: ${location}, Counts:`, counts);
if (dates.length === 0 || counts.length === 0) {
console.warn(`Skipping ${location} due to empty data.`);
return;
}
traces.push({
x: dates,
y: counts,
type: "scatter",
mode: "lines",
name: location,
opacity: 0.7,
});
});
console.log("Traces for Plotly:", traces);
if (traces.length === 0) {
document.getElementById("plot").innerHTML = "<p class='text-red-500 text-center'>No data available for plotting.</p>";
} else {
Plotly.newPlot("plot", traces, {
title: "Visitor Trends at Northeastern Recreation Facilities",
xaxis: { title: "Date" },
yaxis: { title: "Count" },
responsive: true
});
}
},
error: function (err) {
console.error("Error loading CSV:", err);
}
});
window.addEventListener("resize", function() {
Plotly.Plots.resize(document.getElementById("plot"));
});
</script>
</body>
</html>