mirror of
https://github.com/huntabyte/shadcn-svelte.git
synced 2026-09-14 19:33:46 +08:00
maxffarrell
24 lines
2.9 KiB
JSON
24 lines
2.9 KiB
JSON
{
|
|
"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
|
|
"name": "chart-line-multiple",
|
|
"type": "registry:block",
|
|
"devDependencies": [
|
|
"layerchart@^2.0.0",
|
|
"@lucide/svelte@^0.561.0",
|
|
"d3-scale@^4.0.2",
|
|
"@types/d3-scale@^4.0.9",
|
|
"d3-shape@^3.2.0",
|
|
"@types/d3-shape@^3.1.7"
|
|
],
|
|
"registryDependencies": [
|
|
"chart",
|
|
"card"
|
|
],
|
|
"files": [
|
|
{
|
|
"content": "<script lang=\"ts\">\n\timport { LineChart } from \"layerchart\";\n\timport TrendingUpIcon from \"@lucide/svelte/icons/trending-up\";\n\timport { scaleUtc } from \"d3-scale\";\n\timport { curveNatural } from \"d3-shape\";\n\timport * as Chart from \"$UI$/chart/index.js\";\n\timport * as Card from \"$UI$/card/index.js\";\n\n\tconst chartData = [\n\t\t{ date: new Date(\"2024-01-01\"), desktop: 186, mobile: 80 },\n\t\t{ date: new Date(\"2024-02-01\"), desktop: 305, mobile: 200 },\n\t\t{ date: new Date(\"2024-03-01\"), desktop: 237, mobile: 120 },\n\t\t{ date: new Date(\"2024-04-01\"), desktop: 73, mobile: 190 },\n\t\t{ date: new Date(\"2024-05-01\"), desktop: 209, mobile: 130 },\n\t\t{ date: new Date(\"2024-06-01\"), desktop: 214, mobile: 140 },\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>\n\t\t<Card.Title>Line Chart - Multiple</Card.Title>\n\t\t<Card.Description>Showing total visitors for the last 6 months</Card.Description>\n\t</Card.Header>\n\t<Card.Content>\n\t\t<Chart.Container config={chartConfig}>\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={[\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\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]}\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) => v.toLocaleDateString(\"en-US\", { month: \"short\" }),\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\t<Card.Footer>\n\t\t<div class=\"flex w-full items-start gap-2 text-sm\">\n\t\t\t<div class=\"grid gap-2\">\n\t\t\t\t<div class=\"flex items-center gap-2 leading-none font-medium\">\n\t\t\t\t\tTrending up by 5.2% this month <TrendingUpIcon class=\"size-4\" />\n\t\t\t\t</div>\n\t\t\t\t<div class=\"text-muted-foreground flex items-center gap-2 leading-none\">\n\t\t\t\t\tJanuary - June 2024\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t</Card.Footer>\n</Card.Root>\n",
|
|
"type": "registry:component",
|
|
"target": "chart-line-multiple.svelte"
|
|
}
|
|
]
|
|
} |