admin
3649bf4e22
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>
93 lines
2.4 KiB
TypeScript
93 lines
2.4 KiB
TypeScript
'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%' } }}
|
|
/>
|
|
);
|
|
}
|