## Fund Allocation

### Fund Allocation

```svelte
<script lang="ts">
	import {
		EChartsSankeyChart,
		type SankeyData
	} from '$lib/components/evilcharts/charts/echarts-sankey-chart/index.js';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/echarts-chart/index.js';

	const data: SankeyData = {
		nodes: [
			{ name: 'Inflow' },
			{ name: 'Equities' },
			{ name: 'Bonds' },
			{ name: 'Cash' },
			{ name: 'Growth' },
			{ name: 'Income' },
			{ name: 'Reserve' }
		],
		links: [
			{ source: 0, target: 1, value: 78 },
			{ source: 0, target: 2, value: 46 },
			{ source: 0, target: 3, value: 24 },
			{ source: 1, target: 4, value: 52 },
			{ source: 1, target: 5, value: 26 },
			{ source: 2, target: 5, value: 19 },
			{ source: 2, target: 6, value: 27 },
			{ source: 3, target: 4, value: 9 },
			{ source: 3, target: 6, value: 15 }
		]
	};
	const palette: Record<string, string> = {
		Inflow: '#0d9488',
		Equities: '#d97706',
		Bonds: '#ea580c',
		Cash: '#b45309',
		Growth: '#7c3aed',
		Income: '#6d28d9',
		Reserve: '#4f46e5'
	};
	const config = Object.fromEntries(
		data.nodes.map(({ name }) => [
			name,
			{ label: name, colors: { light: [palette[name]], dark: [palette[name]] } }
		])
	) satisfies ChartConfig;
	const stats = [
		{ key: 'positions', label: 'Open positions', value: '204' },
		{ key: 'aum', label: 'Assets under management', value: '$65,430' },
		{ key: 'hedged', label: 'Hedged', value: '87%' }
	];
</script>

<div class="flex h-full w-full flex-col p-4">
	<div class="flex items-baseline justify-between gap-4">
		<span class="text-base font-medium tracking-tight text-primary sm:text-lg">
			Where the fund flows
		</span>
		<span class="text-xs text-muted-foreground">Quarter to date</span>
	</div>

	<div class="mt-2 min-h-0 w-full flex-1">
		<EChartsSankeyChart
			{data}
			{config}
			class="h-full w-full"
			nodeWidth={92}
			nodePadding={12}
			linkCurvature={0.55}
		>
			<EChartsSankeyChart.Tooltip variant="frosted-glass" />
			<EChartsSankeyChart.Link variant="gradient" />
			<EChartsSankeyChart.Node radius={6}>
				<EChartsSankeyChart.NodeLabel
					position="inside"
					showValues
					valueFormatter={(value) => `$${(value * 1000).toLocaleString('en-US')}`}
				/>
			</EChartsSankeyChart.Node>
		</EChartsSankeyChart>
	</div>

	<div class="mt-3 grid shrink-0 grid-cols-3 gap-4">
		{#each stats as stat, index (stat.key)}
			<div
				class="flex flex-col gap-0.5"
				class:items-center={index === 1}
				class:text-center={index === 1}
				class:items-end={index === 2}
				class:text-right={index === 2}
			>
				<span
					class="truncate text-[10px] tracking-wide text-muted-foreground uppercase sm:text-[11px]"
					>{stat.label}</span
				>
				<span class="text-lg font-semibold tracking-tight text-primary sm:text-2xl"
					>{stat.value}</span
				>
			</div>
		{/each}
	</div>
</div>
```
### npm

```bash
npx shadcn-svelte@latest add @evilcharts/allocation-echarts-sankey-chart
```

### yarn

```bash
yarn dlx shadcn-svelte@latest add @evilcharts/allocation-echarts-sankey-chart
```

### bun

```bash
bunx --bun shadcn-svelte@latest add @evilcharts/allocation-echarts-sankey-chart
```

### pnpm

```bash
pnpm dlx shadcn-svelte@latest add @evilcharts/allocation-echarts-sankey-chart
```

## Revenue Pipeline

### Revenue Pipeline

```svelte
<script lang="ts">
	import {
		EChartsSankeyChart,
		type SankeyData
	} from '$lib/components/evilcharts/charts/echarts-sankey-chart/index.js';
	import { type ChartConfig } from '$lib/components/evilcharts/ui/echarts-chart/index.js';

	const data: SankeyData = {
		nodes: [
			{ name: 'Retail' },
			{ name: 'Wholesale' },
			{ name: 'Licensing' },
			{ name: 'Services' },
			{ name: 'Pipeline' },
			{ name: 'Expansion' },
			{ name: 'Tooling' },
			{ name: 'Support' },
			{ name: 'Reserve' }
		],
		links: [
			{ source: 0, target: 4, value: 31480 },
			{ source: 1, target: 4, value: 46220 },
			{ source: 2, target: 4, value: 14960 },
			{ source: 3, target: 4, value: 28340 },
			{ source: 4, target: 5, value: 52640 },
			{ source: 4, target: 6, value: 9180 },
			{ source: 4, target: 7, value: 12470 },
			{ source: 4, target: 8, value: 46710 }
		]
	};
	const palette: Record<string, string> = {
		Retail: '#1d4ed8',
		Wholesale: '#2563eb',
		Licensing: '#4338ca',
		Services: '#4f46e5',
		Pipeline: '#6d28d9',
		Expansion: '#be123c',
		Tooling: '#c2410c',
		Support: '#9f1239',
		Reserve: '#b91c1c'
	};
	const config = Object.fromEntries(
		data.nodes.map(({ name }) => [
			name,
			{
				label: name === 'Pipeline' ? '' : name,
				colors: { light: [palette[name]], dark: [palette[name]] }
			}
		])
	) satisfies ChartConfig;
	const total = data.links
		.filter((link) => link.target === 4)
		.reduce((sum, link) => sum + link.value, 0);
</script>

<div class="relative h-full w-full p-4">
	<EChartsSankeyChart
		{data}
		{config}
		class="h-full w-full"
		nodeWidth={10}
		nodePadding={18}
		linkCurvature={0.55}
	>
		<EChartsSankeyChart.Tooltip variant="frosted-glass" />
		<EChartsSankeyChart.Link variant="gradient" />
		<EChartsSankeyChart.Node radius={5}>
			<EChartsSankeyChart.NodeLabel
				position="outside"
				showValues
				valueFormatter={(value) => `$${value.toLocaleString('en-US')}`}
			/>
		</EChartsSankeyChart.Node>
	</EChartsSankeyChart>

	<div class="pointer-events-none absolute inset-0 flex items-stretch justify-center">
		<div
			class="flex h-full flex-col items-center justify-center bg-[linear-gradient(to_right,transparent_0%,var(--background)_32%,var(--background)_68%,transparent_100%)] px-14"
		>
			<span class="text-[11px] text-muted-foreground sm:text-xs">Total booked</span>
			<span class="text-2xl leading-none font-semibold tracking-tight text-primary sm:text-4xl"
				>${total.toLocaleString('en-US')}</span
			>
			<span class="mt-1 text-[11px] text-muted-foreground sm:text-xs">4 sources · 4 routes</span>
		</div>
	</div>
</div>
```
### npm

```bash
npx shadcn-svelte@latest add @evilcharts/pipeline-echarts-sankey-chart
```

### yarn

```bash
yarn dlx shadcn-svelte@latest add @evilcharts/pipeline-echarts-sankey-chart
```

### bun

```bash
bunx --bun shadcn-svelte@latest add @evilcharts/pipeline-echarts-sankey-chart
```

### pnpm

```bash
pnpm dlx shadcn-svelte@latest add @evilcharts/pipeline-echarts-sankey-chart
```