Canvas Design System
Main Site Tokens

Energy Arc Card

Retrospective/analytics card used in the Coach and Facilitator apps to summarize the "energy arc" of a workshop session. Four regions: an eyebrow header (label + progress + status), a score row (large italic score + interpretive badge), a sparkline chart with time-axis labels, and a 2×2 grid of bar-fill metrics.

Canonical

Light-surface default, matching the facilitator retrospective view. Tinted-pill badge, accent-colored chart + metric bars, 340px max width.

ENERGY ARC 8 OF 8H USED COMPLETE
82 / 100
Needs Work
9:00 10:30 1:00 5:00
PACING ~17m
VARIETY 3/7
RECOVERY 55m
ENGAGEMENT 63% 
<?= ws_energy_arc_card([
    'eyebrow'    => 'Energy Arc',
    'timeUsed'   => '8 of 8h used',
    'status'     => ['text' => 'Complete', 'type' => 'success'],
    'score'      => 82,
    'scoreBadge' => ['text' => 'Needs Work', 'type' => 'warning'],
    'chartData'  => [
        ['time' => '9:00',  'value' => 48],
        ['time' => '10:30', 'value' => 88],
        ['time' => '12:00', 'value' => 70],
        ['time' => '1:00',  'value' => 62],
        ['time' => '3:00',  'value' => 82],
        ['time' => '5:00',  'value' => 92],
    ],
    'timeLabels' => ['9:00', '10:30', '1:00', '5:00'],
    'metrics' => [
        ['label' => 'Pacing',     'value' => '~17m', 'fill' => 30],
        ['label' => 'Variety',    'value' => '3/7',  'fill' => 43],
        ['label' => 'Recovery',   'value' => '55m',  'fill' => 70],
        ['label' => 'Engagement', 'value' => '63%',  'fill' => 63],
    ],
]) ?>

Dark Theme

Alternate surface for presentation mode and dark dashboards. Badges and bars lift via a tinted-on-dark treatment.

ENERGY ARC 6 OF 8H USED IN PROGRESS
71 / 100
On Track
9:00 11:00 1:00 3:00
PACING ~12m
VARIETY 4/7
RECOVERY 40m
ENGAGEMENT 71%

Score Tiers

The score badge signals interpretation at a glance. Pick type by score threshold: Excellent (success), On Track (info), Needs Work (warning), At Risk (danger). Badges use tinted pills; the tint pair is automatic per type.

ENERGY ARC 8 OF 8H USED COMPLETE
94 / 100
Excellent
9:00 12:00 3:00
PACING ~10m
VARIETY 6/7
RECOVERY 40m
ENGAGEMENT 91%
ENERGY ARC 4 OF 8H USED AT RISK
42 / 100
At Risk
9:00 11:00 1:00
PACING ~32m
VARIETY 1/7
RECOVERY 15m
ENGAGEMENT 38%

API Reference

OptionTypeDefaultDescription
eyebrowstring'Energy Arc'Top-left label (rendered uppercased).
timeUsedstring—Middle-top muted text (e.g. '8 of 8h used').
statusarray—['text' => 'Complete', 'type' => 'success']. Types: success, warning, danger, info, neutral.
scoreint0Score value (0..scoreMax). Required.
scoreMaxint100Denominator.
scoreBadgearray—['text' => 'Needs Work', 'type' => 'warning']. Same types as status.
chartDataarray[]Array of ['time' => string, 'value' => 0..100]. Values are clamped.
timeLabelsarray[]Strings rendered below the chart as x-axis ticks (evenly spaced).
metricsarray[]Up to 4 items: ['label','value','fill' (0..100), optional 'barColor'].
themestring'dark''dark' (canonical) or 'light'.
accentstringtheme defaultOverride accent color (inline CSS variable).
id / class / attrsstring / string / array—Standard passthrough.

Design Guidance

Do

  • Place this card at the top of the Coach retrospective view — it's the summary the facilitator sees first.
  • Drive scoreBadge.type from the score itself so color reinforces the number: 85+ success, 70+ info, 50+ warning, <50 danger.
  • Pass 4–8 chart points for a readable arc. Fewer than 4 becomes a flat line; more than 10 loses definition at this card width.
  • Keep metric values tight (3–5 chars): ~17m, 3/7, 63%.

Don't

  • Don't reuse this card for generic score displays — it carries specific session-retrospective semantics. Use ws_stat or ws_feature_card for generic numbers.
  • Don't stretch the card wider than 360–400px — the chart and metric grid are tuned for that width.
  • Don't hardcode chart colors per tier. The accent follows the theme; tier meaning goes on the badge, not the line.