Kompetenz-Balkendiagramm

Vertikales Balkendiagramm zur Darstellung der Verteilung von Kompetenzstufen. Jede Stufe erhält eine farblich kodierte Säule.

---

Screenshot

---

API-Bezug

Die Daten stammen aus dem Endpunkt:

GET /groups/{id}/competence-levels
GET /schools/{id}/competence-levels

Das Mapping von API-Feldern auf die Komponente:

Komponenten-Feld	API-Feld
level	competenceLevels[].nameShort
count	competenceLevels[].frequency

---

Farbgebung

Stufe	Bedeutung	Farbe
Ia, Ib, I	Unter Mindeststandard	Rot
II	Mindeststandard	Gelb
III	Regelstandard	Hellgrün
IV	Regelstandard Plus	Grün
V	Optimalstandard	Dunkelgrün

Die Farben werden über CSS Custom Properties definiert (--bs-competence-level-1 bis --bs-competence-level-5).

---

Übernahme

• Komponente: CompetenceBarChartComponent (Selektor: app-competence-bar-chart)
• Inputs:
  • data -- Array mit level (Stufenname) und count (Anzahl)
  • title -- optionaler Titel für Barrierefreiheit

<app-competence-bar-chart [data]="competenceLevels" title="Mathematik" />