Legende: gleicher Marker fuer alle Reihen, nur die Farbe unterscheidet

Der Eintrag "Vorjahr" hatte erst ein Kaestchen mit gestricheltem Rand (auf
10 px nur noch Eckstriche), dann ein gestricheltes Linienstueck. Beides war
zu viel Aufwand fuer eine Auskunft, die die Farbe schon gibt.

Jetzt derselbe abgerundete Marker wie beim aktuellen Zeitraum, in Grau. Die
Reihe liest sich ruhiger, weil alle Eintraege dieselbe Form haben.

Die Eigenschaft `gestrichelt` faellt damit weg, in der Legende und an ihren
vier Aufrufstellen. Eine Eigenschaft, die nichts mehr aendert, waere sonst
beim Einbau mitgewandert.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX

features/dashboard/components/charts/ChartLegende.tsx

@@ -7,26 +7,18 @@ import React from "react";
  * 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.
+ * Alle Einträge tragen denselben Marker und unterscheiden sich nur durch die
+ * Farbe. Die Vergleichsreihe ist im Diagramm grau und gestrichelt; in der
+ * Legende genügt das Grau. Ein zweiter Markertyp daneben bringt keine
+ * zusätzliche Auskunft, kostet aber die ruhige Reihe gleicher Formen.
  */
-
-/** 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. */
   inaktiv = [],
   onToggle,
 }: {
-  eintraege: { name: string; farbe: string; wert?: string; gestrichelt?: boolean }[];
+  eintraege: { name: string; farbe: string; wert?: string }[];
   inaktiv?: string[];
   onToggle?: (name: string) => void;
 }) {
@@ -36,31 +28,10 @@ export function ChartLegende({
         const aus = inaktiv.includes(eintrag.name);
         const Inhalt = (
           <>
-            {eintrag.gestrichelt ? (
-              <svg
-                width={STRICH.breite}
-                height={STRICH.staerke * 2}
-                viewBox={`0 0 ${STRICH.breite} ${STRICH.staerke * 2}`}
-                className="flex-none overflow-visible"
-                style={{ opacity: aus ? 0.35 : 1 }}
-                aria-hidden
-              >
-                <line
-                  x1="0"
-                  y1={STRICH.staerke}
-                  x2={STRICH.breite}
-                  y2={STRICH.staerke}
-                  stroke={eintrag.farbe}
-                  strokeWidth={STRICH.staerke}
-                  strokeDasharray={STRICH.muster}
-                />
-              </svg>
-            ) : (
-              <span
-                className="h-2.5 w-2.5 flex-none rounded-sm"
-                style={{ background: eintrag.farbe, opacity: aus ? 0.35 : 1 }}
-              />
-            )}
+            <span
+              className="h-2.5 w-2.5 flex-none rounded-sm"
+              style={{ background: eintrag.farbe, opacity: aus ? 0.35 : 1 }}
+            />
             <span
               className="text-[12px]"
               style={{ color: aus ? "#a8a8a8" : "#525252" }}

features/dashboard/pages/DashboardSeite.tsx

@@ -119,7 +119,7 @@ export function DashboardSeite({ vm }: { vm: VMState<DashboardDaten> }) {
               <ChartLegende
                 eintraege={[
                   { name: "Aktueller Zeitraum", farbe: PRIMAER_FARBE },
-                  { name: "Vorjahr", farbe: VERGLEICH_FARBE, gestrichelt: true },
+                  { name: "Vorjahr", farbe: VERGLEICH_FARBE },
                 ]}
               />
               <AreaVerlauf

features/dashboard/pages/FinanzenSeite.tsx

@@ -151,7 +151,7 @@ export function FinanzenSeite({ vm }: { vm: VMState<FinanzenDaten> }) {
               <ChartLegende
                 eintraege={[
                   { name: "Aktueller Zeitraum", farbe: PRIMAER_FARBE },
-                  { name: "Vorjahr", farbe: VERGLEICH_FARBE, gestrichelt: true },
+                  { name: "Vorjahr", farbe: VERGLEICH_FARBE },
                 ]}
               />
             }

features/dashboard/pages/KomponentenSeite.tsx

@@ -152,7 +152,7 @@ export function KomponentenSeite() {
               <ChartLegende
                 eintraege={[
                   { name: "Aktuell", farbe: PRIMAER_FARBE },
-                  { name: "Vorjahr", farbe: VERGLEICH_FARBE, gestrichelt: true },
+                  { name: "Vorjahr", farbe: VERGLEICH_FARBE },
                 ]}
               />
             }

features/dashboard/pages/UebersichtSeite.tsx

@@ -142,7 +142,7 @@ export function UebersichtSeite({ vm }: { vm: VMState<UebersichtDaten> }) {
               <ChartLegende
                 eintraege={[
                   { name: "Aktueller Zeitraum", farbe: PRIMAER_FARBE },
-                  { name: "Vorjahr", farbe: VERGLEICH_FARBE, gestrichelt: true },
+                  { name: "Vorjahr", farbe: VERGLEICH_FARBE },
                 ]}
               />
             }