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

{
	"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
	"name": "chart-area-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",
		"select"
	],
	"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 * as Select from \"$UI$/select/index.js\";\n\timport { scaleUtc } from \"d3-scale\";\n\timport { Area, AreaChart, ChartClipPath } from \"layerchart\";\n\timport { curveNatural } from \"d3-shape\";\n\timport ChartContainer from \"../ui/chart/chart-container.svelte\";\n\timport { cubicInOut } from \"svelte/easing\";\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\tlet timeRange = $state(\"90d\");\n\n\tconst selectedLabel = $derived.by(() => {\n\t\tswitch (timeRange) {\n\t\t\tcase \"90d\":\n\t\t\t\treturn \"Last 3 months\";\n\t\t\tcase \"30d\":\n\t\t\t\treturn \"Last 30 days\";\n\t\t\tcase \"7d\":\n\t\t\t\treturn \"Last 7 days\";\n\t\t\tdefault:\n\t\t\t\treturn \"Last 3 months\";\n\t\t}\n\t});\n\n\tconst filteredData = $derived(\n\t\tchartData.filter((item) => {\n\t\t\t// eslint-disable-next-line svelte/prefer-svelte-reactivity\n\t\t\tconst referenceDate = new Date(\"2024-06-30\");\n\t\t\tlet daysToSubtract = 90;\n\t\t\tif (timeRange === \"30d\") {\n\t\t\t\tdaysToSubtract = 30;\n\t\t\t} else if (timeRange === \"7d\") {\n\t\t\t\tdaysToSubtract = 7;\n\t\t\t}\n\n\t\t\treferenceDate.setDate(referenceDate.getDate() - daysToSubtract);\n\t\t\treturn item.date >= referenceDate;\n\t\t})\n\t);\n\n\tconst chartConfig = {\n\t\tdesktop: { label: \"Desktop\", color: \"var(--chart-1)\" },\n\t\tmobile: { label: \"Mobile\", color: \"var(--chart-2)\" },\n\t} satisfies Chart.ChartConfig;\n</script>\n\n<Card.Root>\n\t<Card.Header class=\"flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row\">\n\t\t<div class=\"grid flex-1 gap-1 text-center sm:text-start\">\n\t\t\t<Card.Title>Area 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<Select.Root type=\"single\" bind:value={timeRange}>\n\t\t\t<Select.Trigger class=\"w-40 rounded-lg sm:ms-auto\" aria-label=\"Select a value\">\n\t\t\t\t{selectedLabel}\n\t\t\t</Select.Trigger>\n\t\t\t<Select.Content class=\"rounded-xl\">\n\t\t\t\t<Select.Item value=\"90d\" class=\"rounded-lg\">Last 3 months</Select.Item>\n\t\t\t\t<Select.Item value=\"30d\" class=\"rounded-lg\">Last 30 days</Select.Item>\n\t\t\t\t<Select.Item value=\"7d\" class=\"rounded-lg\">Last 7 days</Select.Item>\n\t\t\t</Select.Content>\n\t\t</Select.Root>\n\t</Card.Header>\n\t<Card.Content>\n\t\t<ChartContainer config={chartConfig} class=\"-ml-3 aspect-auto h-[250px] w-full\">\n\t\t\t<AreaChart\n\t\t\t\tlegend\n\t\t\t\tdata={filteredData}\n\t\t\t\tx=\"date\"\n\t\t\t\txScale={scaleUtc()}\n\t\t\t\tseries={[\n\t\t\t\t\t{\n\t\t\t\t\t\tkey: \"mobile\",\n\t\t\t\t\t\tlabel: \"Mobile\",\n\t\t\t\t\t\tcolor: chartConfig.mobile.color,\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tkey: \"desktop\",\n\t\t\t\t\t\tlabel: \"Desktop\",\n\t\t\t\t\t\tcolor: chartConfig.desktop.color,\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t\tseriesLayout=\"stack\"\n\t\t\t\tprops={{\n\t\t\t\t\tarea: {\n\t\t\t\t\t\tcurve: curveNatural,\n\t\t\t\t\t\t\"fill-opacity\": 0.4,\n\t\t\t\t\t\tline: { class: \"stroke-1\" },\n\t\t\t\t\t\tmotion: \"tween\",\n\t\t\t\t\t},\n\t\t\t\t\txAxis: {\n\t\t\t\t\t\tticks: timeRange === \"7d\" ? 7 : undefined,\n\t\t\t\t\t\tformat: (v) => {\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\n\t\t\t\t\tyAxis: { format: () => \"\" },\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{#snippet marks({ series, getAreaProps })}\n\t\t\t\t\t<defs>\n\t\t\t\t\t\t<linearGradient id=\"fillDesktop\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n\t\t\t\t\t\t\t<stop\n\t\t\t\t\t\t\t\toffset=\"5%\"\n\t\t\t\t\t\t\t\tstop-color=\"var(--color-desktop)\"\n\t\t\t\t\t\t\t\tstop-opacity={1.0}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t<stop\n\t\t\t\t\t\t\t\toffset=\"95%\"\n\t\t\t\t\t\t\t\tstop-color=\"var(--color-desktop)\"\n\t\t\t\t\t\t\t\tstop-opacity={0.1}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t\t<linearGradient id=\"fillMobile\" x1=\"0\" y1=\"0\" x2=\"0\" y2=\"1\">\n\t\t\t\t\t\t\t<stop offset=\"5%\" stop-color=\"var(--color-mobile)\" stop-opacity={0.8} />\n\t\t\t\t\t\t\t<stop\n\t\t\t\t\t\t\t\toffset=\"95%\"\n\t\t\t\t\t\t\t\tstop-color=\"var(--color-mobile)\"\n\t\t\t\t\t\t\t\tstop-opacity={0.1}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</linearGradient>\n\t\t\t\t\t</defs>\n\t\t\t\t\t<ChartClipPath\n\t\t\t\t\t\tinitialWidth={0}\n\t\t\t\t\t\tmotion={{\n\t\t\t\t\t\t\twidth: { type: \"tween\", duration: 1000, easing: cubicInOut },\n\t\t\t\t\t\t}}\n\t\t\t\t\t>\n\t\t\t\t\t\t{#each series as s, i (s.key)}\n\t\t\t\t\t\t\t<Area\n\t\t\t\t\t\t\t\t{...getAreaProps(s, i)}\n\t\t\t\t\t\t\t\tfill={s.key === \"desktop\"\n\t\t\t\t\t\t\t\t\t? \"url(#fillDesktop)\"\n\t\t\t\t\t\t\t\t\t: \"url(#fillMobile)\"}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t{/each}\n\t\t\t\t\t</ChartClipPath>\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\tlabelFormatter={(v: Date) => {\n\t\t\t\t\t\t\treturn v.toLocaleDateString(\"en-US\", {\n\t\t\t\t\t\t\t\tmonth: \"long\",\n\t\t\t\t\t\t\t});\n\t\t\t\t\t\t}}\n\t\t\t\t\t\tindicator=\"line\"\n\t\t\t\t\t/>\n\t\t\t\t{/snippet}\n\t\t\t</AreaChart>\n\t\t</ChartContainer>\n\t</Card.Content>\n</Card.Root>\n",
			"type": "registry:component",
			"target": "chart-area-interactive.svelte"
		}
	]
}