@swr-data-lab/components 2.34.8 → 2.35.0

package/dist/index.d.ts

@@ -26,6 +26,7 @@ export { default as ArrowSource } from "./maplibre/ArrowSource/ArrowSource.svelt
 export { default as MapSource } from "./maplibre/Source/MapSource.svelte";
 export { default as Tooltip } from "./maplibre/Tooltip/Tooltip.svelte";
 export { default as WithLinkLocation } from "./maplibre/WithLinkLocation/WithLinkLocation.svelte";
+export { default as AnnotationLine } from "./layercake/AnnotationLine/AnnotationLine.svelte";
 export { default as FormLabel } from "./FormLabel/FormLabel.svelte";
 export { default as Switcher } from "./Switcher/Switcher.svelte";
 export { default as Input } from "./Input/Input.svelte";

package/dist/index.js

@@ -39,6 +39,9 @@ export { default as MapSource } from './maplibre/Source/MapSource.svelte';
 export { default as Tooltip } from './maplibre/Tooltip/Tooltip.svelte';
 export { default as WithLinkLocation } from './maplibre/WithLinkLocation/WithLinkLocation.svelte';
 
+// Layercake
+export { default as AnnotationLine } from './layercake/AnnotationLine/AnnotationLine.svelte';
+
 // Form
 export { default as FormLabel } from './FormLabel/FormLabel.svelte';
 export { default as Switcher } from './Switcher/Switcher.svelte';

package/dist/layercake/AnnotationLine/AnnotationLine.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">import { getContext } from 'svelte';
+const { xScale, yScale, width, height } = getContext('LayerCake');
+let { axis = 'x', value = 0 } = $props();
+</script>
+
+{#if axis === 'x'}
+	<line class="annotation-line" x1={$xScale(value)} x2={$xScale(value)} y1={0} y2={$height}></line>
+{:else}
+	<line class="annotation-line" x1={0} x2={$width} y1={$yScale(value)} y2={$yScale(value)}></line>
+{/if}
+
+<style>
+	line {
+		stroke: var(--color-textPrimary);
+		stroke-width: 1;
+		pointer-events: none;
+	}
+</style>

package/dist/layercake/AnnotationLine/AnnotationLine.svelte.d.ts

@@ -0,0 +1,7 @@
+interface AnnotationLineProps {
+    axis: 'x' | 'y';
+    value: number;
+}
+declare const AnnotationLine: import("svelte").Component<AnnotationLineProps, {}, "">;
+type AnnotationLine = ReturnType<typeof AnnotationLine>;
+export default AnnotationLine;

package/dist/layercake/AnnotationLine/index.d.ts

@@ -0,0 +1,2 @@
+export default AnnotationLine;
+import AnnotationLine from './AnnotationLine.svelte';

package/dist/layercake/AnnotationLine/index.js

@@ -0,0 +1,2 @@
+import AnnotationLine from './AnnotationLine.svelte';
+export default AnnotationLine;

package/dist/layercake/AxisX/AxisX.svelte

@@ -0,0 +1,118 @@
+<!--
+  @component
+  Generates an SVG x-axis. This component is also configured to detect if your x-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth.
+ -->
+<script lang="ts">import { getContext } from 'svelte';
+const { width, height, xScale, yRange } = getContext('LayerCake');
+/**
+ * @typedef {Object} Props
+ * @property {boolean} [tickMarks=false] - Show a vertical mark for each tick.
+ * @property {boolean} [gridlines=true] - Show gridlines extending into the chart area.
+ * @property {number} [tickMarkLength=6] - The length of the tick mark.
+ * @property {boolean} [baseline=false] - Show a solid line at the bottom.
+ * @property {boolean} [snapLabels=false] - Instead of centering the text labels on the first and the last items, align them to the edges of the chart.
+ * @property {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return.
+ * @property {number|Array<any>|Function} [ticks] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return. If nothing, it uses the default ticks supplied by the D3 function.
+ * @property {number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the yRange min).
+ * @property {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label.
+ * @property {number} [dy=12] - Any optional value passed to the `dy` attribute on the text label.
+ */
+/** @type {Props} */
+let { tickMarks = false, gridlines = true, tickMarkLength = 6, baseline = false, snapLabels = false, format = (d) => d, ticks = undefined, tickGutter = 0, fade = false, dx = 0, dy = 12 } = $props();
+function textAnchor(i, sl) {
+    if (sl === true) {
+        if (i === 0) {
+            return 'start';
+        }
+        if (i === tickVals.length - 1) {
+            return 'end';
+        }
+    }
+    return 'middle';
+}
+let tickLen = $derived(tickMarks === true ? (tickMarkLength ?? 6) : 0);
+let isBandwidth = $derived(typeof $xScale.bandwidth === 'function');
+/** @type {Array<any>} */
+let tickVals = $derived(Array.isArray(ticks)
+    ? ticks
+    : isBandwidth
+        ? $xScale.domain()
+        : typeof ticks === 'function'
+            ? ticks($xScale.ticks())
+            : $xScale.ticks(ticks));
+let halfBand = $derived(isBandwidth ? $xScale.bandwidth() / 2 : 0);
+</script>
+
+<defs>
+	<linearGradient id="fade" x1=".5" x2=".5" y1="0" y2="1">
+		<stop stop-color={'black'} offset="20%" />
+		<stop stop-color={'white'} offset="100%" />
+	</linearGradient>
+	<mask id="fade-mask">
+		<rect fill="url(#fade)" x={-15} width={$width + 15} y={0} height={$height + 100}></rect>
+	</mask>
+</defs>
+<g class="axis x-axis" class:snapLabels mask={fade ? 'url(#fade-mask)' : ''}>
+	{#each tickVals as tick, i (tick)}
+		{#if baseline === true}
+			<line class="baseline" y1={$height} y2={$height} x1="0" x2={$width} />
+		{/if}
+
+		<g class="tick tick-{i}" transform="translate({$xScale(tick)},{Math.max(...$yRange)})">
+			{#if gridlines === true}
+				<line class="gridline" x1={halfBand} x2={halfBand} y1={-$height} y2="0" />
+			{/if}
+			{#if tickMarks === true}
+				<line
+					class="tick-mark"
+					x1={halfBand}
+					x2={halfBand}
+					y1={tickGutter}
+					y2={tickGutter + tickLen}
+				/>
+			{/if}
+			<text x={halfBand} y={tickGutter + tickLen} {dx} {dy} text-anchor={textAnchor(i, snapLabels)}
+				>{format(tick)}</text
+			>
+		</g>
+	{/each}
+</g>
+
+<style>
+	.tick {
+		font-size: var(--fs-small-3);
+	}
+
+	line,
+	.tick line {
+		stroke: var(--color-textSecondary);
+	}
+	.tick line {
+		opacity: 0.5;
+		stroke-dasharray: 2 5;
+	}
+
+	.tick text {
+		fill: var(--color-textSecondary);
+	}
+
+	.tick .tick-mark,
+	.baseline {
+		stroke-width: 1;
+	}
+	.baseline {
+		opacity: 1;
+		stroke: var(--color-textPrimary);
+		stroke-width: 1;
+	}
+	/* This looks slightly better */
+	.axis.snapLabels .tick:last-child text {
+		transform: translateX(3px);
+	}
+	.axis.snapLabels .tick.tick-0 text {
+		transform: translateX(-3px);
+	}
+	.fade {
+		fill: url('#fade');
+	}
+</style>

package/dist/layercake/AxisX/AxisX.svelte.d.ts

@@ -0,0 +1,16 @@
+/** Generates an SVG x-axis. This component is also configured to detect if your x-scale is an ordinal scale. If so, it will place the markers in the middle of the bandwidth. */
+declare const AxisX: import("svelte").Component<{
+    tickMarks?: boolean;
+    gridlines?: boolean;
+    tickMarkLength?: number;
+    baseline?: boolean;
+    snapLabels?: boolean;
+    format?: Function;
+    ticks?: any;
+    tickGutter?: number;
+    fade?: boolean;
+    dx?: number;
+    dy?: number;
+}, {}, "">;
+type AxisX = ReturnType<typeof AxisX>;
+export default AxisX;

package/dist/layercake/AxisY/AxisY.svelte

@@ -0,0 +1,129 @@
+<!--
+  @component
+  Generates an SVG y-axis. This component is also configured to detect if your y-scale is an ordinal scale. If so, it will place the tickMarks in the middle of the bandwidth.
+ -->
+<script>
+	import { getContext } from 'svelte';
+
+	const { xRange, yScale, width, height } = getContext('LayerCake');
+
+	/**
+	 * @typedef {Object} Props
+	 * @property {boolean} [tickMarks=false] - Show marks next to the tick label.
+	 * @property {string} [labelPosition='even'] - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'.
+	 * @property {boolean} [snapBaselineLabel=false] - When labelPosition='even', adjust the lowest label so that it sits above the tick mark.
+	 * @property {boolean} [gridlines=true] - Show gridlines extending into the chart area.
+	 * @property {number} [tickMarkLength] - The length of the tick mark. If not set, becomes the length of the widest tick.
+	 * @property {(d: any) => string} [format=d => d] - A function that passes the current tick value and expects a nicely formatted value in return.
+	 * @property {number|Array<any>|Function} [ticks=4] - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return.
+	 * @property {number} [tickGutter=0] - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min).
+	 * @property {number} [dx=0] - Any optional value passed to the `dx` attribute on the text label.
+	 * @property {number} [dy=0] - Any optional value passed to the `dy` attribute on the text label.
+	 * @property {number} [charPixelWidth=7.25] - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value).
+	 */
+
+	/** @type {Props} */
+	let {
+		tickMarks = false,
+		labelPosition = 'even',
+		snapBaselineLabel = false,
+		gridlines = true,
+		baseline = true,
+		tickMarkLength = undefined,
+		format = (d) => d,
+		ticks = 4,
+		tickGutter = 0,
+		dx = 0,
+		dy = 0,
+		charPixelWidth = 7.25
+	} = $props();
+
+	/** @param {number} sum
+	 *  @param {string} val */
+	function calcStringLength(sum, val) {
+		if (val === ',' || val === '.') return sum + charPixelWidth * 0.5;
+		return sum + charPixelWidth;
+	}
+
+	let isBandwidth = $derived(typeof $yScale.bandwidth === 'function');
+	/** @type {Array<any>} */
+	let tickVals = $derived(
+		Array.isArray(ticks)
+			? ticks
+			: isBandwidth
+				? $yScale.domain()
+				: typeof ticks === 'function'
+					? ticks($yScale.ticks())
+					: $yScale.ticks(ticks)
+	);
+	let widestTickLen = $derived(
+		Math.max(
+			10,
+			Math.max(...tickVals.map((d) => format(d).toString().split('').reduce(calcStringLength, 0)))
+		)
+	);
+	let tickLen = $derived(
+		tickMarks === true
+			? labelPosition === 'above'
+				? (tickMarkLength ?? widestTickLen)
+				: (tickMarkLength ?? 6)
+			: 0
+	);
+	let x1 = $derived(labelPosition === 'above' ? widestTickLen : tickLen);
+	let y = $derived(isBandwidth ? $yScale.bandwidth() / 2 : 0);
+	let maxTickValPx = $derived(Math.max(...tickVals.map($yScale)));
+</script>
+
+<g class="axis y-axis">
+	{#if baseline === true}
+		<line class="baseline" y1={0} y2={$height} {x1} x2={x1} />
+	{/if}
+
+	{#each tickVals as tick (tick)}
+		{@const tickValPx = $yScale(tick)}
+		<g class="tick tick-{tick}" transform="translate({$xRange[0]}, {tickValPx})">
+			{#if gridlines === true}
+				<line class="gridline" {x1} x2={$width} y1={y} y2={y}></line>
+			{/if}
+			{#if tickMarks === true}
+				<line class="tick-mark" {x1} x2={x1 + tickLen} y1={y} y2={y}></line>
+			{/if}
+			<text
+				x={x1}
+				{y}
+				dx={dx + (labelPosition === 'even' ? -8 : 0)}
+				text-anchor={labelPosition === 'above' ? 'start' : 'end'}
+				dy={dy +
+					(labelPosition === 'above' || (snapBaselineLabel === true && tickValPx === maxTickValPx)
+						? -3
+						: 4)}>{format(tick)}</text
+			>
+		</g>
+	{/each}
+</g>
+
+<style>
+	.tick {
+		font-size: 11px;
+	}
+
+	.tick line {
+		stroke: var(--color-textPrimary);
+	}
+	.tick .gridline {
+		stroke-dasharray: 1 3;
+		opacity: 0.5;
+	}
+
+	.tick text {
+		fill: var(--color-textPrimary);
+	}
+
+	.baseline {
+		stroke: var(--color-textPrimary);
+	}
+
+	.tick.tick-0 line {
+		stroke-dasharray: 0;
+	}
+</style>

package/dist/layercake/AxisY/AxisY.svelte.d.ts

@@ -0,0 +1,98 @@
+export default AxisY;
+type AxisY = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+/** Generates an SVG y-axis. This component is also configured to detect if your y-scale is an ordinal scale. If so, it will place the tickMarks in the middle of the bandwidth. */
+declare const AxisY: import("svelte").Component<{
+    /**
+     * - Show marks next to the tick label.
+     */
+    tickMarks?: boolean | undefined;
+    /**
+     * - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'.
+     */
+    labelPosition?: string | undefined;
+    /**
+     * - When labelPosition='even', adjust the lowest label so that it sits above the tick mark.
+     */
+    snapBaselineLabel?: boolean | undefined;
+    /**
+     * - Show gridlines extending into the chart area.
+     */
+    gridlines?: boolean | undefined;
+    /**
+     * - The length of the tick mark. If not set, becomes the length of the widest tick.
+     */
+    tickMarkLength?: number | undefined;
+    /**
+     * - A function that passes the current tick value and expects a nicely formatted value in return.
+     */
+    format?: ((d: any) => string) | undefined;
+    /**
+     * - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return.
+     */
+    ticks?: number | Function | any[] | undefined;
+    /**
+     * - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min).
+     */
+    tickGutter?: number | undefined;
+    /**
+     * - Any optional value passed to the `dx` attribute on the text label.
+     */
+    dx?: number | undefined;
+    /**
+     * - Any optional value passed to the `dy` attribute on the text label.
+     */
+    dy?: number | undefined;
+    /**
+     * - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value).
+     */
+    charPixelWidth?: number | undefined;
+}, {}, "">;
+type Props = {
+    /**
+     * - Show marks next to the tick label.
+     */
+    tickMarks?: boolean | undefined;
+    /**
+     * - Whether the label sits even with its value ('even') or sits on top ('above') the tick mark. Default is 'even'.
+     */
+    labelPosition?: string | undefined;
+    /**
+     * - When labelPosition='even', adjust the lowest label so that it sits above the tick mark.
+     */
+    snapBaselineLabel?: boolean | undefined;
+    /**
+     * - Show gridlines extending into the chart area.
+     */
+    gridlines?: boolean | undefined;
+    /**
+     * - The length of the tick mark. If not set, becomes the length of the widest tick.
+     */
+    tickMarkLength?: number | undefined;
+    /**
+     * - A function that passes the current tick value and expects a nicely formatted value in return.
+     */
+    format?: ((d: any) => string) | undefined;
+    /**
+     * - If this is a number, it passes that along to the [d3Scale.ticks](https://github.com/d3/d3-scale) function. If this is an array, hardcodes the ticks to those values. If it's a function, passes along the default tick values and expects an array of tick values in return.
+     */
+    ticks?: number | Function | any[] | undefined;
+    /**
+     * - The amount of whitespace between the start of the tick and the chart drawing area (the xRange min).
+     */
+    tickGutter?: number | undefined;
+    /**
+     * - Any optional value passed to the `dx` attribute on the text label.
+     */
+    dx?: number | undefined;
+    /**
+     * - Any optional value passed to the `dy` attribute on the text label.
+     */
+    dy?: number | undefined;
+    /**
+     * - Used to calculate the widest label length to offset labels. Adjust if the automatic tick length doesn't look right because you have a bigger font (or just set `tickMarkLength` to a pixel value).
+     */
+    charPixelWidth?: number | undefined;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@swr-data-lab/components",
 	"description": "SWR Data Lab component library",
-	"version": "2.34.8",
+	"version": "2.35.0",
 	"author": "SWR Data Lab",
 	"license": "UNLICENSED",
 	"type": "module",
@@ -37,24 +37,25 @@
 		"svelte-select": "5.8.3"
 	},
 	"devDependencies": {
+		"layercake": "^10.0.2",
 		"@semantic-release/changelog": "6.0.3",
 		"@semantic-release/git": "10.0.1",
-		"@semantic-release/npm": "13.1.2",
-		"@storybook/addon-docs": "10.1.4",
-		"@storybook/addon-links": "10.1.4",
+		"@semantic-release/npm": "13.1.3",
+		"@storybook/addon-docs": "10.1.11",
+		"@storybook/addon-links": "10.1.11",
 		"@storybook/addon-svelte-csf": "^5.0.10",
-		"@storybook/addon-vitest": "10.1.4",
-		"@storybook/sveltekit": "10.1.4",
+		"@storybook/addon-vitest": "10.1.11",
+		"@storybook/sveltekit": "10.1.11",
 		"@storybook/test-runner": "^0.24.2",
 		"@sveltejs/adapter-auto": "7.0.0",
 		"@sveltejs/enhanced-img": "0.9.2",
-		"@sveltejs/kit": "2.49.0",
+		"@sveltejs/kit": "2.49.2",
 		"@sveltejs/package": "2.5.7",
 		"@sveltejs/vite-plugin-svelte": "6.2.1",
 		"@types/geojson": "7946.0.16",
 		"@versatiles/style": "5.7.0",
-		"@vitest/browser": "4.0.15",
-		"@vitest/coverage-v8": "4.0.15",
+		"@vitest/browser": "4.0.16",
+		"@vitest/coverage-v8": "4.0.16",
 		"@vueless/storybook-dark-mode": "9.0.8",
 		"concurrently": "9.2.1",
 		"http-server": "14.1.1",
@@ -64,14 +65,14 @@
 		"sass": "1.93.2",
 		"sass-embedded": "1.93.2",
 		"semantic-release": "25.0.2",
-		"storybook": "10.1.10",
+		"storybook": "10.1.11",
 		"svelte": "5.33.6",
 		"svelte-check": "4.3.2",
 		"svelte-preprocess": "6.0.3",
 		"typescript": "5.9.3",
-		"vite": "7.1.11",
-		"vitest": "4.0.15",
-		"@vitest/browser-playwright": "4.0.15",
+		"vite": "7.3.0",
+		"vitest": "4.0.16",
+		"@vitest/browser-playwright": "4.0.16",
 		"wait-on": "8.0.3"
 	},
 	"overrides": {