Ismail/CPLv4.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(analogInputsChart): dynamische Linien je Zeitraum (m/i/a/g)

Browse Source 
- Chart zeigt für 'Alle Messwerte' (DIA0) Messwert (m), Minimum (i), Maximum (a)
- Für 'Stündlich' und 'Täglich' (DIA1/DIA2) werden Minimum (i), Maximum (a), Durchschnitt (g) angezeigt
- Farben und Legende entsprechend
This commit is contained in:
ISA
2025-07-21 10:32:01 +02:00
parent b1ff138774
commit f876bef7a3
6 changed files with 104 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

123
components/main/analogInputs/AnalogInputsChart.tsx
View File

@@ -42,9 +42,10 @@ ChartJS.register(
type AnalogInputHistoryPoint = {
t: string;
m: number;
m?: number;
i?: number;
a?: number;
g?: number;
};
export default function AnalogInputsChart() {
@@ -177,47 +178,85 @@ export default function AnalogInputsChart() {
const chartData = {
datasets:
filteredPoints.length > 0
? [
{
label: selectedAnalogInput?.label
? `Messwert (m) ${selectedAnalogInput.label}`
: "Messwert (m)",
data: filteredData.map((point) => ({
x: new Date(point.t),
y: point.m,
})),
fill: false,
borderColor: getColor("littwin-blue"),
backgroundColor: "rgba(59,130,246,0.3)",
borderWidth: 2,
pointRadius: 0,
tension: 0.1,
},
{
label: "Minimum (i)",
data: filteredData
.filter((point) => typeof point.i === "number")
.map((point) => ({ x: new Date(point.t), y: point.i })),
fill: false,
borderColor: "#22c55e", // grün
borderWidth: 1,
pointRadius: 0,
borderDash: [4, 2],
tension: 0.1,
},
{
label: "Maximum (a)",
data: filteredData
.filter((point) => typeof point.a === "number")
.map((point) => ({ x: new Date(point.t), y: point.a })),
fill: false,
borderColor: "#ef4444", // rot
borderWidth: 1,
pointRadius: 0,
borderDash: [4, 2],
tension: 0.1,
},
]
? zeitraum === "DIA0"
? [
{
label: selectedAnalogInput?.label
? `Messwert (m) ${selectedAnalogInput.label}`
: "Messwert (m)",
data: filteredData
.filter((point) => typeof point.m === "number")
.map((point) => ({ x: new Date(point.t), y: point.m })),
fill: false,
borderColor: getColor("littwin-blue"),
backgroundColor: "rgba(59,130,246,0.3)",
borderWidth: 2,
pointRadius: 0,
tension: 0.1,
},
{
label: "Minimum (i)",
data: filteredData
.filter((point) => typeof point.i === "number")
.map((point) => ({ x: new Date(point.t), y: point.i })),
fill: false,
borderColor: "#22c55e", // grün
borderWidth: 1,
pointRadius: 0,
borderDash: [4, 2],
tension: 0.1,
},
{
label: "Maximum (a)",
data: filteredData
.filter((point) => typeof point.a === "number")
.map((point) => ({ x: new Date(point.t), y: point.a })),
fill: false,
borderColor: "#ef4444", // rot
borderWidth: 1,
pointRadius: 0,
borderDash: [4, 2],
tension: 0.1,
},
]
: [
{
label: "Minimum (i)",
data: filteredData
.filter((point) => typeof point.i === "number")
.map((point) => ({ x: new Date(point.t), y: point.i })),
fill: false,
borderColor: "#22c55e", // grün
borderWidth: 1,
pointRadius: 0,
borderDash: [4, 2],
tension: 0.1,
},
{
label: "Maximum (a)",
data: filteredData
.filter((point) => typeof point.a === "number")
.map((point) => ({ x: new Date(point.t), y: point.a })),
fill: false,
borderColor: "#ef4444", // rot
borderWidth: 1,
pointRadius: 0,
borderDash: [4, 2],
tension: 0.1,
},
{
label: "Durchschnitt (g)",
data: filteredData
.filter((point) => typeof point.g === "number")
.map((point) => ({ x: new Date(point.t), y: point.g })),
fill: false,
borderColor: "#6366f1", // indigo
borderWidth: 1,
pointRadius: 0,
borderDash: [2, 2],
tension: 0.1,
},
]
: [],
};