Stat

<script lang="ts">
	import Stat from '@tcpsystems/ui/foundation/Stat';
	import Sparkline from '@tcpsystems/ui/foundation/Sparkline';
	import Grid from '@tcpsystems/ui/foundation/Grid';
</script>

<Grid min="sm" gap="lg">
	<Stat label="Total revenue" value="$124.7K" unit="USD" delta="+12.3%" deltaTone="good" foot="vs last month" />
	<Stat label="Active deployments" value="47" delta="+3" deltaTone="good" foot="since yesterday" />
	<Stat label="Error rate" value="0.24" unit="%" delta="-0.08%" deltaTone="good" foot="24h window" />
	<Stat label="Avg response time" value="142" unit="ms" delta="+12ms" deltaTone="bad" foot="p95 latency" />
</Grid>

<script lang="ts">
	import Stat from '@tcpsystems/ui/foundation/Stat';
	import Sparkline from '@tcpsystems/ui/foundation/Sparkline';
	import Grid from '@tcpsystems/ui/foundation/Grid';
</script>

<Grid min="sm" gap="lg">
	<Stat
		label="CPU usage"
		value="68"
		unit="%"
		delta="+5%"
		deltaTone="bad"
		foot="7-day trend"
	>
		{#snippet spark()}
			<Sparkline values={[45, 52, 48, 61, 55, 63, 68]} label="CPU usage over 7 days" />
		{/snippet}
	</Stat>
	<Stat
		label="Memory usage"
		value="4.2"
		unit="GB"
		delta="-0.3 GB"
		deltaTone="good"
		foot="7-day trend"
	>
		{#snippet spark()}
			<Sparkline values={[4.8, 4.6, 4.5, 4.3, 4.4, 4.1, 4.2]} label="Memory usage over 7 days" />
		{/snippet}
	</Stat>
	<Stat
		label="Request throughput"
		value="1,234"
		unit="req/s"
		delta="+234"
		deltaTone="good"
		foot="7-day trend"
	>
		{#snippet spark()}
			<Sparkline values={[890, 950, 1020, 980, 1100, 1180, 1234]} label="Throughput over 7 days" />
		{/snippet}
	</Stat>
</Grid>