feat: Brush-Achsenbeschriftung auf Datumsformat umgestellt

- TickFormatter für Brush angepasst, sodass anstelle von Unix-Timestamps jetzt das formatierte Datum (TT.MM.JJJJ) angezeigt wird.
- Redux-Brush-Slice um `startDate` und `endDate` erweitert, um die Auswahlbereiche mit Datum statt Indizes zu speichern.
- Brush-Event-Handler (`handleBrushChange`) aktualisiert, sodass Start- und Enddatum beim Verschieben im Redux-Store gespeichert werden.
This commit is contained in:
ISA
2025-03-13 07:03:40 +01:00
parent 3547177107
commit 8ca3318181
3 changed files with 19 additions and 3 deletions

View File

@@ -108,9 +108,20 @@ const LoopMeasurementChart = () => {
const handleBrushChange = useCallback( const handleBrushChange = useCallback(
({ startIndex, endIndex }) => { ({ startIndex, endIndex }) => {
dispatch(setBrushRange({ startIndex, endIndex })); dispatch(
setBrushRange({
startIndex,
endIndex,
startDate: new Date(formatierteDaten[startIndex].zeit)
.toISOString()
.split("T")[0],
endDate: new Date(formatierteDaten[endIndex].zeit)
.toISOString()
.split("T")[0],
})
);
}, },
[dispatch] [dispatch, formatierteDaten]
); );
return ( return (
@@ -160,6 +171,7 @@ const LoopMeasurementChart = () => {
onChange={handleBrushChange} onChange={handleBrushChange}
startIndex={brushRange.startIndex} startIndex={brushRange.startIndex}
endIndex={brushRange.endIndex || formatierteDaten.length - 1} endIndex={brushRange.endIndex || formatierteDaten.length - 1}
tickFormatter={(zeit) => new Date(zeit).toLocaleDateString()} // Datum statt Zahl
/> />
</ComposedChart> </ComposedChart>
</ResponsiveContainer> </ResponsiveContainer>

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.120"; const webVersion = "1.6.121";
export default webVersion; export default webVersion;

View File

@@ -6,11 +6,15 @@ const brushSlice = createSlice({
initialState: { initialState: {
startIndex: 0, startIndex: 0,
endIndex: 0, endIndex: 0,
startDate: null,
endDate: null,
}, },
reducers: { reducers: {
setBrushRange(state, action) { setBrushRange(state, action) {
state.startIndex = action.payload.startIndex; state.startIndex = action.payload.startIndex;
state.endIndex = action.payload.endIndex; state.endIndex = action.payload.endIndex;
state.startDate = action.payload.startDate || state.startDate;
state.endDate = action.payload.endDate || state.endDate;
}, },
}, },
}); });