diff --git a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
index d5c2607..c9770d7 100644
--- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChart.tsx
@@ -4,6 +4,7 @@ import { RootState } from "../../../../../../redux/store";
import { useSelector } from "react-redux";
import { Chart, registerables } from "chart.js";
import "chartjs-adapter-date-fns";
+import { getColor } from "../../../../../../utils/colors";
// 🟢 **Prop-Typ für isFullScreen hinzufügen**
interface TDRChartProps {
@@ -42,8 +43,9 @@ const TDRChart: React.FC = () => {
{
label: "TDR Entfernung (km)",
data: tdrChartData,
- borderColor: "rgba(255, 99, 132, 1)",
- backgroundColor: "rgba(255, 99, 132, 0.2)",
+ borderColor: getColor("littwin-blue"), // Nutzt automatisch die Tailwind-Farbe
+ borderWidth: 0.5,
+ //backgroundColor: getColor("littwin-blue"),
tension: 0.1,
parsing: {
xAxisKey: "t", // Schlüssel für den Zeitstempel
@@ -95,7 +97,7 @@ const TDRChart: React.FC = () => {
}, [tdrChartData]);
return (
-
+
);
diff --git a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
index 67e4d6a..25b74cf 100644
--- a/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
+++ b/components/main/kabelueberwachung/kue705FO/Charts/TDRChart/TDRChartActionBar.tsx
@@ -50,11 +50,7 @@ const TDRChartActionBar: React.FC = () => {
const handleSortToggle = () => {
setSortAscending(!sortAscending);
- setDateiListe((prevListe) =>
- [...prevListe].sort((a, b) =>
- sortAscending ? a.localeCompare(b) : b.localeCompare(a)
- )
- );
+ setDateiListe((prevListe) => [...prevListe].reverse()); // 🔄 Umkehren der Reihenfolge
};
const handleAktualisieren = () => {
@@ -130,7 +126,8 @@ const TDRChartActionBar: React.FC = () => {
});
}, []);
- const BASE_URL = "http://localhost:3002";
+ const BASE_URL = window.location.origin;
+ console.log("BASE_URL in TDRChartACtionBar:", BASE_URL);
const [showChart, setShowChart] = useState(false);
@@ -214,12 +211,15 @@ const TDRChartActionBar: React.FC = () => {
Sortieren
-
+ */}
);
};
diff --git a/redux/slices/tdrChartSlice.ts b/redux/slices/tdrChartSlice.ts
new file mode 100644
index 0000000..2f1ec59
--- /dev/null
+++ b/redux/slices/tdrChartSlice.ts
@@ -0,0 +1,40 @@
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+// 🔹 State-Interface
+interface TDRChartState {
+ dateiListe: string[];
+ sortAscending: boolean;
+ tdrChartData: { t: number; m: number }[];
+}
+
+// 🔹 Anfangsstate
+const initialState: TDRChartState = {
+ dateiListe: [],
+ sortAscending: true,
+ tdrChartData: [],
+};
+
+// 🔹 Redux Slice
+const tdrChartSlice = createSlice({
+ name: "tdrChart",
+ initialState,
+ reducers: {
+ setDateiListe: (state, action: PayloadAction) => {
+ state.dateiListe = action.payload;
+ },
+ toggleSortOrder: (state) => {
+ state.sortAscending = !state.sortAscending;
+ state.dateiListe.reverse(); // 🔄 Reihenfolge umkehren
+ },
+ setTDRChartData: (
+ state,
+ action: PayloadAction<{ t: number; m: number }[]>
+ ) => {
+ state.tdrChartData = action.payload;
+ },
+ },
+});
+
+export const { setDateiListe, toggleSortOrder, setTDRChartData } =
+ tdrChartSlice.actions;
+export default tdrChartSlice.reducer;
diff --git a/redux/store.ts b/redux/store.ts
index b0ecbed..7e3217c 100644
--- a/redux/store.ts
+++ b/redux/store.ts
@@ -1,3 +1,4 @@
+// /redux/store.ts
import { configureStore } from "@reduxjs/toolkit";
import { useDispatch } from "react-redux";
import authReducer from "./slices/authSlice";
@@ -12,6 +13,7 @@ import opcuaSettingsReducer from "./slices/opcuaSettingsSlice";
import digitalOutputsReducer from "./slices/digitalOutputsSlice";
import analogeEingaengeReducer from "./slices/analogeEingaengeSlice";
import brushReducer from "./slices/brushSlice";
+import tdrChartReducer from "./slices/tdrChartSlice";
const store = configureStore({
reducer: {
@@ -27,6 +29,7 @@ const store = configureStore({
digitalOutputs: digitalOutputsReducer,
analogeEingaenge: analogeEingaengeReducer,
brush: brushReducer,
+ tdrChart: tdrChartReducer,
},
});
diff --git a/utils/colors.ts b/utils/colors.ts
new file mode 100644
index 0000000..dba7970
--- /dev/null
+++ b/utils/colors.ts
@@ -0,0 +1,7 @@
+const tailwindColors = {
+ "littwin-blue": "#00AEEF", // Hier alle Tailwind-Farben manuell eintragen
+};
+
+export const getColor = (colorName: string) => {
+ return tailwindColors[colorName] || colorName; // Falls die Farbe nicht existiert, wird der Name direkt zurückgegeben
+};