feat: Referenzkurve für TDR-Chart integriert

- Neues Verzeichnis `tdr-reference-curves` für JSON-Referenzdaten hinzugefügt
- Redux Slice `tdrReferenceChartSlice` erstellt
- Thunk `fetchAllTDRReferenceChartThunk` zum Laden aller Referenzdaten integriert
- Service `fetchAllTDRReferenceChartData` mit Umgebungsunterscheidung (dev/prod)
- Anzeige der Referenzkurve im TDR-Chart mit Tooltip und gestrichelter Linie
- Referenzdaten werden automatisch beim Laden der Seite in Redux geladen
This commit is contained in:
ISA
2025-03-21 13:28:43 +01:00
parent 33e66269c2
commit 93136d0a38
71 changed files with 280733 additions and 5 deletions

View File

@@ -23,6 +23,12 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
selectedSlot !== null ? state.tdrChart.data[selectedSlot] || [] : []
);
const referenceChartData = useSelector((state: RootState) =>
selectedSlot !== null
? state.tdrReferenceChart.referenceData[selectedSlot] || []
: []
);
useEffect(() => {
import("chartjs-plugin-zoom").then((zoomPlugin) => {
Chart.register(...registerables, zoomPlugin.default);
@@ -51,6 +57,21 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
yAxisKey: "p", // Pegel // statt "m"
},
},
{
label: "Referenzkurve",
data: referenceChartData,
borderColor: "black", // Schwarz für Referenzkurve
borderWidth: 1,
borderDash: [5, 5], // Gepunktete Linie
pointRadius: 3, // Punkte für Tooltip sichtbar machen
pointHoverRadius: 5, // Größere Punkte beim Hover
pointBackgroundColor: "black",
tension: 0.1,
parsing: {
xAxisKey: "d",
yAxisKey: "p",
},
},
],
},
options: {
@@ -80,10 +101,21 @@ const TDRChart: React.FC<{ isFullScreen: boolean }> = ({ isFullScreen }) => {
title: () => "", // 🚫 Entfernt die erste Zeile mit der Nummer
label: function (context) {
const rawData = context.raw as { d: number; p: number };
// 👇 Unterscheide zwischen Mess- und Referenzkurve
if (context.dataset.label === "Referenzkurve") {
return [
`Referenzwert`,
`Entfernung: ${rawData.d.toFixed(0)} Meter`,
`Pegel: ${rawData.p.toFixed(2)}`,
];
} else {
return [
`Messwert`,
`Entfernung: ${rawData.d.toFixed(0)} Meter`,
`Pegel: ${rawData.p.toFixed(2)}`,
];
}
},
},
},

View File

@@ -6,5 +6,5 @@
2: Patch oder Hotfix (Bugfixes oder kleine Änderungen).
*/
const webVersion = "1.6.144";
const webVersion = "1.6.145";
export default webVersion;

View File

@@ -4,6 +4,7 @@ import { useRouter, useSearchParams } from "next/navigation";
import Kue705FO from "../components/main/kabelueberwachung/kue705FO/Kue705FO";
import { useDispatch, useSelector } from "react-redux";
import { fetchAllTDRChartData } from "../redux/thunks/fetchAllTDRChartThunk";
import { fetchAllTDRReferenceChartThunk } from "../redux/thunks/fetchAllTDRReferenceChartThunk";
function Kabelueberwachung() {
const router = useRouter();
@@ -38,6 +39,7 @@ function Kabelueberwachung() {
if (!tdrData || tdrData.length === 0) {
// console.log("TDR-Daten abrufen...");
dispatch(fetchAllTDRChartData());
dispatch(fetchAllTDRReferenceChartThunk());
}
}, [dispatch, tdrData]);
//----------------------------------------------------------------

View File

@@ -0,0 +1 @@
<%=KTR0%>

View File

@@ -0,0 +1 @@
<%=KTR1%>

View File

@@ -0,0 +1 @@
<%=KTR10%>

View File

@@ -0,0 +1 @@
<%=KTR11%>

View File

@@ -0,0 +1 @@
<%=KTR12%>

View File

@@ -0,0 +1 @@
<%=KTR13%>

View File

@@ -0,0 +1 @@
<%=KTR14%>

View File

@@ -0,0 +1 @@
<%=KTR15%>

View File

@@ -0,0 +1 @@
<%=KTR16%>

View File

@@ -0,0 +1 @@
<%=KTR17%>

View File

@@ -0,0 +1 @@
<%=KTR18%>

View File

@@ -0,0 +1 @@
<%=KTR19%>

View File

@@ -0,0 +1 @@
<%=KTR1%>

View File

@@ -0,0 +1 @@
<%=KTR20%>

View File

@@ -0,0 +1 @@
<%=KTR21%>

View File

@@ -0,0 +1 @@
<%=KTR22%>

View File

@@ -0,0 +1 @@
<%=KTR23%>

View File

@@ -0,0 +1 @@
<%=KTR24%>

View File

@@ -0,0 +1 @@
<%=KTR25%>

View File

@@ -0,0 +1 @@
<%=KTR26%>

View File

@@ -0,0 +1 @@
<%=KTR27%>

View File

@@ -0,0 +1 @@
<%=KTR28%>

View File

@@ -0,0 +1 @@
<%=KTR29%>

View File

@@ -0,0 +1 @@
<%=KTR3%>

View File

@@ -0,0 +1 @@
<%=KTR30%>

View File

@@ -0,0 +1 @@
<%=KTR31%>

View File

@@ -0,0 +1 @@
<%=KTR4%>

View File

@@ -0,0 +1 @@
<%=KTR5%>

View File

@@ -0,0 +1 @@
<%=KTR6%>

View File

@@ -0,0 +1 @@
<%=KTR7%>

View File

@@ -0,0 +1 @@
<%=KTR8%>

View File

@@ -0,0 +1 @@
<%=KTR9%>

View File

@@ -0,0 +1,20 @@
[
{ "d": 0, "p": 0 },
{ "d": 1000, "p": 1 },
{ "d": 2000, "p": 10 },
{ "d": 3000, "p": 50 },
{ "d": 4000, "p": 110 },
{ "d": 5000, "p": 90 },
{ "d": 6000, "p": 40 },
{ "d": 7000, "p": 10 },
{ "d": 8000, "p": 0 },
{ "d": 10000, "p": -10 },
{ "d": 15000, "p": -5 },
{ "d": 20000, "p": -2 },
{ "d": 25000, "p": 0 },
{ "d": 30000, "p": 1 },
{ "d": 35000, "p": 2 },
{ "d": 40000, "p": 3 },
{ "d": 45000, "p": 3.5 },
{ "d": 50000, "p": 4 }
]

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,42 @@
// /redux/slices/tdrReferenceChartSlice.ts
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
import { fetchAllTDRReferenceChartThunk } from "../thunks/fetchAllTDRReferenceChartThunk";
interface TDRReferenceChartState {
referenceData: any[]; // Array mit Slot-Daten (Index = Slot)
loading: boolean;
error: string | null;
}
const initialState: TDRReferenceChartState = {
referenceData: [],
loading: false,
error: null,
};
const tdrReferenceChartSlice = createSlice({
name: "tdrReferenceChart",
initialState,
reducers: {},
extraReducers: (builder) => {
builder
.addCase(fetchAllTDRReferenceChartThunk.pending, (state) => {
state.loading = true;
state.error = null;
})
.addCase(
fetchAllTDRReferenceChartThunk.fulfilled,
(state, action: PayloadAction<any[]>) => {
state.loading = false;
state.referenceData = action.payload;
}
)
.addCase(fetchAllTDRReferenceChartThunk.rejected, (state, action) => {
state.loading = false;
state.error = action.payload as string | null;
});
},
});
export default tdrReferenceChartSlice.reducer;

View File

@@ -14,6 +14,7 @@ import brushReducer from "./slices/brushSlice";
import tdrChartReducer from "./slices/tdrChartSlice";
import analogeEingaengeReducer from "./slices/analogeEingaengeSlice";
import digitalInputsReducer from "./slices/digitalInputsSlice";
import tdrReferenceChartReducer from "./slices/tdrReferenceChartSlice";
const store = configureStore({
reducer: {
@@ -30,6 +31,7 @@ const store = configureStore({
analogeEingaenge: analogeEingaengeReducer,
brush: brushReducer,
tdrChart: tdrChartReducer,
tdrReferenceChart: tdrReferenceChartReducer,
},
});

View File

@@ -0,0 +1,16 @@
// /redux/thunks/fetchAllTDRReferenceChartThunk.ts
import { createAsyncThunk } from "@reduxjs/toolkit";
import { fetchAllTDRReferenceChartData } from "../../services/fetchAllTDRReferenceChartData";
export const fetchAllTDRReferenceChartThunk = createAsyncThunk(
"tdrReferenceChart/fetchAll",
async (_, { rejectWithValue }) => {
try {
const data = await fetchAllTDRReferenceChartData();
return data;
} catch (error) {
return rejectWithValue("Referenzdaten konnten nicht geladen werden");
}
}
);

View File

@@ -0,0 +1,32 @@
// /services/fetchAllTDRReferenceChartData.ts
const getTDRReferenceBasePath = () => {
if (typeof window !== "undefined") {
return window.location.hostname === "localhost"
? "/CPLMockData/tdr-reference-curves"
: "/CPL?/CPL/tdr-reference-curves";
}
return "";
};
export const fetchAllTDRReferenceChartData = async () => {
const maxSlots = 32;
const results = [];
const basePath = getTDRReferenceBasePath();
for (let i = 0; i < maxSlots; i++) {
try {
const response = await fetch(`${basePath}/slot${i}.json`);
if (!response.ok) {
results[i] = null;
continue;
}
const json = await response.json();
results[i] = json;
} catch (error) {
results[i] = null;
}
}
return results;
};