feat: Statistik komplett neu gestaltet — kuppelunabhängig, feste Spalten
- Statistik gilt jetzt für alle Kuppeln gemeinsam (kein Kuppel-Filter mehr) - Neue Tabellenstruktur: Besucher (RF/SF/SonF/PrF/ToT/Gesamt) | Anzahl (Führ./Beob./TD/Sonst./BEOS/ToT/Gesamt) - Anzahl zählt Einträge (COUNT(*)) statt distinkte Tage - Zusammenfassungskacheln auf 2 reduziert (Besucher + Führungen gesamt) - Fix: Besucher-State wird zurückgesetzt wenn ArtFuehrung auf TD/BEOS wechselt Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
+2
-2
@@ -174,7 +174,7 @@ export default function MainClient({ kuerzel, beoId, beoName, role }: Props) {
|
||||
{activeTab === 'statistik' && (
|
||||
<div className="border-2 border-gray-400 rounded-xl bg-white p-3 print:border-0 print:rounded-none print:p-0">
|
||||
<div className="flex justify-between items-center mb-2 print:hidden">
|
||||
<span className="text-sm font-semibold text-gray-600">Statistik {activeKuppel}-Kuppel</span>
|
||||
<span className="text-sm font-semibold text-gray-600">Statistik (alle Kuppeln)</span>
|
||||
<button
|
||||
onClick={() => window.print()}
|
||||
className="text-sm px-3 py-1.5 bg-gray-200 hover:bg-gray-300 text-gray-700 rounded-lg"
|
||||
@@ -182,7 +182,7 @@ export default function MainClient({ kuerzel, beoId, beoName, role }: Props) {
|
||||
🖨 Drucken
|
||||
</button>
|
||||
</div>
|
||||
<Statistik kuppel={activeKuppel} />
|
||||
<Statistik />
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
+43
-36
@@ -7,61 +7,68 @@ export async function GET(request: NextRequest) {
|
||||
if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
|
||||
|
||||
const { searchParams } = new URL(request.url);
|
||||
const kuppel = searchParams.get('kuppel') || 'West';
|
||||
const year = parseInt(searchParams.get('year') || String(new Date().getFullYear()), 10);
|
||||
|
||||
try {
|
||||
// 1) Monatliche Besucherzahlen nach ArtFuehrung
|
||||
const monthlyRows = await query(
|
||||
`SELECT
|
||||
MONTH(Beginn) AS monat,
|
||||
ArtFuehrung,
|
||||
SUM(Besucher) AS besucher,
|
||||
COUNT(*) AS anzahl
|
||||
FROM logbuch
|
||||
WHERE Kuppel = ? AND YEAR(Beginn) = ?
|
||||
GROUP BY MONTH(Beginn), ArtFuehrung
|
||||
ORDER BY monat, ArtFuehrung`,
|
||||
[kuppel, year]
|
||||
) as { monat: number; ArtFuehrung: string; besucher: number; anzahl: number }[];
|
||||
'SELECT' +
|
||||
' MONTH(Beginn) AS monat,' +
|
||||
" COUNT(CASE WHEN ArtFuehrung IN ('RF','SF','SonF','PrF') THEN 1 END) AS tageFuehrungen," +
|
||||
" COUNT(CASE WHEN ArtFuehrung = 'Beob' THEN 1 END) AS tageBeob," +
|
||||
" COUNT(CASE WHEN ArtFuehrung = 'TD' THEN 1 END) AS tageTD," +
|
||||
" COUNT(CASE WHEN ArtFuehrung = 'Sonst' THEN 1 END) AS tageSonst," +
|
||||
" COUNT(CASE WHEN ArtFuehrung = 'BEOS' THEN 1 END) AS tageBEOS," +
|
||||
" COUNT(CASE WHEN ArtFuehrung = 'ToT' THEN 1 END) AS tagesToT," +
|
||||
" COUNT(CASE WHEN ArtFuehrung IN ('RF','SF','SonF','PrF','Beob','TD','Sonst','BEOS','ToT') THEN 1 END) AS tageGesamt," +
|
||||
" SUM(CASE WHEN ArtFuehrung = 'RF' THEN Besucher ELSE 0 END) AS besucherRF," +
|
||||
" SUM(CASE WHEN ArtFuehrung = 'SF' THEN Besucher ELSE 0 END) AS besucherSF," +
|
||||
" SUM(CASE WHEN ArtFuehrung = 'SonF' THEN Besucher ELSE 0 END) AS besucherSonF," +
|
||||
" SUM(CASE WHEN ArtFuehrung = 'PrF' THEN Besucher ELSE 0 END) AS besucherPrF," +
|
||||
" SUM(CASE WHEN ArtFuehrung = 'ToT' THEN Besucher ELSE 0 END) AS besucherToT," +
|
||||
" SUM(CASE WHEN ArtFuehrung IN ('RF','SF','SonF','PrF','ToT') THEN Besucher ELSE 0 END) AS besucherGesamt" +
|
||||
' FROM logbuch' +
|
||||
' WHERE YEAR(Beginn) = ?' +
|
||||
' GROUP BY MONTH(Beginn)' +
|
||||
' ORDER BY monat',
|
||||
[year]
|
||||
) as {
|
||||
monat: number;
|
||||
tageFuehrungen: number; tageBeob: number; tageTD: number; tageSonst: number; tageBEOS: number; tagesToT: number; tageGesamt: number;
|
||||
besucherRF: number; besucherSF: number; besucherSonF: number; besucherPrF: number;
|
||||
besucherToT: number; besucherGesamt: number;
|
||||
}[];
|
||||
|
||||
// 2) Kumulierte Besucher im Jahr
|
||||
const cumulativeRows = await query(
|
||||
`SELECT SUM(Besucher) AS total FROM logbuch WHERE Kuppel = ? AND YEAR(Beginn) = ?`,
|
||||
[kuppel, year]
|
||||
) as { total: number | null }[];
|
||||
|
||||
// 3) Anzahl Führungstage (distinct Datum)
|
||||
const tageRows = await query(
|
||||
`SELECT COUNT(DISTINCT DATE(Beginn)) AS tage FROM logbuch WHERE Kuppel = ? AND YEAR(Beginn) = ?`,
|
||||
[kuppel, year]
|
||||
) as { tage: number }[];
|
||||
|
||||
// 4) Kumulierte Besucher über alle Kuppeln
|
||||
const allCumulativeRows = await query(
|
||||
`SELECT SUM(Besucher) AS total FROM logbuch WHERE YEAR(Beginn) = ?`,
|
||||
"SELECT SUM(CASE WHEN ArtFuehrung IN ('RF','SF','SonF','PrF','ToT') THEN Besucher ELSE 0 END) AS total" +
|
||||
' FROM logbuch WHERE YEAR(Beginn) = ?',
|
||||
[year]
|
||||
) as { total: number | null }[];
|
||||
|
||||
// 5) Führungstage über alle Kuppeln
|
||||
const allTageRows = await query(
|
||||
`SELECT COUNT(DISTINCT DATE(Beginn)) AS tage FROM logbuch WHERE YEAR(Beginn) = ?`,
|
||||
const tageRows = await query(
|
||||
"SELECT COUNT(*) AS tage FROM logbuch WHERE YEAR(Beginn) = ? AND ArtFuehrung IN ('RF','SF','SonF','PrF','Beob','TD','Sonst','BEOS','ToT')",
|
||||
[year]
|
||||
) as { tage: number }[];
|
||||
|
||||
return NextResponse.json({
|
||||
monthly: monthlyRows.map((r) => ({
|
||||
monat: Number(r.monat),
|
||||
ArtFuehrung: r.ArtFuehrung,
|
||||
besucher: Number(r.besucher),
|
||||
anzahl: Number(r.anzahl),
|
||||
tageFuehrungen: Number(r.tageFuehrungen),
|
||||
tageBeob: Number(r.tageBeob),
|
||||
tageTD: Number(r.tageTD),
|
||||
tageSonst: Number(r.tageSonst),
|
||||
tageBEOS: Number(r.tageBEOS),
|
||||
tagesToT: Number(r.tagesToT),
|
||||
tageGesamt: Number(r.tageGesamt),
|
||||
besucherRF: Number(r.besucherRF),
|
||||
besucherSF: Number(r.besucherSF),
|
||||
besucherSonF: Number(r.besucherSonF),
|
||||
besucherPrF: Number(r.besucherPrF),
|
||||
besucherToT: Number(r.besucherToT),
|
||||
besucherGesamt: Number(r.besucherGesamt),
|
||||
})),
|
||||
cumulative: Number(cumulativeRows[0]?.total ?? 0),
|
||||
tage: Number(tageRows[0]?.tage ?? 0),
|
||||
allCumulative: Number(allCumulativeRows[0]?.total ?? 0),
|
||||
allTage: Number(allTageRows[0]?.tage ?? 0),
|
||||
year,
|
||||
kuppel,
|
||||
});
|
||||
} catch (error) {
|
||||
console.error('GET /api/statistik:', error);
|
||||
|
||||
@@ -134,12 +134,13 @@ export default function LogbuchForm({ kuppel, currentUserBeo, editEntry, onSaved
|
||||
}
|
||||
}, [editEntry]);
|
||||
|
||||
// Objekte-Vorauswahl je nach Art der Führung
|
||||
// Objekte-Vorauswahl je nach Art der Führung; Besucher zurücksetzen wenn nicht relevant
|
||||
useEffect(() => {
|
||||
if (artFuehrung === SONNE_ART) {
|
||||
setObjekte([{ ID: null, Name: 'Sonne' }]);
|
||||
} else if (NO_OBJEKTE_ARTEN.includes(artFuehrung)) {
|
||||
setObjekte([]);
|
||||
setBesucher('');
|
||||
}
|
||||
}, [artFuehrung]);
|
||||
|
||||
|
||||
+94
-101
@@ -1,24 +1,29 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useMemo, useState } from 'react';
|
||||
import type { ArtFuehrung, Kuppel } from '@/types/logbuch';
|
||||
import { artLabel } from '@/types/logbuch';
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
interface MonthlyRow {
|
||||
interface MonthRow {
|
||||
monat: number;
|
||||
ArtFuehrung: string;
|
||||
besucher: number;
|
||||
anzahl: number;
|
||||
tageFuehrungen: number;
|
||||
tageBeob: number;
|
||||
tageTD: number;
|
||||
tageSonst: number;
|
||||
tageBEOS: number;
|
||||
tagesToT: number;
|
||||
tageGesamt: number;
|
||||
besucherRF: number;
|
||||
besucherSF: number;
|
||||
besucherSonF: number;
|
||||
besucherPrF: number;
|
||||
besucherToT: number;
|
||||
besucherGesamt: number;
|
||||
}
|
||||
|
||||
interface StatsData {
|
||||
monthly: MonthlyRow[];
|
||||
monthly: MonthRow[];
|
||||
cumulative: number;
|
||||
tage: number;
|
||||
allCumulative: number;
|
||||
allTage: number;
|
||||
year: number;
|
||||
kuppel: Kuppel;
|
||||
}
|
||||
|
||||
const MONATE = [
|
||||
@@ -26,73 +31,44 @@ const MONATE = [
|
||||
'Juli','August','September','Oktober','November','Dezember',
|
||||
];
|
||||
|
||||
interface Props {
|
||||
kuppel: Kuppel;
|
||||
function n(v: number) {
|
||||
return v > 0 ? v.toLocaleString('de-DE') : '';
|
||||
}
|
||||
|
||||
export default function Statistik({ kuppel }: Props) {
|
||||
export default function Statistik() {
|
||||
const [year, setYear] = useState(new Date().getFullYear());
|
||||
const [data, setData] = useState<StatsData | null>(null);
|
||||
const [fetchError, setFetchError] = useState<{ year: number; kuppel: Kuppel } | null>(null);
|
||||
const [fetchError, setFetchError] = useState<number | null>(null);
|
||||
|
||||
const error = fetchError?.year === year && fetchError?.kuppel === kuppel
|
||||
? 'Fehler beim Laden der Statistik.'
|
||||
: '';
|
||||
const loading = !error && (!data || data.year !== year || data.kuppel !== kuppel);
|
||||
const error = fetchError === year ? 'Fehler beim Laden der Statistik.' : '';
|
||||
const loading = !error && (!data || data.year !== year);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
fetch(`/api/statistik?kuppel=${encodeURIComponent(kuppel)}&year=${year}`)
|
||||
fetch(`/api/statistik?year=${year}`)
|
||||
.then((r) => { if (!r.ok) throw new Error(); return r.json(); })
|
||||
.then((d: StatsData) => { if (!cancelled) { setData(d); setFetchError(null); } })
|
||||
.catch(() => { if (!cancelled) setFetchError({ year, kuppel }); });
|
||||
.catch(() => { if (!cancelled) setFetchError(year); });
|
||||
return () => { cancelled = true; };
|
||||
}, [kuppel, year]);
|
||||
|
||||
const { arten, matrix, monatTotal, artTotal, grandTotal, anzahlTotal } = useMemo(() => {
|
||||
if (!data) {
|
||||
return { arten: [] as string[], matrix: [] as (number | null)[][], monatTotal: [] as number[], artTotal: [] as number[], grandTotal: 0, anzahlTotal: [] as number[] };
|
||||
}
|
||||
|
||||
const artenSet = new Set<string>();
|
||||
data.monthly.forEach((r) => artenSet.add(r.ArtFuehrung));
|
||||
const arten = Array.from(artenSet).sort();
|
||||
|
||||
const matrix: (number | null)[][] = [];
|
||||
const monatTotal: number[] = [];
|
||||
const anzahlTotal: number[] = [];
|
||||
const artTotal: number[] = new Array(arten.length).fill(0);
|
||||
let grandTotal = 0;
|
||||
|
||||
for (let m = 1; m <= 12; m++) {
|
||||
const row: (number | null)[] = [];
|
||||
let mSum = 0;
|
||||
let aSum = 0;
|
||||
arten.forEach((art, idx) => {
|
||||
const found = data.monthly.find((r) => r.monat === m && r.ArtFuehrung === art);
|
||||
const val = found ? found.besucher : null;
|
||||
row.push(val);
|
||||
if (val !== null) {
|
||||
mSum += val;
|
||||
artTotal[idx] += val;
|
||||
aSum += found!.anzahl;
|
||||
}
|
||||
});
|
||||
matrix.push(row);
|
||||
monatTotal.push(mSum);
|
||||
anzahlTotal.push(aSum);
|
||||
grandTotal += mSum;
|
||||
}
|
||||
|
||||
return { arten, matrix, monatTotal, artTotal, grandTotal, anzahlTotal };
|
||||
}, [data]);
|
||||
}, [year]);
|
||||
|
||||
if (loading) return <div className="text-gray-500 text-sm py-4">Lade Statistik...</div>;
|
||||
if (error) return <div className="text-red-600 text-sm py-4">{error}</div>;
|
||||
|
||||
const headCls = 'px-3 py-2 border border-gray-300 text-xs font-semibold bg-gray-100 whitespace-nowrap';
|
||||
const cellCls = 'px-3 py-2 border border-gray-200 text-sm text-right tabular-nums';
|
||||
const labelCls = 'px-3 py-2 border border-gray-200 text-sm text-left whitespace-nowrap';
|
||||
const rows = data!.monthly;
|
||||
|
||||
function col(key: keyof MonthRow): number {
|
||||
return rows.reduce((s, r) => s + (r[key] as number), 0);
|
||||
}
|
||||
|
||||
const thTop = 'px-3 py-2 border border-gray-300 text-xs font-semibold bg-gray-100 text-center';
|
||||
const thSub = 'px-3 py-2 border border-gray-300 text-xs font-semibold bg-gray-50 whitespace-nowrap';
|
||||
const thDiv = 'px-3 py-2 border border-gray-300 border-l-4 border-l-gray-400 text-xs font-semibold bg-gray-50 whitespace-nowrap';
|
||||
const td = 'px-3 py-2 border border-gray-200 text-sm text-right tabular-nums';
|
||||
const tdDiv = 'px-3 py-2 border border-gray-200 border-l-4 border-l-gray-400 text-sm text-right tabular-nums';
|
||||
const tdL = 'px-3 py-2 border border-gray-200 text-sm text-left whitespace-nowrap';
|
||||
const tdSum = 'px-3 py-2 border border-gray-200 text-sm text-right tabular-nums font-semibold bg-gray-50';
|
||||
const tdSumDiv = 'px-3 py-2 border border-gray-200 border-l-4 border-l-gray-400 text-sm text-right tabular-nums font-semibold bg-gray-50';
|
||||
|
||||
return (
|
||||
<div className="space-y-4">
|
||||
@@ -112,63 +88,80 @@ export default function Statistik({ kuppel }: Props) {
|
||||
<table className="w-full border-collapse text-sm">
|
||||
<thead>
|
||||
<tr>
|
||||
<th className={headCls}>Monat</th>
|
||||
<th className={headCls}>Führungen</th>
|
||||
{arten.map((art) => (
|
||||
<th key={art} className={headCls}>{artLabel(art as ArtFuehrung)}</th>
|
||||
))}
|
||||
<th className={headCls}>Gesamt</th>
|
||||
<th className={thTop} rowSpan={2}>Monat</th>
|
||||
<th className={thTop} colSpan={6}>Besucher</th>
|
||||
<th className={`${thTop} border-l-4 border-l-gray-400`} colSpan={7}>Anzahl</th>
|
||||
</tr>
|
||||
<tr>
|
||||
<th className={thSub}>RF</th>
|
||||
<th className={thSub}>SF</th>
|
||||
<th className={thSub}>SonF</th>
|
||||
<th className={thSub}>PrF</th>
|
||||
<th className={thSub}>ToT</th>
|
||||
<th className={thSub}>Gesamt</th>
|
||||
<th className={thDiv}>Führ.</th>
|
||||
<th className={thSub}>Beob.</th>
|
||||
<th className={thSub}>TD</th>
|
||||
<th className={thSub}>Sonst.</th>
|
||||
<th className={thSub}>BEOS</th>
|
||||
<th className={thSub}>ToT</th>
|
||||
<th className={thSub}>Gesamt</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{MONATE.map((name, idx) => {
|
||||
const mSum = monatTotal[idx];
|
||||
const aSum = anzahlTotal[idx];
|
||||
const m = idx + 1;
|
||||
const r = rows.find((row) => row.monat === m);
|
||||
const hasData = r && r.tageGesamt > 0;
|
||||
const cls = hasData ? '' : 'text-gray-400';
|
||||
return (
|
||||
<tr key={name} className={mSum > 0 ? '' : 'text-gray-400'}>
|
||||
<td className={labelCls}>{name}</td>
|
||||
<td className={cellCls}>{aSum > 0 ? aSum : ''}</td>
|
||||
{arten.map((_, aIdx) => {
|
||||
const val = matrix[idx][aIdx];
|
||||
return (
|
||||
<td key={aIdx} className={cellCls}>
|
||||
{val !== null && val > 0 ? val.toLocaleString('de-DE') : ''}
|
||||
</td>
|
||||
);
|
||||
})}
|
||||
<td className={`${cellCls} font-semibold`}>{mSum > 0 ? mSum.toLocaleString('de-DE') : ''}</td>
|
||||
<tr key={name} className={cls}>
|
||||
<td className={tdL}>{name}</td>
|
||||
<td className={td}>{r ? n(r.besucherRF) : ''}</td>
|
||||
<td className={td}>{r ? n(r.besucherSF) : ''}</td>
|
||||
<td className={td}>{r ? n(r.besucherSonF) : ''}</td>
|
||||
<td className={td}>{r ? n(r.besucherPrF) : ''}</td>
|
||||
<td className={td}>{r ? n(r.besucherToT) : ''}</td>
|
||||
<td className={`${td} font-semibold`}>{r ? n(r.besucherGesamt) : ''}</td>
|
||||
<td className={`${tdDiv} font-semibold`}>{r ? n(r.tageFuehrungen) : ''}</td>
|
||||
<td className={td}>{r ? n(r.tageBeob) : ''}</td>
|
||||
<td className={td}>{r ? n(r.tageTD) : ''}</td>
|
||||
<td className={td}>{r ? n(r.tageSonst) : ''}</td>
|
||||
<td className={td}>{r ? n(r.tageBEOS) : ''}</td>
|
||||
<td className={td}>{r ? n(r.tagesToT) : ''}</td>
|
||||
<td className={`${td} font-semibold`}>{r ? n(r.tageGesamt) : ''}</td>
|
||||
</tr>
|
||||
);
|
||||
})}
|
||||
<tr className="bg-gray-50 font-semibold">
|
||||
<td className={labelCls}>Summe</td>
|
||||
<td className={cellCls}>{anzahlTotal.reduce((s, v) => s + v, 0) > 0 ? anzahlTotal.reduce((s, v) => s + v, 0).toLocaleString('de-DE') : ''}</td>
|
||||
{artTotal.map((t, i) => (
|
||||
<td key={i} className={cellCls}>{t > 0 ? t.toLocaleString('de-DE') : ''}</td>
|
||||
))}
|
||||
<td className={cellCls}>{grandTotal > 0 ? grandTotal.toLocaleString('de-DE') : ''}</td>
|
||||
<tr>
|
||||
<td className={tdL + ' font-semibold'}>Summe</td>
|
||||
<td className={tdSum}>{n(col('besucherRF'))}</td>
|
||||
<td className={tdSum}>{n(col('besucherSF'))}</td>
|
||||
<td className={tdSum}>{n(col('besucherSonF'))}</td>
|
||||
<td className={tdSum}>{n(col('besucherPrF'))}</td>
|
||||
<td className={tdSum}>{n(col('besucherToT'))}</td>
|
||||
<td className={tdSum}>{n(col('besucherGesamt'))}</td>
|
||||
<td className={tdSumDiv}>{n(col('tageFuehrungen'))}</td>
|
||||
<td className={tdSum}>{n(col('tageBeob'))}</td>
|
||||
<td className={tdSum}>{n(col('tageTD'))}</td>
|
||||
<td className={tdSum}>{n(col('tageSonst'))}</td>
|
||||
<td className={tdSum}>{n(col('tageBEOS'))}</td>
|
||||
<td className={tdSum}>{n(col('tagesToT'))}</td>
|
||||
<td className={tdSum}>{n(col('tageGesamt'))}</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 w-full">
|
||||
<div className="grid grid-cols-2 gap-4 w-full max-w-sm">
|
||||
<div className="border-2 border-gray-300 rounded-xl p-4 bg-white">
|
||||
<div className="text-xs text-gray-500 mb-1">Kumulierte Besucher {year} ({data?.kuppel})</div>
|
||||
<div className="text-xs text-gray-500 mb-1">Besucher {year}</div>
|
||||
<div className="text-2xl font-bold">{data?.cumulative.toLocaleString('de-DE') ?? 0}</div>
|
||||
</div>
|
||||
<div className="border-2 border-gray-300 rounded-xl p-4 bg-white">
|
||||
<div className="text-xs text-gray-500 mb-1">Führungstage {year} ({data?.kuppel})</div>
|
||||
<div className="text-xs text-gray-500 mb-1">Führungen {year}</div>
|
||||
<div className="text-2xl font-bold">{data?.tage ?? 0}</div>
|
||||
</div>
|
||||
<div className="border-2 border-green-600 rounded-xl p-4 bg-green-50">
|
||||
<div className="text-xs text-green-700 mb-1">Kumulierte Besucher {year} (Sternwarte gesamt)</div>
|
||||
<div className="text-2xl font-bold text-green-800">{data?.allCumulative.toLocaleString('de-DE') ?? 0}</div>
|
||||
</div>
|
||||
<div className="border-2 border-green-600 rounded-xl p-4 bg-green-50">
|
||||
<div className="text-xs text-green-700 mb-1">Führungstage {year} (Sternwarte gesamt)</div>
|
||||
<div className="text-2xl font-bold text-green-800">{data?.allTage ?? 0}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user