From 4ef7c1b27f9ad3d927c5b757accb6a851edec90e Mon Sep 17 00:00:00 2001 From: DeeCee03 Date: Mon, 31 Aug 2026 21:02:19 +0200 Subject: [PATCH] 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) Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX --- .../components/charts/ChartLegende.tsx | 47 ++++--------------- features/dashboard/pages/DashboardSeite.tsx | 2 +- features/dashboard/pages/FinanzenSeite.tsx | 2 +- features/dashboard/pages/KomponentenSeite.tsx | 2 +- features/dashboard/pages/UebersichtSeite.tsx | 2 +- 5 files changed, 13 insertions(+), 42 deletions(-) diff --git a/features/dashboard/components/charts/ChartLegende.tsx b/features/dashboard/components/charts/ChartLegende.tsx index d47fa56..45c258d 100644 --- a/features/dashboard/components/charts/ChartLegende.tsx +++ b/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 ? ( - - - - ) : ( - - )} + }) { }) { } diff --git a/features/dashboard/pages/KomponentenSeite.tsx b/features/dashboard/pages/KomponentenSeite.tsx index fdffe64..28e0bef 100644 --- a/features/dashboard/pages/KomponentenSeite.tsx +++ b/features/dashboard/pages/KomponentenSeite.tsx @@ -152,7 +152,7 @@ export function KomponentenSeite() { } diff --git a/features/dashboard/pages/UebersichtSeite.tsx b/features/dashboard/pages/UebersichtSeite.tsx index 1ca3eb0..1acb970 100644 --- a/features/dashboard/pages/UebersichtSeite.tsx +++ b/features/dashboard/pages/UebersichtSeite.tsx @@ -142,7 +142,7 @@ export function UebersichtSeite({ vm }: { vm: VMState }) { }