dejanandClaude Opus 5
6a0b36ddcc
467 Stellen. Nicht durch einen anderen Strich ersetzt, sondern durch das
Satzzeichen, das an der jeweiligen Stelle richtig ist: Doppelpunkt, wo eine
Erlaeuterung folgt; Komma, wo der Satz weiterlaeuft; Punkt, wo zwei
Hauptsaetze aneinanderstiessen. Ein Halbgeviertstrich waere nur derselbe
Griff mit kuerzerem Strich gewesen.
Regelbasiert ersetzt und danach nachgeprueft, weil eine Regel allein nicht
reicht. Gefunden und einzeln korrigiert:
- Eingeschobene Saetze mit Strichpaar. Nur der oeffnende Strich passte ins
Muster, der schliessende blieb als "—," stehen. Drei Stellen, jetzt mit
Klammern oder als eigener Satz.
- Doppelte Doppelpunkte, wo beide Striche eines Paars zu Doppelpunkten wurden
("Globale Regeln: Schrift, Groessen, Abstaende: kommen aus HiveGrid").
Sieben Stellen in Doku und Oberflaeche, jetzt in Klammern.
- Pfade, denen ein Komma statt eines Doppelpunkts folgte.
- Ausgerichtete Kommentartabellen, in denen der Strich eine Spalte war.
Nicht angefasst: drei Geviertstriche, die keine Prosa sind, sondern
Tabellenplatzhalter fuer "kein Wert" (Trichter, Auftraege, Kunden). Dort ist
der Strich die Angabe selbst; ihn zu entfernen liesse leere Zellen zurueck.
tsc, lint, build, verify:carbon und verify:layout laufen sauber.
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01QPeZNwSeU7qG3RRCwaxEZX
97 lines
3.3 KiB
TypeScript
97 lines
3.3 KiB
TypeScript
"use client";
|
|
|
|
import React from "react";
|
|
import { farbeFuer, farbe as paletteFarbe } from "../../utils/chartTheme";
|
|
import { ChartLeer } from "./ChartLeer";
|
|
|
|
/**
|
|
* Horizontale Balken für Rangfolgen (Top-Kunden, Aufträge je Gewerk).
|
|
*
|
|
* Bewusst als HTML/CSS statt Recharts: Kategorienamen sind hier lang und
|
|
* unterschiedlich breit; im SVG müsste man sie hart abschneiden. In HTML
|
|
* bleiben sie umbruchfähig, selektierbar und barrierefrei lesbar.
|
|
* Hover hebt den Balken hervor und zeigt den vollen Namen als Titel.
|
|
*/
|
|
export function BalkenHorizontal({
|
|
daten,
|
|
formatWert,
|
|
maxBalken = 6,
|
|
/**
|
|
* Einfarbig für Rangfolgen (Top-Kunden, Aufträge je Mitarbeiter):
|
|
* Dort trägt die Farbe keine Information und würde nur Unruhe erzeugen.
|
|
* Palette nur, wenn die Balken echte Kategorien sind.
|
|
*/
|
|
einfarbig = true,
|
|
farbeStart = 1,
|
|
/**
|
|
* Zweitwert rechts neben dem Hauptwert: z. B. Auftragswert neben der
|
|
* Anzahl Abschlüsse. Erspart eine zweite Karte mit derselben Kodierung
|
|
* auf derselben Personenachse.
|
|
*/
|
|
formatZweitwert,
|
|
}: {
|
|
daten: { name: string; value: number; zweitwert?: number }[];
|
|
formatWert: (wert: number) => string;
|
|
maxBalken?: number;
|
|
einfarbig?: boolean;
|
|
farbeStart?: number;
|
|
formatZweitwert?: (wert: number) => string;
|
|
}) {
|
|
const [aktiv, setAktiv] = React.useState<string | null>(null);
|
|
|
|
const sichtbar = [...daten]
|
|
.filter((d) => d.value > 0)
|
|
.sort((a, b) => b.value - a.value)
|
|
.slice(0, maxBalken);
|
|
|
|
if (!sichtbar.length) return <ChartLeer hoehe={180} />;
|
|
|
|
const max = Math.max(...sichtbar.map((d) => d.value));
|
|
|
|
return (
|
|
<ul className="flex flex-col gap-2.5">
|
|
{sichtbar.map((eintrag, index) => {
|
|
const anteil = max > 0 ? (eintrag.value / max) * 100 : 0;
|
|
const balkenFarbe = einfarbig
|
|
? paletteFarbe(1)
|
|
: farbeFuer(eintrag.name, farbeStart + index);
|
|
const hervorgehoben = aktiv === eintrag.name;
|
|
|
|
return (
|
|
<li
|
|
key={eintrag.name}
|
|
title={eintrag.name}
|
|
onMouseEnter={() => setAktiv(eintrag.name)}
|
|
onMouseLeave={() => setAktiv(null)}
|
|
className="grid grid-cols-[minmax(0,1fr)_auto] items-center gap-x-3 gap-y-1"
|
|
>
|
|
<span className="min-w-0 truncate text-[12px] text-text-neutral-secondary">
|
|
{eintrag.name}
|
|
</span>
|
|
<span className="flex items-baseline gap-2 whitespace-nowrap tabular-nums">
|
|
<span className="text-[12px] font-semibold text-text-neutral-primary">
|
|
{formatWert(eintrag.value)}
|
|
</span>
|
|
{formatZweitwert && eintrag.zweitwert !== undefined ? (
|
|
<span className="text-[12px] text-text-neutral-tertiary">
|
|
{formatZweitwert(eintrag.zweitwert)}
|
|
</span>
|
|
) : null}
|
|
</span>
|
|
<span className="col-span-2 block h-2.5 w-full overflow-hidden rounded-sm bg-neutral-100">
|
|
<span
|
|
className="block h-full rounded-r-sm transition-[width,opacity] duration-300"
|
|
style={{
|
|
width: `${Math.max(2, anteil)}%`,
|
|
background: balkenFarbe,
|
|
opacity: aktiv && !hervorgehoben ? 0.45 : 1,
|
|
}}
|
|
/>
|
|
</span>
|
|
</li>
|
|
);
|
|
})}
|
|
</ul>
|
|
);
|
|
}
|