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:
@@ -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>
|
||||||
|
|||||||
@@ -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"]}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
@@ -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 }
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -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 }
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -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 }
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -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 }
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -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 }
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -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 }
|
||||||
]
|
]
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user