Meter

Synonyme: Messwert, Gauge, Messgerät

Die Meter-Komponente visualisiert einen Messwert innerhalb eines definierten Wertebereichs. Sie zeigt grafisch an, wie ein Messwert im Verhältnis zu seinen Grenzen positioniert ist, und kann optional verschiedene Zustände (optimal, suboptimal, kritisch) anzeigen.

Beispiel

Meter-Komponente mit Messwertanzeige und Zustandsindikator:

<KolMeter _high={80} _label="Auslastung" _low={30} _max={100} _min={0} _optimum={70} _unit="%" _value={65} />

Barrierefreiheit

Die Meter-Komponente wurde mit Fokus auf Barrierefreiheit entwickelt:

• Label-Pflicht: Jede Meter-Komponente muss über das Attribut _label eine sichtbare Beschriftung erhalten, die von Screenreadern erkannt wird.
• Semantische Ausgabe: Ein verstecktes <meter>-HTML-Element mit vollständigen Attributen sorgt dafür, dass auch assistive Technologien den Messwert verstehen können.
• Live-Wert-Ankündigung: Screenreader werden über Änderungen des Messwerts informiert (z.B. "Auslastung – kritisch").
• Zustandsindikation: Automatische Statusmeldung (optimum, suboptimal, kritisch) wird von assistiven Technologien mitgeteilt.
• Tastaturzugriff: Die Komponente bildet keine interaktiven Elemente ab, da sie nur Datendarstellung ist.

Links und Referenzen

Best Practices / Empfehlungen

• Aussagekräftiges Label: Verwenden Sie klare, verständliche Beschriftungen (z.B. „Auslastung", „Speicher", „Akku-Level").
• Sinnvolle Grenzen setzen: Definieren Sie _min und _max fachlich korrekt, um aussagekräftige Darstellungen zu erzeugen.
• Zustände nutzen: Verwenden Sie die Attribute _low, _high und _optimum, um Bereiche zu kennzeichnen – dies hilft Nutzern, kritische Zustände schnell zu erkennen.
• Eindeutige Einheit: Setzen Sie _unit auf eine verständliche Maßeinheit (z.B. %, GB, °C), um Missverständnisse zu vermeiden.
• Kontext bereitstellen: Ergänzen Sie die Meter-Komponente ggf. mit zusätzlichem Text, der den aktuellen Wert oder zeitliche Trends erklärt.
• Richtige Orientierung wählen: Nutzen Sie _orientation="vertical" nur, wenn der verfügbare Platz horizontal begrenzt ist; horizontal ist die Standarddarstellung.

Anwendungsfälle

• Systemauslastung: Anzeige von CPU-, RAM- oder Speicherauslastung.
• Batterielevel: Visualisierung des Akkustands von Geräten.
• Raumklima: Anzeige von Temperatur, Luftfeuchtigkeit oder Luftqualität.
• Fortschritt bei Grenzwerten: Visualisierung eines Wertes, der sich einer kritischen Grenze nähert (z.B. Lagerhaltung).
• Qualitätsindikatoren: Grafische Darstellung von Bewertungsmetriken mit definierten Grenzwerten.

Konstruktion / Technik

Funktionalitäten

Grundlegende Meter mit Wertbereich

Einfache Meter-Komponente mit Minimum, Maximum und aktuellem Wert:

<KolMeter _label="Speicherauslastung" _max={1024} _min={0} _unit="MB" _value={512} />

Meter mit Zustandsbereichen

• Zwischen _min=0 und _low=20 ist der niedrige Bereich
• Zwischen _low=20 und _high=70 ist der mittlere Bereich
• Zwischen _high=70 und _max=100 ist der hohe Bereich
• _optimum=10 legt den niedrigen Bereich als optimalen Bereich fest
• wenn _value=15 => optimum => Meter Farbe grün
• wenn _value=35 => suboptimum => Meter Farbe gelb
• wenn _value=85 => critical => Meter Farbe rot

<KolMeter _high={70} _label="CPU-Auslastung" _low={20} _max={100} _min={0} _optimum={10} _value={15} />

Vertikaler Meter

Meter-Komponente mit vertikaler Ausrichtung für platzsparende Layouts:

<KolMeter _label="Flüssigkeitsstand" _max={1000} _min={0} _orientation="vertical" _unit="l" _value={650} />

API

Properties

Property	Attribute	Description	Type	Default
_high	_high	Defines the upper boundary of the high range.	number | undefined	undefined
_label (required)	_label	Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.).	string	undefined
_low	_low	Defines the lower boundary of the low range.	number | undefined	undefined
_max (required)	_max	Defines the maximum value of the element.	number	undefined
_min	_min	Defines the minimum value of the element.	number | undefined	undefined
_optimum	_optimum	Defines the optimal value of the element.	number | undefined	undefined
_orientation	_orientation	Defines whether the meter bar is displayed horizontally or vertically.	"horizontal" | "vertical"	'horizontal'
_unit	_unit	Defines the unit of the step values (not shown).	string	'%'
_value (required)	_value	Defines the value of the element.	number	undefined

---