svelteplot 0.0.1-alpha.2 → 0.0.1-alpha.20

package/dist/helpers/getLogTicks.js

@@ -10,7 +10,7 @@ export function getLogTicks(domain, count = 6) {
         return [];
     if (domain[0] === 0)
         return ticksArray(domain[0], domain[1], count - 2);
-    let mult = Math.pow(10, Math.floor(Math.log10(Math.abs(domain[1] - domain[0]))) - 1);
+    let mult = 1; //Math.pow(10, Math.floor(Math.log10(Math.abs(domain[1] - domain[0]))) - 1);
     count += 2;
     let candidates = getTickCandidates(domain, mult);
     if (candidates[0].num > count) {
@@ -46,12 +46,12 @@ function getTickCandidates(domain, mult = 1) {
     return logSeries.map((factors) => {
         let i = Math.pow(10, Math.floor(Math.log10(domain[0])));
         let f = 0;
-        const r = [i];
-        while (i < domain[1] && r.length < 50) {
+        const ticks = [i];
+        while (i < domain[1] && ticks.length < 50) {
             i *= factors[f] * mult;
-            r.push(i);
+            ticks.push(i);
             f = (f + 1) % factors.length;
         }
-        return { ticks: r, num: r.length };
+        return { ticks, num: ticks.length };
     });
 }

package/dist/helpers/isDataRecord.d.ts

@@ -1,2 +1,2 @@
-import type { DataRecord } from '../types';
+import type { DataRecord } from '../types.js';
 export default function (value: any): value is DataRecord;

package/dist/helpers/isRawValue.d.ts

@@ -0,0 +1,2 @@
+import type { RawValue } from '../types.js';
+export default function (value: any): value is RawValue;

package/dist/helpers/isRawValue.js

@@ -0,0 +1,5 @@
+import { isDate } from 'underscore';
+export default function (value) {
+    const t = typeof value;
+    return t === 'string' || t === 'number' || t === 'boolean' || isDate(value) || t === null;
+}

package/dist/helpers/resolveChannel.d.ts

@@ -1,2 +1,6 @@
-import type { ChannelName, ChannelAccessor, DataRow, RawValue } from '../types';
-export default function (channel: ChannelName, datum: DataRow, accessor?: ChannelAccessor): RawValue;
+import type { ChannelName, ChannelAccessor, DataRow, RawValue } from '../types.js';
+type ChannelAlias = {
+    channel: ChannelName;
+};
+export default function (channel: ChannelName, datum: DataRow, channels: Partial<Record<ChannelName, ChannelAccessor | ChannelAlias>>): RawValue;
+export {};

package/dist/helpers/resolveChannel.js

@@ -1,5 +1,14 @@
-import isDataRecord from './isDataRecord';
-export default function (channel, datum, accessor = null) {
+import { CHANNEL_SCALE } from '../contants.js';
+import isDataRecord from './isDataRecord.js';
+import isRawValue from './isRawValue.js';
+export default function (channel, datum, channels) {
+    const scale = CHANNEL_SCALE[channel];
+    const maybeAccessor = channel === 'z' ? channels.z || channels.fill || channels.stroke : channels[channel];
+    const accessor = isDataRecord(maybeAccessor) && maybeAccessor?.channel
+        ? channels[maybeAccessor?.channel]
+        : maybeAccessor;
+    if (isDataRecord(accessor) && accessor.channel)
+        throw new Error('multiple channel aliases are not allowed');
     if ((channel === 'x' || channel === 'y') && Array.isArray(datum) && accessor === null) {
         // special case for [[x0,y0], [x1,y1], ...] format
         return datum[channel === 'x' ? 0 : 1];
@@ -14,15 +23,16 @@ export default function (channel, datum, accessor = null) {
         // fallback to channel name as accessor
         if (accessor === null && datum[channel] !== undefined)
             return datum[channel];
-        // interpret accessor as constant
-        return accessor;
+        return isRawValue(accessor) ? accessor : null;
     }
     else {
         // return single value or accessor
         return typeof accessor === 'function'
             ? accessor(datum)
-            : accessor !== null
+            : accessor !== null && isRawValue(accessor)
                 ? accessor
-                : datum;
+                : !Array.isArray(datum) && (scale === 'x' || scale === 'y')
+                    ? datum
+                    : null;
     }
 }

package/dist/helpers/typeChecks.d.ts

@@ -1,4 +1,4 @@
-import type { RawValue } from '../types';
+import type { RawValue } from '../types.js';
 export declare function isBooleanOrNull(v: RawValue): boolean;
 export declare function isDateOrNull(v: RawValue): boolean;
 export declare function isNumberOrNull(v: RawValue): boolean;

package/dist/helpers/typeChecks.js

@@ -14,7 +14,7 @@ export function isStringOrNull(v) {
 }
 export function isColorOrNull(v) {
     // todo: maybe not use chroma.js here to save kb
-    return v == null || (typeof v === 'string' && chroma.valid(v));
+    return v == null || (typeof v === 'string' && (chroma.valid(v) || v === 'currentColor'));
 }
 export function isOpacityOrNull(v) {
     return v == null || (typeof v === 'number' && isFinite(v) && v >= 0 && v <= 1);

package/dist/helpers/wrapArray.d.ts

@@ -1,2 +1,2 @@
-import type { DataRow } from '../types';
-export default function (data: DataRow[]): (Date | [number, number] | import("../types").DataRecord)[];
+import type { DataRow } from '../types.js';
+export default function (data: DataRow[]): (Date | [number, number] | import("../types.js").DataRecord)[];

package/dist/helpers/wrapValueArray.d.ts

@@ -0,0 +1,6 @@
+import type { RawValue } from '../types.js';
+export default function (values: RawValue[]): {
+    value: RawValue;
+    index: number;
+    ___orig___: RawValue;
+}[];

package/dist/helpers/wrapValueArray.js

@@ -0,0 +1,5 @@
+export default function (values) {
+    const arr = values.map((value, index) => ({ value, index, ___orig___: value }));
+    arr.__wrapped__ = true;
+    return arr;
+}

package/dist/index.d.ts

@@ -1,7 +1,15 @@
+export { default as Plot } from './Plot.svelte';
+export { default as Area } from './marks/Area.svelte';
+export { default as AreaX } from './marks/AreaX.svelte';
+export { default as AreaY } from './marks/AreaY.svelte';
+export { default as AxisX } from './marks/AxisX.svelte';
+export { default as AxisY } from './marks/AxisY.svelte';
+export { default as BarX } from './marks/BarX.svelte';
+export { default as BarY } from './marks/BarY.svelte';
+export { default as ColorLegend } from './marks/ColorLegend.svelte';
 export { default as Dot } from './marks/Dot.svelte';
 export { default as DotX } from './marks/DotX.svelte';
 export { default as DotY } from './marks/DotY.svelte';
-export { default as Plot } from './Plot.svelte';
 export { default as Frame } from './marks/Frame.svelte';
 export { default as GridX } from './marks/GridX.svelte';
 export { default as GridY } from './marks/GridY.svelte';
@@ -10,3 +18,9 @@ export { default as LineX } from './marks/LineX.svelte';
 export { default as LineY } from './marks/LineY.svelte';
 export { default as RuleX } from './marks/RuleX.svelte';
 export { default as RuleY } from './marks/RuleY.svelte';
+export { default as SymbolLegend } from './marks/SymbolLegend.svelte';
+export { default as TickX } from './marks/TickX.svelte';
+export { default as TickY } from './marks/TickY.svelte';
+export { stackX, stackY } from './transforms/stack.js';
+export { recordizeX, recordizeY } from './transforms/recordize.js';
+export { renameChannels } from './transforms/rename.js';

package/dist/index.js

@@ -1,8 +1,17 @@
 // Reexport your entry components here
+export { default as Plot } from './Plot.svelte';
+// marks
+export { default as Area } from './marks/Area.svelte';
+export { default as AreaX } from './marks/AreaX.svelte';
+export { default as AreaY } from './marks/AreaY.svelte';
+export { default as AxisX } from './marks/AxisX.svelte';
+export { default as AxisY } from './marks/AxisY.svelte';
+export { default as BarX } from './marks/BarX.svelte';
+export { default as BarY } from './marks/BarY.svelte';
+export { default as ColorLegend } from './marks/ColorLegend.svelte';
 export { default as Dot } from './marks/Dot.svelte';
 export { default as DotX } from './marks/DotX.svelte';
 export { default as DotY } from './marks/DotY.svelte';
-export { default as Plot } from './Plot.svelte';
 export { default as Frame } from './marks/Frame.svelte';
 export { default as GridX } from './marks/GridX.svelte';
 export { default as GridY } from './marks/GridY.svelte';
@@ -11,3 +20,10 @@ export { default as LineX } from './marks/LineX.svelte';
 export { default as LineY } from './marks/LineY.svelte';
 export { default as RuleX } from './marks/RuleX.svelte';
 export { default as RuleY } from './marks/RuleY.svelte';
+export { default as SymbolLegend } from './marks/SymbolLegend.svelte';
+export { default as TickX } from './marks/TickX.svelte';
+export { default as TickY } from './marks/TickY.svelte';
+// transforms
+export { stackX, stackY } from './transforms/stack.js';
+export { recordizeX, recordizeY } from './transforms/recordize.js';
+export { renameChannels } from './transforms/rename.js';

package/dist/marks/Area.svelte

@@ -0,0 +1,95 @@
+<script context="module"></script>
+
+<script>import resolveChannel from "../helpers/resolveChannel.js";
+import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import { area } from "d3-shape";
+import { groupBy } from "underscore";
+import callWithProps from "../helpers/callWithProps.js";
+import { maybeCurve } from "../helpers/curves.js";
+const BaseMark_Area = BaseMark;
+const plot = getContext("svelteplot");
+let {
+  data,
+  curve,
+  tension,
+  x1 = null,
+  x2 = null,
+  y1 = null,
+  y2 = null,
+  z = null,
+  fill = null,
+  stroke = null,
+  sort = null,
+  ...styleProps
+} = $props();
+let channels = $derived({
+  x1,
+  x2,
+  y1,
+  y2,
+  fill,
+  stroke,
+  z,
+  sort
+});
+let groups = $derived(
+  z || fill || stroke ? Object.values(groupBy(data, (d) => resolveChannel("z", d, channels))) : [data]
+);
+let sortedGroups = $derived(
+  sort ? groups.sort(
+    (a, b) => resolveChannel("sort", a[0], channels) > resolveChannel("sort", b[0], channels) ? 1 : -1
+  ) : groups
+);
+let areaPath = $derived(
+  callWithProps(area, [], {
+    curve: maybeCurve(curve, tension),
+    ...x1 != null && x2 != null ? {
+      // "vertical" area
+      x0: (d) => plot.xScale(resolveChannel("x1", d, channels)),
+      x1: (d) => plot.xScale(resolveChannel("x2", d, channels)),
+      y: (d) => plot.yScale(resolveChannel("y1", d, channels))
+    } : {
+      // "horizontal" area
+      x: (d) => plot.xScale(resolveChannel("x1", d, channels)),
+      y0: (d) => plot.yScale(resolveChannel("y1", d, channels)),
+      y1: (d) => plot.yScale(resolveChannel("y2", d, channels))
+    }
+  })
+);
+</script>
+
+<BaseMark_Area
+    type="area"
+    {data}
+    channels={['x1', 'x2', 'y1', 'y2', 'fill', 'stroke']}
+    {x1}
+    {x2}
+    {y1}
+    {y2}
+    {fill}
+    {stroke}
+    {...styleProps}
+>
+    <g class="areas">
+        {#each sortedGroups as areaData}
+            <path
+                d={areaPath(areaData)}
+                style:stroke={stroke
+                    ? plot.colorScale(resolveChannel('stroke', areaData[0], channels))
+                    : 'none'}
+                style:fill={fill
+                    ? plot.colorScale(resolveChannel('fill', areaData[0], channels))
+                    : 'currentColor'}
+                style={getBaseStyles(areaData[0], styleProps)}
+            />
+        {/each}
+    </g>
+</BaseMark_Area>
+
+<style>
+    .lines path {
+        stroke-width: 1.4px;
+    }
+</style>

package/dist/marks/Area.svelte.d.ts

@@ -0,0 +1,28 @@
+import { SvelteComponentTyped } from "svelte";
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve } from '../types.js';
+export type AreaMarkProps = MarkProps & BaseMarkStyleProps & {
+    x1?: ChannelAccessor;
+    x2?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
+    z?: ChannelAccessor;
+    sort?: ChannelAccessor | {
+        channel: 'stroke' | 'fill';
+    };
+    curve: Curve | CurveFactory;
+    tension: number;
+};
+import { type CurveFactory } from 'd3-shape';
+declare const __propDef: {
+    props: AreaMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AreaProps = typeof __propDef.props;
+export type AreaEvents = typeof __propDef.events;
+export type AreaSlots = typeof __propDef.slots;
+export default class Area extends SvelteComponentTyped<AreaProps, AreaEvents, AreaSlots> {
+}
+export {};

package/dist/marks/AreaX.svelte

@@ -0,0 +1,11 @@
+<script context="module"></script>
+
+<script>import Area from "./Area.svelte";
+import { stackX, recordizeX, renameChannels } from "..";
+let { data: rawData, stack, ...rawChannels } = $props();
+let { data, ...channels } = $derived(
+  renameChannels(stackX(recordizeX({ data: rawData, ...rawChannels }), stack), { y: "y1" })
+);
+</script>
+
+<Area {data} {...channels} />

package/dist/marks/AreaX.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve } from '../types.js';
+import type { CurveFactory } from 'd3-shape';
+import type { StackOptions } from '../transforms/stack.js';
+export type AreaXMarkProps = MarkProps & BaseMarkStyleProps & {
+    x?: ChannelAccessor;
+    x1?: ChannelAccessor;
+    x2?: ChannelAccessor;
+    y?: ChannelAccessor;
+    z?: ChannelAccessor;
+    sort?: ChannelAccessor | {
+        channel: 'stroke' | 'fill';
+    };
+    curve: Curve | CurveFactory;
+    tension: number;
+    stack?: StackOptions;
+};
+declare const __propDef: {
+    props: AreaXMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AreaXProps = typeof __propDef.props;
+export type AreaXEvents = typeof __propDef.events;
+export type AreaXSlots = typeof __propDef.slots;
+export default class AreaX extends SvelteComponentTyped<AreaXProps, AreaXEvents, AreaXSlots> {
+}
+export {};

package/dist/marks/AreaY.svelte

@@ -0,0 +1,12 @@
+<script context="module"></script>
+
+<script>import Area from "./Area.svelte";
+import { stackY, recordizeY, renameChannels } from "..";
+let { data: rawData, stack, ...rawChannels } = $props();
+let { data, ...channels } = $derived(
+  renameChannels(stackY(recordizeY({ data: rawData, ...rawChannels }), stack), { x: "x1" })
+);
+$inspect({ data, channels });
+</script>
+
+<Area {data} {...channels} />

package/dist/marks/AreaY.svelte.d.ts

@@ -0,0 +1,30 @@
+import { SvelteComponentTyped } from "svelte";
+import type { MarkProps, BaseMarkStyleProps, ChannelAccessor, Curve } from '../types.js';
+import type { CurveFactory } from 'd3-shape';
+import type { StackOptions } from '../transforms/stack.js';
+export type AreaYMarkProps = MarkProps & BaseMarkStyleProps & {
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
+    z?: ChannelAccessor;
+    sort?: ChannelAccessor | {
+        channel: 'stroke' | 'fill';
+    };
+    curve: Curve | CurveFactory;
+    tension: number;
+    stack?: StackOptions;
+};
+declare const __propDef: {
+    props: AreaYMarkProps;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type AreaYProps = typeof __propDef.props;
+export type AreaYEvents = typeof __propDef.events;
+export type AreaYSlots = typeof __propDef.slots;
+export default class AreaY extends SvelteComponentTyped<AreaYProps, AreaYEvents, AreaYSlots> {
+}
+export {};

package/dist/marks/AxisX.svelte

@@ -1,11 +1,9 @@
 <script>import { getContext } from "svelte";
-import BaseMark from "./BaseMark.svelte";
-import resolveChannel from "../helpers/resolveChannel";
-import getBaseStyles from "../helpers/getBaseStyles";
-import removeIdenticalLines from "../helpers/removeIdenticalLines";
-import autoTimeFormat from "../helpers/autoTimeFormat";
 import dayjs from "dayjs";
-import { get } from "underscore";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import removeIdenticalLines from "../helpers/removeIdenticalLines.js";
+import autoTimeFormat from "../helpers/autoTimeFormat.js";
 const BaseMark_AxisX = BaseMark;
 const plot = getContext("svelteplot");
 let {
@@ -20,12 +18,15 @@ let {
   fill = null,
   ...styleProps
 } = $props();
-let autoTickCount = $derived(plot.plotWidth / get(plot, "options.x.tickSpacing", 80));
+let autoTickCount = $derived(
+  Math.max(2, Math.round(plot.plotWidth / (plot.options?.x?.tickSpacing || 80)))
+);
+$inspect(autoTickCount);
 let autoTicks = $derived(
-  ticks.length > 0 ? ticks : get(plot, "options.x.ticks", plot.xScale.ticks(autoTickCount))
+  ticks.length > 0 ? ticks : plot.options?.x?.ticks ?? plot.xScale.ticks(autoTickCount)
 );
 let useTickFormat = $derived(
-  typeof tickFormat === "function" ? tickFormat : plot.x.scaleType === "time" ? typeof tickFormat === "string" ? (d) => dayjs(d).format(tickFormat).split("\n") : autoTimeFormat(plot.x, plot.plotWidth) : (d) => String(d)
+  typeof tickFormat === "function" ? tickFormat : plot.x.scaleType === "time" ? typeof tickFormat === "string" ? (d) => dayjs(d).format(tickFormat).split("\n") : autoTimeFormat(plot.x, plot.plotWidth) : (d) => String(plot.x.scaleOptions.percent ? +(d * 100).toFixed(5) : d)
 );
 let tickTexts = $derived(
   removeIdenticalLines(
@@ -34,7 +35,7 @@ let tickTexts = $derived(
 );
 let optionsLabel = $derived(plot.options?.x?.label);
 let useTitle = $derived(
-  title || (optionsLabel === null ? null : optionsLabel === void 0 ? plot.x.autoTitle : optionsLabel)
+  title || (optionsLabel === null ? null : optionsLabel !== void 0 ? optionsLabel : plot.x.autoTitle ? plot.options.x?.reverse ? `\u2190 ${plot.x.autoTitle}${plot.x.scaleOptions.percent ? " (%)" : ""}` : `${plot.x.autoTitle}${plot.x.scaleOptions.percent ? " (%)" : ""} \u2192` : "")
 );
 </script>
 
@@ -45,7 +46,7 @@ let useTitle = $derived(
                 x={plot.plotWidth + plot.margins.left}
                 y={plot.height - 10}
                 class="axis-title"
-                dominant-baseline="hanging">{useTitle} →</text
+                dominant-baseline="hanging">{useTitle}</text
             >
         {/if}
         {#each autoTicks as tick, t}
@@ -53,7 +54,9 @@ let useTitle = $derived(
             {@const prevTextLines = t && tickTexts[t - 1]}
             <g
                 class="x-tick"
-                transform="translate({plot.xScale(tick)},{anchor === 'bottom'
+                transform="translate({plot.xScale(tick) +
+                    (plot.xScale.bandwidth ? plot.xScale.bandwidth() * 0.5 : 0)},{anchor ===
+                'bottom'
                     ? plot.margins.top + plot.plotHeight
                     : plot.margins.top})"
             >
@@ -85,8 +88,8 @@ let useTitle = $derived(
     text {
         text-anchor: middle;
         font-size: 11px;
-
-        fill: #4a4a4a;
+        opacity: 0.8;
+        fill: currentColor;
     }
 
     text.axis-title {
@@ -95,7 +98,4 @@ let useTitle = $derived(
     .x-tick line {
         stroke: currentColor;
     }
-    .x-tick line.grid {
-        stroke: #d9d9d9;
-    }
 </style>

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

@@ -1,5 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { AxisMarkOptions } from '../types';
+import { SvelteComponentTyped } from "svelte";
+import type { AxisMarkOptions } from '../types.js';
 declare const __propDef: {
     props: AxisMarkOptions & {
         anchor?: "bottom" | "top" | undefined;
@@ -12,6 +12,6 @@ declare const __propDef: {
 export type AxisXProps = typeof __propDef.props;
 export type AxisXEvents = typeof __propDef.events;
 export type AxisXSlots = typeof __propDef.slots;
-export default class AxisX extends SvelteComponent<AxisXProps, AxisXEvents, AxisXSlots> {
+export default class AxisX extends SvelteComponentTyped<AxisXProps, AxisXEvents, AxisXSlots> {
 }
 export {};

package/dist/marks/AxisY.svelte

@@ -1,7 +1,7 @@
 <script>import { getContext } from "svelte";
 import BaseMark from "./BaseMark.svelte";
-import getBaseStyles from "../helpers/getBaseStyles";
-import { get } from "underscore";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import autoTimeFormat from "../helpers/autoTimeFormat.js";
 const BaseMark_AxisX = BaseMark;
 const plot = getContext("svelteplot");
 let {
@@ -11,37 +11,50 @@ let {
   tickSize = 6,
   tickPadding = 3,
   title = null,
-  tickFormat = (d) => String(d),
+  tickFormat,
   tickFontSize = null,
   fill = null,
   ...styleProps
 } = $props();
-let autoTickCount = $derived(plot.plotHeight / get(plot, "options.y.tickSpacing", 80));
+let autoTickCount = $derived(plot.plotHeight / (plot.options.y?.tickSpacing || 80));
 let autoTicks = $derived(
-  ticks.length > 0 ? ticks : get(plot, "options.y.ticks", plot.yScale.ticks(autoTickCount))
+  ticks.length > 0 ? ticks : plot.options.y?.ticks || plot.yScale.ticks(autoTickCount)
 );
-let optionsLabel = $derived(get(plot, "options.y.label"));
+let useTickFormat = $derived(
+  typeof tickFormat === "function" ? tickFormat : plot.y.scaleType === "time" ? typeof tickFormat === "string" ? (d) => dayjs(d).format(tickFormat).split("\n") : autoTimeFormat(plot.y, plot.plotHeight) : (d) => String(plot.y.scaleOptions.percent ? +(d * 100).toFixed(5) : d)
+);
+let optionsLabel = $derived(plot.options.y?.label);
 let useTitle = $derived(
-  title || (optionsLabel === null ? null : optionsLabel === void 0 ? plot.y.autoTitle : optionsLabel)
+  title || (optionsLabel === null ? null : optionsLabel !== void 0 ? optionsLabel : plot.y.autoTitle ? `\u2191 ${plot.y.autoTitle}${plot.y.scaleOptions.percent ? " (%)" : ""}` : "")
 );
+$inspect(plot.y.propNames);
 </script>
 
 <BaseMark_AxisX type="axis-y" data={ticks} channels={['y']} {automatic}>
     <g class="axis-y">
         {#if useTitle}
-            <text x={0} y={5} class="axis-title" dominant-baseline="hanging">↑ {useTitle}</text>
+            <text
+                style:text-anchor={anchor === 'left' ? 'start' : 'end'}
+                x={anchor === 'left' ? 0 : plot.width}
+                y={5}
+                class="axis-title"
+                dominant-baseline="hanging">{useTitle}</text
+            >
         {/if}
         {#each autoTicks as tick}
+            {@const tickText = useTickFormat(tick)}
             <g
                 class="y-tick"
                 transform="translate({plot.margins.left +
-                    (anchor === 'left' ? 0 : plot.plotWidth)},{plot.yScale(tick)})"
+                    (anchor === 'left' ? 0 : plot.plotWidth)},{plot.yScale(tick) +
+                    (plot.yScale.bandwidth ? plot.yScale.bandwidth() * 0.5 : 0)})"
             >
                 <text
                     class:is-left={anchor === 'left'}
                     style={getBaseStyles(tick, { fill, fontSize: tickFontSize })}
                     x={(tickSize + tickPadding) * (anchor === 'left' ? -1 : 1)}
-                    dominant-baseline="middle">{tickFormat(tick)}</text
+                    dominant-baseline="middle"
+                    >{Array.isArray(tickText) ? tickText.join(' ') : tickText}</text
                 >
                 <line
                     style={getBaseStyles(tick, styleProps)}
@@ -55,7 +68,8 @@ let useTitle = $derived(
 <style>
     text {
         font-size: 11px;
-        fill: #4a4a4a;
+        opacity: 0.8;
+        fill: currentColor;
     }
     text.is-left {
         text-anchor: end;

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

@@ -1,5 +1,5 @@
-import { SvelteComponent } from "svelte";
-import type { AxisYMarkProps } from '../types';
+import { SvelteComponentTyped } from "svelte";
+import type { AxisYMarkProps } from '../types.js';
 declare const __propDef: {
     props: AxisYMarkProps;
     events: {
@@ -10,6 +10,6 @@ declare const __propDef: {
 export type AxisYProps = typeof __propDef.props;
 export type AxisYEvents = typeof __propDef.events;
 export type AxisYSlots = typeof __propDef.slots;
-export default class AxisY extends SvelteComponent<AxisYProps, AxisYEvents, AxisYSlots> {
+export default class AxisY extends SvelteComponentTyped<AxisYProps, AxisYEvents, AxisYSlots> {
 }
 export {};

package/dist/marks/BarX.svelte

@@ -0,0 +1,52 @@
+<script context="module"></script>
+
+<script>import { getContext } from "svelte";
+import BaseMark from "./BaseMark.svelte";
+import getBaseStyles from "../helpers/getBaseStyles.js";
+import resolveChannel from "../helpers/resolveChannel.js";
+import { stackX } from "../transforms/stack.js";
+import { recordizeX } from "../transforms/recordize.js";
+const BaseMark_BarX = BaseMark;
+const plot = getContext("svelteplot");
+let { data: rawData, inset = 0, ...rawChannels } = $props();
+let { data, ...channels } = $derived(stackX(recordizeX({ data: rawData, ...rawChannels })));
+function isValid(value) {
+  return value !== null && !Number.isNaN(value);
+}
+</script>
+
+<BaseMark_BarX type="bar-x" {data} channels={['y', 'x1', 'x2', 'fill', 'stroke']} {...channels}>
+    <g class="bars-x">
+        {#each data as datum}
+            {@const cy = resolveChannel('y', datum, channels)}
+            {@const cx1 = resolveChannel('x1', datum, channels)}
+            {@const cx2 = resolveChannel('x2', datum, channels)}
+            {@const minx = Math.min(plot.xScale(cx1), plot.xScale(cx2))}
+            {@const maxx = Math.max(plot.xScale(cx1), plot.xScale(cx2))}
+            {@const maybeFillColor = resolveChannel('fill', datum, channels)}
+            {@const maybeStrokeColor = resolveChannel('stroke', datum, channels)}
+            {#if isValid(cy) && isValid(cx1) && isValid(cx2)}
+                <rect
+                    style={getBaseStyles(datum, channels)}
+                    style:fill={maybeFillColor
+                        ? plot.colorScale(maybeFillColor)
+                        : maybeStrokeColor
+                          ? null
+                          : 'currentColor'}
+                    style:stroke={maybeStrokeColor ? plot.colorScale(maybeStrokeColor) : null}
+                    transform="translate({[minx, plot.yScale(cy) + inset]})"
+                    width={maxx - minx}
+                    height={plot.yScale.bandwidth() - inset * 2}
+                />
+            {/if}
+        {/each}
+    </g>
+</BaseMark_BarX>
+
+<style>
+    rect {
+        fill: none;
+        stroke: none;
+        stroke-width: 1.6px;
+    }
+</style>