State improvements

.changeset/pretty-roses-invent.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+breaking(Chart): Rename `tooltip` prop to `tooltipContext` to better describe purpose and fix conflict with new `tooltip` snippet

.changeset/silver-baboons-smile.md

@@ -0,0 +1,5 @@
+---
+'layerchart': patch
+---
+
+breaking(Arc|Pie|Calendar|GeoPath): Rename `tooltipContext` to simple `tooltip` (boolean), simplifying use case

docs/src/content/components/GeoContext.md → docs/src/content/components/GeoProjection.md

@@ -6,6 +6,10 @@ related: [Chart]
 order: 1
 ---
 
+::tip
+Geographic projections / state are integrated into `<Chart geo={...}>` but `GeoProjection` can be used to provide a secondary projection / context, such as for a translucent globe effect
+::
+
 ## Playground
 
 :example{ name="projection-playground" }

docs/src/examples/components/ArcChart/series-labels.svelte

@@ -25,12 +25,12 @@
 	cornerRadius={10}
 	height={180}
 >
-	{#snippet arc({ props, seriesIndex, visibleSeries })}
+	{#snippet arc({ context, props, seriesIndex })}
 		<Arc {...props}>
 			{#snippet children({ getArcTextProps })}
 				<Text
 					{...getArcTextProps('middle')}
-					value={visibleSeries[seriesIndex].key}
+					value={context.series.visibleSeries[seriesIndex].key}
 					class="fill-black pointer-events-none"
 					font-size="12px"
 				/>

docs/src/examples/components/AreaChart/series-individual-tooltip.svelte

@@ -50,8 +50,8 @@
 	padding={defaultChartPadding({ right: 15 })}
 	height={300}
 >
-	{#snippet marks({ series, context })}
-		{#each series as s}
+	{#snippet marks({ context })}
+		{#each context.series.series as s}
 			{@const activeSeries =
 				context.tooltip?.data == null || context.tooltip?.data?.fruit === s.key}
 
@@ -61,13 +61,17 @@
 		{/each}
 	{/snippet}
 
-	{#snippet highlight({ series, context })}
-		{@const activeSeries = series.find((s) => s.key === context.tooltip?.data?.fruit)}
+	{#snippet highlight({ context })}
+		{@const activeSeries = context.series.series.find(
+			(s) => s.key === context.tooltip?.data?.fruit
+		)}
 		<Highlight lines points={{ fill: activeSeries?.color }} />
 	{/snippet}
 
-	{#snippet tooltip({ series, context })}
-		{@const activeSeries = series.find((s) => s.key === context.tooltip?.data?.fruit)}
+	{#snippet tooltip({ context })}
+		{@const activeSeries = context.series.series.find(
+			(s) => s.key === context.tooltip?.data?.fruit
+		)}
 		<Tooltip.Root>
 			{#snippet children({ data })}
 				<Tooltip.Header>{format(context.x(data))}</Tooltip.Header>

docs/src/examples/components/AreaChart/series-stack-gradient.svelte

@@ -30,8 +30,8 @@
 	padding={defaultChartPadding({ right: 10 })}
 	height={300}
 >
-	{#snippet marks({ series, getAreaProps })}
-		{#each series as s, i (s.key)}
+	{#snippet marks({ context, getAreaProps })}
+		{#each context.series.series as s, i (s.key)}
 			<!-- Can also use basic 'transparent' for second stop for better browser compatibility -->
 			<LinearGradient
 				stops={s.color

docs/src/examples/components/BarChart/gradient.svelte

@@ -13,8 +13,8 @@
 </script>
 
 <BarChart {data} x="date" y="value" height={300}>
-	{#snippet marks({ series, getBarsProps })}
-		{#each series as s, i (s.key)}
+	{#snippet marks({ context, getBarsProps })}
+		{#each context.series.series as s, i (s.key)}
 			<LinearGradient class="from-blue-500 to-green-400" vertical units="userSpaceOnUse">
 				{#snippet children({ gradient })}
 					<Bars {...getBarsProps(s, i)} fill={gradient} />

docs/src/examples/components/BarChart/group-series-labels.svelte

@@ -37,8 +37,8 @@
 	height={300}
 >
 	<!-- Workaround until x1Scale is directly handled by Points/Labels: https://github.com/techniq/layerchart/issues/473#issuecomment-3266370636 -->
-	{#snippet aboveMarks({ context, visibleSeries })}
-		{#each visibleSeries as s}
+	{#snippet aboveMarks({ context })}
+		{#each context.series.visibleSeries as s}
 			{#each wideData as d}
 				{@const valueAccessor = accessor(s.key)}
 				{@const value = valueAccessor(d)}

docs/src/examples/components/BarChart/series-horizontal-diverging-as-percent.svelte

@@ -53,12 +53,12 @@
 	]}
 	height={600}
 >
-	{#snippet tooltip({ series, context })}
+	{#snippet tooltip({ context })}
 		<Tooltip.Root>
 			{#snippet children({ data })}
 				<Tooltip.Header>Age: {format(context.y(data))}</Tooltip.Header>
 				<Tooltip.List>
-					{#each series as s}
+					{#each context.series.series as s}
 						{@const valueAccessor = accessor(s.value ?? s.key)}
 						{@const value = Math.abs(valueAccessor(data))}
 						<Tooltip.Item label={s.key} color={s.color}>

docs/src/examples/components/BrushContext/constant-labels.svelte

@@ -12,19 +12,19 @@
 		<Layer>
 			<Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
 
-			{#if context.brush.isActive}
+			{#if context.brush.active}
 				<Text
 					x={-4}
 					y={context.height / 2}
-					value={format(context.brush.xDomain?.[0] as any)}
+					value={format(context.brush.x?.[0] as any)}
 					textAnchor="end"
 					verticalAnchor="middle"
 					class="text-xs"
 				/>
 				<Text
 					x={context.width + 4}
 					y={context.height / 2}
-					value={format(context.brush.xDomain?.[1] as any)}
+					value={format(context.brush.x?.[1] as any)}
 					verticalAnchor="middle"
 					class="text-xs"
 				/>

docs/src/examples/components/BrushContext/handle-arrows.svelte

@@ -21,7 +21,7 @@
 		<Layer>
 			<Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
 
-			{#if context.brush.isActive}
+			{#if context.brush.active}
 				<rect
 					x={context.brush.range.x}
 					width={context.brush.handleSize}

docs/src/examples/components/BrushContext/handle-labels.svelte

@@ -12,19 +12,19 @@
 	{#snippet children({ context })}
 		<Layer>
 			<Area line={{ class: 'stroke-2 stroke-primary' }} class="fill-primary/20" />
-			{#if context.brush.isActive}
+			{#if context.brush.active}
 				<Text
 					x={context.brush.range.x - 4}
 					y={context.brush.range.height / 2}
-					value={format(context.brush.xDomain?.[0] as any)}
+					value={format(context.brush.x?.[0] as any)}
 					textAnchor="end"
 					verticalAnchor="middle"
 					class="text-xs"
 				/>
 				<Text
 					x={context.brush.range.x + context.brush.range.width + 4}
 					y={context.brush.range.height / 2}
-					value={format(context.brush.xDomain?.[1] as any)}
+					value={format(context.brush.x?.[1] as any)}
 					verticalAnchor="middle"
 					class="text-xs"
 				/>

docs/src/examples/components/BrushContext/integrated-brush-(both-axis-area).svelte

@@ -29,8 +29,8 @@
 		axis: 'both',
 		resetOnEnd: true,
 		onBrushEnd: (e) => {
-			xDomain = e.xDomain;
-			yDomain = e.yDomain;
+			xDomain = e.brush.x;
+			yDomain = e.brush.y;
 		}
 	}}
 	height={300}

docs/src/examples/components/BrushContext/integrated-brush-(x-axis).svelte

@@ -27,7 +27,7 @@
 	brush={{
 		resetOnEnd: true,
 		onBrushEnd: (e) => {
-			xDomain = e.xDomain;
+			xDomain = e.brush.x;
 		}
 	}}
 	height={300}

docs/src/examples/components/BrushContext/integrated-brush-(y-axis).svelte

@@ -27,7 +27,7 @@
 		axis: 'y',
 		resetOnEnd: true,
 		onBrushEnd: (e) => {
-			yDomain = e.yDomain;
+			yDomain = e.brush.y;
 		}
 	}}
 	height={300}

docs/src/examples/components/BrushContext/minimap.svelte

@@ -33,8 +33,8 @@
 			axis: 'both',
 			resetOnEnd: true,
 			onBrushEnd: (e) => {
-				xDomain = e.xDomain;
-				yDomain = e.yDomain;
+				xDomain = e.brush.x;
+				yDomain = e.brush.y;
 			}
 		}}
 		padding={defaultChartPadding({ left: 20, bottom: 24 })}
@@ -59,11 +59,11 @@
 			brush={{
 				axis: 'both',
 				mode: 'separated',
-				xDomain: xDomain,
-				yDomain: yDomain,
+				x: xDomain as any,
+				y: yDomain as any,
 				onChange: (e) => {
-					xDomain = e.xDomain;
-					yDomain = e.yDomain;
+					xDomain = e.brush.x;
+					yDomain = e.brush.y;
 				}
 			}}
 		>

docs/src/examples/components/BrushContext/selection.svelte

@@ -30,8 +30,8 @@
 	brush={{
 		axis: 'both',
 		onChange: (e) => {
-			xDomain = e.xDomain;
-			yDomain = e.yDomain;
+			xDomain = e.brush.x;
+			yDomain = e.brush.y;
 		}
 	}}
 	height={400}

docs/src/examples/components/BrushContext/separate-chart-(clip-data).svelte

@@ -46,7 +46,7 @@
 	padding={{ left: 16 }}
 	brush={{
 		onChange: (e) => {
-			xDomain = e.xDomain;
+			xDomain = e.brush.x;
 		}
 	}}
 	height={40}

docs/src/examples/components/BrushContext/separate-chart-(clip-data-y-axis).svelte

@@ -26,7 +26,7 @@
 			brush={{
 				axis: 'y',
 				onChange: (e) => {
-					yDomain = e.yDomain;
+					yDomain = e.brush.y;
 				}
 			}}
 			height={300}

docs/src/examples/components/BrushContext/separate-chart-(filter-data).svelte

@@ -53,7 +53,7 @@
 	padding={{ left: 16 }}
 	brush={{
 		onChange: (e) => {
-			xDomain = e.xDomain;
+			xDomain = e.brush.x;
 		}
 	}}
 	height={40}

docs/src/examples/components/BrushContext/sync-brushes-with-bind-xdomain.svelte

@@ -85,8 +85,8 @@
 				padding={{ left: 16 }}
 				brush={{
 					mode: 'separated',
-					xDomain,
-					onChange: (e) => (xDomain = e.xDomain),
+					x: xDomain as any,
+					onChange: (e) => (xDomain = e.brush.x),
 					onReset: (e) => (xDomain = null)
 				}}
 				height={20}

docs/src/examples/components/BrushContext/tooltip-interop.svelte

@@ -31,7 +31,7 @@
 	brush={{
 		resetOnEnd: true,
 		onBrushEnd: (e) => {
-			xDomain = e.xDomain;
+			xDomain = e.brush.x;
 		}
 	}}
 	height={300}

docs/src/examples/components/Calendar/90-days.svelte

@@ -34,21 +34,19 @@
 	padding={{ top: 20, bottom: 20 }}
 	height={200}
 >
-	{#snippet children({ context })}
-		<Layer>
-			<Calendar start={ninetyDaysAgo} end={now} tooltipContext={context.tooltip} monthPath />
-		</Layer>
+	<Layer>
+		<Calendar start={ninetyDaysAgo} end={now} tooltip monthPath />
+	</Layer>
 
-		<Tooltip.Root>
-			{#snippet children({ data })}
-				<Tooltip.Header value={data.date} format="day" />
+	<Tooltip.Root>
+		{#snippet children({ data })}
+			<Tooltip.Header value={data.date} format="day" />
 
-				{#if data.value != null}
-					<Tooltip.List>
-						<Tooltip.Item label="value" value={data.value} format="integer" valueAlign="right" />
-					</Tooltip.List>
-				{/if}
-			{/snippet}
-		</Tooltip.Root>
-	{/snippet}
+			{#if data.value != null}
+				<Tooltip.List>
+					<Tooltip.Item label="value" value={data.value} format="integer" valueAlign="right" />
+				</Tooltip.List>
+			{/if}
+		{/snippet}
+	</Tooltip.Root>
 </Chart>

docs/src/examples/components/Calendar/fixed-cell-size.svelte

@@ -36,27 +36,19 @@
 	padding={{ top: 20 }}
 	height={140}
 >
-	{#snippet children({ context })}
-		<Layer>
-			<Calendar
-				start={firstDayOfYear}
-				end={lastDayOfYear}
-				tooltipContext={context.tooltip}
-				cellSize={16}
-				monthPath
-			/>
-		</Layer>
+	<Layer>
+		<Calendar start={firstDayOfYear} end={lastDayOfYear} tooltip cellSize={16} monthPath />
+	</Layer>
 
-		<Tooltip.Root>
-			{#snippet children({ data })}
-				<Tooltip.Header value={data.date} format="day" />
+	<Tooltip.Root>
+		{#snippet children({ data })}
+			<Tooltip.Header value={data.date} format="day" />
 
-				{#if data.value != null}
-					<Tooltip.List>
-						<Tooltip.Item label="value" value={data.value} format="integer" valueAlign="right" />
-					</Tooltip.List>
-				{/if}
-			{/snippet}
-		</Tooltip.Root>
-	{/snippet}
+			{#if data.value != null}
+				<Tooltip.List>
+					<Tooltip.Item label="value" value={data.value} format="integer" valueAlign="right" />
+				</Tooltip.List>
+			{/if}
+		{/snippet}
+	</Tooltip.Root>
 </Chart>

docs/src/examples/components/Calendar/html-with-padding.svelte

@@ -38,7 +38,7 @@
 >
 	{#snippet children({ context })}
 		<Layer type="html">
-			<Calendar start={firstDayOfYear} end={lastDayOfYear} tooltipContext={context.tooltip}>
+			<Calendar start={firstDayOfYear} end={lastDayOfYear}>
 				{#snippet children({ cells, cellSize })}
 					{#each cells as cell}
 						<div