296 lines
9.7 KiB
HTML
296 lines
9.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Charts</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<style>
|
|
body {
|
|
background-color: #333;
|
|
color: #fff;
|
|
font-family: Arial, sans-serif;
|
|
}
|
|
|
|
h2 {
|
|
color: #fff;
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
}
|
|
|
|
.chart-container {
|
|
width: 45%;
|
|
display: inline-block;
|
|
margin: 20px;
|
|
background-color: #444;
|
|
border-radius: 10px;
|
|
padding: 5px;
|
|
}
|
|
|
|
canvas {
|
|
background-color: #2c2c2c;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.container {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-wrap: wrap;
|
|
}
|
|
|
|
.filter-container {
|
|
text-align: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
select {
|
|
padding: 8px;
|
|
background-color: #555;
|
|
color: white;
|
|
border: 1px solid #444;
|
|
border-radius: 5px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h2>Data Visualizations</h2>
|
|
|
|
<!-- Filter for Number of Days -->
|
|
<div class="filter-container">
|
|
<label for="daysFilter">Select Number of Days:</label>
|
|
<select id="daysFilter">
|
|
<option value="0.25">Last 6 Hours</option>
|
|
<option value="1">Last 24 Hours</option>
|
|
<option value="3">Last 3 Days</option>
|
|
<option value="7" selected>Last 7 Days</option>
|
|
<option value="30">Last 30 Days</option>
|
|
<option value="90">Last 90 Days</option>
|
|
<option value="365">Last 365 Days</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="chart-container">
|
|
<canvas id="urlFetchDateChart"></canvas>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<canvas id="urlStatusChart"></canvas>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<canvas id="urlsPerSourceChart"></canvas>
|
|
</div>
|
|
|
|
<div class="chart-container">
|
|
<canvas id="urlsPerSearchChart"></canvas>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
$(document).ready(function () {
|
|
// Fetch initial data (default 30 days)
|
|
const defaultDays = 7;
|
|
fetchDataAndRenderCharts(defaultDays);
|
|
|
|
// Apply the filter automatically when the user changes the selection
|
|
$('#daysFilter').change(function () {
|
|
const selectedDays = $(this).val();
|
|
fetchDataAndRenderCharts(selectedDays);
|
|
});
|
|
});
|
|
|
|
function fetchDataAndRenderCharts(days) {
|
|
// Fetch and render the URL Fetch Date chart
|
|
$.getJSON(`/urls-by-fetch-date/?days=${days}`, function (data) {
|
|
renderUrlFetchDateChart(data);
|
|
});
|
|
|
|
// Fetch and render the URL Status chart (with dynamic date filtering)
|
|
$.getJSON(`/urls-per-status/?days=${days}`, function (data) {
|
|
renderUrlStatusChart(data);
|
|
});
|
|
|
|
// Fetch and render the URLs per Source chart
|
|
$.getJSON(`/urls-per-source/?days=${days}`, function (data) {
|
|
renderUrlsPerSourceChart(data);
|
|
});
|
|
|
|
// Fetch and render the URLs per Search chart
|
|
$.getJSON(`/urls-per-search/?days=${days}`, function (data) {
|
|
renderUrlsPerSearchChart(data);
|
|
});
|
|
}
|
|
|
|
function renderUrlFetchDateChart(data) {
|
|
new Chart(document.getElementById("urlFetchDateChart"), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.dates,
|
|
datasets: [{
|
|
label: 'URLs by Fetch Date',
|
|
data: data.counts,
|
|
backgroundColor: 'blue',
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
color: '#fff' // Change the legend text color to white
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
color: "#fff" // Set x-axis ticks color
|
|
},
|
|
grid: {
|
|
color: "#444" // Set grid lines color
|
|
}
|
|
},
|
|
y: {
|
|
ticks: {
|
|
color: "#fff" // Set y-axis ticks color
|
|
},
|
|
grid: {
|
|
color: "#444" // Set grid lines color
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderUrlStatusChart(data) {
|
|
new Chart(document.getElementById("urlStatusChart"), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.statuses,
|
|
datasets: [{
|
|
label: 'URLs by Status',
|
|
data: data.counts,
|
|
backgroundColor: 'green',
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
color: '#fff' // Change the legend text color to white
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
color: "#fff" // Set x-axis ticks color
|
|
},
|
|
grid: {
|
|
color: "#444" // Set grid lines color
|
|
}
|
|
},
|
|
y: {
|
|
ticks: {
|
|
color: "#fff" // Set y-axis ticks color
|
|
},
|
|
grid: {
|
|
color: "#444" // Set grid lines color
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderUrlsPerSourceChart(data) {
|
|
new Chart(document.getElementById("urlsPerSourceChart"), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.sources,
|
|
datasets: [{
|
|
label: 'URLs by Source',
|
|
data: data.counts,
|
|
backgroundColor: 'purple',
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
color: '#fff' // Change the legend text color to white
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
color: "#fff" // Set x-axis ticks color
|
|
},
|
|
grid: {
|
|
color: "#444" // Set grid lines color
|
|
}
|
|
},
|
|
y: {
|
|
ticks: {
|
|
color: "#fff" // Set y-axis ticks color
|
|
},
|
|
grid: {
|
|
color: "#444" // Set grid lines color
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function renderUrlsPerSearchChart(data) {
|
|
new Chart(document.getElementById("urlsPerSearchChart"), {
|
|
type: 'bar',
|
|
data: {
|
|
labels: data.searches,
|
|
datasets: [{
|
|
label: 'URLs by Search',
|
|
data: data.counts,
|
|
backgroundColor: 'orange',
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
labels: {
|
|
color: '#fff' // Change the legend text color to white
|
|
}
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
color: "#fff" // Set x-axis ticks color
|
|
},
|
|
grid: {
|
|
color: "#444" // Set grid lines color
|
|
}
|
|
},
|
|
y: {
|
|
ticks: {
|
|
color: "#fff" // Set y-axis ticks color
|
|
},
|
|
grid: {
|
|
color: "#444" // Set grid lines color
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|