180 lines
6.4 KiB
HTML
180 lines
6.4 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.0625">Last 90 Minutes</option>
|
|
<option value="0.25">Last 6 Hours</option>
|
|
<option value="1">Last 24 Hours</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 () {
|
|
let chartInstances = {}; // Store chart instances
|
|
|
|
// Fetch initial data (default 7 days)
|
|
const defaultDays = 7;
|
|
fetchDataAndRenderCharts(defaultDays);
|
|
|
|
// Apply the filter automatically when the user changes the selection
|
|
$('#daysFilter').on('change', function () {
|
|
const selectedDays = $(this).val();
|
|
fetchDataAndRenderCharts(selectedDays);
|
|
});
|
|
|
|
function fetchDataAndRenderCharts(days) {
|
|
fetchAndRenderChart(`/urls-by-fetch-date/?days=${days}`, 'urlFetchDateChart', 'URLs by Fetch Date', 'bar');
|
|
fetchAndRenderChart(`/urls-per-status/?days=${days}`, 'urlStatusChart', 'URLs by Status', 'bar');
|
|
fetchAndRenderChart(`/urls-per-source/?days=${days}`, 'urlsPerSourceChart', 'URLs by Source', 'bar');
|
|
fetchAndRenderChart(`/urls-per-search/?days=${days}`, 'urlsPerSearchChart', 'URLs by Search', 'bar');
|
|
}
|
|
|
|
const categoryColors = {
|
|
'URLs by Fetch Date': '#4BC0C0', // Color for this category
|
|
'URLs by Status': '#36A2EB', // Color for this category
|
|
'URLs by Source': '#4BC0C0', // Color for this category
|
|
'URLs by Search': '#36A2EB' // Color for this category
|
|
};
|
|
const maxLabelLength = 35; // Limit X-axis labels to 10 characters
|
|
|
|
function fetchAndRenderChart(url, canvasId, chartTitle, chartType) {
|
|
$.getJSON(url, function (data) {
|
|
if (chartInstances[canvasId]) {
|
|
chartInstances[canvasId].destroy(); // Destroy previous chart
|
|
}
|
|
|
|
const ctx = document.getElementById(canvasId).getContext('2d');
|
|
chartInstances[canvasId] = new Chart(ctx, {
|
|
type: chartType,
|
|
data: {
|
|
labels: data.labels, // Ensure labels are passed as strings
|
|
datasets: [{
|
|
label: chartTitle,
|
|
data: data.values,
|
|
backgroundColor: categoryColors[chartTitle], // Assign the same color based on category
|
|
}]
|
|
},
|
|
options: {
|
|
responsive: true,
|
|
plugins: {
|
|
legend: {
|
|
labels: { color: '#fff' }
|
|
}
|
|
},
|
|
scales: {
|
|
x: {
|
|
ticks: {
|
|
color: "#fff", // Set the color of x-axis ticks
|
|
callback: function (value) {
|
|
let label = data.labels[value];
|
|
if (label.length > maxLabelLength) { return label.slice(0, maxLabelLength) + '...'; }
|
|
return label;
|
|
}
|
|
},
|
|
grid: {
|
|
color: "#444" // Set the grid lines color
|
|
}
|
|
},
|
|
y: {
|
|
ticks: {
|
|
color: "#fff" // Set the color of y-axis ticks
|
|
},
|
|
grid: {
|
|
color: "#444" // Set the grid lines color
|
|
}
|
|
}
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|