fix: Legendenbeschriftungen im LoopMeasurementChart benutzerfreundlich umbenannt

- Interne Datenkeys wie 'messwert' oder 'messwertMinimum' werden jetzt als 'Messwert', 'Minimum' usw. angezeigt
- Neue Mapping-Tabelle für sprechende Labels in der Legende eingeführt
This commit is contained in:
Ismail Ali
2025-03-30 22:16:02 +02:00
parent 787a43cadb
commit 14ba25bc57
2 changed files with 15 additions and 35 deletions

View File

@@ -48,7 +48,6 @@ const LoopMeasurementChart = () => {
[loopMeasurementCurveChartData, selectedMode] [loopMeasurementCurveChartData, selectedMode]
); );
// Initialisierung des Brush-Bereichs nur beim ersten Laden der Daten
useEffect(() => { useEffect(() => {
if (brushRange.endIndex === 0 && formatierteDaten.length) { if (brushRange.endIndex === 0 && formatierteDaten.length) {
dispatch( dispatch(
@@ -62,7 +61,7 @@ const LoopMeasurementChart = () => {
const handleBrushChange = useCallback( const handleBrushChange = useCallback(
({ startIndex, endIndex }: { startIndex?: number; endIndex?: number }) => { ({ startIndex, endIndex }: { startIndex?: number; endIndex?: number }) => {
if (startIndex === undefined || endIndex === undefined) return; // Verhindert Fehler if (startIndex === undefined || endIndex === undefined) return;
dispatch( dispatch(
setBrushRange({ setBrushRange({
@@ -85,28 +84,15 @@ const LoopMeasurementChart = () => {
[dispatch, formatierteDaten] [dispatch, formatierteDaten]
); );
//--------------------------------------------------------------------------------
useEffect(() => { useEffect(() => {
if (formatierteDaten.length) { if (formatierteDaten.length) {
console.log("🔍 Redux vonDatum:", vonDatum);
console.log("🔍 Redux bisDatum:", bisDatum);
//console.log("🔍 Verfügbare Zeitpunkte in formatierteDaten:");
/* formatierteDaten.forEach((d, index) => {
console.log(
`${index}: ${new Date(d.zeit).toISOString().split("T")[0]}`
);
});
*/
const startIndex = formatierteDaten.findIndex( const startIndex = formatierteDaten.findIndex(
(d) => new Date(d.zeit).toISOString().split("T")[0] === vonDatum (d) => new Date(d.zeit).toISOString().split("T")[0] === vonDatum
); );
//console.log("startIndex in Brush ", startIndex);
const endIndex = formatierteDaten.findIndex( const endIndex = formatierteDaten.findIndex(
(d) => new Date(d.zeit).toISOString().split("T")[0] === bisDatum (d) => new Date(d.zeit).toISOString().split("T")[0] === bisDatum
); );
//console.log("endIndex in Brush ", endIndex);
if (startIndex !== -1 && endIndex !== -1) { if (startIndex !== -1 && endIndex !== -1) {
dispatch( dispatch(
@@ -120,18 +106,13 @@ const LoopMeasurementChart = () => {
} }
} }
}, [vonDatum, bisDatum, formatierteDaten, dispatch]); }, [vonDatum, bisDatum, formatierteDaten, dispatch]);
//----------------------------------------------------------------
useEffect(() => { useEffect(() => {
if (formatierteDaten.length > 0) { if (formatierteDaten.length > 0) {
console.log(
"📊 Brush wird nach Modus-Wechsel aktualisiert:",
selectedMode
);
dispatch( dispatch(
setBrushRange({ setBrushRange({
startIndex: 0, startIndex: 0,
endIndex: formatierteDaten.length - 1, // Stellt sicher, dass der Brush-Bereich korrekt gesetzt wird endIndex: formatierteDaten.length - 1,
startDate: new Date(formatierteDaten[0].zeit) startDate: new Date(formatierteDaten[0].zeit)
.toISOString() .toISOString()
.split("T")[0], .split("T")[0],
@@ -143,20 +124,22 @@ const LoopMeasurementChart = () => {
} }
}, [selectedMode, formatierteDaten, dispatch]); }, [selectedMode, formatierteDaten, dispatch]);
//-------------------------------------------------------------------------------- const legendLabelMap: Record<string, string> = {
messwertMinimum: "Minimum",
messwert: "Messwert",
messwertMaximum: "Maximum",
messwertDurchschnitt: "Durchschnitt",
};
return ( return (
<div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}> <div style={{ width: "100%", height: isFullScreen ? "90%" : "400px" }}>
<ResponsiveContainer width="100%" height="100%"> <ResponsiveContainer width="100%" height="100%">
<ComposedChart <ComposedChart data={formatierteDaten} margin={{ right: 90, left: 20 }}>
data={formatierteDaten}
margin={{ right: 90, left: 20 }} // <- Platz für das letzte Label
>
<CartesianGrid strokeDasharray="3 3" /> <CartesianGrid strokeDasharray="3 3" />
<XAxis <XAxis
dataKey="zeit" dataKey="zeit"
domain={["dataMin", "dataMax"]} domain={["dataMin", "dataMax"]}
allowDataOverflow={true} // <- wichtig, um letzten Tick nicht abzuschneiden allowDataOverflow={true}
interval={Math.floor(formatierteDaten.length / 15)} interval={Math.floor(formatierteDaten.length / 15)}
tickFormatter={(zeit) => { tickFormatter={(zeit) => {
const date = new Date(zeit); const date = new Date(zeit);
@@ -176,7 +159,7 @@ const LoopMeasurementChart = () => {
{`${date.getDate()}.${date.getMonth() + 1}`} {`${date.getDate()}.${date.getMonth() + 1}`}
</text> </text>
); );
}} // Dreht die Labels für bessere Übersicht }}
/> />
<YAxis <YAxis
@@ -190,8 +173,6 @@ const LoopMeasurementChart = () => {
align="center" align="center"
content={({ payload }) => { content={({ payload }) => {
if (!payload) return null; if (!payload) return null;
// Reihenfolge der Legende anpassen
const orderedPayload = [...payload].sort((a, b) => { const orderedPayload = [...payload].sort((a, b) => {
const order = [ const order = [
"messwertMinimum", "messwertMinimum",
@@ -201,7 +182,6 @@ const LoopMeasurementChart = () => {
]; ];
return order.indexOf(a.value) - order.indexOf(b.value); return order.indexOf(a.value) - order.indexOf(b.value);
}); });
return ( return (
<div <div
style={{ style={{
@@ -215,7 +195,7 @@ const LoopMeasurementChart = () => {
key={index} key={index}
style={{ margin: "0 10px", color: entry.color }} style={{ margin: "0 10px", color: entry.color }}
> >
{entry.value} {legendLabelMap[entry.value] ?? entry.value}
</span> </span>
))} ))}
</div> </div>
@@ -253,7 +233,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 tickFormatter={(zeit) => new Date(zeit).toLocaleDateString()}
/> />
</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.188"; const webVersion = "1.6.189";
export default webVersion; export default webVersion;