fix: Legendenbeschriftungen im LoopMeasurementChart benutzerfreundlich umbenannt

- Interne Datenkeys wie 'messwert' oder 'messwertMinimum' werden jetzt als 'Messwert', 'Minimum' usw. angezeigt
- Neue Mapping-Tabelle für sprechende Labels in der Legende eingeführt

components/main/kabelueberwachung/kue705FO/Charts/LoopMeasurementChart/LoopMeasurementChart.tsx

@@ -48,7 +48,6 @@ const LoopMeasurementChart = () => {
     [loopMeasurementCurveChartData, selectedMode]
   );
 
-  // Initialisierung des Brush-Bereichs nur beim ersten Laden der Daten
   useEffect(() => {
     if (brushRange.endIndex === 0 && formatierteDaten.length) {
       dispatch(
@@ -62,7 +61,7 @@ const LoopMeasurementChart = () => {
 
   const handleBrushChange = useCallback(
     ({ startIndex, endIndex }: { startIndex?: number; endIndex?: number }) => {
-      if (startIndex === undefined || endIndex === undefined) return; // Verhindert Fehler
+      if (startIndex === undefined || endIndex === undefined) return;
 
       dispatch(
         setBrushRange({
@@ -85,28 +84,15 @@ const LoopMeasurementChart = () => {
     [dispatch, formatierteDaten]
   );
 
-  //--------------------------------------------------------------------------------
   useEffect(() => {
     if (formatierteDaten.length) {
-      console.log("🔍 Redux vonDatum:", vonDatum);
-      console.log("🔍 Redux bisDatum:", bisDatum);
-
-      //console.log("🔍 Verfügbare Zeitpunkte in formatierteDaten:");
-      /*       formatierteDaten.forEach((d, index) => {
-        console.log(
-          `${index}: ${new Date(d.zeit).toISOString().split("T")[0]}`
-        );
-      });
- */
       const startIndex = formatierteDaten.findIndex(
         (d) => new Date(d.zeit).toISOString().split("T")[0] === vonDatum
       );
-      //console.log("startIndex in Brush ", startIndex);
 
       const endIndex = formatierteDaten.findIndex(
         (d) => new Date(d.zeit).toISOString().split("T")[0] === bisDatum
       );
-      //console.log("endIndex in Brush ", endIndex);
 
       if (startIndex !== -1 && endIndex !== -1) {
         dispatch(
@@ -120,18 +106,13 @@ const LoopMeasurementChart = () => {
       }
     }
   }, [vonDatum, bisDatum, formatierteDaten, dispatch]);
-  //----------------------------------------------------------------
+
   useEffect(() => {
     if (formatierteDaten.length > 0) {
-      console.log(
-        "📊 Brush wird nach Modus-Wechsel aktualisiert:",
-        selectedMode
-      );
-
       dispatch(
         setBrushRange({
           startIndex: 0,
-          endIndex: formatierteDaten.length - 1, // Stellt sicher, dass der Brush-Bereich korrekt gesetzt wird
+          endIndex: formatierteDaten.length - 1,
           startDate: new Date(formatierteDaten[0].zeit)
             .toISOString()
             .split("T")[0],
@@ -143,20 +124,22 @@ const LoopMeasurementChart = () => {
     }
   }, [selectedMode, formatierteDaten, dispatch]);
 
-  //--------------------------------------------------------------------------------
+  const legendLabelMap: Record<string, string> = {
+    messwertMinimum: "Minimum",
+    messwert: "Messwert",
+    messwertMaximum: "Maximum",
+    messwertDurchschnitt: "Durchschnitt",
+  };
 
   return (
     <div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
       <ResponsiveContainer width="100%" height="100%">
-        <ComposedChart
-          data={formatierteDaten}
-          margin={{ right: 90, left: 20 }} // <- Platz für das letzte Label
-        >
+        <ComposedChart data={formatierteDaten} margin={{ right: 90, left: 20 }}>
           <CartesianGrid strokeDasharray="3 3" />
           <XAxis
             dataKey="zeit"
             domain={["dataMin", "dataMax"]}
-            allowDataOverflow={true} // <- wichtig, um letzten Tick nicht abzuschneiden
+            allowDataOverflow={true}
             interval={Math.floor(formatierteDaten.length / 15)}
             tickFormatter={(zeit) => {
               const date = new Date(zeit);
@@ -176,7 +159,7 @@ const LoopMeasurementChart = () => {
                   {`${date.getDate()}.${date.getMonth() + 1}`}
                 </text>
               );
-            }} // Dreht die Labels für bessere Übersicht
+            }}
           />
 
           <YAxis
@@ -190,8 +173,6 @@ const LoopMeasurementChart = () => {
             align="center"
             content={({ payload }) => {
               if (!payload) return null;
-
-              // Reihenfolge der Legende anpassen
               const orderedPayload = [...payload].sort((a, b) => {
                 const order = [
                   "messwertMinimum",
@@ -201,7 +182,6 @@ const LoopMeasurementChart = () => {
                 ];
                 return order.indexOf(a.value) - order.indexOf(b.value);
               });
-
               return (
                 <div
                   style={{
@@ -215,7 +195,7 @@ const LoopMeasurementChart = () => {
                       key={index}
                       style={{ margin: "0 10px", color: entry.color }}
                     >
-                      ⬤ {entry.value}
+                      ⬤ {legendLabelMap[entry.value] ?? entry.value}
                     </span>
                   ))}
                 </div>
@@ -253,7 +233,7 @@ const LoopMeasurementChart = () => {
             onChange={handleBrushChange}
             startIndex={brushRange.startIndex}
             endIndex={brushRange.endIndex || formatierteDaten.length - 1}
-            tickFormatter={(zeit) => new Date(zeit).toLocaleDateString()} // Datum statt Zahl
+            tickFormatter={(zeit) => new Date(zeit).toLocaleDateString()}
           />
         </ComposedChart>
       </ResponsiveContainer>