Vergleichsstatistik: Replace metric boxes with stacked bar chart

[Copilot]

The card detail view showed Siegespunkte and Stichpunkte as two separate numeric boxes. These are replaced with a single horizontal stacked bar chart (consistent with the Budget bar style) that visualizes all three outcome categories at a glance. The same bar is also shown in the card overview (Kartenübersicht).

Changes

• app/page.tsx — Replace the 2-column grid (Siegespunkte / Stichpunkte) with a flex-based stacked bar inside the "Vergleichsstatistik" section (detail view and card overview):
  • 🟢 Green segment: siegespunkte (wins, normalized to 100)
  • 🟡 Yellow segment: stichpunkte (ties, normalized to 100)
  • 🔴 Red segment: niederlagenpunkte = max(0, 100 − siegespunkte − stichpunkte)
  • Color-coded label: Siege / Stiche / Niederlagen
  • Absolute counts (wins / ties / losses) displayed below the bar in both views
• .gitignore — Added out/ to exclude Next.js static export artifacts

const niederlagenpunkte = Math.max(0, 100 - m.siegespunkte - m.stichpunkte);
const totalLosses = m.totalComparisons - m.totalWins - m.totalTies;
// ...
<div className="h-2 rounded-full overflow-hidden flex bg-[#1a1a1a]/5">
  <div className="h-full bg-green-500"  style={{ width: `${m.siegespunkte}%` }} />
  <div className="h-full bg-yellow-400" style={{ width: `${m.stichpunkte}%` }} />
  <div className="h-full bg-red-500"    style={{ width: `${niederlagenpunkte}%` }} />
</div>

Screenshots

Card overview (Kartenübersicht):

Single card detail view:

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Lotes]

@copilot Nimm folgende Farben:

• Siege: grün
• Stiche: gelb
• Niederlagen: rot
  So dass es zum Stil der Seite passt.
  In der Kartenübersicht sollen die Karten auch diese Balken enthalten. Die absoluten Zahlen sollen sowohl in der Kartenansicht als auch in der Einzelansicht unterhalb der Balken stehen.

[Copilot]

@copilot Nimm folgende Farben:

• Siege: grün
• Stiche: gelb
  ...

Done in cd67fc4. Colors are now green (Siege) / yellow (Stiche) / red (Niederlagen). The stacked bar + absolute counts appear in both the card overview and the detail view.

Kartenübersicht:

Einzelansicht:

[github-actions]

PR Preview Action v1.8.1
Preview removed because the pull request was closed.
2026-03-12 19:30 UTC