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

{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "chart-line-interactive",
	"type": "registry:block",
	"devDependencies": [
		"d3-scale@^4.0.2",
		"@types/d3-scale@^4.0.9",
		"layerchart@^2.0.0",
		"d3-shape@^3.2.0",
		"@types/d3-shape@^3.1.7"
	],
	"registryDependencies": [
		"chart",
		"card"
	],
	"files": [
		{
			"content": "<script lang=\"ts\">\n\timport * as Chart from \"$UI$/chart/index.js\";\n\timport * as Card from \"$UI$/card/index.js\";\n\timport { scaleUtc } from \"d3-scale\";\n\timport { LineChart } from \"layerchart\";\n\timport { curveNatural } from \"d3-shape\";\n\n\tconst chartData = [\n\t\t{ date: new Date(\"2024-04-01\"), desktop: 222, mobile: 150 },\n\t\t{ date: new Date(\"2024-04-02\"), desktop: 97, mobile: 180 },\n\t\t{ date: new Date(\"2024-04-03\"), desktop: 167, mobile: 120 },\n\t\t{ date: new Date(\"2024-04-04\"), desktop: 242, mobile: 260 },\n\t\t{ date: new Date(\"2024-04-05\"), desktop: 373, mobile: 290 },\n\t\t{ date: new Date(\"2024-04-06\"), desktop: 301, mobile: 340 },\n\t\t{ date: new Date(\"2024-04-07\"), desktop: 245, mobile: 180 },\n\t\t{ date: new Date(\"2024-04-08\"), desktop: 409, mobile: 320 },\n\t\t{ date: new Date(\"2024-04-09\"), desktop: 59, mobile: 110 },\n\t\t{ date: new Date(\"2024-04-10\"), desktop: 261, mobile: 190 },\n\t\t{ date: new Date(\"2024-04-11\"), desktop: 327, mobile: 350 },\n\t\t{ date: new Date(\"2024-04-12\"), desktop: 292, mobile: 210 },\n\t\t{ date: new Date(\"2024-04-13\"), desktop: 342, mobile: 380 },\n\t\t{ date: new Date(\"2024-04-14\"), desktop: 137, mobile: 220 },\n\t\t{ date: new Date(\"2024-04-15\"), desktop: 120, mobile: 170 },\n\t\t{ date: new Date(\"2024-04-16\"), desktop: 138, mobile: 190 },\n\t\t{ date: new Date(\"2024-04-17\"), desktop: 446, mobile: 360 },\n\t\t{ date: new Date(\"2024-04-18\"), desktop: 364, mobile: 410 },\n\t\t{ date: new Date(\"2024-04-19\"), desktop: 243, mobile: 180 },\n\t\t{ date: new Date(\"2024-04-20\"), desktop: 89, mobile: 150 },\n\t\t{ date: new Date(\"2024-04-21\"), desktop: 137, mobile: 200 },\n\t\t{ date: new Date(\"2024-04-22\"), desktop: 224, mobile: 170 },\n\t\t{ date: new Date(\"2024-04-23\"), desktop: 138, mobile: 230 },\n\t\t{ date: new Date(\"2024-04-24\"), desktop: 387, mobile: 290 },\n\t\t{ date: new Date(\"2024-04-25\"), desktop: 215, mobile: 250 },\n\t\t{ date: new Date(\"2024-04-26\"), desktop: 75, mobile: 130 },\n\t\t{ date: new Date(\"2024-04-27\"), desktop: 383, mobile: 420 },\n\t\t{ date: new Date(\"2024-04-28\"), desktop: 122, mobile: 180 },\n\t\t{ date: new Date(\"2024-04-29\"), desktop: 315, mobile: 240 },\n\t\t{ date: new Date(\"2024-04-30\"), desktop: 454, mobile: 380 },\n\t\t{ date: new Date(\"2024-05-01\"), desktop: 165, mobile: 220 },\n\t\t{ date: new Date(\"2024-05-02\"), desktop: 293, mobile: 310 },\n\t\t{ date: new Date(\"2024-05-03\"), desktop: 247, mobile: 190 },\n\t\t{ date: new Date(\"2024-05-04\"), desktop: 385, mobile: 420 },\n\t\t{ date: new Date(\"2024-05-05\"), desktop: 481, mobile: 390 },\n\t\t{ date: new Date(\"2024-05-06\"), desktop: 498, mobile: 520 },\n\t\t{ date: new Date(\"2024-05-07\"), desktop: 388, mobile: 300 },\n\t\t{ date: new Date(\"2024-05-08\"), desktop: 149, mobile: 210 },\n\t\t{ date: new Date(\"2024-05-09\"), desktop: 227, mobile: 180 },\n\t\t{ date: new Date(\"2024-05-10\"), desktop: 293, mobile: 330 },\n\t\t{ date: new Date(\"2024-05-11\"), desktop: 335, mobile: 270 },\n\t\t{ date: new Date(\"2024-05-12\"), desktop: 197, mobile: 240 },\n\t\t{ date: new Date(\"2024-05-13\"), desktop: 197, mobile: 160 },\n\t\t{ date: new Date(\"2024-05-14\"), desktop: 448, mobile: 490 },\n\t\t{ date: new Date(\"2024-05-15\"), desktop: 473, mobile: 380 },\n\t\t{ date: new Date(\"2024-05-16\"), desktop: 338, mobile: 400 },\n\t\t{ date: new Date(\"2024-05-17\"), desktop: 499, mobile: 420 },\n\t\t{ date: new Date(\"2024-05-18\"), desktop: 315, mobile: 350 },\n\t\t{ date: new Date(\"2024-05-19\"), desktop: 235, mobile: 180 },\n\t\t{ date: new Date(\"2024-05-20\"), desktop: 177, mobile: 230 },\n\t\t{ date: new Date(\"2024-05-21\"), desktop: 82, mobile: 140 },\n\t\t{ date: new Date(\"2024-05-22\"), desktop: 81, mobile: 120 },\n\t\t{ date: new Date(\"2024-05-23\"), desktop: 252, mobile: 290 },\n\t\t{ date: new Date(\"2024-05-24\"), desktop: 294, mobile: 220 },\n\t\t{ date: new Date(\"2024-05-25\"), desktop: 201, mobile: 250 },\n\t\t{ date: new Date(\"2024-05-26\"), desktop: 213, mobile: 170 },\n\t\t{ date: new Date(\"2024-05-27\"), desktop: 420, mobile: 460 },\n\t\t{ date: new Date(\"2024-05-28\"), desktop: 233, mobile: 190 },\n\t\t{ date: new Date(\"2024-05-29\"), desktop: 78, mobile: 130 },\n\t\t{ date: new Date(\"2024-05-30\"), desktop: 340, mobile: 280 },\n\t\t{ date: new Date(\"2024-05-31\"), desktop: 178, mobile: 230 },\n\t\t{ date: new Date(\"2024-06-01\"), desktop: 178, mobile: 200 },\n\t\t{ date: new Date(\"2024-06-02\"), desktop: 470, mobile: 410 },\n\t\t{ date: new Date(\"2024-06-03\"), desktop: 103, mobile: 160 },\n\t\t{ date: new Date(\"2024-06-04\"), desktop: 439, mobile: 380 },\n\t\t{ date: new Date(\"2024-06-05\"), desktop: 88, mobile: 140 },\n\t\t{ date: new Date(\"2024-06-06\"), desktop: 294, mobile: 250 },\n\t\t{ date: new Date(\"2024-06-07\"), desktop: 323, mobile: 370 },\n\t\t{ date: new Date(\"2024-06-08\"), desktop: 385, mobile: 320 },\n\t\t{ date: new Date(\"2024-06-09\"), desktop: 438, mobile: 480 },\n\t\t{ date: new Date(\"2024-06-10\"), desktop: 155, mobile: 200 },\n\t\t{ date: new Date(\"2024-06-11\"), desktop: 92, mobile: 150 },\n\t\t{ date: new Date(\"2024-06-12\"), desktop: 492, mobile: 420 },\n\t\t{ date: new Date(\"2024-06-13\"), desktop: 81, mobile: 130 },\n\t\t{ date: new Date(\"2024-06-14\"), desktop: 426, mobile: 380 },\n\t\t{ date: new Date(\"2024-06-15\"), desktop: 307, mobile: 350 },\n\t\t{ date: new Date(\"2024-06-16\"), desktop: 371, mobile: 310 },\n\t\t{ date: new Date(\"2024-06-17\"), desktop: 475, mobile: 520 },\n\t\t{ date: new Date(\"2024-06-18\"), desktop: 107, mobile: 170 },\n\t\t{ date: new Date(\"2024-06-19\"), desktop: 341, mobile: 290 },\n\t\t{ date: new Date(\"2024-06-20\"), desktop: 408, mobile: 450 },\n\t\t{ date: new Date(\"2024-06-21\"), desktop: 169, mobile: 210 },\n\t\t{ date: new Date(\"2024-06-22\"), desktop: 317, mobile: 270 },\n\t\t{ date: new Date(\"2024-06-23\"), desktop: 480, mobile: 530 },\n\t\t{ date: new Date(\"2024-06-24\"), desktop: 132, mobile: 180 },\n\t\t{ date: new Date(\"2024-06-25\"), desktop: 141, mobile: 190 },\n\t\t{ date: new Date(\"2024-06-26\"), desktop: 434, mobile: 380 },\n\t\t{ date: new Date(\"2024-06-27\"), desktop: 448, mobile: 490 },\n\t\t{ date: new Date(\"2024-06-28\"), desktop: 149, mobile: 200 },\n\t\t{ date: new Date(\"2024-06-29\"), desktop: 103, mobile: 160 },\n\t\t{ date: new Date(\"2024-06-30\"), desktop: 446, mobile: 400 },\n\t];\n\n\tconst chartConfig = {\n\t\tviews: { label: \"Page Views\", color: \"\" },\n\t\tdesktop: { label: \"Desktop\", color: \"var(--chart-1)\" },\n\t\tmobile: { label: \"Mobile\", color: \"var(--chart-2)\" },\n\t} satisfies Chart.ChartConfig;\n\n\tlet activeChart = $state<keyof typeof chartConfig>(\"desktop\");\n\n\tconst total = $derived({\n\t\tdesktop: chartData.reduce((acc, curr) => acc + curr.desktop, 0),\n\t\tmobile: chartData.reduce((acc, curr) => acc + curr.mobile, 0),\n\t});\n\n\tconst activeSeries = $derived([\n\t\t{\n\t\t\tkey: activeChart,\n\t\t\tlabel: chartConfig[activeChart].label,\n\t\t\tcolor: chartConfig[activeChart].color,\n\t\t},\n\t]);\n</script>\n\n<Card.Root>\n\t<Card.Header class=\"flex flex-col items-stretch space-y-0 border-b p-0 sm:flex-row\">\n\t\t<div class=\"flex flex-1 flex-col justify-center gap-1 px-6 py-5 sm:py-6\">\n\t\t\t<Card.Title>Line Chart - Interactive</Card.Title>\n\t\t\t<Card.Description>Showing total visitors for the last 3 months</Card.Description>\n\t\t</div>\n\t\t<div class=\"flex\">\n\t\t\t{#each [\"desktop\", \"mobile\"] as key (key)}\n\t\t\t\t{@const chart = key as keyof typeof chartConfig}\n\t\t\t\t<button\n\t\t\t\t\tdata-active={activeChart === chart}\n\t\t\t\t\tclass=\"data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-start even:border-s sm:border-s sm:border-t-0 sm:px-8 sm:py-6\"\n\t\t\t\t\tonclick={() => (activeChart = chart)}\n\t\t\t\t>\n\t\t\t\t\t<span class=\"text-muted-foreground text-xs\">\n\t\t\t\t\t\t{chartConfig[chart].label}\n\t\t\t\t\t</span>\n\t\t\t\t\t<span class=\"text-lg leading-none font-bold sm:text-3xl\">\n\t\t\t\t\t\t{total[key as keyof typeof total].toLocaleString()}\n\t\t\t\t\t</span>\n\t\t\t\t</button>\n\t\t\t{/each}\n\t\t</div>\n\t</Card.Header>\n\t<Card.Content class=\"px-2 sm:p-6\">\n\t\t<Chart.Container config={chartConfig} class=\"aspect-auto h-[250px] w-full\">\n\t\t\t<LineChart\n\t\t\t\tdata={chartData}\n\t\t\t\tx=\"date\"\n\t\t\t\txScale={scaleUtc()}\n\t\t\t\taxis=\"x\"\n\t\t\t\tseries={activeSeries}\n\t\t\t\tprops={{\n\t\t\t\t\tspline: { curve: curveNatural, motion: \"tween\", strokeWidth: 2 },\n\t\t\t\t\txAxis: {\n\t\t\t\t\t\tformat: (v: Date) => {\n\t\t\t\t\t\t\treturn v.toLocaleDateString(\"en-US\", {\n\t\t\t\t\t\t\t\tmonth: \"short\",\n\t\t\t\t\t\t\t\tday: \"numeric\",\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\thighlight: { points: { r: 4 } },\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{#snippet tooltip()}\n\t\t\t\t\t<Chart.Tooltip hideLabel />\n\t\t\t\t{/snippet}\n\t\t\t</LineChart>\n\t\t</Chart.Container>\n\t</Card.Content>\n</Card.Root>\n",
			"type": "registry:component",
			"target": "chart-line-interactive.svelte"
		}
	]
}