Dashboard-style metrics

This example shows a tiny dashboard-style layout: a few metrics displayed as cards. The data lives in the data attribute, and each card is rendered with *for and simple conditions.

Sample: simple metric cards

The snippet below defines a list of metrics in data.metrics. Each metric has a label, a numeric value, and a level that controls the status text.

Code

<serc-rod data='{"metrics":[
	{"label":"Open issues","value":12,"level":"warn"},
	{"label":"Today's signups","value":37,"level":"ok"},
	{"label":"Error rate","value":0.3,"unit":"%","level":"alert"},
	{"label":"Last deploy (hours ago)","value":2,"level":"ok"}
]}'>
	<section>
		<ul>
			<li *for="m of metrics">
				<h3>%m.label%</h3>
				<p>
					<strong *print="m.value"></strong>
					<span *if="m.unit"> %m.unit%</span>
				</p>
				<p>
					<span *if="m.level === 'alert'">Alert</span>
					<span *elseif="m.level === 'warn'">Check soon</span>
					<span *else>OK</span>
				</p>
			</li>
		</ul>
	</section>
</serc-rod>

Live sample

You can later replace the static metrics array with data from a JSON API by using *fetch. The structure of the cards can stay the same.