huntabyte__shadcn-svelte/docs/static/registry/chart-pie-interactive.json

{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "chart-pie-interactive",
	"type": "registry:block",
	"devDependencies": [
		"layerchart@^2.0.0",
		"@lucide/svelte@^0.561.0"
	],
	"registryDependencies": [
		"chart",
		"card",
		"select"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport { Arc, PieChart, Text } from \"layerchart\";\n\timport TrendingUpIcon from \"@lucide/svelte/icons/trending-up\";\n\timport * as Chart from \"$UI$/chart/index.js\";\n\timport * as Card from \"$UI$/card/index.js\";\n\timport * as Select from \"$UI$/select/index.js\";\n\timport ChartStyle from \"../ui/chart/chart-style.svelte\";\n\n\tconst desktopData = [\n\t\t{ month: \"january\", desktop: 186, color: \"var(--color-january)\" },\n\t\t{ month: \"february\", desktop: 305, color: \"var(--color-february)\" },\n\t\t{ month: \"march\", desktop: 237, color: \"var(--color-march)\" },\n\t\t{ month: \"april\", desktop: 173, color: \"var(--color-april)\" },\n\t\t{ month: \"may\", desktop: 209, color: \"var(--color-may)\" },\n\t];\n\n\tconst chartConfig = {\n\t\tdesktop: { label: \"Desktop\" },\n\t\tjanuary: { label: \"January\", color: \"var(--chart-1)\" },\n\t\tfebruary: { label: \"February\", color: \"var(--chart-2)\" },\n\t\tmarch: { label: \"March\", color: \"var(--chart-3)\" },\n\t\tapril: { label: \"April\", color: \"var(--chart-4)\" },\n\t\tmay: { label: \"May\", color: \"var(--chart-5)\" },\n\t} satisfies Chart.ChartConfig;\n\n\tlet activeMonth = $state(desktopData[0].month);\n\n\tconst id = \"pie-interactive\";\n\n\tconst activeIndex = $derived(desktopData.findIndex((item) => item.month === activeMonth));\n\n\tconst months = $derived(desktopData.map((item) => item.month));\n</script>\n\n<Card.Root data-chart={id} class=\"flex flex-col\">\n\t<ChartStyle {id} config={chartConfig} />\n\t<Card.Header class=\"flex flex-row items-start space-y-0 pb-0\">\n\t\t<div class=\"grid gap-1\">\n\t\t\t<Card.Title>Pie Chart - Interactive</Card.Title>\n\t\t\t<Card.Description>January - June 2024</Card.Description>\n\t\t</div>\n\t\t<Select.Root type=\"single\" bind:value={activeMonth}>\n\t\t\t<Select.Trigger\n\t\t\t\tclass=\"ms-auto h-7 w-[130px] rounded-lg ps-2.5 text-sm\"\n\t\t\t\taria-label=\"Select a value\"\n\t\t\t>\n\t\t\t\t<span\n\t\t\t\t\tclass=\"flex h-3 w-3 shrink-0 rounded-sm\"\n\t\t\t\t\tstyle:background-color={`var(--color-${activeMonth})`}\n\t\t\t\t></span>\n\t\t\t\t{activeMonth\n\t\t\t\t\t? chartConfig[activeMonth as keyof typeof chartConfig].label\n\t\t\t\t\t: \"Select month\"}\n\t\t\t</Select.Trigger>\n\t\t\t<Select.Content align=\"end\" class=\"rounded-xl\">\n\t\t\t\t{#each months as month (month)}\n\t\t\t\t\t{@const config = chartConfig[month as keyof typeof chartConfig]}\n\n\t\t\t\t\t{#if config}\n\t\t\t\t\t\t<Select.Item\n\t\t\t\t\t\t\tvalue={month}\n\t\t\t\t\t\t\tlabel={config.label}\n\t\t\t\t\t\t\tclass=\"rounded-lg [&_span]:flex\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<div class=\"flex items-center gap-2 text-xs\">\n\t\t\t\t\t\t\t\t{config?.label}\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</Select.Item>\n\t\t\t\t\t{/if}\n\t\t\t\t{/each}\n\t\t\t</Select.Content>\n\t\t</Select.Root>\n\t</Card.Header>\n\t<Card.Content class=\"flex-1\">\n\t\t<Chart.Container {id} config={chartConfig} class=\"mx-auto aspect-square max-h-[250px]\">\n\t\t\t<PieChart\n\t\t\t\tdata={desktopData}\n\t\t\t\tlabel=\"month\"\n\t\t\t\tkey=\"month\"\n\t\t\t\tvalue=\"desktop\"\n\t\t\t\tc=\"color\"\n\t\t\t\tprops={{\n\t\t\t\t\tpie: {\n\t\t\t\t\t\tsort: (a, b) => {\n\t\t\t\t\t\t\tconst monthOrder = [\"january\", \"february\", \"march\", \"april\", \"may\"];\n\t\t\t\t\t\t\treturn monthOrder.indexOf(a.month) - monthOrder.indexOf(b.month);\n\t\t\t\t\t\t},\n\t\t\t\t\t\tmotion: \"tween\",\n\t\t\t\t\t},\n\t\t\t\t}}\n\t\t\t\tinnerRadius={60}\n\t\t\t\tpadding={29}\n\t\t\t>\n\t\t\t\t{#snippet aboveMarks()}\n\t\t\t\t\t<Text\n\t\t\t\t\t\tvalue={desktopData[activeIndex].desktop.toLocaleString()}\n\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\tverticalAnchor=\"middle\"\n\t\t\t\t\t\tclass=\"fill-foreground !text-3xl font-bold\"\n\t\t\t\t\t\tdy={3}\n\t\t\t\t\t/>\n\t\t\t\t\t<Text\n\t\t\t\t\t\tvalue=\"Visitors\"\n\t\t\t\t\t\ttextAnchor=\"middle\"\n\t\t\t\t\t\tverticalAnchor=\"middle\"\n\t\t\t\t\t\tclass=\"!fill-muted-foreground text-muted-foreground\"\n\t\t\t\t\t\tdy={22}\n\t\t\t\t\t/>\n\t\t\t\t{/snippet}\n\t\t\t\t{#snippet arc({ props, index })}\n\t\t\t\t\t{@const isActive = index === activeIndex}\n\t\t\t\t\t{@const arcProps = isActive\n\t\t\t\t\t\t? { ...props, outerRadius: 60, innerRadius: 105 }\n\t\t\t\t\t\t: props}\n\n\t\t\t\t\t{#if isActive}\n\t\t\t\t\t\t<g>\n\t\t\t\t\t\t\t<Arc {...arcProps} />\n\t\t\t\t\t\t\t<Arc {...arcProps} outerRadius={107} innerRadius={119} />\n\t\t\t\t\t\t</g>\n\t\t\t\t\t{:else}\n\t\t\t\t\t\t<Arc {...arcProps} />\n\t\t\t\t\t{/if}\n\t\t\t\t{/snippet}\n\t\t\t\t{#snippet tooltip()}\n\t\t\t\t\t<Chart.Tooltip\n\t\t\t\t\t\tlabelKey=\"visitors\"\n\t\t\t\t\t\tnameKey=\"month\"\n\t\t\t\t\t\tindicator=\"line\"\n\t\t\t\t\t\tlabelFormatter={(_, payload) => {\n\t\t\t\t\t\t\treturn chartConfig[payload?.[0].key as keyof typeof chartConfig].label;\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t{/snippet}\n\t\t\t</PieChart>\n\t\t</Chart.Container>\n\t</Card.Content>\n\t<Card.Footer class=\"flex-col gap-2 text-sm\">\n\t\t<div class=\"flex items-center gap-2 leading-none font-medium\">\n\t\t\tTrending up by 5.2% this month <TrendingUpIcon class=\"size-4\" />\n\t\t</div>\n\t\t<div class=\"text-muted-foreground leading-none\">\n\t\t\tShowing total visitors for the last 6 months\n\t\t</div>\n\t</Card.Footer>\n</Card.Root>\n",
			"type": "registry:component",
			"target": "chart-pie-interactive.svelte"
		}
	]
}