Additional axis examples (#764)

* fix for empty layers toggle showing small circle

* New barchart-xinterval-xinset and linechart-tickspacing

- updates to Axis.md and BarChart.md text
- updated Scatterplot domain-nice to use Switch instead of autotoggling

* added needed padding

* Add `tickSpacing` @default to jsdoc

* refine docs

---------

Co-authored-by: Sean Lynch <techniq35@gmail.com>

Author: cycle4passion

docs/src/content/components/Axis.md

@@ -9,6 +9,30 @@ related: [Grid, Rule]
 
 :example{ name="placement-bottom-left" showCode }
 
+## tickSpacing
+
+If using a continuous scales (ex. linear, time) and ticks become too crowded, you can use `tickSpacing` to control the number of pixels alloted for each tick (higher => fewer ticks).
+
+::note
+Default: `80` for horizontal axes (top/bottom/angle) and `50` for vertical axes (left/right/radius).
+::
+
+:example{ name="linechart-tickspacing" showCode }
+
+::tip
+See also: time scale [auto](/docs/components/Axis/time-scale-auto), [multiline](/docs/components/Axis/time-scale-auto-multiline), and [brush](/docs/components/Axis/time-scale-brush-multiline) examples
+::
+
+## band scales
+
+When creating time-series bar charts, it can be useful to use a time scale axis instead of a bar scale axis. This helps show gaps in data (such as on [weekends](/docs/components/BarChart/time-scale-interval)) and provides improved axis ticks.
+
+To enable this, you must define the interval (daily, hourly, etc) of your data using [d3-time interval](https://d3js.org/d3-time#timeMillisecond), such as `xInterval={timeDay}`.
+
+Since band padding is not available when not using a band scale, you can leverage `xInset={...}` to add padding between bars.
+
+:example{ name="barchart-xinterval-xinset" showCode }
+
 <!-- ## Examples
 
 ### Placement (bottom / left)

docs/src/content/components/BarChart.md

@@ -9,6 +9,10 @@ related: [Chart, Bars]
 
 :example{ name="vertical-default" showCode }
 
+:::tip
+See also: [Axis](/docs/components/Axis) for examples of using time scale axes with bar charts
+:::
+
 <!-- ## Examples
 
 ### Vertical (default)

docs/src/examples/components/Axis/barchart-xinterval-xinset.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { BarChart } from 'layerchart';
+	import { timeDay } from 'd3-time';
+	import { createDateSeries } from '$lib/utils/data.js';
+	import { Switch } from 'svelte-ux';
+
+	const data = $derived(createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' }));
+	let xInterval = $state(true);
+	let xInset = $state(true);
+
+	export { data };
+</script>
+
+<div class="flex justify-between pb-4 screenshot-hidden">
+	<label class="flex gap-2">
+		<Switch bind:checked={xInterval} />
+		{xInterval ? 'Applying xInterval={timeDay}' : 'Not applying xInterval={timeDay}'}
+	</label>
+	<label class="flex gap-2">
+		<Switch bind:checked={xInset} />
+		{xInset ? 'Applying xInset' : 'Not applying xInset'}
+	</label>
+</div>
+
+<BarChart
+	{data}
+	x="date"
+	y="value"
+	props={{ xAxis: { tickSpacing: 200 }, bars: { insets: { x: xInset ? 4 : undefined } } }}
+	xInterval={xInterval ? timeDay : undefined}
+	height={300}
+/>

docs/src/examples/components/Axis/linechart-tickspacing.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import { LineChart } from 'layerchart';
+	import { createDateSeries } from '$lib/utils/data.js';
+	import { Switch } from 'svelte-ux';
+
+	const data = createDateSeries({ count: 30, min: 50, max: 100, value: 'integer' });
+
+	let tickSpacing = $state(true);
+
+	export { data };
+</script>
+
+<label class="flex gap-2 pb-4 screenshot-hidden">
+	<Switch bind:checked={tickSpacing} />
+	{tickSpacing ? 'Applying tickSpacing' : 'Not applying tickSpacing'}
+</label>
+
+<LineChart
+	{data}
+	x="date"
+	y="value"
+	props={{ xAxis: { tickSpacing: tickSpacing ? 200 : undefined } }}
+	height={300}
+/>

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

@@ -111,10 +111,11 @@
 	{#each examples as example}
 		<div>
 			<div class="text-sm mb-1">{example.label}</div>
-			<div class="h-[100px] p-4 border rounded-sm">
+			<div class="border rounded-sm">
 				<Chart
 					xDomain={example.domain}
-					padding={defaultChartPadding({ top: 30, bottom: 30, left: 25, right: 25 })}
+					padding={defaultChartPadding({ top: 40, bottom: 40, left: 25, right: 25 })}
+					height={100}
 				>
 					<Layer>
 						<Axis placement="top" rule grid tickMultiline {tickSpacing} />

docs/src/examples/components/ScatterChart/domain-nice.svelte

@@ -1,16 +1,18 @@
 <script lang="ts">
 	import { ScatterChart } from 'layerchart';
 	import { getSpiral } from '$lib/utils/data.js';
+	import { Switch } from 'svelte-ux';
 
 	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>
 
-{applyNice ? 'Applying Nice' : 'Not applying Nice'}
+<label class="flex gap-2 pb-4 screenshot-hidden">
+	<Switch bind:checked={applyNice} />
+	{applyNice ? 'Applying Nice' : 'Not applying Nice'}
+</label>
+
 <ScatterChart {data} x="x" y="y" xNice={applyNice} yNice={applyNice} padding={24} height={400} />

packages/layerchart/src/lib/components/Axis.svelte

@@ -45,6 +45,7 @@
 
     /**
      * Width or height of each tick in pixels (enabling responsive count)
+     * @default 80 (top|bottom|angle) or 50 (left|right|radius)
      */
     tickSpacing?: number;