feat(chart): X-Achsen-Labels optimiert für bessere Lesbarkeit

- Jahreszahl aus der X-Achse entfernt, um die Darstellung kompakter zu machen.
- Datumsformat von `TT.MM.YYYY` auf `TT.MM` geändert.
- Achsenbeschriftung um 25° gedreht (`angle: -25`) für bessere Übersicht.
- `dy: 5` hinzugefügt, um die Abstände der Labels anzupassen.
This commit is contained in:
Ismail Ali
2025-03-15 11:42:17 +01:00
parent e0379c24a6
commit da28d64f8c
10 changed files with 22 additions and 12 deletions

View File

@@ -11,6 +11,7 @@ import {
setSelectedSlotType, setSelectedSlotType,
setChartOpen, setChartOpen,
} from "../../../../../../redux/slices/kabelueberwachungChartSlice"; } from "../../../../../../redux/slices/kabelueberwachungChartSlice";
import { setBrushRange } from "../../../../../../redux/slices/brushSlice";
const LoopChartActionBar: React.FC = () => { const LoopChartActionBar: React.FC = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -157,11 +158,12 @@ const LoopChartActionBar: React.FC = () => {
<select <select
value={selectedMode} value={selectedMode}
onChange={(e) => onChange={(e) => {
dispatch( dispatch(
setSelectedMode(e.target.value as "DIA0" | "DIA1" | "DIA2") setSelectedMode(e.target.value as "DIA0" | "DIA1" | "DIA2")
) );
} dispatch(setBrushRange({ startIndex: 0, endIndex: 0 })); // Zurücksetzen
}}
className="px-3 py-1 bg-white border rounded text-sm" className="px-3 py-1 bg-white border rounded text-sm"
> >
<option value="DIA0">Alle Messwerte</option> <option value="DIA0">Alle Messwerte</option>

View File

@@ -179,8 +179,13 @@ const LoopMeasurementChart = () => {
<XAxis <XAxis
dataKey="zeit" dataKey="zeit"
domain={["dataMin", "dataMax"]} domain={["dataMin", "dataMax"]}
tickFormatter={(zeit) => new Date(zeit).toLocaleDateString()} tickFormatter={(zeit) => {
const date = new Date(zeit);
return `${date.getDate()}.${date.getMonth() + 1}`;
}}
tick={{ angle: -25, dy: 5 }} // Dreht die Labels für bessere Übersicht
/> />
<YAxis <YAxis
label={{ value: unit, angle: -90, position: "insideLeft" }} label={{ value: unit, angle: -90, position: "insideLeft" }}
domain={["auto", "auto"]} domain={["auto", "auto"]}

View File

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

View File

@@ -2998,5 +2998,5 @@
{ "t": "2025-03-08 06:12:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 }, { "t": "2025-03-08 06:12:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 },
{ "t": "2025-03-08 06:09:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 }, { "t": "2025-03-08 06:09:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 },
{ "t": "2025-03-08 06:06:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 }, { "t": "2025-03-08 06:06:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 },
{ "t": "2025-03-08 06:03:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 } { "t": "2025-01-01 06:03:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 }
] ]

View File

@@ -613,5 +613,5 @@
{ "t": "2025-02-13 12:00:00", "i": 200.0, "a": 200.0, "g": 200.0 }, { "t": "2025-02-13 12:00:00", "i": 200.0, "a": 200.0, "g": 200.0 },
{ "t": "2025-02-13 11:00:00", "i": 200.0, "a": 200.0, "g": 200.0 }, { "t": "2025-02-13 11:00:00", "i": 200.0, "a": 200.0, "g": 200.0 },
{ "t": "2025-02-13 10:00:00", "i": 200.0, "a": 200.0, "g": 200.0 }, { "t": "2025-02-13 10:00:00", "i": 200.0, "a": 200.0, "g": 200.0 },
{ "t": "2025-02-13 09:00:00", "i": 200.0, "a": 200.0, "g": 200.0 } { "t": "2025-01-01 09:00:00", "i": 200.0, "a": 200.0, "g": 200.0 }
] ]

View File

@@ -26,5 +26,5 @@
{ "t": "2025-02-16 00:00:00", "i": 11.0, "a": 11.0, "g": 11.0 }, { "t": "2025-02-16 00:00:00", "i": 11.0, "a": 11.0, "g": 11.0 },
{ "t": "2025-02-15 00:00:00", "i": 10.5, "a": 11.0, "g": 10.976 }, { "t": "2025-02-15 00:00:00", "i": 10.5, "a": 11.0, "g": 10.976 },
{ "t": "2025-02-14 00:00:00", "i": 10.5, "a": 11.0, "g": 10.997 }, { "t": "2025-02-14 00:00:00", "i": 10.5, "a": 11.0, "g": 10.997 },
{ "t": "2025-02-13 00:00:00", "i": 200.0, "a": 200.0, "g": 200.0 } { "t": "2025-01-01 00:00:00", "i": 200.0, "a": 200.0, "g": 200.0 }
] ]

View File

@@ -2998,5 +2998,5 @@
{ "t": "2025-03-08 06:12:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 }, { "t": "2025-03-08 06:12:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 },
{ "t": "2025-03-08 06:09:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 }, { "t": "2025-03-08 06:09:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 },
{ "t": "2025-03-08 06:06:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 }, { "t": "2025-03-08 06:06:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 },
{ "t": "2025-03-08 06:03:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 } { "t": "2025-01-01 06:03:00", "m": 3.419, "v": 1, "i": 3.419, "a": 3.419 }
] ]

View File

@@ -613,5 +613,5 @@
{ "t": "2025-02-13 12:00:00", "i": 200.0, "a": 200.0, "g": 200.0 }, { "t": "2025-02-13 12:00:00", "i": 200.0, "a": 200.0, "g": 200.0 },
{ "t": "2025-02-13 11:00:00", "i": 200.0, "a": 200.0, "g": 200.0 }, { "t": "2025-02-13 11:00:00", "i": 200.0, "a": 200.0, "g": 200.0 },
{ "t": "2025-02-13 10:00:00", "i": 200.0, "a": 200.0, "g": 200.0 }, { "t": "2025-02-13 10:00:00", "i": 200.0, "a": 200.0, "g": 200.0 },
{ "t": "2025-02-13 09:00:00", "i": 200.0, "a": 200.0, "g": 200.0 } { "t": "2025-01-01 09:00:00", "i": 200.0, "a": 200.0, "g": 200.0 }
] ]

View File

@@ -26,5 +26,5 @@
{ "t": "2025-02-16 00:00:00", "i": 11.0, "a": 11.0, "g": 11.0 }, { "t": "2025-02-16 00:00:00", "i": 11.0, "a": 11.0, "g": 11.0 },
{ "t": "2025-02-15 00:00:00", "i": 10.5, "a": 11.0, "g": 10.976 }, { "t": "2025-02-15 00:00:00", "i": 10.5, "a": 11.0, "g": 10.976 },
{ "t": "2025-02-14 00:00:00", "i": 10.5, "a": 11.0, "g": 10.997 }, { "t": "2025-02-14 00:00:00", "i": 10.5, "a": 11.0, "g": 10.997 },
{ "t": "2025-02-13 00:00:00", "i": 200.0, "a": 200.0, "g": 200.0 } { "t": "2025-01-01 00:00:00", "i": 200.0, "a": 200.0, "g": 200.0 }
] ]

View File

@@ -6,6 +6,7 @@ interface BrushState {
endIndex: number; endIndex: number;
startDate: string | null; startDate: string | null;
endDate: string | null; endDate: string | null;
isBrushReset: boolean; // 🆕 Hinzugefügt für zuverlässigen Reset
} }
const initialState: BrushState = { const initialState: BrushState = {
@@ -13,6 +14,7 @@ const initialState: BrushState = {
endIndex: 0, endIndex: 0,
startDate: null, startDate: null,
endDate: null, endDate: null,
isBrushReset: false, // 🆕
}; };
const brushSlice = createSlice({ const brushSlice = createSlice({
@@ -24,16 +26,17 @@ const brushSlice = createSlice({
state.endIndex = action.payload.endIndex; state.endIndex = action.payload.endIndex;
state.startDate = action.payload.startDate || state.startDate; state.startDate = action.payload.startDate || state.startDate;
state.endDate = action.payload.endDate || state.endDate; state.endDate = action.payload.endDate || state.endDate;
state.isBrushReset = false; // 🆕 Sobald Brush gesetzt wird, Reset zurücksetzen
}, },
resetBrushRange(state) { resetBrushRange(state) {
state.startIndex = 0; state.startIndex = 0;
state.endIndex = 0; state.endIndex = 0;
state.startDate = null; state.startDate = null;
state.endDate = null; state.endDate = null;
state.isBrushReset = true; // 🆕 Status für Reset setzen
}, },
}, },
}); });
export const { setBrushRange, resetBrushRange } = brushSlice.actions; export const { setBrushRange, resetBrushRange } = brushSlice.actions;
export default brushSlice.reducer; export default brushSlice.reducer;