Dockerization, whitenoise serving static, refactor
This commit is contained in:
Luciano Gervasoni
179
app_urls/fetcher/templates/charts.html
Normal file
179
app_urls/fetcher/templates/charts.html
Normal file
@@ -0,0 +1,179 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user