dejanandClaude Opus 5
4ef7c1b27f
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
66 lines
2.0 KiB
TypeScript
66 lines
2.0 KiB
TypeScript
"use client";
|
|
|
|
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.
|
|
*
|
|
* 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.
|
|
*/
|
|
export function ChartLegende({
|
|
eintraege,
|
|
/** Ausgeblendete Reihen erscheinen ausgegraut: Klick schaltet um. */
|
|
inaktiv = [],
|
|
onToggle,
|
|
}: {
|
|
eintraege: { name: string; farbe: string; wert?: string }[];
|
|
inaktiv?: string[];
|
|
onToggle?: (name: string) => void;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-wrap items-center gap-x-4 gap-y-1.5">
|
|
{eintraege.map((eintrag) => {
|
|
const aus = inaktiv.includes(eintrag.name);
|
|
const Inhalt = (
|
|
<>
|
|
<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" }}
|
|
>
|
|
{eintrag.name}
|
|
</span>
|
|
{eintrag.wert ? (
|
|
<span className="text-[12px] font-semibold tabular-nums text-text-neutral-primary">
|
|
{eintrag.wert}
|
|
</span>
|
|
) : null}
|
|
</>
|
|
);
|
|
|
|
return onToggle ? (
|
|
<button
|
|
key={eintrag.name}
|
|
onClick={() => onToggle(eintrag.name)}
|
|
className="flex items-center gap-1.5 rounded px-1 py-0.5 hover:bg-neutral-50"
|
|
>
|
|
{Inhalt}
|
|
</button>
|
|
) : (
|
|
<span key={eintrag.name} className="flex items-center gap-1.5">
|
|
{Inhalt}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|