106 lines
3.7 KiB
HTML
106 lines
3.7 KiB
HTML
{% extends "base.html" %}
|
|
{% block title %}Auswertungen | {{ app_name }}{% endblock %}
|
|
{% block content %}
|
|
<section class="page-hero">
|
|
<div>
|
|
<div class="eyebrow">Auswertungen</div>
|
|
<h1>Kosten, Kategorien und Zuordnung</h1>
|
|
<p class="muted">Alle Diagramme beziehen sich auf den aktuellen Monat {{ month.label }}.</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="chart-grid analytics-grid">
|
|
<article class="panel">
|
|
<div class="panel-head">
|
|
<div>
|
|
<h2 id="category-chart-title">Kategorien im Monat</h2>
|
|
<small id="category-chart-subtitle">Tippe auf einen Bereich, um die Untereinträge im selben Diagramm zu sehen.</small>
|
|
</div>
|
|
<button id="category-chart-back" class="ghost-button small-button" type="button" hidden>Zurück</button>
|
|
</div>
|
|
<div class="chart-shell">
|
|
<canvas
|
|
id="category-chart"
|
|
class="chart"
|
|
data-chart-type="pie"
|
|
data-drilldown-source="true"
|
|
data-labels='{{ category_labels|tojson }}'
|
|
data-values='{{ category_values|tojson }}'
|
|
data-detail-keys='{{ category_keys|tojson }}'
|
|
data-detail-map='{{ category_entry_map|tojson }}'
|
|
data-detail-title-target="category-chart-title"
|
|
data-detail-subtitle-target="category-chart-subtitle"
|
|
data-detail-back-target="category-chart-back"
|
|
data-default-detail-key='{{ default_category_id }}'></canvas>
|
|
</div>
|
|
<script type="application/json" id="category-chart-root-title">{"title":"Kategorien im Monat","subtitle":"Tippe auf einen Bereich, um die Untereinträge im selben Diagramm zu sehen."}</script>
|
|
</article>
|
|
|
|
<article class="panel">
|
|
<div class="panel-head">
|
|
<div>
|
|
<h2>Kosten nach Zuordnung</h2>
|
|
<small>Welche Ausgaben welchen registrierten Nutzern zugeordnet sind.</small>
|
|
</div>
|
|
</div>
|
|
<div class="chart-shell">
|
|
<canvas
|
|
class="chart"
|
|
data-chart-type="bar"
|
|
data-labels='{{ benefit_labels|tojson }}'
|
|
data-values='{{ benefit_values|tojson }}'></canvas>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="panel">
|
|
<div class="panel-head">
|
|
<div>
|
|
<h2>Kosten nach Hauptbereichen</h2>
|
|
<small>Hilft beim schnellen Blick auf Gemeinschaft, Sparen, Freizeit und persönliche Auszahlung.</small>
|
|
</div>
|
|
</div>
|
|
<div class="chart-shell">
|
|
<canvas
|
|
class="chart"
|
|
data-chart-type="bar"
|
|
data-index-axis="y"
|
|
data-labels='{{ account_labels|tojson }}'
|
|
data-values='{{ account_values|tojson }}'></canvas>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="panel analytics-wide-panel">
|
|
<div class="panel-head">
|
|
<div>
|
|
<h2>Budgets im Monatsverlauf</h2>
|
|
<small>Zeigt, wie sich die einzelnen Budgetbereiche von Monat zu Monat entwickeln.</small>
|
|
</div>
|
|
</div>
|
|
<div class="chart-shell chart-shell-tall">
|
|
<canvas
|
|
class="chart"
|
|
data-chart-type="line"
|
|
data-labels='{{ budget_timeline_labels|tojson }}'
|
|
data-datasets='{{ budget_timeline_datasets|tojson }}'></canvas>
|
|
</div>
|
|
</article>
|
|
|
|
<article class="panel analytics-wide-panel">
|
|
<div class="panel-head">
|
|
<div>
|
|
<h2>Größte Einträge im Monat</h2>
|
|
<small>Die teuersten Positionen über alle Kategorien hinweg.</small>
|
|
</div>
|
|
</div>
|
|
<div class="chart-shell chart-shell-tall">
|
|
<canvas
|
|
class="chart"
|
|
data-chart-type="bar"
|
|
data-index-axis="y"
|
|
data-labels='{{ top_entry_labels|tojson }}'
|
|
data-values='{{ top_entry_values|tojson }}'></canvas>
|
|
</div>
|
|
</article>
|
|
</section>
|
|
{% endblock %}
|