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