last-of-padding-updates

docs/src/content/components/Bars.md

@@ -5,7 +5,9 @@ layers: [svg, canvas]
 related: [Bar]
 ---
 
-> See also: [BarChart](/docs/components/BarChart) for simplified examples
+:::tip
+See also: [BarChart](/docs/components/BarChart) for simplified examples
+:::
 
 ## Usage
 

docs/src/examples/components/AnnotationPoint/line-to-point.svelte

@@ -13,27 +13,39 @@
 			details: 'iPhone (1st Gen)'
 		},
 		{
-			x: new Date('July 7, 2008'),
+			x: new Date('July 11, 2008'),
 			y: 175.16,
 			label: 'B',
-			details: 'iPad (1st Gen)'
+			details: 'iPhone 3G'
 		},
 		{
-			x: new Date('January 27, 2010'),
-			y: 207.88,
+			x: new Date('April 3, 2010'),
+			y: 232.39,
 			label: 'C',
 			details: 'iPad (1st Gen)'
 		},
+		{
+			x: new Date('June 24, 2010'),
+			y: 254.28,
+			label: 'D',
+			details: 'iPhone 4'
+		},
+		{
+			x: new Date('September 1, 2010'),
+			y: 258.77,
+			label: 'E',
+			details: 'Apple TV (2nd Gen)'
+		},
 		{
 			x: new Date('March 11, 2011'),
 			y: 352.47,
-			label: 'D',
-			details: 'iPad (1st Gen)'
+			label: 'F',
+			details: 'iPad (2nd Gen)'
 		},
 		{
 			x: new Date('March 7, 2012'),
 			y: 545.18,
-			label: 'E',
+			label: 'G',
 			details: 'Apple TV (3rd Gen)'
 		}
 	];

docs/src/examples/components/AnnotationRange/hide-tooltip.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
 
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet aboveMarks({ context })}
 		<AnnotationRange
 			x={[new Date('2010-01-01'), null]}

docs/src/examples/components/AnnotationRange/horizontal-with-fill-multiple.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
 
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet belowMarks({ context })}
 		<AnnotationRange y={[0, 400]} class="fill-success/10" />
 		<AnnotationRange y={[400, 600]} class="fill-warning/10" />

docs/src/examples/components/AnnotationRange/horizontal-with-pattern-lower-bound.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
 
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet belowMarks({ context })}
 		<AnnotationRange
 			y={[500, null]}

docs/src/examples/components/AnnotationRange/horizontal-with-pattern-range.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
 
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet belowMarks({ context })}
 		<AnnotationRange
 			y={[300, 500]}

docs/src/examples/components/AnnotationRange/horizontal-with-pattern-upper-bound.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
 
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet belowMarks({ context })}
 		<AnnotationRange
 			y={[null, 500]}

docs/src/examples/components/AnnotationRange/label-placement.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart, type Placement } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding, type Placement } from 'layerchart';
 	import AnnotationRangeControls from '$lib/components/controls/AnnotationRangePointLineControls.svelte';
 
 	import { getAppleStock } from '$lib/data.remote';
@@ -26,7 +26,13 @@
 
 <AnnotationRangeControls bind:placement bind:xOffset bind:yOffset />
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet aboveMarks({ context })}
 		<AnnotationRange
 			x={[new Date('2010-01-01'), new Date('2010-12-31')]}

docs/src/examples/components/AnnotationRange/vertical-with-gradient-range.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
 
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet belowMarks({ context })}
 		<AnnotationRange
 			x={[new Date('2011-01-01'), new Date('2011-06-30')]}

docs/src/examples/components/AnnotationRange/vertical-with-pattern-lower-bound.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
 
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet belowMarks({ context })}
 		<AnnotationRange
 			x={[new Date('2010-01-01'), null]}

docs/src/examples/components/AnnotationRange/vertical-with-pattern-range.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
 
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet belowMarks({ context })}
 		<AnnotationRange
 			x={[new Date('2010-01-01'), new Date('2010-12-31')]}

docs/src/examples/components/AnnotationRange/vertical-with-pattern-upper-bound.svelte

@@ -1,13 +1,19 @@
 <script lang="ts">
-	import { AnnotationRange, LineChart } from 'layerchart';
+	import { AnnotationRange, LineChart, defaultChartPadding } from 'layerchart';
 	import { getAppleStock } from '$lib/data.remote';
 
 	const data = await getAppleStock();
 
 	export { data };
 </script>
 
-<LineChart {data} x="date" y="value" height={300} padding={{ left: 25, bottom: 5 }}>
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	height={300}
+	padding={defaultChartPadding({ left: 25, bottom: 15 })}
+>
 	{#snippet belowMarks({ context })}
 		<AnnotationRange
 			x={[null, new Date('2010-12-31')]}

docs/src/examples/components/Area/multiple-series-using-overrides.svelte

@@ -26,7 +26,7 @@
 	y={['apples', 'bananas', 'oranges']}
 	yDomain={[0, null]}
 	yNice
-	padding={{ top: 20, left: 20, bottom: 20, right: 48 }}
+	padding={{ top: 20, left: 20, bottom: 20, right: 15 }}
 	tooltip={{ mode: 'quadtree-x' }}
 	height={300}
 >

docs/src/examples/components/Area/multiple-series.svelte

@@ -46,7 +46,7 @@
 	cDomain={Object.keys(fruitColors)}
 	cRange={Object.values(fruitColors)}
 	tooltip={{ mode: 'quadtree' }}
-	padding={{ ...defaultChartPadding, top: 10, bottom: 10, left: 20, right: 60 }}
+	padding={defaultChartPadding({ top: 10, bottom: 15, left: 20, right: 60 })}
 	height={300}
 >
 	{#snippet children({ context })}

docs/src/examples/components/Area/stack.svelte

@@ -50,7 +50,7 @@
 	cDomain={Object.keys(fruitColors)}
 	cRange={Object.values(fruitColors)}
 	tooltip={{ mode: 'quadtree-x' }}
-	padding={{ ...defaultChartPadding, left: 25, bottom: 20 }}
+	padding={defaultChartPadding({ left: 25, bottom: 20, right: 15 })}
 	height={300}
 >
 	{#snippet children({ context })}

docs/src/examples/components/AreaChart/custom.svelte

@@ -15,7 +15,7 @@
 	export { data };
 </script>
 
-<AreaChart {data} x="date" y="value" padding={defaultChartPadding({ right: 10 })} height={300}>
+<AreaChart {data} x="date" y="value" padding={defaultChartPadding({ right: 15 })} height={300}>
 	{#snippet children({ context })}
 		<Layer>
 			<Axis placement="left" grid rule />

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

@@ -47,7 +47,7 @@
 		}
 	]}
 	props={{ tooltip: { context: { mode: 'quadtree' } } }}
-	padding={defaultChartPadding({ right: 10 })}
+	padding={defaultChartPadding({ right: 15 })}
 	height={300}
 >
 	{#snippet marks({ series, context })}

docs/src/examples/components/AreaChart/series-stack-legend-labels.svelte

@@ -30,6 +30,6 @@
 	]}
 	legend
 	seriesLayout="stack"
-	padding={defaultChartPadding({ bottom: 45, right: 10 })}
+	padding={defaultChartPadding({ legend: true, right: 10 })}
 	height={300}
 />

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

@@ -28,6 +28,6 @@
 	]}
 	seriesLayout="stack"
 	legend
-	padding={defaultChartPadding({ bottom: 45, right: 10 })}
+	padding={defaultChartPadding({ legend: true, right: 10 })}
 	height={300}
 />

docs/src/examples/components/AreaChart/threshold-gradient.svelte

@@ -2,10 +2,10 @@
 	import {
 		Area,
 		AreaChart,
-		defaultChartPadding,
 		Highlight,
 		LinearGradient,
-		Tooltip
+		Tooltip,
+		defaultChartPadding
 	} from 'layerchart';
 	import { createDateSeries } from '$lib/utils/data.js';
 	import { format } from '@layerstack/utils';
@@ -19,7 +19,7 @@
 	};
 </script>
 
-<AreaChart {data} x="date" y="value" padding={defaultChartPadding({ right: 10 })} height={300}>
+<AreaChart {data} x="date" y="value" padding={defaultChartPadding({ right: 15 })} height={300}>
 	{#snippet marks({ context })}
 		{@const thresholdValue = 0}
 		{@const thresholdOffset =

docs/src/examples/components/Axis/rotate-labels.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
-	import { Axis, Chart, Layer } from 'layerchart';
+	import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
 	import { timeDay } from 'd3-time';
 	import { startOfInterval } from '@layerstack/utils';
 
 	const today = startOfInterval('day', new Date());
 </script>
 
-<Chart xDomain={[timeDay.offset(today, -10), today]} padding={24} height={48}>
+<Chart
+	xDomain={[timeDay.offset(today, -10), today]}
+	padding={defaultChartPadding({ bottom: 60, top: 24, left: 24, right: 24 })}
+	height={52}
+>
 	<Layer>
 		<Axis
 			placement="bottom"

docs/src/examples/components/Axis/time-scale-auto-format-filtering.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { Axis, Chart, Layer } from 'layerchart';
+	import { Axis, Chart, Layer, defaultChartPadding } from 'layerchart';
 	import {
 		timeDay,
 		timeHour,
@@ -112,7 +112,10 @@
 		<div>
 			<div class="text-sm mb-1">{example.label}</div>
 			<div class="h-[100px] p-4 border rounded-sm">
-				<Chart xDomain={example.domain} padding={{ top: 20, bottom: 20, left: 20, right: 20 }}>
+				<Chart
+					xDomain={example.domain}
+					padding={defaultChartPadding({ top: 20, bottom: 20, left: 20, right: 25 })}
+				>
 					<Layer>
 						<Axis placement="bottom" rule grid {tickSpacing} format={example.format} />
 					</Layer>