commit

web/src/components/TrendChart.jsx

@@ -1,4 +1,4 @@
-import { useMemo, useRef, useState } from "react";
+import { useMemo, useRef, useState } from "react";
 import { jsPDF } from "jspdf";
 import * as XLSX from "xlsx";
 import {
@@ -32,6 +32,31 @@ function buildRandomColor(index) {
   return `hsl(${hue} ${saturation}% ${lightness}%)`;
 }
 
+function getAnalogDomain(rows, visibleSeries) {
+  const values = [];
+  rows.forEach((row) => {
+    visibleSeries.filter((item) => item.kind !== "digital").forEach((item) => {
+      const value = row[item.key];
+      if (Number.isFinite(value)) {
+        values.push(value);
+      }
+    });
+  });
+
+  if (!values.length) {
+    return [0, 1];
+  }
+
+  const min = Math.min(...values);
+  const max = Math.max(...values);
+  if (min === max) {
+    return [min - 1, max + 1];
+  }
+
+  const padding = (max - min) * 0.08;
+  return [min - padding, max + padding];
+}
+
 export default function TrendChart({
   result,
   title = "Trendansicht",
@@ -66,6 +91,8 @@ export default function TrendChart({
   })), [result]);
 
   const visibleSeries = selectedKeys.length ? series.filter((item) => selectedKeys.includes(item.key)) : series;
+  const analogSeries = visibleSeries.filter((item) => item.kind !== "digital");
+  const digitalSeries = visibleSeries.filter((item) => item.kind === "digital");
 
   const baseXDomain = useMemo(() => {
     if (!rows.length) {
@@ -75,29 +102,11 @@ export default function TrendChart({
   }, [rows]);
 
   const baseYDomain = useMemo(() => {
-    const values = [];
-    rows.forEach((row) => {
-      visibleSeries.forEach((item) => {
-        const value = row[item.key];
-        if (Number.isFinite(value)) {
-          values.push(value);
-        }
-      });
-    });
-
-    if (!values.length) {
-      return [0, 1];
+    if (analogSeries.length === 0 && digitalSeries.length > 0) {
+      return [0, 2];
     }
-
-    const min = Math.min(...values);
-    const max = Math.max(...values);
-    if (min === max) {
-      return [min - 1, max + 1];
-    }
-
-    const padding = (max - min) * 0.08;
-    return [min - padding, max + padding];
-  }, [rows, visibleSeries]);
+    return getAnalogDomain(rows, visibleSeries);
+  }, [analogSeries.length, digitalSeries.length, rows, visibleSeries]);
 
   const xDomain = zoomDomain?.x || baseXDomain;
   const yDomain = zoomDomain?.y || baseYDomain;
@@ -375,7 +384,18 @@ export default function TrendChart({
                 minTickGap={28}
                 stroke="var(--muted)"
               />
-              <YAxis stroke="var(--muted)" domain={yDomain} width={52} />
+              {analogSeries.length ? <YAxis yAxisId="analog" stroke="var(--muted)" domain={yDomain} width={52} /> : null}
+              {digitalSeries.length ? (
+                <YAxis
+                  yAxisId="digital"
+                  orientation="right"
+                  domain={[0, 2]}
+                  ticks={[0, 1]}
+                  width={46}
+                  stroke="var(--muted)"
+                  allowDecimals={false}
+                />
+              ) : null}
               <Tooltip
                 labelFormatter={(value) => new Date(value).toLocaleString("de-DE")}
                 contentStyle={{
@@ -401,7 +421,8 @@ export default function TrendChart({
                 return (
                   <Line
                     key={entry.key}
-                    type="monotone"
+                    yAxisId={entry.kind === "digital" ? "digital" : "analog"}
+                    type={entry.kind === "digital" ? "stepAfter" : "monotone"}
                     dataKey={entry.key}
                     dot={false}
                     strokeWidth={selectedKeys.includes(entry.key) ? 2.35 : 1.8}