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>

components/BarChart.tsx

@@ -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%' } }}
+    />
+  );
+}