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 +};