@fundar/data-chart-telling 0.0.64 → 1.0.0

package/dist/layout/tooltip/TooltipState.svelte.js

@@ -0,0 +1,107 @@
+import { Box } from '../margins/Box';
+import { PlotMargins } from '../margins/PlotMargins.svelte';
+import { resolveAccessor } from '../../plots/utils/accessors';
+import { SERIES_KEY } from '../../phases/transforms/TransformsPhase';
+import { ValueLabels } from '../styles/ValueLabels';
+/** A tooltip anchor as the side of the point the tooltip sits on. */
+const SIDES = {
+    left: 'before',
+    top: 'before',
+    middle: 'middle',
+    right: 'after',
+    bottom: 'after'
+};
+const STACKS = { x: 'stackX', y: 'stackY' };
+/**
+ * One tooltip: how big it rendered (`width`, `height`, bound to its element),
+ * where that puts it (`box`) - beside its point on its preferred side, moving
+ * over where it would leave its plot's box, as the plot's {@link PlotMargins}
+ * places it - and how its rows read. Its statics are the text a plot's
+ * default tooltip reads. Create it during component init.
+ */
+export class TooltipState {
+    width = $state(0);
+    height = $state(0);
+    #inputs;
+    #plotMargins = PlotMargins.current();
+    constructor(inputs) {
+        this.#inputs = inputs;
+    }
+    /** Where the tooltip sits. */
+    box = $derived.by(() => {
+        const size = Box.size(this.width, this.height);
+        const { x, y } = this.#inputs.anchor();
+        const anchor = { x: SIDES[x], y: SIDES[y] };
+        const point = this.#inputs.point();
+        const bounds = this.#inputs.bounds();
+        if (bounds)
+            return size.placeNear(point, anchor, Box.size(bounds.width, bounds.height));
+        return (this.#plotMargins?.place(size, point, anchor) ??
+            size.placeNear(point, anchor, Box.size(Infinity, Infinity)));
+    });
+    /** The text `rows` read as through `format`, one line each. */
+    static text(rows, format) {
+        return rows.map(format).join('\n');
+    }
+    /** A value as plain text: a date as a locale date, anything else as itself. */
+    static value(value) {
+        return value instanceof Date ? value.toLocaleDateString() : String(value);
+    }
+    /**
+     * How a hovered row reads by default, on every plot: its series, when the
+     * plot groups its rows; then where it sits - `category: value` when one
+     * axis is a band of categories (the row's own value, as its series reads
+     * it), else `x: y` as the transforms left them; then the value its color
+     * shows, when that is a number (a heatmap's cells).
+     */
+    static default(state) {
+        const processed = state.processedData;
+        if (!processed)
+            return () => '';
+        const x = TooltipState.#axisText(processed, 'x');
+        const y = TooltipState.#axisText(processed, 'y');
+        const bandX = state.axes?.bands.includes('x') ?? false;
+        const bandY = state.axes?.bands.includes('y') ?? false;
+        const valueOf = ValueLabels.valueOf(state);
+        const position = bandX && !bandY
+            ? (row) => `${x(row)}: ${TooltipState.value(valueOf(row))}`
+            : bandY && !bandX
+                ? (row) => `${y(row)}: ${TooltipState.value(valueOf(row))}`
+                : (row) => `${x(row)}: ${y(row)}`;
+        const grouped = state.channels?.grouping !== undefined;
+        const color = state.channels?.color;
+        const colorName = typeof color?.source === 'string' ? color.source : 'color';
+        return (row) => {
+            const lines = grouped ? [String(row[SERIES_KEY])] : [];
+            lines.push(position(row));
+            const shown = color?.accessor(row);
+            if (typeof shown === 'number' && Number.isFinite(shown)) {
+                lines.push(`${colorName}: ${TooltipState.value(shown)}`);
+            }
+            return lines.join('\n');
+        };
+    }
+    /**
+     * How one axis reads on a processed row: its own channel, else the range
+     * the transforms gave it - a stack's own share (`2 - 1`), any other span as `1-2`.
+     */
+    static #axisText(processed, axis) {
+        const { channels, transforms } = processed;
+        const read = (channel) => resolveAccessor(channel);
+        const point = channels[axis];
+        if (point !== undefined) {
+            const value = read(point);
+            return (row) => TooltipState.value(value(row));
+        }
+        const low = channels[`${axis}1`];
+        const high = channels[`${axis}2`];
+        if (low === undefined || high === undefined)
+            return () => '';
+        const from = read(low);
+        const to = read(high);
+        if (transforms.some((t) => t.type === STACKS[axis])) {
+            return (row) => TooltipState.value(Number(to(row)) - Number(from(row)));
+        }
+        return (row) => `${TooltipState.value(from(row))}-${TooltipState.value(to(row))}`;
+    }
+}

package/dist/markers/MarkerKinds.d.ts

@@ -0,0 +1,173 @@
+import type { MarkerTraits } from '../types/markers/traits';
+/**
+ * Every marker kind's traits, in one row each. Typed over every kind, so a
+ * new kind can't be added without declaring all of its traits here.
+ */
+export declare class MarkerKinds {
+    static readonly traits: {
+        area: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "area";
+        };
+        arrow: {
+            clip: false;
+            drawsRows: true;
+        };
+        bar: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "bar";
+        };
+        bollinger: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "line";
+        };
+        brush: {
+            clip: false;
+            drawsRows: false;
+        };
+        box: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "bar";
+        };
+        cell: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "cell";
+        };
+        component: {
+            clip: false;
+            drawsRows: false;
+        };
+        contour: {
+            clip: false;
+            drawsRows: false;
+        };
+        delaunayLink: {
+            clip: true;
+            drawsRows: true;
+        };
+        delaunayMesh: {
+            clip: true;
+            drawsRows: true;
+        };
+        delta: {
+            clip: false;
+            drawsRows: false;
+        };
+        density: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "area";
+        };
+        difference: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "area";
+        };
+        dot: {
+            clip: false;
+            drawsRows: true;
+            legendSymbol: "dot";
+        };
+        geo: {
+            clip: false;
+            drawsRows: false;
+        };
+        'geo-component': {
+            clip: false;
+            drawsRows: true;
+        };
+        'geo-hover': {
+            clip: false;
+            drawsRows: false;
+        };
+        graticule: {
+            clip: false;
+            drawsRows: false;
+        };
+        hover: {
+            clip: false;
+            drawsRows: false;
+        };
+        hull: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "area";
+        };
+        image: {
+            clip: false;
+            drawsRows: true;
+        };
+        inset: {
+            clip: false;
+            drawsRows: false;
+        };
+        line: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "line";
+        };
+        link: {
+            clip: false;
+            drawsRows: false;
+        };
+        raster: {
+            clip: true;
+            drawsRows: true;
+        };
+        rect: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "rect";
+        };
+        regression: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "line";
+        };
+        rule: {
+            clip: true;
+            drawsRows: false;
+            legendSymbol: "line";
+        };
+        sphere: {
+            clip: false;
+            drawsRows: false;
+        };
+        text: {
+            clip: false;
+            drawsRows: true;
+        };
+        tick: {
+            clip: true;
+            drawsRows: true;
+        };
+        trail: {
+            clip: true;
+            drawsRows: true;
+            legendSymbol: "line";
+        };
+        vector: {
+            clip: false;
+            drawsRows: false;
+        };
+        voronoi: {
+            clip: true;
+            drawsRows: true;
+        };
+        voronoiMesh: {
+            clip: true;
+            drawsRows: true;
+        };
+        waffle: {
+            clip: true;
+            drawsRows: true;
+        };
+    };
+    /** The traits of a marker kind, or `undefined` for a type no kind declares. */
+    static of(type: string | undefined): MarkerTraits | undefined;
+}

package/dist/markers/MarkerKinds.js

@@ -0,0 +1,51 @@
+/**
+ * Every marker kind's traits, in one row each. Typed over every kind, so a
+ * new kind can't be added without declaring all of its traits here.
+ */
+export class MarkerKinds {
+    static traits = {
+        area: { clip: true, drawsRows: true, legendSymbol: 'area' },
+        arrow: { clip: false, drawsRows: true },
+        bar: { clip: true, drawsRows: true, legendSymbol: 'bar' },
+        bollinger: { clip: true, drawsRows: true, legendSymbol: 'line' },
+        brush: { clip: false, drawsRows: false },
+        box: { clip: true, drawsRows: true, legendSymbol: 'bar' },
+        cell: { clip: true, drawsRows: true, legendSymbol: 'cell' },
+        component: { clip: false, drawsRows: false },
+        contour: { clip: false, drawsRows: false },
+        delaunayLink: { clip: true, drawsRows: true },
+        delaunayMesh: { clip: true, drawsRows: true },
+        delta: { clip: false, drawsRows: false },
+        density: { clip: true, drawsRows: true, legendSymbol: 'area' },
+        difference: { clip: true, drawsRows: true, legendSymbol: 'area' },
+        dot: { clip: false, drawsRows: true, legendSymbol: 'dot' },
+        geo: { clip: false, drawsRows: false },
+        'geo-component': { clip: false, drawsRows: true },
+        'geo-hover': { clip: false, drawsRows: false },
+        graticule: { clip: false, drawsRows: false },
+        hover: { clip: false, drawsRows: false },
+        hull: { clip: true, drawsRows: true, legendSymbol: 'area' },
+        image: { clip: false, drawsRows: true },
+        inset: { clip: false, drawsRows: false },
+        line: { clip: true, drawsRows: true, legendSymbol: 'line' },
+        link: { clip: false, drawsRows: false },
+        raster: { clip: true, drawsRows: true },
+        rect: { clip: true, drawsRows: true, legendSymbol: 'rect' },
+        regression: { clip: true, drawsRows: true, legendSymbol: 'line' },
+        rule: { clip: true, drawsRows: false, legendSymbol: 'line' },
+        sphere: { clip: false, drawsRows: false },
+        text: { clip: false, drawsRows: true },
+        tick: { clip: true, drawsRows: true },
+        trail: { clip: true, drawsRows: true, legendSymbol: 'line' },
+        vector: { clip: false, drawsRows: false },
+        voronoi: { clip: true, drawsRows: true },
+        voronoiMesh: { clip: true, drawsRows: true },
+        waffle: { clip: true, drawsRows: true }
+    };
+    /** The traits of a marker kind, or `undefined` for a type no kind declares. */
+    static of(type) {
+        return type !== undefined && type in MarkerKinds.traits
+            ? MarkerKinds.traits[type]
+            : undefined;
+    }
+}

package/dist/markers/area/AreaMarker.svelte

@@ -0,0 +1,110 @@
+<script lang="ts">
+	import { AreaX, AreaY } from 'svelteplot';
+	import { usePlot } from '../../layout/plot/usePlot';
+	import { MarkerChannels } from '../utils/MarkerChannels';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import type { AreaMarkerConfig } from '../../types/markers/common';
+
+	/**
+	 * Renders one `'area'` marker as `<AreaX>` or `<AreaY>`, picked from the way the plot
+	 * runs (`usePlot().axes`). Never stacked by svelteplot itself: stacking is the
+	 * `stackY`/`stackX` transform's job, which supplies the band it draws. Without
+	 * a band, the area runs from zero up to its own value.
+	 */
+	let { marker }: { marker: AreaMarkerConfig } = $props();
+
+	const plot = usePlot();
+	const isHorizontal = $derived(plot.axes?.isHorizontal ?? false);
+
+	const cfg = $derived(getConfiguration());
+	const data = $derived(marker.data ?? []);
+	const channelFill = $derived(MarkerChannels.buildFill(data, marker.color, marker.scales, cfg));
+	const opacityBuckets = $derived(
+		MarkerChannels.buildOpacityBuckets(data, marker.opacity, marker.scales, cfg)
+	);
+
+	const hasYBand = $derived(marker.y1 !== undefined || marker.y2 !== undefined);
+	const hasXBand = $derived(marker.x1 !== undefined || marker.x2 !== undefined);
+	const y1 = $derived(hasYBand ? marker.y1 : 0);
+	const y2 = $derived(hasYBand ? marker.y2 : (marker.y ?? 0));
+	const x1 = $derived(hasXBand ? marker.x1 : 0);
+	const x2 = $derived(hasXBand ? marker.x2 : (marker.x ?? 0));
+</script>
+
+{#if opacityBuckets}
+	{#each opacityBuckets as bucket (bucket.value)}
+		{#if isHorizontal}
+			<AreaX
+				data={bucket.data}
+				x={marker.x}
+				{x1}
+				{x2}
+				y={marker.y}
+				z={marker.grouping}
+				stack={false}
+				curve={marker.curve}
+				tension={marker.tension}
+				fill={channelFill ?? marker.styles?.fill}
+				fillOpacity={bucket.value}
+				stroke={marker.styles?.stroke}
+				strokeWidth={marker.styles?.strokeWidth}
+				strokeOpacity={marker.styles?.strokeOpacity}
+				strokeDasharray={marker.styles?.strokeDasharray}
+			/>
+		{:else}
+			<AreaY
+				data={bucket.data}
+				x={marker.x}
+				y={marker.y}
+				{y1}
+				{y2}
+				z={marker.grouping}
+				stack={false}
+				curve={marker.curve}
+				tension={marker.tension}
+				fill={channelFill ?? marker.styles?.fill}
+				fillOpacity={bucket.value}
+				stroke={marker.styles?.stroke}
+				strokeWidth={marker.styles?.strokeWidth}
+				strokeOpacity={marker.styles?.strokeOpacity}
+				strokeDasharray={marker.styles?.strokeDasharray}
+			/>
+		{/if}
+	{/each}
+{:else if isHorizontal}
+	<AreaX
+		{data}
+		x={marker.x}
+		{x1}
+		{x2}
+		y={marker.y}
+		z={marker.grouping}
+		stack={false}
+		curve={marker.curve}
+		tension={marker.tension}
+		fill={channelFill ?? marker.styles?.fill}
+		fillOpacity={marker.styles?.fillOpacity ?? cfg.area.fillOpacity}
+		stroke={marker.styles?.stroke}
+		strokeWidth={marker.styles?.strokeWidth}
+		strokeOpacity={marker.styles?.strokeOpacity}
+		strokeDasharray={marker.styles?.strokeDasharray}
+	/>
+{:else}
+	<AreaY
+		{data}
+		x={marker.x}
+		y={marker.y}
+		{y1}
+		{y2}
+		z={marker.grouping}
+		stack={false}
+		curve={marker.curve}
+		tension={marker.tension}
+		fill={channelFill ?? marker.styles?.fill}
+		fillOpacity={marker.styles?.fillOpacity ?? cfg.area.fillOpacity}
+		stroke={marker.styles?.stroke}
+		strokeWidth={marker.styles?.strokeWidth}
+		strokeOpacity={marker.styles?.strokeOpacity}
+		strokeDasharray={marker.styles?.strokeDasharray}
+	/>
+{/if}

package/dist/markers/area/AreaMarker.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { AreaMarkerConfig } from '../../types/markers/common';
+type $$ComponentProps = {
+    marker: AreaMarkerConfig;
+};
+declare const AreaMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type AreaMarker = ReturnType<typeof AreaMarker>;
+export default AreaMarker;

package/dist/markers/arrow/ArrowMarker.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">
+	import { Arrow } from 'svelteplot';
+	import type { ArrowMarkerConfig } from '../../types/markers/common';
+
+	/** Renders one `'arrow'` marker as `<Arrow>` - a point-to-point annotation. Restates svelteplot's own defaults, which an explicit `undefined` would otherwise erase. */
+	let { marker }: { marker: ArrowMarkerConfig } = $props();
+
+	const data = $derived(marker.data ?? []);
+</script>
+
+<Arrow
+	{data}
+	x1={marker.x1}
+	y1={marker.y1}
+	x2={marker.x2}
+	y2={marker.y2}
+	bend={marker.bend}
+	headAngle={marker.headAngle ?? 60}
+	headLength={marker.headLength ?? 8}
+	inset={marker.inset ?? 0}
+	insetStart={marker.insetStart}
+	insetEnd={marker.insetEnd}
+	sweep={marker.sweep}
+	stroke={marker.styles?.stroke ?? 'currentColor'}
+	strokeWidth={marker.styles?.strokeWidth}
+	strokeOpacity={marker.styles?.strokeOpacity}
+	strokeDasharray={marker.styles?.strokeDasharray}
+/>

package/dist/markers/arrow/ArrowMarker.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { ArrowMarkerConfig } from '../../types/markers/common';
+type $$ComponentProps = {
+    marker: ArrowMarkerConfig;
+};
+declare const ArrowMarker: import("svelte").Component<$$ComponentProps, {}, "">;
+type ArrowMarker = ReturnType<typeof ArrowMarker>;
+export default ArrowMarker;

package/dist/markers/{BarMarker.svelte → bar/BarMarker.svelte}

@@ -1,6 +1,10 @@
 <script lang="ts">
-	import { BarX, BarY, usePlot } from 'svelteplot';
-	import type { BarMarkerConfig } from '../types/markers/common';
+	import { BarX, BarY } from 'svelteplot';
+	import { usePlot } from '../../layout/plot/usePlot';
+	import { PlotContext } from '../../layout/plot/PlotContext';
+	import { MarkerChannels } from '../utils/MarkerChannels';
+	import { getConfiguration } from '../../configuration/config.svelte';
+	import type { BarMarkerConfig } from '../../types/markers/common';
 
 	/**
 	 * Renders one `'bar'` marker: `role: 'segment'` (visible bar via
@@ -9,7 +13,18 @@
 	 */
 	let { marker }: { marker: BarMarkerConfig } = $props();
 
-	const plot = usePlot();
+	const cfg = $derived(getConfiguration());
+	const data = $derived(marker.data ?? []);
+	const channelFill = $derived(MarkerChannels.buildFill(data, marker.color, marker.scales, cfg));
+
+	const plot = usePlot().svelteplot;
+	const hover = PlotContext.current()?.hover;
+	const enter = $derived(
+		marker.hover
+			? () => hover?.onPointer((marker.data ?? []) as Record<string, unknown>[])
+			: undefined
+	);
+	const leave = $derived(marker.hover ? hover?.onLeave : undefined);
 	function categoryScaleFor(isHorizontal: boolean) {
 		return isHorizontal ? plot.scales.y : plot.scales.x;
 	}
@@ -23,18 +38,6 @@
 		const b = Number(range[range.length - 1]);
 		return [Math.min(a, b), Math.max(a, b)];
 	}
-	// A `'hitArea'` marker's own value-axis slice, mapped to pixels.
-	function hitAreaValueRangeFor(
-		isHorizontal: boolean,
-		from: unknown,
-		to: unknown
-	): [number, number] {
-		if (typeof from !== 'number' || typeof to !== 'number') return valueExtentFor(isHorizontal);
-		const scale = valueScaleFor(isHorizontal);
-		const a = Number(scale?.fn?.(from) ?? 0);
-		const b = Number(scale?.fn?.(to) ?? 0);
-		return [Math.min(a, b), Math.max(a, b)];
-	}
 </script>
 
 {#if marker.role === 'segment'}
@@ -42,35 +45,35 @@
 	{@const bandwidth = categoryScale?.type === 'band' ? categoryScale.fn.bandwidth() : 0}
 	{#if marker.isHorizontal}
 		<BarX
-			data={marker.data}
+			{data}
 			y={marker.y}
 			x1={marker.x1}
 			x2={marker.x2}
 			insetTop={marker.insetTop != null ? marker.insetTop * bandwidth : undefined}
 			insetBottom={marker.insetBottom != null ? marker.insetBottom * bandwidth : undefined}
-			fill={marker.style?.fill}
-			fillOpacity={marker.style?.fillOpacity}
-			stroke={marker.style?.stroke}
-			strokeWidth={marker.style?.strokeWidth}
-			strokeOpacity={marker.style?.strokeOpacity}
-			strokeDasharray={marker.style?.strokeDasharray}
-			borderRadius={marker.style?.borderRadius}
+			fill={channelFill ?? marker.styles?.fill}
+			fillOpacity={marker.styles?.fillOpacity}
+			stroke={marker.styles?.stroke}
+			strokeWidth={marker.styles?.strokeWidth}
+			strokeOpacity={marker.styles?.strokeOpacity}
+			strokeDasharray={marker.styles?.strokeDasharray}
+			borderRadius={marker.styles?.borderRadius}
 		/>
 	{:else}
 		<BarY
-			data={marker.data}
+			{data}
 			x={marker.x}
 			y1={marker.y1}
 			y2={marker.y2}
 			insetLeft={marker.insetLeft != null ? marker.insetLeft * bandwidth : undefined}
 			insetRight={marker.insetRight != null ? marker.insetRight * bandwidth : undefined}
-			fill={marker.style?.fill}
-			fillOpacity={marker.style?.fillOpacity}
-			stroke={marker.style?.stroke}
-			strokeWidth={marker.style?.strokeWidth}
-			strokeOpacity={marker.style?.strokeOpacity}
-			strokeDasharray={marker.style?.strokeDasharray}
-			borderRadius={marker.style?.borderRadius}
+			fill={channelFill ?? marker.styles?.fill}
+			fillOpacity={marker.styles?.fillOpacity}
+			stroke={marker.styles?.stroke}
+			strokeWidth={marker.styles?.strokeWidth}
+			strokeOpacity={marker.styles?.strokeOpacity}
+			strokeDasharray={marker.styles?.strokeDasharray}
+			borderRadius={marker.styles?.borderRadius}
 		/>
 	{/if}
 {:else}
@@ -83,9 +86,8 @@
 		{@const insetTop = (marker.insetTop ?? 0) * bandwidth}
 		{@const insetBottom = (marker.insetBottom ?? 0) * bandwidth}
 		{#if marker.role === 'hitArea'}
-			{@const [rangeMin, rangeMax] = marker.isHorizontal
-				? hitAreaValueRangeFor(marker.isHorizontal, marker.x1, marker.x2)
-				: hitAreaValueRangeFor(marker.isHorizontal, marker.y1, marker.y2)}
+			<!-- The band runs the plot's whole value axis, so the pointer needn't be over the bar. -->
+			{@const [rangeMin, rangeMax] = valueExtentFor(marker.isHorizontal)}
 			{#if marker.isHorizontal}
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
 				<rect
@@ -95,8 +97,8 @@
 					width={Math.max(0, rangeMax - rangeMin - insetLeft - insetRight)}
 					height={Math.max(0, bandwidth - insetTop - insetBottom)}
 					fill="transparent"
-					onpointerenter={marker.onpointerenter}
-					onpointerleave={marker.onpointerleave}
+					onpointerenter={enter}
+					onpointerleave={leave}
 				/>
 			{:else}
 				<!-- svelte-ignore a11y_no_static_element_interactions -->
@@ -107,8 +109,8 @@
 					width={Math.max(0, bandwidth - insetLeft - insetRight)}
 					height={Math.max(0, rangeMax - rangeMin - insetTop - insetBottom)}
 					fill="transparent"
-					onpointerenter={marker.onpointerenter}
-					onpointerleave={marker.onpointerleave}
+					onpointerenter={enter}
+					onpointerleave={leave}
 				/>
 			{/if}
 		{:else}
@@ -122,13 +124,13 @@
 					y={center - thickness / 2}
 					width={Math.max(0, valueMax - valueMin)}
 					height={thickness}
-					fill={marker.style?.fill}
-					fill-opacity={marker.style?.fillOpacity}
-					stroke={marker.style?.stroke}
-					stroke-width={marker.style?.strokeWidth}
-					stroke-opacity={marker.style?.strokeOpacity}
-					stroke-dasharray={marker.style?.strokeDasharray}
-					rx={marker.style?.borderRadius}
+					fill={marker.styles?.fill}
+					fill-opacity={marker.styles?.fillOpacity}
+					stroke={marker.styles?.stroke}
+					stroke-width={marker.styles?.strokeWidth}
+					stroke-opacity={marker.styles?.strokeOpacity}
+					stroke-dasharray={marker.styles?.strokeDasharray}
+					rx={marker.styles?.borderRadius}
 					pointer-events="none"
 				/>
 			{:else}
@@ -140,13 +142,13 @@
 					y={valueMin}
 					width={thickness}
 					height={Math.max(0, valueMax - valueMin)}
-					fill={marker.style?.fill}
-					fill-opacity={marker.style?.fillOpacity}
-					stroke={marker.style?.stroke}
-					stroke-width={marker.style?.strokeWidth}
-					stroke-opacity={marker.style?.strokeOpacity}
-					stroke-dasharray={marker.style?.strokeDasharray}
-					ry={marker.style?.borderRadius}
+					fill={marker.styles?.fill}
+					fill-opacity={marker.styles?.fillOpacity}
+					stroke={marker.styles?.stroke}
+					stroke-width={marker.styles?.strokeWidth}
+					stroke-opacity={marker.styles?.strokeOpacity}
+					stroke-dasharray={marker.styles?.strokeDasharray}
+					ry={marker.styles?.borderRadius}
 					pointer-events="none"
 				/>
 			{/if}

package/dist/markers/{BarMarker.svelte.d.ts → bar/BarMarker.svelte.d.ts}

@@ -1,4 +1,4 @@
-import type { BarMarkerConfig } from '../types/markers/common';
+import type { BarMarkerConfig } from '../../types/markers/common';
 type $$ComponentProps = {
     marker: BarMarkerConfig;
 };