Initiale Version: Stromverbrauch-Web-App (strom-next)
Next.js-App zur Visualisierung des Stromverbrauchs aus InfluxDB (Bucket strom, measurement vzlogger, Feld arbeit = kumulativer Zaehlerstand in Wh). - 4 Balken-Diagramme: 24h (stuendlich), Woche (stuendlich), 31 Tage (taeglich), Jahr (pro Monat, immer 12 Monate) - Verbrauch via difference des Zaehlerstands, zeitzonen-korrekt - 24h liest Rohdaten (aktuell), 7d/31d/365d den stuendlichen Downsampling-Rollup (arbeit_hourly) -> sub-sekunde - Gesamtverbrauch je Zeitraum unter dem Chart - Design/Layout angelehnt an Werte-Log "Verlauf" Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -0,0 +1,60 @@
|
||||
'use client';
|
||||
|
||||
import packageJson from '@/package.json';
|
||||
|
||||
interface AppLayoutProps {
|
||||
children: React.ReactNode;
|
||||
}
|
||||
|
||||
export default function AppLayout({ children }: AppLayoutProps) {
|
||||
const version = packageJson.version;
|
||||
const buildDate =
|
||||
process.env.NEXT_PUBLIC_BUILD_DATE ||
|
||||
new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
|
||||
|
||||
return (
|
||||
<div className="min-h-screen py-8 px-4">
|
||||
{/* Aeusserer Rahmen */}
|
||||
<div className="max-w-316 mx-auto border-2 border-black rounded-xl bg-gray-200 p-6">
|
||||
|
||||
{/* Titel */}
|
||||
<h1 className="text-4xl font-bold text-center mb-6 tracking-tight">Stromverbrauch</h1>
|
||||
|
||||
{/* Innerer Inhalt */}
|
||||
<div className="max-w-6xl mx-auto">
|
||||
|
||||
{/* Tab-Leiste (nur "Verlauf") */}
|
||||
<div className="flex">
|
||||
<span
|
||||
className="px-6 py-2 text-sm font-semibold border-t-2 border-l-2 border-r-2 rounded-tl-lg rounded-tr-lg mr-1"
|
||||
style={{
|
||||
backgroundColor: '#FFFFDD',
|
||||
color: '#000000',
|
||||
borderColor: '#000000',
|
||||
borderBottom: '2px solid #FFFFDD',
|
||||
marginBottom: '-2px',
|
||||
position: 'relative',
|
||||
zIndex: 10,
|
||||
}}
|
||||
>
|
||||
Verlauf
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Inhalts-Panel */}
|
||||
<main className="border-2 border-black rounded-b-lg rounded-tr-lg p-6 bg-[#FFFFDD]">
|
||||
{children}
|
||||
</main>
|
||||
|
||||
<footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4">
|
||||
<a href="mailto:rxf@gmx.de" className="hover:underline">
|
||||
mailto:rxf@gmx.de
|
||||
</a>
|
||||
<div>Version {version} - {buildDate}</div>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
'use client';
|
||||
|
||||
import Highcharts from 'highcharts';
|
||||
import HighchartsReact from 'highcharts-react-official';
|
||||
import type { Options } from 'highcharts';
|
||||
import { VerbrauchPoint, Every } from '@/types/strom';
|
||||
|
||||
interface BarChartProps {
|
||||
title: string;
|
||||
data: VerbrauchPoint[];
|
||||
every: Every;
|
||||
color: string;
|
||||
// Optionale feste Achsengrenzen (z.B. komplettes Jahr -> immer 12 Monate sichtbar)
|
||||
xMin?: number;
|
||||
xMax?: number;
|
||||
}
|
||||
|
||||
const HOUR_MS = 60 * 60 * 1000;
|
||||
const DAY_MS = 24 * HOUR_MS;
|
||||
|
||||
export default function BarChart({ title, data, every, color, xMin, xMax }: BarChartProps) {
|
||||
const isHourly = every === '1h';
|
||||
const isMonthly = every === '1mo';
|
||||
const tooltipDateFormat = isHourly ? '%d.%m.%Y %H:%M' : isMonthly ? '%B %Y' : '%d.%m.%Y';
|
||||
// Spaltenbreite: Stunde/Tag fix; Monat ~30 Tage breit
|
||||
const pointRange = isHourly ? HOUR_MS : isMonthly ? 30 * DAY_MS : DAY_MS;
|
||||
|
||||
const options: Options = {
|
||||
// Achse in lokaler Zeit rendern, damit Berliner Tages-/Monatsgrenzen
|
||||
// (z.B. 01.01. 00:00 = 31.12. 23:00 UTC) korrekt beschriftet werden.
|
||||
time: { timezone: 'Europe/Berlin' },
|
||||
chart: {
|
||||
type: 'column',
|
||||
backgroundColor: '#F4F4F5',
|
||||
style: { fontFamily: 'Arial, Helvetica, sans-serif' },
|
||||
height: 300,
|
||||
width: null,
|
||||
zooming: { type: 'x' },
|
||||
},
|
||||
title: { text: title, style: { fontWeight: 'bold', fontSize: '15px' } },
|
||||
xAxis: {
|
||||
type: 'datetime',
|
||||
min: xMin,
|
||||
max: xMax,
|
||||
dateTimeLabelFormats: {
|
||||
hour: '%H:%M',
|
||||
day: '%d.%m.',
|
||||
week: '%d.%m.',
|
||||
month: '%m.%Y',
|
||||
},
|
||||
title: { text: null },
|
||||
labels: { style: { fontSize: '11px' } },
|
||||
},
|
||||
yAxis: {
|
||||
title: { text: 'kWh' },
|
||||
min: 0,
|
||||
gridLineColor: '#ddd',
|
||||
},
|
||||
tooltip: {
|
||||
xDateFormat: tooltipDateFormat,
|
||||
pointFormat: '<b>{point.y:.3f} kWh</b>',
|
||||
valueDecimals: 3,
|
||||
},
|
||||
credits: { enabled: false },
|
||||
legend: { enabled: false },
|
||||
plotOptions: {
|
||||
column: {
|
||||
borderRadius: 0,
|
||||
groupPadding: 0.12,
|
||||
pointPadding: 0.05,
|
||||
maxPointWidth: 26,
|
||||
pointRange,
|
||||
},
|
||||
},
|
||||
series: [
|
||||
{
|
||||
type: 'column',
|
||||
name: 'Verbrauch',
|
||||
data,
|
||||
color,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return (
|
||||
<HighchartsReact
|
||||
highcharts={Highcharts}
|
||||
options={options}
|
||||
containerProps={{ style: { display: 'block', width: '100%' } }}
|
||||
/>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,181 @@
|
||||
'use client';
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import AppLayout from '@/components/AppLayout';
|
||||
import BarChart from '@/components/BarChart';
|
||||
import { VerbrauchPoint, Every, RangeKey } from '@/types/strom';
|
||||
|
||||
const COLOR_24H = '#2980b9';
|
||||
const COLOR_7D = '#27ae60';
|
||||
const COLOR_31D = '#e67e22';
|
||||
const COLOR_365D = '#8e44ad';
|
||||
|
||||
type SelectorKind = 'date24' | 'date' | 'month' | 'year';
|
||||
|
||||
function todayStr(): string {
|
||||
const d = new Date();
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
function thisMonthStr(): string {
|
||||
const d = new Date();
|
||||
return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
const CURRENT_YEAR = new Date().getFullYear();
|
||||
const YEARS = Array.from({ length: 11 }, (_, i) => CURRENT_YEAR - i);
|
||||
|
||||
interface ChartCardProps {
|
||||
range: RangeKey;
|
||||
every: Every;
|
||||
title: string;
|
||||
color: string;
|
||||
selector: SelectorKind;
|
||||
}
|
||||
|
||||
function ChartCard({ range, every, title, color, selector }: ChartCardProps) {
|
||||
const [value, setValue] = useState<string>(() => {
|
||||
switch (selector) {
|
||||
case 'date24':
|
||||
return ''; // leer = rollierend letzte 24h
|
||||
case 'date':
|
||||
return todayStr();
|
||||
case 'month':
|
||||
return thisMonthStr();
|
||||
case 'year':
|
||||
return String(CURRENT_YEAR);
|
||||
}
|
||||
});
|
||||
const [data, setData] = useState<VerbrauchPoint[]>([]);
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
|
||||
const fetchData = useCallback(
|
||||
async (sel: string) => {
|
||||
setIsLoading(true);
|
||||
setError(null);
|
||||
try {
|
||||
const params = new URLSearchParams({ range });
|
||||
if (selector === 'date24' && sel) params.set('date', sel);
|
||||
if (selector === 'date') params.set('date', sel);
|
||||
if (selector === 'month') params.set('month', sel);
|
||||
if (selector === 'year') params.set('year', sel);
|
||||
|
||||
const res = await fetch(`/api/verbrauch?${params.toString()}`, {
|
||||
cache: 'no-store',
|
||||
headers: { 'Cache-Control': 'no-cache' },
|
||||
});
|
||||
if (!res.ok) throw new Error(`HTTP ${res.status}`);
|
||||
const json = await res.json();
|
||||
if (json.success) {
|
||||
setData(json.data);
|
||||
} else {
|
||||
setError(json.error || 'Fehler beim Laden der Daten.');
|
||||
}
|
||||
} catch {
|
||||
setError('Netzwerkfehler.');
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
},
|
||||
[range, selector]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
fetchData(value);
|
||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||
}, []);
|
||||
|
||||
// Jahres-Chart: Achse immer ueber das komplette Kalenderjahr -> alle 12 Monate
|
||||
// sichtbar, Restmonate bleiben ohne Balken.
|
||||
let xMin: number | undefined;
|
||||
let xMax: number | undefined;
|
||||
if (range === '365d') {
|
||||
const y = Number(value);
|
||||
if (Number.isFinite(y)) {
|
||||
xMin = new Date(y, 0, 1).getTime();
|
||||
// bis Ende Dezember -> Januar des Folgejahres wird nicht mehr angezeigt
|
||||
xMax = new Date(y + 1, 0, 1).getTime() - 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Gesamtverbrauch des angezeigten Zeitraums
|
||||
const total = data.reduce((sum, [, v]) => sum + v, 0);
|
||||
const totalLabel = range === '365d' ? `Gesamtverbrauch ${value}` : 'Gesamtverbrauch';
|
||||
|
||||
return (
|
||||
<div className="block w-full bg-white border border-black rounded-lg shadow-md p-3 overflow-hidden mb-6">
|
||||
{/* Steuerung */}
|
||||
<div className="flex flex-wrap gap-4 items-end mb-3 px-1">
|
||||
<div className="flex flex-row items-center gap-2">
|
||||
<label className="font-semibold whitespace-nowrap text-sm">
|
||||
{selector === 'date24' && 'Tag (leer = letzte 24h):'}
|
||||
{selector === 'date' && 'Tag:'}
|
||||
{selector === 'month' && 'Monat:'}
|
||||
{selector === 'year' && 'Jahr:'}
|
||||
</label>
|
||||
|
||||
{selector === 'year' ? (
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
className="border border-gray-400 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500"
|
||||
>
|
||||
{YEARS.map((y) => (
|
||||
<option key={y} value={y}>
|
||||
{y}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
) : (
|
||||
<input
|
||||
type={selector === 'month' ? 'month' : 'date'}
|
||||
value={value}
|
||||
onChange={(e) => setValue(e.target.value)}
|
||||
className="border border-gray-400 rounded px-3 py-1.5 text-sm focus:outline-none focus:ring-2 focus:ring-gray-500"
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => fetchData(value)}
|
||||
disabled={isLoading}
|
||||
className="bg-[#85B7D7] hover:bg-[#6a9fc5] px-5 py-2 text-sm rounded-lg transition-colors shadow-md disabled:opacity-50"
|
||||
>
|
||||
{isLoading ? 'Lade...' : 'Anzeigen'}
|
||||
</button>
|
||||
|
||||
{error && <span className="text-red-600 text-sm">{error}</span>}
|
||||
{!isLoading && !error && data.length === 0 && (
|
||||
<span className="text-gray-500 text-sm">Keine Daten im gewählten Zeitraum.</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Diagramm */}
|
||||
{isLoading ? (
|
||||
<div className="text-center py-16 text-gray-500">Lade Daten…</div>
|
||||
) : (
|
||||
<>
|
||||
<BarChart title={title} data={data} every={every} color={color} xMin={xMin} xMax={xMax} />
|
||||
{data.length > 0 && (
|
||||
<div className="text-right text-sm font-semibold mt-2 px-2">
|
||||
{totalLabel}:{' '}
|
||||
{total.toLocaleString('de-DE', { minimumFractionDigits: 1, maximumFractionDigits: 1 })} kWh
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default function VerbrauchCharts() {
|
||||
return (
|
||||
<AppLayout>
|
||||
<ChartCard range="24h" every="1h" title="Letzte 24 Stunden" color={COLOR_24H} selector="date24" />
|
||||
<ChartCard range="7d" every="1h" title="Woche" color={COLOR_7D} selector="date" />
|
||||
<ChartCard range="31d" every="1d" title="Letzte 31 Tage (Monat)" color={COLOR_31D} selector="month" />
|
||||
<ChartCard range="365d" every="1mo" title="Jahr (pro Monat)" color={COLOR_365D} selector="year" />
|
||||
</AppLayout>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user