109 lines
4.2 KiB
HTML
109 lines
4.2 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>
|
||
.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; }
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="dashboard-box">
|
||
<h2>Statistik-Dashboard</h2>
|
||
<div class="stats-row">
|
||
<div class="stats-label">Gesamt-Pageviews:</div>
|
||
<div class="stats-value">{{ pageviews }}</div>
|
||
</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 %}
|
||
<pre style="background:#f3f4f6; color:#334155; padding:0.5em; border-radius:6px; font-size:0.9em;">API-Counts: {{ api_counts|tojson }}</pre>
|
||
<a href="/" style="color:#2563eb;">Zurück zur App</a>
|
||
</div>
|
||
<script type="text/javascript">
|
||
document.addEventListener('DOMContentLoaded', function() {
|
||
// Impressions pro Tag
|
||
const imprData = {{ impressions_per_day|tojson }};
|
||
const imprLabels = Object.keys(imprData);
|
||
const imprCounts = Object.values(imprData);
|
||
new Chart(document.getElementById('imprChart').getContext('2d'), {
|
||
type: 'line',
|
||
data: {
|
||
labels: imprLabels,
|
||
datasets: [{
|
||
label: 'Impressions/Tag',
|
||
data: imprCounts,
|
||
borderColor: '#059669',
|
||
backgroundColor: 'rgba(5,150,105,0.1)',
|
||
tension: 0.2,
|
||
fill: true
|
||
}]
|
||
},
|
||
options: {
|
||
plugins: { legend: { display: true } },
|
||
scales: {
|
||
y: { beginAtZero: true, ticks: { stepSize: 1 } }
|
||
}
|
||
}
|
||
});
|
||
// Funktionsaufrufe
|
||
const funcCounts = {{ func_counts|tojson }};
|
||
const labels = Object.keys(funcCounts);
|
||
const data = Object.values(funcCounts);
|
||
new Chart(document.getElementById('funcChart').getContext('2d'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: labels,
|
||
datasets: [{
|
||
label: 'Funktionsaufrufe',
|
||
data: data,
|
||
backgroundColor: '#2563eb',
|
||
}]
|
||
},
|
||
options: {
|
||
plugins: { legend: { display: false } },
|
||
scales: {
|
||
y: { beginAtZero: true, ticks: { stepSize: 1 } }
|
||
}
|
||
}
|
||
});
|
||
// API-Nutzung
|
||
const apiCounts = {{ api_counts|tojson }};
|
||
if (Object.keys(apiCounts).length > 0 && document.getElementById('apiChart')) {
|
||
new Chart(document.getElementById('apiChart').getContext('2d'), {
|
||
type: 'bar',
|
||
data: {
|
||
labels: Object.keys(apiCounts),
|
||
datasets: [{
|
||
label: 'API-Aufrufe nach Endpunkt',
|
||
data: Object.values(apiCounts),
|
||
backgroundColor: '#f59e42',
|
||
}]
|
||
},
|
||
options: {
|
||
plugins: { legend: { display: false } },
|
||
scales: {
|
||
y: { beginAtZero: true, ticks: { stepSize: 1 } }
|
||
}
|
||
}
|
||
});
|
||
}
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |