These blocks preserve the metrics, counters, labels, and responsive composition of the original EvilCharts designs.

## Monthly Budget

### Monthly Budget

```svelte
<script lang="ts">
	import { EvilRadialChart } from '$lib/components/evilcharts/charts/layerchart-radial-chart/index.js';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart/index.js';

	const data = [
		{ name: 'payroll', label: 'Payroll', value: 46, amount: 920000, color: '#d97706' },
		{
			name: 'infrastructure',
			label: 'Infrastructure',
			value: 21,
			amount: 420000,
			color: '#2563eb'
		},
		{ name: 'marketing', label: 'Marketing', value: 14, amount: 280000, color: '#e11d48' },
		{ name: 'tooling', label: 'Tooling', value: 10, amount: 200000, color: '#64748b' },
		{ name: 'support', label: 'Support', value: 9, amount: 180000, color: '#0d9488' }
	];
	const config = Object.fromEntries(
		data.map(({ name, label, color }) => [
			name,
			{ label, colors: { light: [color], dark: [color] } }
		])
	) satisfies ChartConfig;
	const total = data.reduce((sum, { amount }) => sum + amount, 0);
	const money = (value: number) => value.toLocaleString('en-US');
</script>

<div
	class="@container flex h-full w-full min-w-0 flex-col gap-3 overflow-hidden p-3 sm:gap-5 sm:p-4"
>
	<div class="flex shrink-0 items-baseline justify-between gap-3">
		<span class="truncate text-base font-medium tracking-tight text-primary sm:text-lg"
			>Quarterly Spend</span
		>
		<span class="shrink-0 text-[10px] text-muted-foreground sm:text-xs">${money(total)}</span>
	</div>

	<div class="grid shrink-0 grid-cols-5 gap-1.5 sm:gap-2">
		{#each data as row (row.name)}
			<div class="flex min-w-0 flex-col items-center gap-1">
				<div class="aspect-square w-full max-w-14">
					<EvilRadialChart
						data={[row]}
						{config}
						nameKey="name"
						max={100}
						innerRadius="66%"
						outerRadius="100%"
						class="h-full w-full"
					>
						<EvilRadialChart.RadialBar dataKey="value" barSize={8} cornerRadius={6} />
					</EvilRadialChart>
				</div>
				<span class="w-full truncate text-center text-[9px] text-muted-foreground sm:text-[11px]"
					>{row.label}</span
				>
			</div>
		{/each}
	</div>

	<div class="flex min-h-0 flex-1 flex-col">
		{#each data as item (item.name)}
			<div class="flex min-h-0 flex-1 items-center gap-2 rounded-md px-2 odd:bg-muted/30 sm:px-3">
				<span class="size-2.5 shrink-0 rounded-[3px]" style:background={item.color}></span>
				<span class="text-[10px] font-medium text-primary tabular-nums sm:text-xs"
					>{item.value}%</span
				>
				<span class="truncate text-[10px] text-muted-foreground sm:text-xs">{item.label}</span>
				<span class="ml-auto shrink-0 text-[10px] font-medium text-primary sm:text-xs"
					>${money(item.amount)}</span
				>
			</div>
		{/each}
	</div>
</div>
```
### npm

```bash
npx shadcn-svelte@latest add @evilcharts/budget-radial-chart
```

### yarn

```bash
yarn dlx shadcn-svelte@latest add @evilcharts/budget-radial-chart
```

### bun

```bash
bunx --bun shadcn-svelte@latest add @evilcharts/budget-radial-chart
```

### pnpm

```bash
pnpm dlx shadcn-svelte@latest add @evilcharts/budget-radial-chart
```

## Ride Summary

### Ride Summary

```svelte
<script lang="ts">
	import { Bike, Gauge, Mountain, Moon, Zap } from '@lucide/svelte';
	import { EvilRadialChart } from '$lib/components/evilcharts/charts/layerchart-radial-chart/index.js';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart/index.js';

	const ride = { distance: 18.4, goal: 25, unit: 'km' };
	const metrics = [
		{ name: 'elevation', value: 312, goal: 450, unit: 'm', icon: Mountain, color: '#0284c7' },
		{ name: 'energy', value: 684, goal: 1200, unit: 'kJ', icon: Zap, color: '#d97706' },
		{ name: 'cadence', value: 82, goal: 95, unit: 'rpm', icon: Gauge, color: '#e11d48' }
	];
	const splits = [
		{ name: 'sprints', label: 'Sprints', value: '7', unit: 'efforts', color: '#7c3aed' },
		{ name: 'recovery', label: 'Recovery', value: '46', unit: 'min', color: '#0284c7' }
	];
	const config = Object.fromEntries(
		metrics.map(({ name, color }) => [
			name,
			{ label: name, colors: { light: [color], dark: [color] } }
		])
	) satisfies ChartConfig;
	const share = (value: number, goal: number) => Math.round((value / goal) * 100);
</script>

<div
	class="@container flex h-full w-full min-w-0 flex-col gap-2 overflow-hidden p-2 sm:p-4 @md:flex-row @md:gap-5"
>
	<div class="flex min-h-0 min-w-0 flex-1 flex-col gap-2 sm:gap-3">
		<div class="flex shrink-0 flex-col items-center gap-1">
			<Bike class="size-4 text-[#7c3aed] sm:size-6" />
			<div class="flex items-baseline gap-1.5">
				<span
					class="text-2xl leading-none font-semibold tracking-tight text-primary tabular-nums sm:text-4xl"
					>{ride.distance}</span
				>
				<span class="text-xs font-medium text-muted-foreground sm:text-sm">{ride.unit} ridden</span>
			</div>
			<div class="h-1.5 w-full overflow-hidden rounded-full bg-muted sm:h-2">
				<div
					class="h-full rounded-full bg-[#7c3aed]"
					style:width={`${share(ride.distance, ride.goal)}%`}
				></div>
			</div>
		</div>

		<div class="grid min-h-0 flex-1 grid-cols-3 gap-2 border-t pt-1.5 sm:pt-2">
			{#each metrics as metric (metric.name)}
				<div class="flex min-h-0 min-w-0 flex-col items-center justify-center gap-1">
					<div class="relative min-h-0 w-full max-w-24 flex-1">
						<EvilRadialChart
							data={[{ name: metric.name, value: share(metric.value, metric.goal) }]}
							{config}
							nameKey="name"
							max={100}
							innerRadius="70%"
							outerRadius="100%"
							class="h-full w-full"
						>
							<EvilRadialChart.RadialBar dataKey="value" barSize={9} cornerRadius={6} />
						</EvilRadialChart>
						<span
							class="pointer-events-none absolute inset-0 flex items-center justify-center"
							style:color={metric.color}
						>
							<metric.icon class="size-4 sm:size-5" />
						</span>
					</div>
					<div class="flex shrink-0 items-baseline gap-1">
						<span class="text-[10px] font-semibold text-primary tabular-nums sm:text-sm"
							>{metric.value}</span
						>
						<span class="text-[9px] text-muted-foreground sm:text-[10px]">{metric.unit}</span>
					</div>
				</div>
			{/each}
		</div>
	</div>

	<div
		class="flex shrink-0 gap-3 border-t pt-2 @md:w-[34%] @md:max-w-60 @md:border-t-0 @md:border-l @md:pt-0 @md:pl-5"
	>
		{#each splits as split, index (split.name)}
			<div
				class="flex min-w-0 flex-1 flex-col justify-between gap-1.5"
				class:border-l={index > 0}
				class:pl-3={index > 0}
			>
				{#if split.name === 'recovery'}
					<Moon class="size-4 shrink-0" style={`color:${split.color}`} />
				{:else}
					<Zap class="size-4 shrink-0" style={`color:${split.color}`} />
				{/if}
				<div class="flex min-w-0 flex-col gap-0.5">
					<span
						class="truncate text-[9px] tracking-wider text-muted-foreground uppercase sm:text-[10px]"
						>{split.label}</span
					>
					<div class="flex items-baseline gap-1">
						<span class="text-lg leading-none font-semibold text-primary tabular-nums sm:text-2xl"
							>{split.value}</span
						>
						<span class="text-[10px] text-muted-foreground">{split.unit}</span>
					</div>
				</div>
			</div>
		{/each}
	</div>
</div>
```
### npm

```bash
npx shadcn-svelte@latest add @evilcharts/ride-radial-chart
```

### yarn

```bash
yarn dlx shadcn-svelte@latest add @evilcharts/ride-radial-chart
```

### bun

```bash
bunx --bun shadcn-svelte@latest add @evilcharts/ride-radial-chart
```

### pnpm

```bash
pnpm dlx shadcn-svelte@latest add @evilcharts/ride-radial-chart
```

## Cache Tiers

### Cache Tiers

```svelte
<script lang="ts">
	import { EvilRadialChart } from '$lib/components/evilcharts/charts/layerchart-radial-chart/index.js';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/layerchart-chart/index.js';

	const total = 1000;
	const tiers = [
		{ name: 'memory', label: 'L1 Memory', count: 610, color: '#dc2626' },
		{ name: 'regional', label: 'L2 Regional', count: 240, color: '#d97706' },
		{ name: 'overflow', label: 'Edge Overflow', count: 100, color: '#2563eb' },
		{ name: 'origin', label: 'Origin Fetch', count: 50, color: '#94a3b8' }
	];
	const stats = [
		{ name: 'warm', label: 'Served Warm', value: 9150 },
		{ name: 'revalidated', label: 'Revalidated', value: 1280 },
		{ name: 'evictions', label: 'Evictions', value: 412 },
		{ name: 'purges', label: 'Purges', value: 96 }
	];
	const config = Object.fromEntries(
		tiers.map(({ name, label, color }) => [
			name,
			{ label, colors: { light: [color], dark: [color] } }
		])
	) satisfies ChartConfig;
	const data = [...tiers]
		.reverse()
		.map(({ name, count }) => ({ name, share: (count / total) * 100 }));
	const count = (value: number) => value.toLocaleString('en-US');
</script>

<div
	class="@container flex h-full w-full min-w-0 flex-col gap-2 overflow-hidden p-3 sm:gap-3 sm:p-4"
>
	<div class="flex min-h-0 flex-1 gap-2 sm:gap-4">
		<div class="relative min-h-0 min-w-0 flex-1 sm:-mb-10">
			<EvilRadialChart
				{data}
				{config}
				nameKey="name"
				variant="semi"
				max={100}
				innerRadius="38%"
				outerRadius="96%"
				class="h-full w-full"
			>
				<EvilRadialChart.RadialBar dataKey="share" barSize={10} cornerRadius={6} />
			</EvilRadialChart>
		</div>

		<div
			class="grid w-[43%] shrink-0 grid-cols-2 content-center gap-x-2 gap-y-3 sm:max-w-64 sm:gap-x-4 sm:gap-y-5"
		>
			{#each stats as stat (stat.name)}
				<div class="flex min-w-0 flex-col gap-1">
					<span class="truncate text-[9px] text-muted-foreground sm:text-sm">{stat.label}</span>
					<span class="text-sm leading-none font-medium text-primary tabular-nums sm:text-xl"
						>{count(stat.value)}</span
					>
				</div>
			{/each}
		</div>
	</div>

	<div
		class="grid shrink-0 grid-cols-2 gap-x-3 gap-y-1.5 border-t pt-2 sm:grid-cols-4 sm:gap-x-4 sm:gap-y-3 sm:pt-3"
	>
		{#each tiers as tier (tier.name)}
			<div class="flex min-w-0 flex-col gap-0.5 sm:gap-1">
				<div class="flex min-w-0 items-center gap-1.5">
					<span class="size-2.5 shrink-0 rounded-[3px]" style:background={tier.color}></span>
					<span class="truncate text-[10px] text-primary sm:text-xs">{tier.label}</span>
				</div>
				<span class="truncate text-[9px] text-muted-foreground tabular-nums sm:text-xs"
					>{count(tier.count)}/{count(total)} ({Math.round((tier.count / total) * 100)}%)</span
				>
			</div>
		{/each}
	</div>
</div>
```
### npm

```bash
npx shadcn-svelte@latest add @evilcharts/cache-tiers-radial-chart
```

### yarn

```bash
yarn dlx shadcn-svelte@latest add @evilcharts/cache-tiers-radial-chart
```

### bun

```bash
bunx --bun shadcn-svelte@latest add @evilcharts/cache-tiers-radial-chart
```

### pnpm

```bash
pnpm dlx shadcn-svelte@latest add @evilcharts/cache-tiers-radial-chart
```