`;
}
async function _getLetzteMonateData() {
- // Letzten 6 Monate aus den Einträgen berechnen
if (!_entries.length) {
_entries = await API.get('/expenses?limit=500');
}
const monatMap = {};
_entries.forEach(e => {
- const m = e.datum.substring(0, 7); // YYYY-MM
+ const m = e.datum.substring(0, 7);
monatMap[m] = (monatMap[m] || 0) + e.betrag;
});
return Object.entries(monatMap)
@@ -161,6 +161,21 @@ window.Page_expenses = (() => {
.reverse();
}
+ function _trendHtml(data) {
+ // Vergleich: aktueller Monat vs. Vormonat
+ if (data.length < 2) return '';
+ const aktuell = data[data.length - 1][1];
+ const vormonat = data[data.length - 2][1];
+ if (!vormonat) return '';
+ const diff = aktuell - vormonat;
+ const pct = Math.round(Math.abs(diff / vormonat) * 100);
+ if (pct === 0) return '';
+ const pfeil = diff > 0
+ ? `
`;
+ return pfeil;
+ }
+
function _vergleichHtml(data) {
if (!data.length) return '';
const max = Math.max(...data.map(d => d[1]), 1);
@@ -227,22 +242,28 @@ window.Page_expenses = (() => {
? `
-
+
${UI.icon(k.icon)}
+ ${datum}
${k.label}
${dogBadge}
- ${datum}
${notiz}
-
${_fmt(e.betrag)}
+
+
${_fmt(e.betrag)}
+
+
`;
}).join('');
@@ -258,13 +279,32 @@ window.Page_expenses = (() => {
el.innerHTML = `
${html}
`;
+ // Klick auf Zeile → Bearbeiten (nur wenn nicht Löschen-Button)
el.querySelectorAll('.exp-entry').forEach(row => {
- row.addEventListener('click', () => {
+ row.addEventListener('click', (ev) => {
+ if (ev.target.closest('.exp-entry-del')) return;
const id = parseInt(row.dataset.id);
const entry = _entries.find(e => e.id === id);
if (entry) _showForm(entry);
});
});
+
+ // Löschen-Buttons
+ el.querySelectorAll('.exp-entry-del').forEach(btn => {
+ btn.addEventListener('click', async (ev) => {
+ ev.stopPropagation();
+ const id = parseInt(btn.dataset.del);
+ if (!window.confirm('Diesen Eintrag wirklich löschen?')) return;
+ try {
+ await API.del(`/expenses/${id}`);
+ UI.toast.success('Ausgabe gelöscht.');
+ _invalidateCache();
+ await _renderTab();
+ } catch (e) {
+ UI.toast.error(e.message || 'Fehler beim Löschen.');
+ }
+ });
+ });
}
// ----------------------------------------------------------
@@ -281,7 +321,7 @@ window.Page_expenses = (() => {
const s = _summary;
const gesamtJahr = s.gesamt_jahr || 1;
- // Jahres-Aufteilung nach Kategorien
+ // Jahres-Aufteilung nach Kategorien (als Balken-Reihen)
const katBalken = KATEGORIEN
.filter(k => (s.jahr[k.id] || 0) > 0)
.sort((a, b) => (s.jahr[b.id] || 0) - (s.jahr[a.id] || 0))
@@ -291,7 +331,7 @@ window.Page_expenses = (() => {
return `
- ${UI.icon(k.icon)}
+ ${UI.icon(k.icon)}
${k.label}
@@ -302,38 +342,71 @@ window.Page_expenses = (() => {
`;
}).join('');
- // Monats-Balken (aktuelles Jahr, Monat für Monat)
+ // Monats-Balken mit gestapelten Top-2-Kategorien
const heute = new Date();
const jahrStr = heute.getFullYear().toString();
- const monatMap = {};
+
+ // Pro Monat: Summe je Kategorie berechnen
+ const monatKatMap = {}; // { monat: { katId: summe } }
_entries
.filter(e => e.datum.startsWith(jahrStr))
.forEach(e => {
const m = parseInt(e.datum.split('-')[1]);
- monatMap[m] = (monatMap[m] || 0) + e.betrag;
+ if (!monatKatMap[m]) monatKatMap[m] = {};
+ monatKatMap[m][e.kategorie] = (monatKatMap[m][e.kategorie] || 0) + e.betrag;
});
- const maxMonat = Math.max(...Object.values(monatMap), 1);
+ const monatTotalMap = {};
+ Object.entries(monatKatMap).forEach(([m, katObj]) => {
+ monatTotalMap[m] = Object.values(katObj).reduce((a, b) => a + b, 0);
+ });
+
+ const maxMonat = Math.max(...Object.values(monatTotalMap), 1);
const MONATE = ['Jan','Feb','Mär','Apr','Mai','Jun','Jul','Aug','Sep','Okt','Nov','Dez'];
const monatsBalken = MONATE.map((label, i) => {
- const val = monatMap[i + 1] || 0;
- const pct = Math.round((val / maxMonat) * 100);
- const isAktiv = (i + 1) === (heute.getMonth() + 1);
+ const mi = i + 1;
+ const total = monatTotalMap[mi] || 0;
+ const pct = Math.round((total / maxMonat) * 100);
+ const isAktiv = mi === (heute.getMonth() + 1);
+
+ // Top-2-Kategorien für gestapelten Balken
+ let stackHtml = '';
+ if (total > 0 && monatKatMap[mi]) {
+ const sorted = Object.entries(monatKatMap[mi])
+ .sort((a, b) => b[1] - a[1])
+ .slice(0, 2);
+ // Gesamthöhe = pct%, verteile anteilig auf Top-2
+ let rest = pct;
+ const segments = sorted.map(([katId, val], idx) => {
+ const k = _kat(katId);
+ const segPct = idx < sorted.length - 1
+ ? Math.round((val / total) * pct)
+ : rest;
+ rest -= segPct;
+ return `
`;
+ });
+ stackHtml = segments.join('');
+ } else {
+ stackHtml = `
`;
+ }
+
return `
-
-
+
+ ${stackHtml}
${label}
`;
}).join('');
+ // Donut-Übersicht (CSS-gradient)
+ const donutHtml = _donutHtml(s, gesamtJahr);
+
el.innerHTML = `
-
-
Gesamt dieses Jahr
-
${_fmt(s.gesamt_jahr)}
+
+
Gesamt dieses Jahr
+
${_fmt(s.gesamt_jahr)}
@@ -341,6 +414,8 @@ window.Page_expenses = (() => {
${monatsBalken}
+ ${donutHtml}
+
${UI.icon('chart-pie')} Aufteilung nach Kategorie
@@ -351,6 +426,45 @@ window.Page_expenses = (() => {
`;
}
+ // Donut via CSS conic-gradient
+ function _donutHtml(s, gesamt) {
+ const aktiveKat = KATEGORIEN.filter(k => (s.jahr[k.id] || 0) > 0);
+ if (!aktiveKat.length) return '';
+
+ // Stops für conic-gradient berechnen
+ let offset = 0;
+ const stops = [];
+ aktiveKat.forEach(k => {
+ const pct = (s.jahr[k.id] || 0) / gesamt * 100;
+ stops.push(`${k.color} ${offset.toFixed(1)}% ${(offset + pct).toFixed(1)}%`);
+ offset += pct;
+ });
+ const gradient = `conic-gradient(${stops.join(', ')})`;
+
+ const legendeItems = aktiveKat
+ .sort((a, b) => (s.jahr[b.id] || 0) - (s.jahr[a.id] || 0))
+ .map(k => {
+ const pct = Math.round((s.jahr[k.id] || 0) / gesamt * 100);
+ return `
+
+
+ ${k.label}
+ ${pct}%
+
`;
+ }).join('');
+
+ return `
+
+
${UI.icon('chart-pie')} Kategorien-Verteilung
+
+
`;
+ }
+
// ----------------------------------------------------------
// FORMULAR — Neu / Bearbeiten
// ----------------------------------------------------------