mirror of
https://github.com/huntabyte/shadcn-svelte.git
synced 2026-09-14 19:33:46 +08:00
maxffarrell
21 lines
2.9 KiB
JSON
21 lines
2.9 KiB
JSON
{
|
|
"$schema": "https://shadcn-svelte.com/schema/registry-item.json",
|
|
"name": "chart-tooltip-default",
|
|
"type": "registry:block",
|
|
"devDependencies": [
|
|
"d3-scale@^4.0.2",
|
|
"@types/d3-scale@^4.0.9",
|
|
"layerchart@^2.0.0"
|
|
],
|
|
"registryDependencies": [
|
|
"card",
|
|
"chart"
|
|
],
|
|
"files": [
|
|
{
|
|
"content": "<script lang=\"ts\">\n\timport * as Card from \"$UI$/card/index.js\";\n\timport * as Chart from \"$UI$/chart/index.js\";\n\timport { scaleBand } from \"d3-scale\";\n\timport { BarChart, type ChartContextValue } from \"layerchart\";\n\timport { cubicInOut } from \"svelte/easing\";\n\n\tconst chartData = [\n\t\t{ date: \"2024-07-15\", running: 450, swimming: 300 },\n\t\t{ date: \"2024-07-16\", running: 380, swimming: 420 },\n\t\t{ date: \"2024-07-17\", running: 520, swimming: 120 },\n\t\t{ date: \"2024-07-18\", running: 140, swimming: 550 },\n\t\t{ date: \"2024-07-19\", running: 600, swimming: 350 },\n\t\t{ date: \"2024-07-20\", running: 480, swimming: 400 },\n\t];\n\n\tconst chartConfig = {\n\t\trunning: { label: \"Running\", color: \"var(--chart-1)\" },\n\t\tswimming: { label: \"Swimming\", color: \"var(--chart-2)\" },\n\t} satisfies Chart.ChartConfig;\n\n\tlet context = $state<ChartContextValue>();\n</script>\n\n<Card.Root>\n\t<Card.Header>\n\t\t<Card.Title>Tooltip - Default</Card.Title>\n\t\t<Card.Description>Default tooltip with ChartTooltip.</Card.Description>\n\t</Card.Header>\n\t<Card.Content>\n\t\t<Chart.Container config={chartConfig}>\n\t\t\t<BarChart\n\t\t\t\tbind:context\n\t\t\t\tdata={chartData}\n\t\t\t\txScale={scaleBand().padding(0.25)}\n\t\t\t\tx=\"date\"\n\t\t\t\taxis=\"x\"\n\t\t\t\trule={false}\n\t\t\t\tseries={[\n\t\t\t\t\t{\n\t\t\t\t\t\tkey: \"running\",\n\t\t\t\t\t\tlabel: \"Running\",\n\t\t\t\t\t\tcolor: chartConfig.running.color,\n\t\t\t\t\t\tprops: { rounded: \"bottom\" },\n\t\t\t\t\t},\n\t\t\t\t\t{\n\t\t\t\t\t\tkey: \"swimming\",\n\t\t\t\t\t\tlabel: \"Swimming\",\n\t\t\t\t\t\tcolor: chartConfig.swimming.color,\n\t\t\t\t\t},\n\t\t\t\t]}\n\t\t\t\tseriesLayout=\"stack\"\n\t\t\t\tgrid={false}\n\t\t\t\thighlight={false}\n\t\t\t\tprops={{\n\t\t\t\t\tbars: {\n\t\t\t\t\t\tstroke: \"none\",\n\t\t\t\t\t\tinitialY: context?.height,\n\t\t\t\t\t\tinitialHeight: 0,\n\t\t\t\t\t\tmotion: {\n\t\t\t\t\t\t\ty: { type: \"tween\", duration: 500, easing: cubicInOut },\n\t\t\t\t\t\t\theight: { type: \"tween\", duration: 500, easing: cubicInOut },\n\t\t\t\t\t\t},\n\t\t\t\t\t},\n\t\t\t\t\txAxis: {\n\t\t\t\t\t\tformat: (d) =>\n\t\t\t\t\t\t\tnew Date(d).toLocaleDateString(\"en-US\", {\n\t\t\t\t\t\t\t\tweekday: \"short\",\n\t\t\t\t\t\t\t}),\n\t\t\t\t\t\ttickLabelProps: {\n\t\t\t\t\t\t\tsvgProps: {\n\t\t\t\t\t\t\t\ty: 13,\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}}\n\t\t\t>\n\t\t\t\t{#snippet tooltip()}\n\t\t\t\t\t<Chart.Tooltip />\n\t\t\t\t{/snippet}\n\t\t\t</BarChart>\n\t\t</Chart.Container>\n\t</Card.Content>\n</Card.Root>\n",
|
|
"type": "registry:component",
|
|
"target": "chart-tooltip-default.svelte"
|
|
}
|
|
]
|
|
} |