Metric cards

Present a localized number, trend, percentage, and compact SVG history.

Start with your first page. Shared ui* providers are registered by createAdmin. Examples belong inside a route template, not the root HTML document. The page and its optional controller load through Atrium’s lazy route registry.

Minimal example

<div x-data="metricsPage">
  <template x-for="widget in metrics" :key="widget.id">
    <div><include src="{{ uiRoot }}/metric.html"></include></div>
  </template>
</div>

Settings and behavior

• Your page provider supplies metrics. The include reads the current widget variable.
• Fields are id, label, value, unit, percent, series, icon, tone, description, trend, and optional decimals and period.
• label and description are translation keys.
• Use null for unavailable values rather than zero.
• Keep percent between 0 and 100 for matching visual and accessible progress values.
• series is an array of observations. Missing samples do not become real measurements.

Integration notes

For example, one widget can have value: 42, unit: “ms”, percent: 42, series: [35, 50, 42], icon: “activity”, tone: “cyan”, and translated label/description keys. Consumers own refresh timers and must release them in destroy().

Working reference

See the production example. Return to the component index.

Author

Laurent Declercq l.declercq@agon-innovation.ch

License

Unless otherwise stated all source code is licensed under LGPL 2.1 and has the following copyright:

© 2026, Agon Partners Innovation AG, All rights reserved.

The design material and the “Agon Ātrium” trademark is the property of their authors. Reuse of them without prior consent of their respective authors is strictly prohibited.

Version

Version: 20260921