Sparkline

Overview

Show compact recent direction without axes. It converts domain state into an understandable, traceable and accessible interface contract.

When to use

Use HE/Sparkline when you need to show compact recent direction without axes. Keep its role distinct from transport freshness, animal-health severity and model confidence.

Example

<svg class="he-sparkline" viewBox="0 0 100 40" role="img" aria-label="Temperature trend stable"><path d="M0 25 C15 22 25 24 38 18 S60 22 72 15 S90 17 100 12"></path></svg>

Anatomy

Anatomy stays identical in Pasture and Atlantic. A responsive layout may wrap or stack parts, but reading order and focus order remain equivalent.

Variants and states

Accessibility

Treat the visual as decorative and provide a nearby text trend summary.

• Maintain a visible keyboard focus indicator and a logical focus sequence.
• Never rely on colour alone for operational, freshness or severity state.
• Keep touch targets at least 44 × 44 px unless the target is an inline text link.

Cross-platform contract

Related components