add history in articles measures
This commit is contained in:
Tykayn
tykayn
parent
1ed74c2e2f
commit
381f378db4
9 changed files with 1678 additions and 195 deletions
566
templates/admin/wiki_rankings.html.twig
Normal file
566
templates/admin/wiki_rankings.html.twig
Normal file
|
|
@ -0,0 +1,566 @@
|
|||
{% extends 'base.html.twig' %}
|
||||
|
||||
{% block title %}Évolution des classements Wiki OSM{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="container mt-4">
|
||||
{% include 'admin/_wiki_navigation.html.twig' %}
|
||||
|
||||
<div class="d-flex justify-content-between align-items-center mb-3">
|
||||
<h1>Évolution des classements Wiki OSM</h1>
|
||||
{% if last_updated %}
|
||||
<div class="text-muted">
|
||||
Dernière mise à jour: {{ last_updated|date('d/m/Y H:i') }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if not json_exists %}
|
||||
<div class="alert alert-warning">
|
||||
<i class="bi bi-exclamation-triangle"></i> Aucune donnée de classement n'est disponible. Veuillez exécuter le script de scraping pour générer les données.
|
||||
</div>
|
||||
{% else %}
|
||||
<!-- Global Metrics Section -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h2>Métriques globales</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<canvas id="globalMetricsChart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<canvas id="stalenessDistributionChart" width="400" height="200"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-4">
|
||||
<div class="col-md-12">
|
||||
<h3>Évolution des métriques globales</h3>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Pages totales</th>
|
||||
<th>Score moyen</th>
|
||||
<th>Sections (moy.)</th>
|
||||
<th>Mots (moy.)</th>
|
||||
<th>Liens (moy.)</th>
|
||||
<th>Images (moy.)</th>
|
||||
<th>Catégories (moy.)</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for timestamp in timestamps %}
|
||||
{% if global_metrics[timestamp] is defined %}
|
||||
<tr>
|
||||
<td>{{ timestamp|date('d/m/Y') }}</td>
|
||||
<td>{{ global_metrics[timestamp].total_pages }}</td>
|
||||
<td>
|
||||
<div class="progress" style="height: 20px;">
|
||||
{% set score = global_metrics[timestamp].avg_staleness %}
|
||||
{% set score_class = score > 70 ? 'bg-danger' : (score > 40 ? 'bg-warning' : 'bg-success') %}
|
||||
<div class="progress-bar {{ score_class }}" role="progressbar"
|
||||
style="width: {{ score }}%;"
|
||||
aria-valuenow="{{ score }}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100">
|
||||
{{ score }}
|
||||
</div>
|
||||
</div>
|
||||
</td>
|
||||
<td>{{ global_metrics[timestamp].avg_sections }}</td>
|
||||
<td>{{ global_metrics[timestamp].avg_words }}</td>
|
||||
<td>{{ global_metrics[timestamp].avg_links }}</td>
|
||||
<td>{{ global_metrics[timestamp].avg_images }}</td>
|
||||
<td>{{ global_metrics[timestamp].avg_categories }}</td>
|
||||
</tr>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Rankings Section -->
|
||||
<div class="card mb-4">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h2>Classement des pages</h2>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row mb-3">
|
||||
<div class="col-md-6">
|
||||
<div class="input-group">
|
||||
<span class="input-group-text">Filtrer</span>
|
||||
<input type="text" id="pageFilter" class="form-control" placeholder="Rechercher une page...">
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select id="metricSelector" class="form-select">
|
||||
<option value="staleness_score">Score de décrépitude</option>
|
||||
<option value="word_diff">Différence de mots</option>
|
||||
<option value="section_diff">Différence de sections</option>
|
||||
<option value="link_diff">Différence de liens</option>
|
||||
<option value="media_diff">Différence d'images</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-md-3">
|
||||
<select id="sortOrder" class="form-select">
|
||||
<option value="desc">Décroissant</option>
|
||||
<option value="asc">Croissant</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="table-responsive">
|
||||
<table class="table table-striped table-hover" id="pagesTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Page</th>
|
||||
<th>Score actuel</th>
|
||||
<th>Évolution</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for key, page in pages %}
|
||||
<tr data-page-key="{{ key }}">
|
||||
<td>{{ page.title }}</td>
|
||||
<td>
|
||||
{% set latest_timestamp = timestamps|last %}
|
||||
{% if page.metrics[latest_timestamp] is defined %}
|
||||
{% set latest_score = page.metrics[latest_timestamp].staleness_score %}
|
||||
<div class="progress" style="height: 20px;">
|
||||
{% set score_class = latest_score > 70 ? 'bg-danger' : (latest_score > 40 ? 'bg-warning' : 'bg-success') %}
|
||||
<div class="progress-bar {{ score_class }}" role="progressbar"
|
||||
style="width: {{ latest_score }}%;"
|
||||
aria-valuenow="{{ latest_score }}"
|
||||
aria-valuemin="0"
|
||||
aria-valuemax="100">
|
||||
{{ latest_score }}
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">N/A</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<canvas class="trend-chart" data-page-key="{{ key }}" width="200" height="50"></canvas>
|
||||
</td>
|
||||
<td>
|
||||
<a href="{{ path('app_admin_wiki_compare', {'key': key}) }}" class="btn btn-sm btn-outline-primary">
|
||||
<i class="bi bi-arrows-angle-expand"></i> Comparer
|
||||
</a>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Page Detail Modal -->
|
||||
<div class="modal fade" id="pageDetailModal" tabindex="-1" aria-labelledby="pageDetailModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="pageDetailModalLabel">Détails de la page</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<h3 id="modalPageTitle"></h3>
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<canvas id="pageDetailChart" width="700" height="300"></canvas>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row mt-3">
|
||||
<div class="col-md-12">
|
||||
<h4>Historique des métriques</h4>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-sm" id="pageMetricsTable">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Date</th>
|
||||
<th>Score</th>
|
||||
<th>Mots</th>
|
||||
<th>Sections</th>
|
||||
<th>Liens</th>
|
||||
<th>Images</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<!-- Filled dynamically by JavaScript -->
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Fermer</button>
|
||||
<a href="#" id="comparePageBtn" class="btn btn-primary">Comparer</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
{% block javascripts %}
|
||||
{{ parent() }}
|
||||
{% if json_exists %}
|
||||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Data from controller
|
||||
const timestamps = {{ timestamps|json_encode|raw }};
|
||||
const pages = {{ pages|json_encode|raw }};
|
||||
const globalMetrics = {{ global_metrics|json_encode|raw }};
|
||||
|
||||
// Format dates for display
|
||||
const formatDates = timestamps.map(ts => {
|
||||
const date = new Date(ts);
|
||||
return date.toLocaleDateString('fr-FR');
|
||||
});
|
||||
|
||||
// Global metrics chart
|
||||
const globalMetricsCtx = document.getElementById('globalMetricsChart').getContext('2d');
|
||||
const globalMetricsData = {
|
||||
labels: formatDates,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Score moyen',
|
||||
data: timestamps.map(ts => globalMetrics[ts]?.avg_staleness || 0),
|
||||
borderColor: 'rgba(255, 99, 132, 1)',
|
||||
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
||||
fill: false,
|
||||
tension: 0.1
|
||||
},
|
||||
{
|
||||
label: 'Sections (moy.)',
|
||||
data: timestamps.map(ts => globalMetrics[ts]?.avg_sections || 0),
|
||||
borderColor: 'rgba(54, 162, 235, 1)',
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
||||
fill: false,
|
||||
tension: 0.1
|
||||
},
|
||||
{
|
||||
label: 'Mots (moy. / 10)',
|
||||
data: timestamps.map(ts => (globalMetrics[ts]?.avg_words || 0) / 10),
|
||||
borderColor: 'rgba(255, 206, 86, 1)',
|
||||
backgroundColor: 'rgba(255, 206, 86, 0.2)',
|
||||
fill: false,
|
||||
tension: 0.1
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
new Chart(globalMetricsCtx, {
|
||||
type: 'line',
|
||||
data: globalMetricsData,
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Évolution des métriques globales'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Staleness distribution chart
|
||||
if (timestamps.length > 0) {
|
||||
const latestTimestamp = timestamps[timestamps.length - 1];
|
||||
const latestDistribution = globalMetrics[latestTimestamp]?.staleness_distribution || {};
|
||||
|
||||
const stalenessDistCtx = document.getElementById('stalenessDistributionChart').getContext('2d');
|
||||
const stalenessDistData = {
|
||||
labels: Object.keys(latestDistribution),
|
||||
datasets: [{
|
||||
label: 'Nombre de pages',
|
||||
data: Object.values(latestDistribution),
|
||||
backgroundColor: [
|
||||
'rgba(25, 135, 84, 0.7)',
|
||||
'rgba(140, 195, 38, 0.7)',
|
||||
'rgba(255, 193, 7, 0.7)',
|
||||
'rgba(255, 153, 0, 0.7)',
|
||||
'rgba(232, 113, 55, 0.7)',
|
||||
'rgba(220, 53, 69, 0.7)'
|
||||
],
|
||||
borderColor: [
|
||||
'rgba(25, 135, 84, 1)',
|
||||
'rgba(140, 195, 38, 1)',
|
||||
'rgba(255, 193, 7, 1)',
|
||||
'rgba(255, 153, 0, 1)',
|
||||
'rgba(232, 113, 55, 1)',
|
||||
'rgba(220, 53, 69, 1)'
|
||||
],
|
||||
borderWidth: 1
|
||||
}]
|
||||
};
|
||||
|
||||
new Chart(stalenessDistCtx, {
|
||||
type: 'bar',
|
||||
data: stalenessDistData,
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: 'Distribution des scores de décrépitude'
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Create small trend charts for each page
|
||||
const trendCharts = document.querySelectorAll('.trend-chart');
|
||||
trendCharts.forEach(canvas => {
|
||||
const pageKey = canvas.dataset.pageKey;
|
||||
const pageData = pages[pageKey];
|
||||
|
||||
if (pageData && pageData.metrics) {
|
||||
const ctx = canvas.getContext('2d');
|
||||
const metricValues = timestamps.map(ts => {
|
||||
return pageData.metrics[ts]?.staleness_score || null;
|
||||
});
|
||||
|
||||
// Filter out null values
|
||||
const validData = metricValues.filter(val => val !== null);
|
||||
|
||||
// Calculate trend (increasing or decreasing)
|
||||
let trendColor = 'rgba(75, 192, 192, 1)'; // Default: neutral
|
||||
if (validData.length >= 2) {
|
||||
const firstValid = validData[0];
|
||||
const lastValid = validData[validData.length - 1];
|
||||
if (lastValid > firstValid) {
|
||||
trendColor = 'rgba(255, 99, 132, 1)'; // Red: getting worse
|
||||
} else if (lastValid < firstValid) {
|
||||
trendColor = 'rgba(75, 192, 192, 1)'; // Green: getting better
|
||||
}
|
||||
}
|
||||
|
||||
new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: formatDates,
|
||||
datasets: [{
|
||||
data: metricValues,
|
||||
borderColor: trendColor,
|
||||
backgroundColor: trendColor.replace('1)', '0.2)'),
|
||||
tension: 0.1,
|
||||
pointRadius: 0,
|
||||
borderWidth: 2
|
||||
}]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false,
|
||||
plugins: {
|
||||
legend: {
|
||||
display: false
|
||||
},
|
||||
tooltip: {
|
||||
enabled: true
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
x: {
|
||||
display: false
|
||||
},
|
||||
y: {
|
||||
display: false,
|
||||
min: 0,
|
||||
max: 100
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// Page filtering
|
||||
const pageFilter = document.getElementById('pageFilter');
|
||||
const pagesTable = document.getElementById('pagesTable');
|
||||
|
||||
pageFilter.addEventListener('input', function() {
|
||||
const filterText = this.value.toLowerCase();
|
||||
const rows = pagesTable.querySelectorAll('tbody tr');
|
||||
|
||||
rows.forEach(row => {
|
||||
const pageKey = row.dataset.pageKey;
|
||||
const pageTitle = pages[pageKey]?.title.toLowerCase() || '';
|
||||
|
||||
if (pageTitle.includes(filterText) || pageKey.toLowerCase().includes(filterText)) {
|
||||
row.style.display = '';
|
||||
} else {
|
||||
row.style.display = 'none';
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Metric selector and sorting
|
||||
const metricSelector = document.getElementById('metricSelector');
|
||||
const sortOrder = document.getElementById('sortOrder');
|
||||
|
||||
function sortPages() {
|
||||
const metric = metricSelector.value;
|
||||
const order = sortOrder.value;
|
||||
const tbody = pagesTable.querySelector('tbody');
|
||||
const rows = Array.from(tbody.querySelectorAll('tr'));
|
||||
|
||||
// Get the latest timestamp
|
||||
const latestTs = timestamps[timestamps.length - 1];
|
||||
|
||||
rows.sort((a, b) => {
|
||||
const keyA = a.dataset.pageKey;
|
||||
const keyB = b.dataset.pageKey;
|
||||
|
||||
const valueA = pages[keyA]?.metrics[latestTs]?.[metric] || 0;
|
||||
const valueB = pages[keyB]?.metrics[latestTs]?.[metric] || 0;
|
||||
|
||||
return order === 'asc' ? valueA - valueB : valueB - valueA;
|
||||
});
|
||||
|
||||
// Clear and re-append rows
|
||||
rows.forEach(row => tbody.appendChild(row));
|
||||
}
|
||||
|
||||
metricSelector.addEventListener('change', sortPages);
|
||||
sortOrder.addEventListener('change', sortPages);
|
||||
|
||||
// Initial sort
|
||||
sortPages();
|
||||
|
||||
// Page detail modal
|
||||
const pageDetailModal = new bootstrap.Modal(document.getElementById('pageDetailModal'));
|
||||
const modalPageTitle = document.getElementById('modalPageTitle');
|
||||
const comparePageBtn = document.getElementById('comparePageBtn');
|
||||
const pageMetricsTable = document.getElementById('pageMetricsTable');
|
||||
let pageDetailChart = null;
|
||||
|
||||
// Add click event to table rows
|
||||
const tableRows = pagesTable.querySelectorAll('tbody tr');
|
||||
tableRows.forEach(row => {
|
||||
row.addEventListener('click', function() {
|
||||
const pageKey = this.dataset.pageKey;
|
||||
const pageData = pages[pageKey];
|
||||
|
||||
if (pageData) {
|
||||
// Set modal title and compare button link
|
||||
modalPageTitle.textContent = pageData.title;
|
||||
comparePageBtn.href = `/wiki/compare/${pageKey}`;
|
||||
|
||||
// Fill metrics table
|
||||
const tbody = pageMetricsTable.querySelector('tbody');
|
||||
tbody.innerHTML = '';
|
||||
|
||||
timestamps.forEach(ts => {
|
||||
if (pageData.metrics[ts]) {
|
||||
const metrics = pageData.metrics[ts];
|
||||
const row = document.createElement('tr');
|
||||
|
||||
// Format date
|
||||
const date = new Date(ts);
|
||||
const formattedDate = date.toLocaleDateString('fr-FR');
|
||||
|
||||
row.innerHTML = `
|
||||
<td>${formattedDate}</td>
|
||||
<td>${metrics.staleness_score || 0}</td>
|
||||
<td>${metrics.word_diff || 0}</td>
|
||||
<td>${metrics.section_diff || 0}</td>
|
||||
<td>${metrics.link_diff || 0}</td>
|
||||
<td>${metrics.media_diff || 0}</td>
|
||||
`;
|
||||
|
||||
tbody.appendChild(row);
|
||||
}
|
||||
});
|
||||
|
||||
// Create detailed chart
|
||||
const ctx = document.getElementById('pageDetailChart').getContext('2d');
|
||||
|
||||
// Destroy previous chart if exists
|
||||
if (pageDetailChart) {
|
||||
pageDetailChart.destroy();
|
||||
}
|
||||
|
||||
pageDetailChart = new Chart(ctx, {
|
||||
type: 'line',
|
||||
data: {
|
||||
labels: formatDates,
|
||||
datasets: [
|
||||
{
|
||||
label: 'Score de décrépitude',
|
||||
data: timestamps.map(ts => pageData.metrics[ts]?.staleness_score || null),
|
||||
borderColor: 'rgba(255, 99, 132, 1)',
|
||||
backgroundColor: 'rgba(255, 99, 132, 0.2)',
|
||||
fill: false
|
||||
},
|
||||
{
|
||||
label: 'Différence de mots / 10',
|
||||
data: timestamps.map(ts => (pageData.metrics[ts]?.word_diff || 0) / 10),
|
||||
borderColor: 'rgba(54, 162, 235, 1)',
|
||||
backgroundColor: 'rgba(54, 162, 235, 0.2)',
|
||||
fill: false
|
||||
},
|
||||
{
|
||||
label: 'Différence de sections',
|
||||
data: timestamps.map(ts => pageData.metrics[ts]?.section_diff || null),
|
||||
borderColor: 'rgba(255, 206, 86, 1)',
|
||||
backgroundColor: 'rgba(255, 206, 86, 0.2)',
|
||||
fill: false
|
||||
},
|
||||
{
|
||||
label: 'Différence de liens',
|
||||
data: timestamps.map(ts => pageData.metrics[ts]?.link_diff || null),
|
||||
borderColor: 'rgba(75, 192, 192, 1)',
|
||||
backgroundColor: 'rgba(75, 192, 192, 0.2)',
|
||||
fill: false
|
||||
}
|
||||
]
|
||||
},
|
||||
options: {
|
||||
responsive: true,
|
||||
plugins: {
|
||||
title: {
|
||||
display: true,
|
||||
text: `Évolution des métriques pour ${pageData.title}`
|
||||
}
|
||||
},
|
||||
scales: {
|
||||
y: {
|
||||
beginAtZero: true
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// Show modal
|
||||
pageDetailModal.show();
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue