From 309452a79f75a6f33a932e1944741414c790e9fb Mon Sep 17 00:00:00 2001
From: Scott Rhamy <scott@rhamy.com>
Date: Sat, 6 Dec 2025 11:57:22 -0500
Subject: [PATCH] ScatterChart Padding

- used  ...defaultChartPadding as basis then added needed custom padding. I did not update examples already customzing padding correctly like padding={{24}}

- also added xNice to many examples to prevent data from crashing into yAxis

- "Domain nice" Example added toggling on/off nice to illustrate effect better.
---
 docs/src/examples/components/ScatterChart/basic.svelte |  2 +-
 docs/src/examples/components/ScatterChart/brush.svelte |  1 +
 .../components/ScatterChart/custom-tooltip.svelte      |  2 +-
 .../src/examples/components/ScatterChart/custom.svelte |  2 +-
 .../ScatterChart/date-series-color-scale.svelte        |  1 +
 .../components/ScatterChart/domain-nice.svelte         | 10 ++++++++--
 .../src/examples/components/ScatterChart/labels.svelte |  2 +-
 .../components/ScatterChart/line-annotation.svelte     |  1 +
 .../components/ScatterChart/point-annotations.svelte   |  1 +
 .../ScatterChart/range-annotation-both.svelte          |  1 +
 .../ScatterChart/range-annotation-horizontal.svelte    |  1 +
 .../ScatterChart/range-annotation-vertical.svelte      |  1 +
 .../ScatterChart/series-custom-labels.svelte           |  6 ++++--
 .../components/ScatterChart/series-legend.svelte       |  5 +++--
 .../components/ScatterChart/series-tween.svelte        |  5 +++--
 .../components/ScatterChart/series-with-radius.svelte  |  5 +++--
 .../src/examples/components/ScatterChart/series.svelte |  5 +++--
 .../components/ScatterChart/single-axis-y.svelte       |  2 +-
 .../components/ScatterChart/tooltip-click.svelte       |  1 +
 19 files changed, 37 insertions(+), 17 deletions(-)

diff --git a/docs/src/examples/components/ScatterChart/basic.svelte b/docs/src/examples/components/ScatterChart/basic.svelte
index f195bc8c3..d57f72ada 100644
--- a/docs/src/examples/components/ScatterChart/basic.svelte
+++ b/docs/src/examples/components/ScatterChart/basic.svelte
@@ -6,4 +6,4 @@
 	export { data };
 </script>
 
-<ScatterChart {data} x="x" y="y" padding={24} height={400} />
+<ScatterChart {data} xNice x="x" y="y" padding={24} height={400} />
diff --git a/docs/src/examples/components/ScatterChart/brush.svelte b/docs/src/examples/components/ScatterChart/brush.svelte
index 81a610030..2725f2a7e 100644
--- a/docs/src/examples/components/ScatterChart/brush.svelte
+++ b/docs/src/examples/components/ScatterChart/brush.svelte
@@ -8,6 +8,7 @@
 
 <ScatterChart
 	{data}
+	xNice
 	x="x"
 	y="y"
 	props={{
diff --git a/docs/src/examples/components/ScatterChart/custom-tooltip.svelte b/docs/src/examples/components/ScatterChart/custom-tooltip.svelte
index e9f7ef533..f8ad81c34 100644
--- a/docs/src/examples/components/ScatterChart/custom-tooltip.svelte
+++ b/docs/src/examples/components/ScatterChart/custom-tooltip.svelte
@@ -7,7 +7,7 @@
 	export { data };
 </script>
 
-<ScatterChart {data} x="x" y="y" padding={24} height={400}>
+<ScatterChart {data} xNice x="x" y="y" padding={24} height={400}>
 	{#snippet tooltip({ context })}
 		<Tooltip.Root
 			x={context.padding.left}
diff --git a/docs/src/examples/components/ScatterChart/custom.svelte b/docs/src/examples/components/ScatterChart/custom.svelte
index 9bc5d5554..8a6684afa 100644
--- a/docs/src/examples/components/ScatterChart/custom.svelte
+++ b/docs/src/examples/components/ScatterChart/custom.svelte
@@ -7,7 +7,7 @@
 	export { data };
 </script>
 
-<ScatterChart {data} x="x" y="y" padding={24} height={400}>
+<ScatterChart {data} xNice x="x" y="y" padding={24} height={400}>
 	{#snippet children({ context })}
 		<Layer>
 			<Axis placement="left" grid rule />
diff --git a/docs/src/examples/components/ScatterChart/date-series-color-scale.svelte b/docs/src/examples/components/ScatterChart/date-series-color-scale.svelte
index 73e40f520..f9766c010 100644
--- a/docs/src/examples/components/ScatterChart/date-series-color-scale.svelte
+++ b/docs/src/examples/components/ScatterChart/date-series-color-scale.svelte
@@ -9,6 +9,7 @@
 
 <ScatterChart
 	{data}
+	xNice
 	x="date"
 	y="value"
 	yBaseline={0}
diff --git a/docs/src/examples/components/ScatterChart/domain-nice.svelte b/docs/src/examples/components/ScatterChart/domain-nice.svelte
index 73c72ec20..c7aabcbbe 100644
--- a/docs/src/examples/components/ScatterChart/domain-nice.svelte
+++ b/docs/src/examples/components/ScatterChart/domain-nice.svelte
@@ -1,10 +1,16 @@
 <script lang="ts">
 	import { ScatterChart } from 'layerchart';
 	import { getSpiral } from '$lib/utils/data.js';
-	import Blockquote from '$lib/components/Blockquote.svelte';
 
 	const data = getSpiral({ angle: 137.5, radius: 10, count: 100, width: 500, height: 500 });
+
+	let applyNice = $state(true);
+	setInterval(() => {
+		applyNice = !applyNice;
+	}, 5000);
+
 	export { data };
 </script>
 
-<ScatterChart {data} x="x" y="y" xNice yNice padding={24} height={400} />
+{applyNice ? 'Applying Nice' : 'Not applying Nice'}
+<ScatterChart {data} x="x" y="y" xNice={applyNice} yNice={applyNice} padding={24} height={400} />
diff --git a/docs/src/examples/components/ScatterChart/labels.svelte b/docs/src/examples/components/ScatterChart/labels.svelte
index f188f8357..3bf1c11da 100644
--- a/docs/src/examples/components/ScatterChart/labels.svelte
+++ b/docs/src/examples/components/ScatterChart/labels.svelte
@@ -6,4 +6,4 @@
 	export { data };
 </script>
 
-<ScatterChart {data} x="x" y="y" labels padding={24} height={400} />
+<ScatterChart {data} xNice x="x" y="y" labels padding={24} height={400} />
diff --git a/docs/src/examples/components/ScatterChart/line-annotation.svelte b/docs/src/examples/components/ScatterChart/line-annotation.svelte
index 34fa28c78..6ac0a629c 100644
--- a/docs/src/examples/components/ScatterChart/line-annotation.svelte
+++ b/docs/src/examples/components/ScatterChart/line-annotation.svelte
@@ -8,6 +8,7 @@
 
 <ScatterChart
 	{data}
+	xNice
 	x="x"
 	y="y"
 	annotations={[
diff --git a/docs/src/examples/components/ScatterChart/point-annotations.svelte b/docs/src/examples/components/ScatterChart/point-annotations.svelte
index 0b668f5fa..f1dfd4e46 100644
--- a/docs/src/examples/components/ScatterChart/point-annotations.svelte
+++ b/docs/src/examples/components/ScatterChart/point-annotations.svelte
@@ -8,6 +8,7 @@
 
 <ScatterChart
 	{data}
+	xNice
 	x="x"
 	y="y"
 	annotations={[
diff --git a/docs/src/examples/components/ScatterChart/range-annotation-both.svelte b/docs/src/examples/components/ScatterChart/range-annotation-both.svelte
index decc2f4ad..dfb3ef988 100644
--- a/docs/src/examples/components/ScatterChart/range-annotation-both.svelte
+++ b/docs/src/examples/components/ScatterChart/range-annotation-both.svelte
@@ -8,6 +8,7 @@
 
 <ScatterChart
 	{data}
+	xNice
 	x="x"
 	y="y"
 	annotations={[
diff --git a/docs/src/examples/components/ScatterChart/range-annotation-horizontal.svelte b/docs/src/examples/components/ScatterChart/range-annotation-horizontal.svelte
index a97f736c9..1e0580201 100644
--- a/docs/src/examples/components/ScatterChart/range-annotation-horizontal.svelte
+++ b/docs/src/examples/components/ScatterChart/range-annotation-horizontal.svelte
@@ -8,6 +8,7 @@
 
 <ScatterChart
 	{data}
+	xNice
 	x="x"
 	y="y"
 	annotations={[
diff --git a/docs/src/examples/components/ScatterChart/range-annotation-vertical.svelte b/docs/src/examples/components/ScatterChart/range-annotation-vertical.svelte
index d167711c9..bfbdbd2c9 100644
--- a/docs/src/examples/components/ScatterChart/range-annotation-vertical.svelte
+++ b/docs/src/examples/components/ScatterChart/range-annotation-vertical.svelte
@@ -8,6 +8,7 @@
 
 <ScatterChart
 	{data}
+	xNice
 	x="x"
 	y="y"
 	annotations={[
diff --git a/docs/src/examples/components/ScatterChart/series-custom-labels.svelte b/docs/src/examples/components/ScatterChart/series-custom-labels.svelte
index ce59f3d79..ccf01c4bf 100644
--- a/docs/src/examples/components/ScatterChart/series-custom-labels.svelte
+++ b/docs/src/examples/components/ScatterChart/series-custom-labels.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ScatterChart } from 'layerchart';
+	import { ScatterChart, defaultChartPadding } from 'layerchart';
 	import { getPenguins } from '$lib/data.remote';
 	import { flatGroup } from 'd3-array';
 
@@ -15,6 +15,7 @@
 </script>
 
 <ScatterChart
+	xNice
 	x="flipper_length_mm"
 	y="bill_length_mm"
 	series={data.map(([species, data], i) => {
@@ -22,6 +23,7 @@
 		return {
 			key: species,
 			label: species + ' 🐧',
+			fontSize: 16,
 			data,
 			color,
 			props: {
@@ -31,6 +33,6 @@
 		};
 	})}
 	legend
-	padding={{ left: 10, top: 10, right: 10, bottom: 48 }}
+	padding={{ ...defaultChartPadding, top: 20, bottom: 48, left: 20, right: 20 }}
 	height={400}
 />
diff --git a/docs/src/examples/components/ScatterChart/series-legend.svelte b/docs/src/examples/components/ScatterChart/series-legend.svelte
index fef824402..248707f68 100644
--- a/docs/src/examples/components/ScatterChart/series-legend.svelte
+++ b/docs/src/examples/components/ScatterChart/series-legend.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ScatterChart } from 'layerchart';
+	import { ScatterChart, defaultChartPadding } from 'layerchart';
 	import { getPenguins } from '$lib/data.remote';
 	import { flatGroup } from 'd3-array';
 
@@ -15,6 +15,7 @@
 </script>
 
 <ScatterChart
+	xNice
 	x="flipper_length_mm"
 	y="bill_length_mm"
 	series={data.map(([species, data], i) => {
@@ -30,6 +31,6 @@
 		};
 	})}
 	legend
-	padding={{ left: 10, top: 10, right: 10, bottom: 48 }}
+	padding={{ ...defaultChartPadding, top: 20, bottom: 48, left: 20, right: 20 }}
 	height={400}
 />
diff --git a/docs/src/examples/components/ScatterChart/series-tween.svelte b/docs/src/examples/components/ScatterChart/series-tween.svelte
index 8c52cdcb1..233251c6f 100644
--- a/docs/src/examples/components/ScatterChart/series-tween.svelte
+++ b/docs/src/examples/components/ScatterChart/series-tween.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ScatterChart } from 'layerchart';
+	import { ScatterChart, defaultChartPadding } from 'layerchart';
 	import { getPenguins } from '$lib/data.remote';
 	import { flatGroup } from 'd3-array';
 
@@ -15,6 +15,7 @@
 </script>
 
 <ScatterChart
+	xNice
 	x="flipper_length_mm"
 	y="bill_length_mm"
 	series={data.map(([species, data], i) => {
@@ -36,6 +37,6 @@
 		grid: { motion: { type: 'tween', duration: 200 } },
 		points: { motion: { type: 'tween', duration: 200 } }
 	}}
-	padding={{ left: 10, top: 10, right: 10, bottom: 48 }}
+	padding={{ ...defaultChartPadding, top: 20, bottom: 48, left: 20, right: 20 }}
 	height={400}
 />
diff --git a/docs/src/examples/components/ScatterChart/series-with-radius.svelte b/docs/src/examples/components/ScatterChart/series-with-radius.svelte
index 8143116cb..2b55661f8 100644
--- a/docs/src/examples/components/ScatterChart/series-with-radius.svelte
+++ b/docs/src/examples/components/ScatterChart/series-with-radius.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ScatterChart } from 'layerchart';
+	import { defaultChartPadding, ScatterChart } from 'layerchart';
 	import { getPenguins } from '$lib/data.remote';
 	import { flatGroup } from 'd3-array';
 
@@ -15,6 +15,7 @@
 </script>
 
 <ScatterChart
+	xNice
 	x="flipper_length_mm"
 	y="bill_length_mm"
 	r="body_mass_g"
@@ -31,6 +32,6 @@
 			}
 		};
 	})}
-	padding={10}
+	padding={{ ...defaultChartPadding, top: 20, bottom: 20, left: 20, right: 20 }}
 	height={400}
 />
diff --git a/docs/src/examples/components/ScatterChart/series.svelte b/docs/src/examples/components/ScatterChart/series.svelte
index 180dd9ea2..8db3c05ae 100644
--- a/docs/src/examples/components/ScatterChart/series.svelte
+++ b/docs/src/examples/components/ScatterChart/series.svelte
@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { ScatterChart } from 'layerchart';
+	import { ScatterChart, defaultChartPadding } from 'layerchart';
 	import { getPenguins } from '$lib/data.remote';
 	import { flatGroup } from 'd3-array';
 
@@ -15,6 +15,7 @@
 </script>
 
 <ScatterChart
+	xNice
 	x="flipper_length_mm"
 	y="bill_length_mm"
 	series={data.map(([species, data], i) => {
@@ -29,6 +30,6 @@
 			}
 		};
 	})}
-	padding={10}
+	padding={{ ...defaultChartPadding, top: 20, bottom: 20, left: 20, right: 20 }}
 	height={400}
 />
diff --git a/docs/src/examples/components/ScatterChart/single-axis-y.svelte b/docs/src/examples/components/ScatterChart/single-axis-y.svelte
index 6666980ed..806ea0d82 100644
--- a/docs/src/examples/components/ScatterChart/single-axis-y.svelte
+++ b/docs/src/examples/components/ScatterChart/single-axis-y.svelte
@@ -6,4 +6,4 @@
 	export { data };
 </script>
 
-<ScatterChart {data} x="x" y="y" axis="y" padding={24} height={400} />
+<ScatterChart {data} xNice x="x" y="y" axis="y" padding={24} height={400} />
diff --git a/docs/src/examples/components/ScatterChart/tooltip-click.svelte b/docs/src/examples/components/ScatterChart/tooltip-click.svelte
index 5b150a076..84e94da8b 100644
--- a/docs/src/examples/components/ScatterChart/tooltip-click.svelte
+++ b/docs/src/examples/components/ScatterChart/tooltip-click.svelte
@@ -8,6 +8,7 @@
 
 <ScatterChart
 	{data}
+	xNice
 	x="x"
 	y="y"
 	onTooltipClick={(e, detail) => {