From e426cd6218073e5014ec5abb60b82754b99a3f4b Mon Sep 17 00:00:00 2001
From: ISA <Ismail.ali@littwin-systemtechnik.de>
Date: Thu, 13 Mar 2025 07:51:41 +0100
Subject: [PATCH] =?UTF-8?q?fix:=20Reihenfolge=20der=20Legenden-Eintr=C3=A4?=
 =?UTF-8?q?ge=20korrigiert?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- `messwert` und `messwertDurchschnitt` erscheinen nun zuerst in der Legende.
- `Legend` bleibt innerhalb des Charts, um `payload` von Recharts zu erhalten.
- Benutzerdefinierte Sortierung mit `content`-Prop für `Legend` implementiert.
---
 .../LoopMeasurementChart.tsx                  | 39 ++++++++++++++++++-
 1 file changed, 38 insertions(+), 1 deletion(-)

diff --git a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
index 8c53f44..c24a8f0 100644
--- a/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx
@@ -161,7 +161,44 @@ const LoopMeasurementChart = () => {
             tickFormatter={(wert) => `${wert.toFixed(2)} kOhm`}
           />
           <Tooltip content={<CustomTooltip />} />
-          <Legend />
+          <Legend
+            verticalAlign="top"
+            align="center"
+            content={({ payload }) => {
+              if (!payload) return null;
+
+              // Reihenfolge der Legende anpassen
+              const orderedPayload = [...payload].sort((a, b) => {
+                const order = [
+                  "messwertMinimum",
+                  "messwert",
+                  "messwertDurchschnitt",
+                  "messwertMaximum",
+                ];
+                return order.indexOf(a.value) - order.indexOf(b.value);
+              });
+
+              return (
+                <div
+                  style={{
+                    width: "100%",
+                    display: "flex",
+                    justifyContent: "center",
+                  }}
+                >
+                  {orderedPayload.map((entry, index) => (
+                    <span
+                      key={index}
+                      style={{ margin: "0 10px", color: entry.color }}
+                    >
+                      ⬤ {entry.value}
+                    </span>
+                  ))}
+                </div>
+              );
+            }}
+          />
+
           <Line
             type="monotone"
             dataKey="messwertMinimum"