WAfM components

Score scale

Compose 1–9 scales with reference bands, centered participant dots, and optional averages.

Score scale playground

Start with tied scores, then change values, omit a result, or show the average.

Arbeitshaltung

Alina: 7
Elias: 7

Skala ausgewählt

Properties

Dots retain their participant colors. Equal scores sit side by side; missing results have no dot. Tab to the scale and press Enter or Space to toggle its selected state. These are synthetic example scores.

Usage and props

Import shared components from @wafm/ui. Keep workflow state and data fetching in the application.

ScoreScale

import { ScoreScale, ScoreScaleTrack, ScoreScaleBand, ScoreScaleMarker, ScoreScaleAxis, ScoreScaleGroup } from '@wafm/ui/components/score-scale'

<ScoreScaleGroup aria-label="Arbeitshaltung">
  <h2>Arbeitshaltung</h2>
  <ScoreScaleAxis />
  <ScoreScale label="Sorgfalt" active={selected} onClick={selectDimension}
    aria-label="Sorgfalt. Alina: 7 von 9">
    <ScoreScaleTrack>
      <ScoreScaleBand from={4} to={6} />
      <ScoreScaleMarker value={7} color="--wafm-attendee-1" label="Alina" />
    </ScoreScaleTrack>
  </ScoreScale>
</ScoreScaleGroup>

label: Required ReactNode in the fixed 8.5rem label column. Children compose the track and markers.
active: Optional boolean mapped to aria-pressed and selected styling. The caller controls the active dimension.
onClick / disabled / aria-label / HTML button props: Keyboard activation uses Enter or Space. Give the row an accessible description of scores and missing results. Disabled prevents activation; className extends layout.

ScoreScaleTrack

<ScoreScaleTrack>
  <ScoreScaleBand from={4} to={6} />
  {markers}
</ScoreScaleTrack>

children / className / HTML span props: 32px track with nine equal cells and selected/focus styling inherited from ScoreScale. Markers sit on its centerline; the track has no data logic.

ScoreScaleBand

<ScoreScaleBand from={4} to={6} />

from / to: Required numbers identifying inclusive cell boundaries. Bounds are ordered and clamped to the 1–9 scale. The middle third uses 4 through 6.
className: Optional styling override. The band is decorative and hidden from assistive technology; explain any meaning in caller-provided copy.

ScoreScaleMarker

import { scoreMarkerPlacement } from '@wafm/ui/lib/score-scale'

// Supply all row values, including an average if displayed.
const values = [7, 7]
<ScoreScaleMarker value={7} color="--wafm-attendee-1" label="Alina"
  {...scoreMarkerPlacement(values, 0)} />
<ScoreScaleMarker value={7} color="--wafm-attendee-2" label="Elias"
  {...scoreMarkerPlacement(values, 1)} />

value / color / label: Required finite score, CSS custom-property name (for example --wafm-attendee-1), and participant label. A solid 12px dot uses the score cell center. The value is clamped to 1–9; label and value are available as a title and screen-reader text.
offset / groupSize: Defaults: 0px and 1. Use scoreMarkerPlacement(values, index) to spread equal scores horizontally in 12px steps. Missing values do not reserve space. Group size keeps tied dots inside track edges.
average: Defaults to false. Renders a smaller diamond to distinguish an average. Calculate averages in the caller, excluding missing results. Omit missing markers entirely rather than passing zero.

ScoreScaleAxis

<ScoreScaleAxis />

className / HTML div props: Aligned 1–9 labels with the same label column and gap as ScoreScale. Decorative; include scale bounds in the row’s accessible description.

ScoreScaleGroup

<ScoreScaleGroup aria-labelledby="work-heading">
  <h2 id="work-heading">Arbeitshaltung</h2>
  {rows}
</ScoreScaleGroup>

children / className / HTML section props: Section with consistent spacing between a caller-provided heading and rows. Supply aria-label or aria-labelledby to name the group.