Sparkline

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

<Grid min="sm" gap="lg">
	<Stack data-gap="xs">
		<Text><strong>Requests/sec</strong></Text>
		<Sparkline values={[120, 145, 138, 167, 155, 189, 172, 198, 210, 205]} label="Request throughput over 10 minutes" />
		<Text size="sm" tone="muted">Peak 210 req/s</Text>
	</Stack>
	<Stack data-gap="xs">
		<Text><strong>Error rate</strong></Text>
		<Sparkline values={[0.5, 0.3, 0.4, 0.2, 0.1, 0.2, 0.1, 0.0, 0.1, 0.0]} label="Error rate over 10 minutes" />
		<Text size="sm" tone="muted">Current 0.0%</Text>
	</Stack>
	<Stack data-gap="xs">
		<Text><strong>Latency p95</strong></Text>
		<Sparkline values={[145, 138, 152, 141, 135, 148, 139, 142, 137, 140]} label="P95 latency over 10 minutes" />
		<Text size="sm" tone="muted">Current 140ms</Text>
	</Stack>
	<Stack data-gap="xs">
		<Text><strong>Active connections</strong></Text>
		<Sparkline values={[42, 45, 48, 51, 49, 53, 55, 52, 54, 56]} label="Active connections over 10 minutes" />
		<Text size="sm" tone="muted">Current 56</Text>
	</Stack>
</Grid>

<script lang="ts">
	import Sparkline from '@tcpsystems/ui/foundation/Sparkline';
	import Grid from '@tcpsystems/ui/foundation/Grid';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	import Text from '@tcpsystems/ui/foundation/Text';
	import Badge from '@tcpsystems/ui/foundation/Badge';
	import Cluster from '@tcpsystems/ui/foundation/Cluster';
</script>

<Grid min="sm" gap="lg">
	<Stack data-gap="xs">
		<Cluster>
			<Text><strong>Revenue (30d)</strong></Text>
			<Badge tone="ok">+23%</Badge>
		</Cluster>
		<Sparkline values={[12, 14, 13, 16, 15, 18, 17, 19, 21, 22, 20, 23, 25, 24, 26, 28, 27, 29, 31, 30, 32, 34, 33, 35, 37, 36, 38, 40, 39, 41]} label="Daily revenue over 30 days" />
		<Text size="sm" tone="muted">$41K today</Text>
	</Stack>

	<Stack data-gap="xs">
		<Cluster>
			<Text><strong>Signups (30d)</strong></Text>
			<Badge tone="warn">-5%</Badge>
		</Cluster>
		<Sparkline values={[85, 82, 88, 79, 84, 81, 86, 78, 83, 80, 85, 77, 82, 79, 84, 76, 81, 78, 83, 75, 80, 77, 82, 74, 79, 76, 78, 73, 75, 72]} label="Daily signups over 30 days" />
		<Text size="sm" tone="muted">72 today</Text>
	</Stack>

	<Stack data-gap="xs">
		<Cluster>
			<Text><strong>Churn rate (30d)</strong></Text>
			<Badge tone="danger">+1.2%</Badge>
		</Cluster>
		<Sparkline values={[2.1, 2.0, 2.2, 2.1, 2.3, 2.2, 2.4, 2.3, 2.5, 2.4, 2.6, 2.5, 2.7, 2.6, 2.8, 2.7, 2.9, 2.8, 3.0, 2.9, 3.1, 3.0, 3.2, 3.1, 3.3, 3.2, 3.4, 3.3, 3.5]} label="Daily churn rate over 30 days" />
		<Text size="sm" tone="muted">3.5% today</Text>
	</Stack>
</Grid>