wip

huntabyte · Oct 23, 2024 · 715b933 · 715b933
1 parent b93fa98
commit 715b933
Show file tree

Hide file tree

Showing 16 changed files with 176 additions and 119 deletions.
diff --git a/sites/docs/src/lib/registry/default/block/chart-area-axes.svelte b/sites/docs/src/lib/registry/default/block/chart-area-axes.svelte
@@ -65,16 +65,14 @@
 					yAxis: { ticks: 3 },
 				}}
 			>
-				<svelte:fragment slot="tooltip">
-					<Tooltip.Root let:data variant="none">
-						<Chart.Tooltip
-							tooltipLabel={format(data.date, PeriodType.Month, { variant: "long" })}
-							config={chartConfig}
-							payload={data}
-							indicator="dot"
-						/>
-					</Tooltip.Root>
-				</svelte:fragment>
+				<Tooltip.Root let:data variant="none" slot="tooltip">
+					<Chart.Tooltip
+						tooltipLabel={format(data.date, PeriodType.Month, { variant: "long" })}
+						config={chartConfig}
+						payload={data}
+						indicator="dot"
+					/>
+				</Tooltip.Root>
 			</AreaChart>
 		</Chart.Container>
 	</Card.Content>

diff --git a/sites/docs/src/lib/registry/default/block/chart-area-default.svelte b/sites/docs/src/lib/registry/default/block/chart-area-default.svelte
@@ -56,16 +56,14 @@
 					yAxis: { format: () => "" },
 				}}
 			>
-				<svelte:fragment slot="tooltip">
-					<Tooltip.Root let:data variant="none">
-						<Chart.Tooltip
-							tooltipLabel={format(data.date, PeriodType.Month, { variant: "long" })}
-							config={chartConfig}
-							payload={data}
-							indicator="line"
-						/>
-					</Tooltip.Root>
-				</svelte:fragment>
+				<Tooltip.Root let:data variant="none" slot="tooltip">
+					<Chart.Tooltip
+						tooltipLabel={format(data.date, PeriodType.Month, { variant: "long" })}
+						config={chartConfig}
+						payload={data}
+						indicator="line"
+					/>
+				</Tooltip.Root>
 			</AreaChart>
 		</Chart.Container>
 	</Card.Content>

diff --git a/sites/docs/src/lib/registry/default/block/chart-area-icons.svelte b/sites/docs/src/lib/registry/default/block/chart-area-icons.svelte
@@ -68,15 +68,13 @@
 					yAxis: { format: () => "" },
 				}}
 			>
-				<svelte:fragment slot="tooltip">
-					<Tooltip.Root let:data variant="none">
-						<Chart.Tooltip
-							tooltipLabel={format(data.date, PeriodType.Month, { variant: "long" })}
-							config={chartConfig}
-							payload={data}
-						/>
-					</Tooltip.Root>
-				</svelte:fragment>
+				<Tooltip.Root let:data variant="none" slot="tooltip">
+					<Chart.Tooltip
+						tooltipLabel={format(data.date, PeriodType.Month, { variant: "long" })}
+						config={chartConfig}
+						payload={data}
+					/>
+				</Tooltip.Root>
 			</AreaChart>
 		</Chart.Container>
 	</Card.Content>

diff --git a/sites/docs/src/lib/registry/default/block/chart-area-legend.svelte b/sites/docs/src/lib/registry/default/block/chart-area-legend.svelte
@@ -66,16 +66,14 @@
 					yAxis: { format: () => "" },
 				}}
 			>
-				<svelte:fragment slot="tooltip">
-					<Tooltip.Root let:data variant="none">
-						<Chart.Tooltip
-							tooltipLabel={format(data.date, PeriodType.Month, { variant: "long" })}
-							config={chartConfig}
-							payload={data}
-							indicator="line"
-						/>
-					</Tooltip.Root>
-				</svelte:fragment>
+				<Tooltip.Root let:data variant="none" slot="tooltip">
+					<Chart.Tooltip
+						tooltipLabel={format(data.date, PeriodType.Month, { variant: "long" })}
+						config={chartConfig}
+						payload={data}
+						indicator="line"
+					/>
+				</Tooltip.Root>
 
 				<!-- TODO: Add custom legends -->
 				<!-- <svelte:fragment slot="legend">where is that data 🤔?</svelte:fragment> -->

diff --git a/sites/docs/src/lib/registry/default/block/chart-area-linear.svelte b/sites/docs/src/lib/registry/default/block/chart-area-linear.svelte
@@ -56,11 +56,9 @@
 					yAxis: { format: () => "" },
 				}}
 			>
-				<svelte:fragment slot="tooltip">
-					<Tooltip.Root let:data variant="none">
-						<Chart.Tooltip config={chartConfig} payload={data} hideLabel />
-					</Tooltip.Root>
-				</svelte:fragment>
+				<Tooltip.Root let:data variant="none" slot="tooltip">
+					<Chart.Tooltip config={chartConfig} payload={data} hideLabel />
+				</Tooltip.Root>
 			</AreaChart>
 		</Chart.Container>
 	</Card.Content>

diff --git a/sites/docs/src/lib/registry/default/block/chart-area-stacked-expand.svelte b/sites/docs/src/lib/registry/default/block/chart-area-stacked-expand.svelte
@@ -75,16 +75,14 @@
 					yAxis: { format: () => "" },
 				}}
 			>
-				<svelte:fragment slot="tooltip">
-					<Tooltip.Root let:data variant="none">
-						<Chart.Tooltip
-							tooltipLabel={format(data.date, PeriodType.Month, { variant: "long" })}
-							config={chartConfig}
-							payload={data}
-							indicator="line"
-						/>
-					</Tooltip.Root>
-				</svelte:fragment>
+				<Tooltip.Root let:data variant="none" slot="tooltip">
+					<Chart.Tooltip
+						tooltipLabel={format(data.date, PeriodType.Month, { variant: "long" })}
+						config={chartConfig}
+						payload={data}
+						indicator="line"
+					/>
+				</Tooltip.Root>
 			</AreaChart>
 		</Chart.Container>
 	</Card.Content>

diff --git a/sites/docs/src/lib/registry/default/block/chart-area-stacked.svelte b/sites/docs/src/lib/registry/default/block/chart-area-stacked.svelte
@@ -65,16 +65,14 @@
 					yAxis: { format: () => "" },
 				}}
 			>
-				<svelte:fragment slot="tooltip">
-					<Tooltip.Root let:data variant="none">
-						<Chart.Tooltip
-							tooltipLabel={format(data.date, PeriodType.Month, { variant: "long" })}
-							config={chartConfig}
-							payload={data}
-							indicator="dot"
-						/>
-					</Tooltip.Root>
-				</svelte:fragment>
+				<Tooltip.Root let:data variant="none" slot="tooltip">
+					<Chart.Tooltip
+						tooltipLabel={format(data.date, PeriodType.Month, { variant: "long" })}
+						config={chartConfig}
+						payload={data}
+						indicator="dot"
+					/>
+				</Tooltip.Root>
 			</AreaChart>
 		</Chart.Container>
 	</Card.Content>

diff --git a/sites/docs/src/lib/registry/default/block/chart-area-step.svelte b/sites/docs/src/lib/registry/default/block/chart-area-step.svelte
@@ -58,11 +58,9 @@
 					yAxis: { format: () => "" },
 				}}
 			>
-				<svelte:fragment slot="tooltip">
-					<Tooltip.Root let:data variant="none">
-						<Chart.Tooltip config={chartConfig} payload={data} hideLabel />
-					</Tooltip.Root>
-				</svelte:fragment>
+				<Tooltip.Root let:data variant="none" slot="tooltip">
+					<Chart.Tooltip config={chartConfig} payload={data} hideLabel />
+				</Tooltip.Root>
 			</AreaChart>
 		</Chart.Container>
 	</Card.Content>

diff --git a/sites/docs/src/lib/registry/default/block/chart-bar-default.svelte b/sites/docs/src/lib/registry/default/block/chart-bar-default.svelte
@@ -42,11 +42,9 @@
 				}}
 			>
 				<!-- TODO: How to add `tweened` to bars? -->
-				<svelte:fragment slot="tooltip">
-					<Tooltip.Root let:data variant="none">
-						<Chart.Tooltip hideLabel config={chartConfig} payload={data} />
-					</Tooltip.Root>
-				</svelte:fragment>
+				<Tooltip.Root let:data variant="none" slot="tooltip">
+					<Chart.Tooltip hideLabel config={chartConfig} payload={data} />
+				</Tooltip.Root>
 			</BarChart>
 		</Chart.Container>
 	</Card.Content>

diff --git a/sites/docs/src/lib/registry/default/block/chart-bar-horizontal.svelte b/sites/docs/src/lib/registry/default/block/chart-bar-horizontal.svelte
@@ -44,11 +44,9 @@
 				}}
 			>
 				<!-- TODO: How to add `tweened` to bars? -->
-				<svelte:fragment slot="tooltip">
-					<Tooltip.Root let:data variant="none">
-						<Chart.Tooltip hideLabel config={chartConfig} payload={data} />
-					</Tooltip.Root>
-				</svelte:fragment>
+				<Tooltip.Root let:data variant="none" slot="tooltip">
+					<Chart.Tooltip hideLabel config={chartConfig} payload={data} />
+				</Tooltip.Root>
 			</BarChart>
 		</Chart.Container>
 	</Card.Content>

diff --git a/sites/docs/src/lib/registry/new-york/block/chart-area-axes.svelte b/sites/docs/src/lib/registry/new-york/block/chart-area-axes.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { AreaChart, Tooltip } from "layerchart";
-	import TrendingUp from "lucide-svelte/icons/trending-up";
+	import * as Card from "$lib/registry/new-york/ui/card/index.js";
+	import * as Chart from "$lib/registry/new-york/ui/chart/index.js";
 	import { PeriodType, format } from "@layerstack/utils";
-	import { curveNatural } from "d3-shape";
 	import { scaleUtc } from "d3-scale";
-	import * as Chart from "$lib/registry/new-york/ui/chart/index.js";
-	import * as Card from "$lib/registry/new-york/ui/card/index.js";
+	import { curveNatural } from "d3-shape";
+	import { AreaChart, Tooltip } from "layerchart";
+	import TrendingUp from "lucide-svelte/icons/trending-up";
 
 	const chartData = [
 		{ date: new Date("2024-01-01"), desktop: 186, mobile: 80 },

diff --git a/sites/docs/src/lib/registry/new-york/block/chart-area-stacked.svelte b/sites/docs/src/lib/registry/new-york/block/chart-area-stacked.svelte
@@ -1,11 +1,11 @@
 <script lang="ts">
-	import { AreaChart, Tooltip } from "layerchart";
-	import TrendingUp from "lucide-svelte/icons/trending-up";
+	import * as Card from "$lib/registry/new-york/ui/card/index.js";
+	import * as Chart from "$lib/registry/new-york/ui/chart/index.js";
 	import { PeriodType, format } from "@layerstack/utils";
-	import { curveNatural } from "d3-shape";
 	import { scaleUtc } from "d3-scale";
-	import * as Chart from "$lib/registry/new-york/ui/chart/index.js";
-	import * as Card from "$lib/registry/new-york/ui/card/index.js";
+	import { curveNatural } from "d3-shape";
+	import { AreaChart, Tooltip } from "layerchart";
+	import TrendingUp from "lucide-svelte/icons/trending-up";
 
 	const chartData = [
 		{ date: new Date("2024-01-01"), desktop: 186, mobile: 80 },

diff --git a/sites/docs/src/lib/registry/new-york/block/chart-bar-active.svelte b/sites/docs/src/lib/registry/new-york/block/chart-bar-active.svelte
@@ -1,7 +1,66 @@
 <script lang="ts">
-	import TrendingUp from "lucide-svelte/icons/trending-up";
-	import * as Chart from "$lib/registry/new-york/ui/chart/index.js";
 	import * as Card from "$lib/registry/new-york/ui/card/index.js";
+	import * as Chart from "$lib/registry/new-york/ui/chart/index.js";
+	import { scaleBand } from "d3-scale";
+	import { BarChart, Tooltip } from "layerchart";
+	import TrendingUp from "lucide-svelte/icons/trending-up";
+
+	const chartData = [
+		{ browser: "chrome", visitors: 187 },
+		{ browser: "safari", visitors: 200 },
+		{ browser: "firefox", visitors: 275 },
+		{ browser: "edge", visitors: 173 },
+		{ browser: "other", visitors: 90 },
+	];
+
+	const chartConfig = {
+		visitors: {
+			label: "Visitors",
+		},
+		chrome: {
+			label: "Chrome",
+			color: "hsl(var(--chart-1))",
+		},
+		safari: {
+			label: "Safari",
+			color: "hsl(var(--chart-2))",
+		},
+		firefox: {
+			label: "Firefox",
+			color: "hsl(var(--chart-3))",
+		},
+		edge: {
+			label: "Edge",
+			color: "hsl(var(--chart-4))",
+		},
+		other: {
+			label: "Other",
+			color: "hsl(var(--chart-5))",
+		},
+	} satisfies Chart.ChartConfig;
+
+	type Series = NonNullable<(typeof BarChart)["prototype"]["$$prop_def"]["series"]>;
+
+	function chartConfigToSeries(config: Chart.ChartConfig): Series {
+		const res = Object.keys(config).map((key) => {
+			const itemConfig = config[key];
+			const result: Series[number] = {
+				key: "visitors",
+				label: itemConfig.label,
+				color: itemConfig.color,
+			};
+			if (key === "visitors") {
+				result.props = {
+					strokeWidth: 2,
+					radius: 8,
+					stroke: "full",
+				};
+			}
+			return result;
+		});
+		console.log(res);
+		return res;
+	}
 </script>
 
 <Card.Root>
@@ -10,7 +69,26 @@
 		<Card.Description>January - June 2024</Card.Description>
 	</Card.Header>
 	<Card.Content>
-		<Chart.Container></Chart.Container>
+		<Chart.Container>
+			<BarChart
+				data={chartData}
+				x="browser"
+				series={chartConfigToSeries(chartConfig)}
+				xScale={scaleBand().padding(0.2)}
+				props={{
+					bars: { stroke: "none", radius: 8 },
+					xAxis: { format: (d) => chartConfig[d as keyof typeof chartConfig].label },
+					highlight: { area: { fill: "none" } },
+				}}
+			>
+				<svelte:fragment slot="tooltip">
+					<Tooltip.Root let:data variant="none">
+						<Chart.Tooltip hideLabel config={chartConfig} payload={data} />
+					</Tooltip.Root>
+				</svelte:fragment>
+			</BarChart>
+			<!-- todo -->
+		</Chart.Container>
 	</Card.Content>
 	<Card.Footer>
 		<div class="flex w-full items-start gap-2 text-sm">

diff --git a/sites/docs/src/lib/registry/new-york/block/chart-bar-stacked.svelte b/sites/docs/src/lib/registry/new-york/block/chart-bar-stacked.svelte
@@ -1,9 +1,9 @@
 <script lang="ts">
+	import * as Card from "$lib/registry/new-york/ui/card/index.js";
+	import * as Chart from "$lib/registry/new-york/ui/chart/index.js";
 	import { scaleBand } from "d3-scale";
 	import { BarChart, Tooltip } from "layerchart";
 	import TrendingUp from "lucide-svelte/icons/trending-up";
-	import * as Chart from "$lib/registry/new-york/ui/chart/index.js";
-	import * as Card from "$lib/registry/new-york/ui/card/index.js";
 
 	const chartData = [
 		{ month: "January", desktop: 186, mobile: 80 },
@@ -48,14 +48,15 @@
 						label: "Mobile",
 						color: chartConfig.mobile.color,
 						// TODO: How to specify radii for different corners. e.g radius: [4, 4, 0, 0], or better yet, class: "rounded-t-none"
-						props: { class: "rounded-b-none" },
+						props: { class: "rounded-b-none z-20" },
 					},
 				]}
 				seriesLayout="stack"
 				props={{
 					bars: { stroke: "none", inset: 5 },
 					// TODO: How to take this fill to the behind the actual bars?
-					highlight: { area: { class: "fill-muted/25" } },
+
+					highlight: { area: { class: "fill-muted/25 z-0" } },
 					xAxis: { format: (d) => d.slice(0, 3) },
 					yAxis: { format: () => "" },
 				}}