fix: Reihenfolge der Legenden-Einträge korrigiert
- `messwert` und `messwertDurchschnitt` erscheinen nun zuerst in der Legende. - `Legend` bleibt innerhalb des Charts, um `payload` von Recharts zu erhalten. - Benutzerdefinierte Sortierung mit `content`-Prop für `Legend` implementiert.
This commit is contained in:
@@ -161,7 +161,44 @@ const LoopMeasurementChart = () => {
|
|||||||
tickFormatter={(wert) => `${wert.toFixed(2)} kOhm`}
|
tickFormatter={(wert) => `${wert.toFixed(2)} kOhm`}
|
||||||
/>
|
/>
|
||||||
<Tooltip content={<CustomTooltip />} />
|
<Tooltip content={<CustomTooltip />} />
|
||||||
<Legend />
|
<Legend
|
||||||
|
verticalAlign="top"
|
||||||
|
align="center"
|
||||||
|
content={({ payload }) => {
|
||||||
|
if (!payload) return null;
|
||||||
|
|
||||||
|
// Reihenfolge der Legende anpassen
|
||||||
|
const orderedPayload = [...payload].sort((a, b) => {
|
||||||
|
const order = [
|
||||||
|
"messwertMinimum",
|
||||||
|
"messwert",
|
||||||
|
"messwertDurchschnitt",
|
||||||
|
"messwertMaximum",
|
||||||
|
];
|
||||||
|
return order.indexOf(a.value) - order.indexOf(b.value);
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
width: "100%",
|
||||||
|
display: "flex",
|
||||||
|
justifyContent: "center",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{orderedPayload.map((entry, index) => (
|
||||||
|
<span
|
||||||
|
key={index}
|
||||||
|
style={{ margin: "0 10px", color: entry.color }}
|
||||||
|
>
|
||||||
|
⬤ {entry.value}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
<Line
|
<Line
|
||||||
type="monotone"
|
type="monotone"
|
||||||
dataKey="messwertMinimum"
|
dataKey="messwertMinimum"
|
||||||
|
|||||||
Reference in New Issue
Block a user