From ae3fd0c8a54861de0c64463bbbfa905a2e2f50de Mon Sep 17 00:00:00 2001 From: DeeCee03 Date: Mon, 31 Aug 2026 20:57:48 +0200 Subject: [PATCH] Legendenmarker zeichnet, was das Diagramm zeichnet Der Eintrag "Vorjahr" war ein 10 px grosses Kaestchen mit gestricheltem Rand. Auf zehn Pixel bleiben von einem gestrichelten Rechteck ein paar Eckstriche uebrig; das sah aus wie ein Zeichenfehler. Es stimmte auch inhaltlich nicht: Im Diagramm ist die Vergleichsreihe keine Flaeche, sondern eine Linie. Ein Marker, der etwas anderes zeigt als die Reihe, die er benennt, ist genau die Art Kleinigkeit, die eine Legende nutzlos macht. Jetzt ein gestricheltes Linienstueck als SVG, mit derselben Staerke und demselben Muster wie die Reihe im Chart (1,5 px, 4/4). Gefuellte Reihen behalten ihren Punkt. Die Werte stehen als Konstante neben dem Marker mit dem Hinweis, dass sie zu AreaVerlauf.tsx passen muessen. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX --- .../components/charts/ChartLegende.tsx | 46 +++++++++++++++---- 1 file changed, 38 insertions(+), 8 deletions(-) diff --git a/features/dashboard/components/charts/ChartLegende.tsx b/features/dashboard/components/charts/ChartLegende.tsx index 6d63ac3..d47fa56 100644 --- a/features/dashboard/components/charts/ChartLegende.tsx +++ b/features/dashboard/components/charts/ChartLegende.tsx @@ -6,7 +6,20 @@ import React from "react"; * Legende als eigene Komponente statt Recharts-Legend: * Recharts platziert die Legende im SVG und kostet damit Chartfläche. * Carbon setzt sie über den Chart, linksbündig, 12 px, 12 px Marker. + * + * **Der Marker zeigt, was das Diagramm zeichnet.** Eine gefüllte Reihe bekommt + * einen Punkt, eine gestrichelte Vergleichsreihe ein gestricheltes + * Linienstück mit demselben Strichmuster wie im Chart. + * + * Vorher war auch die gestrichelte Reihe ein 10 px großes Kästchen, nur mit + * gestricheltem Rand. Auf zehn Pixel bleiben von einem gestrichelten Rechteck + * ein paar Eckstriche übrig; das sah aus wie ein Zeichenfehler und nicht wie + * eine Linie. Und es stimmte auch nicht: Im Diagramm ist „Vorjahr" kein + * Kästchen, sondern eine Linie. */ + +/** Muss zur Vergleichsreihe in AreaVerlauf.tsx passen: 1,5 px, Muster 4/4. */ +const STRICH = { breite: 18, staerke: 1.5, muster: "4 4" } as const; export function ChartLegende({ eintraege, /** Ausgeblendete Reihen erscheinen ausgegraut: Klick schaltet um. */ @@ -23,14 +36,31 @@ export function ChartLegende({ const aus = inaktiv.includes(eintrag.name); const Inhalt = ( <> - + {eintrag.gestrichelt ? ( + + + + ) : ( + + )}