URLs view refactor, article exception handling, visualize logs, charts
This commit is contained in:
Luciano Gervasoni
294
app_urls/api/templates/charts.html
Normal file
294
app_urls/api/templates/charts.html
Normal file
@@ -0,0 +1,294 @@
|
||||
<!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="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(`/api/urls-by-fetch-date/?days=${days}`, function (data) {
|
||||
renderUrlFetchDateChart(data);
|
||||
});
|
||||
|
||||
// Fetch and render the URL Status chart (with dynamic date filtering)
|
||||
$.getJSON(`/api/urls-per-status/?days=${days}`, function (data) {
|
||||
renderUrlStatusChart(data);
|
||||
});
|
||||
|
||||
// Fetch and render the URLs per Source chart
|
||||
$.getJSON(`/api/urls-per-source/?days=${days}`, function (data) {
|
||||
renderUrlsPerSourceChart(data);
|
||||
});
|
||||
|
||||
// Fetch and render the URLs per Search chart
|
||||
$.getJSON(`/api/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>
|
||||
Reference in New Issue
Block a user