271 lines
9.6 KiB
HTML
271 lines
9.6 KiB
HTML
<!doctype html>
|
||
<html lang="de">
|
||
<head>
|
||
<meta charset="utf-8">
|
||
<title>Dashboard – Elpatrons Datumsrechner</title>
|
||
<link rel="stylesheet" href="/static/style.css">
|
||
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
||
<style>
|
||
body {
|
||
font-family: 'Segoe UI', Arial, sans-serif;
|
||
background: #f8fafc;
|
||
color: #1e293b;
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
.dashboard-box { max-width: 600px; margin: 3em auto; background: #fff; border-radius: 12px; box-shadow: 0 2px 8px #cbd5e1; padding: 2em 2em 1.5em 2em; border: 1px solid #e5e7eb; }
|
||
.dashboard-box h2 { text-align: center; margin-bottom: 1.2em; }
|
||
.stats-row { display: flex; justify-content: space-between; margin-bottom: 2em; }
|
||
.stats-label { color: #64748b; }
|
||
.stats-value { font-size: 1.5em; font-weight: bold; }
|
||
.chart-container { margin: 2em 0; }
|
||
.toggle-container {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin-bottom: 1.5em;
|
||
gap: 0.5em;
|
||
}
|
||
.toggle-btn {
|
||
padding: 0.5em 1em;
|
||
border: 1px solid #d1d5db;
|
||
background: #f9fafb;
|
||
color: #6b7280;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
.toggle-btn.active {
|
||
background: #2563eb;
|
||
color: white;
|
||
border-color: #2563eb;
|
||
}
|
||
.toggle-btn:hover {
|
||
background: #e5e7eb;
|
||
}
|
||
.toggle-btn.active:hover {
|
||
background: #1d4ed8;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="dashboard-box">
|
||
<h1>Statistik-Dashboard</h1>
|
||
<div class="stats-row">
|
||
<div class="stats-label">Gesamt-Pageviews (7 Tage):</div>
|
||
<div class="stats-value">{{ pageviews }}</div>
|
||
</div>
|
||
|
||
<div class="toggle-container">
|
||
<button class="toggle-btn active" data-period="week">Wochenverlauf</button>
|
||
<button class="toggle-btn" data-period="day">24-Stunden-Verlauf</button>
|
||
</div>
|
||
|
||
<div class="chart-container">
|
||
<canvas id="imprChart" width="400" height="180"></canvas>
|
||
</div>
|
||
<div class="chart-container">
|
||
<canvas id="funcChart" width="400" height="220"></canvas>
|
||
</div>
|
||
{% if api_counts and api_counts|length > 0 %}
|
||
<div class="chart-container">
|
||
<canvas id="apiChart" width="400" height="220"></canvas>
|
||
</div>
|
||
{% endif %}
|
||
<a href="/" style="color:#2563eb;">Zurück zur App</a>
|
||
</div>
|
||
<script type="text/javascript">
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Daten für verschiedene Zeiträume
|
||
const weekData = {{ impressions_per_day|tojson }};
|
||
const dayData = {{ impressions_per_hour|tojson }};
|
||
const weekFuncData = {{ func_counts|tojson }};
|
||
const dayFuncData = {{ func_counts_hourly|tojson }};
|
||
const weekApiData = {{ api_counts|tojson }};
|
||
const dayApiData = {{ api_counts_hourly|tojson }};
|
||
|
||
let currentPeriod = 'week';
|
||
let currentImprChart = null;
|
||
let currentFuncChart = null;
|
||
let currentApiChart = null;
|
||
|
||
// Toggle-Buttons Event Listener
|
||
document.querySelectorAll('.toggle-btn').forEach(btn => {
|
||
btn.addEventListener('click', function() {
|
||
// Aktiven Button aktualisieren
|
||
document.querySelectorAll('.toggle-btn').forEach(b => b.classList.remove('active'));
|
||
this.classList.add('active');
|
||
|
||
// Zeitraum wechseln
|
||
currentPeriod = this.dataset.period;
|
||
updateAllCharts();
|
||
});
|
||
});
|
||
|
||
function updateImpressionsChart() {
|
||
const ctx = document.getElementById('imprChart').getContext('2d');
|
||
|
||
// Bestehenden Chart zerstören
|
||
if (currentImprChart) {
|
||
currentImprChart.destroy();
|
||
}
|
||
|
||
let data, labels, counts;
|
||
|
||
if (currentPeriod === 'week') {
|
||
data = weekData;
|
||
labels = Object.keys(data);
|
||
counts = Object.values(data);
|
||
} else {
|
||
data = dayData;
|
||
labels = Object.keys(data);
|
||
counts = Object.values(data);
|
||
}
|
||
|
||
currentImprChart = new Chart(ctx, {
|
||
type: 'line',
|
||
data: {
|
||
labels: labels,
|
||
datasets: [{
|
||
label: currentPeriod === 'week' ? 'Impressions/Tag' : 'Impressions/Stunde',
|
||
data: counts,
|
||
borderColor: '#059669',
|
||
backgroundColor: 'rgba(5,150,105,0.1)',
|
||
tension: 0.2,
|
||
fill: true
|
||
}]
|
||
},
|
||
options: {
|
||
plugins: {
|
||
legend: { display: true },
|
||
title: {
|
||
display: true,
|
||
text: currentPeriod === 'week' ? 'Wochenverlauf' : '24-Stunden-Verlauf'
|
||
}
|
||
},
|
||
scales: {
|
||
y: { beginAtZero: true, ticks: { stepSize: 1 } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
function updateFunctionChart() {
|
||
const ctx = document.getElementById('funcChart').getContext('2d');
|
||
|
||
// Bestehenden Chart zerstören
|
||
if (currentFuncChart) {
|
||
currentFuncChart.destroy();
|
||
}
|
||
|
||
let data, labels, counts;
|
||
|
||
if (currentPeriod === 'week') {
|
||
data = weekFuncData;
|
||
labels = Object.keys(data);
|
||
counts = Object.values(data);
|
||
} else {
|
||
// Für stündliche Daten: Summe aller Stunden für jede Funktion
|
||
const aggregatedData = {};
|
||
Object.values(dayFuncData).forEach(hourData => {
|
||
Object.keys(hourData).forEach(func => {
|
||
aggregatedData[func] = (aggregatedData[func] || 0) + hourData[func];
|
||
});
|
||
});
|
||
data = aggregatedData;
|
||
labels = Object.keys(data);
|
||
counts = Object.values(data);
|
||
}
|
||
|
||
currentFuncChart = new Chart(ctx, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: labels,
|
||
datasets: [{
|
||
label: 'Funktionsaufrufe',
|
||
data: counts,
|
||
backgroundColor: '#2563eb',
|
||
}]
|
||
},
|
||
options: {
|
||
plugins: {
|
||
legend: { display: false },
|
||
title: {
|
||
display: true,
|
||
text: currentPeriod === 'week' ? 'Funktionsaufrufe (Woche)' : 'Funktionsaufrufe (24h)'
|
||
}
|
||
},
|
||
scales: {
|
||
y: { beginAtZero: true, ticks: { stepSize: 1 } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
function updateApiChart() {
|
||
const apiChartElement = document.getElementById('apiChart');
|
||
if (!apiChartElement) return;
|
||
|
||
const ctx = apiChartElement.getContext('2d');
|
||
|
||
// Bestehenden Chart zerstören
|
||
if (currentApiChart) {
|
||
currentApiChart.destroy();
|
||
}
|
||
|
||
let data, labels, counts;
|
||
|
||
if (currentPeriod === 'week') {
|
||
data = weekApiData;
|
||
} else {
|
||
// Für stündliche Daten: Summe aller Stunden für jede API
|
||
const aggregatedData = {};
|
||
Object.values(dayApiData).forEach(hourData => {
|
||
Object.keys(hourData).forEach(api => {
|
||
aggregatedData[api] = (aggregatedData[api] || 0) + hourData[api];
|
||
});
|
||
});
|
||
data = aggregatedData;
|
||
}
|
||
|
||
if (Object.keys(data).length === 0) return;
|
||
|
||
labels = Object.keys(data);
|
||
counts = Object.values(data);
|
||
|
||
currentApiChart = new Chart(ctx, {
|
||
type: 'bar',
|
||
data: {
|
||
labels: labels,
|
||
datasets: [{
|
||
label: 'API-Aufrufe nach Endpunkt',
|
||
data: counts,
|
||
backgroundColor: '#f59e42',
|
||
}]
|
||
},
|
||
options: {
|
||
plugins: {
|
||
legend: { display: false },
|
||
title: {
|
||
display: true,
|
||
text: currentPeriod === 'week' ? 'API-Nutzung (Woche)' : 'API-Nutzung (24h)'
|
||
}
|
||
},
|
||
scales: {
|
||
y: { beginAtZero: true, ticks: { stepSize: 1 } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
function updateAllCharts() {
|
||
updateImpressionsChart();
|
||
updateFunctionChart();
|
||
updateApiChart();
|
||
}
|
||
|
||
// Initial Charts erstellen
|
||
updateAllCharts();
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |