svelteplot 0.0.1-alpha.11 → 0.0.1-alpha.13

package/dist/Plot.svelte

@@ -21,6 +21,7 @@ let {
   title = "",
   subtitle = "",
   caption = "",
+  testid,
   // scales
   radius = null,
   color = null,
@@ -70,11 +71,10 @@ function onMouseMove(evt) {
   if (onmousemove)
     onmousemove({ ...evt, plot });
 }
-$inspect(plot.x.domain);
 let hasLegend = $derived(color?.legend || symbol?.legend);
 </script>
 
-<figure class="svelteplot" bind:clientWidth={width} style:max-width={maxWidth}>
+<figure data-testid={testid} class="svelteplot" bind:clientWidth={width} style:max-width={maxWidth}>
     <svg
         role="document"
         {width}
@@ -82,10 +82,10 @@ let hasLegend = $derived(color?.legend || symbol?.legend);
         onmousemove={onmousemove ? onMouseMove : null}
     >
         <!-- automatic grids -->
-        {#if (grid || x?.grid) && plot.hasChannelX}<GridX automatic />{/if}
-        {#if (grid || y?.grid) && plot.hasChannelY}<GridY automatic />{/if}
+        {#if (grid && plot.hasScaleX) || x?.grid}<GridX automatic />{/if}
+        {#if (grid && plot.hasScaleY) || y?.grid}<GridY automatic />{/if}
 
-        {#if !plot.hasAxisXMark && plot.hasChannelX}
+        {#if !plot.hasAxisXMark && (plot.hasScaleX || x?.grid)}
             <!-- automatic x axis -->
             {#if plot.options.x.axis === 'bottom' || plot.options.x.axis === 'both'}
                 <AxisX anchor="bottom" automatic />
@@ -94,7 +94,7 @@ let hasLegend = $derived(color?.legend || symbol?.legend);
                 <AxisX anchor="top" automatic />
             {/if}
         {/if}
-        {#if !plot.hasAxisYMark && plot.hasChannelY}
+        {#if !plot.hasAxisYMark && (plot.hasScaleY || y?.grid)}
             <!-- automatic y axis -->
             {#if plot.options.y.axis === 'left' || plot.options.y.axis === 'both'}
                 <AxisY anchor="left" automatic />

package/dist/classes/Mark.svelte.js

@@ -1,9 +1,13 @@
+import { CHANNEL_SCALE } from '../contants.js';
 export class Mark {
     id;
     type;
     automatic;
     channels = $state(new Set());
     props = $state();
+    scales = $derived(new Set(Array.from(this.channels.values())
+        .filter((channel) => this.props[channel] != null && !(typeof this.props[channel] === 'number'))
+        .map((channel) => CHANNEL_SCALE[channel])));
     constructor(type, channels, automatic, props) {
         this.id = Symbol();
         this.type = type;

package/dist/classes/Plot.svelte.js

@@ -1,7 +1,7 @@
 import { createScale, createColorScale } from '../helpers/createScale.js';
 import mergeDeep from '../helpers/mergeDeep.js';
-import { Channel } from './Channel.svelte';
-import { get } from 'underscore';
+import { Scale } from './Scale.svelte.js';
+import pick from 'underscore/modules/pick.js';
 export const DEFAULT_PLOT_OPTIONS = {
     title: '',
     subtitle: '',
@@ -37,16 +37,24 @@ export class Plot {
     _height = $state(400);
     options = $state(DEFAULT_PLOT_OPTIONS);
     marks = $state([]);
-    hasChannelX = $derived(!!this.marks.find((mark) => !mark.automatic && mark.channels.has('x')));
-    hasChannelY = $derived(!!this.marks.find((mark) => !mark.automatic && mark.channels.has('y')));
+    hasScaleX = $derived(!!this.marks.find((mark) => !mark.automatic && mark.scales.has('x')));
+    hasScaleY = $derived(!!this.marks.find((mark) => !mark.automatic && mark.scales.has('y')));
     hasFilledDotMarks = $derived(!!this.marks.find((d) => d.type === 'dot' && d.props?.fill));
     manualMarks = $derived(this.marks.filter((mark) => !mark.automatic));
-    singlePosChannelMark = $derived(this.manualMarks.length === 1 &&
+    singlePosScaleMark = $derived(this.manualMarks.length === 1 &&
         (!this.manualMarks[0].channels.has('x') || !this.manualMarks[0].channels.has('y')));
-    height = $derived(this._height === 'auto' ? (this.hasChannelY ? 400 : 90) : this._height);
+    height = $derived(this._height === 'auto'
+        ? this.hasScaleY
+            ? this.y.scaleType === 'band'
+                ? this.y.domain.length * 30
+                : this.y.scaleType === 'point'
+                    ? this.y.domain.length * 18
+                    : 400
+            : 90
+        : this._height);
     inset = $derived(typeof this.options.inset === 'number'
         ? this.options.inset
-        : this.singlePosChannelMark
+        : this.singlePosScaleMark
             ? 10
             : 0);
     // derived props
@@ -59,24 +67,28 @@ export class Plot {
     // margins = $state<Margins>({ left: 0, right: 0, top: 0, bottom: 0 });
     plotWidth = $derived(this.width - this.margins.left - this.margins.right);
     plotHeight = $derived(this.height - this.margins.top - this.margins.bottom);
-    x = new Channel('x', this);
-    y = new Channel('y', this);
-    radius = new Channel('radius', this);
-    color = new Channel('color', this);
-    symbol = new Channel('symbol', this);
+    x = new Scale('x', this);
+    y = new Scale('y', this);
+    radius = new Scale('radius', this);
+    color = new Scale('color', this);
+    symbol = new Scale('symbol', this);
     colorSymbolRedundant = $derived(this.color.uniqueMarkProps.length === 1 &&
         this.symbol.uniqueMarkProps.length === 1 &&
         this.color.uniqueMarkProps[0] === this.symbol.uniqueMarkProps[0]);
-    xScale = $derived(createScale(this.x.scaleType === 'linear' && this.options.x.log ? 'log' : this.x.scaleType, this.options?.x?.domain || this.x.domain, this.options?.x?.reverse
+    xScale = $derived(createScale(this.x.scaleType, this.options?.x?.domain || this.x.domain, this.options?.x?.reverse
         ? [this.margins.left + this.plotWidth - this.inset, this.margins.left + this.inset]
-        : [this.margins.left + this.inset, this.margins.left + this.plotWidth - this.inset], this.x.scaleType === 'linear' && this.options.x.log ? { base: 10 } : {}));
-    yScale = $derived(createScale(this.y.scaleType === 'linear' && this.options.y.log ? 'log' : this.y.scaleType, this.options.y?.domain || this.y.domain, this.options.y?.reverse
+        : [this.margins.left + this.inset, this.margins.left + this.plotWidth - this.inset], 
+    // options
+    getScaleOptions(this.x.scaleType, this.options.x)));
+    yScale = $derived(createScale(this.y.scaleType, this.options.y?.domain || this.y.domain, this.options.y?.reverse
         ? [this.margins.top + this.inset, this.height - this.margins.bottom - this.inset]
-        : [this.height - this.margins.bottom - this.inset, this.margins.top + this.inset], this.y.scaleType === 'linear' && this.options.y.log ? { base: '10' } : {}));
+        : [this.height - this.margins.bottom - this.inset, this.margins.top + this.inset], 
+    // options
+    getScaleOptions(this.y.scaleType, this.options.y)));
     radiusScale = $derived(createScale(this.radius.scaleType, [0, Math.max(this.radius.domain[0], this.radius.domain[1])], this.options.radius.range));
     symbolScale = $derived(createScale('ordinal', this.symbol.domain, this.options.symbol?.range || this.hasFilledDotMarks
         ? ['circle', 'cross', 'diamond', 'square', 'star', 'triangle', 'wye']
-        : ['circle', 'plus', 'times', 'triangle2', 'asterisk', 'square2', 'diamond2']));
+        : ['circle', 'plus', 'times', 'triangle2', 'asterisk', 'square2', 'diamond2'], getScaleOptions(this.symbol.scaleType, this.options.symbol || {})));
     colorScale = $derived(createColorScale(this.color.scaleType, this.color.domain, this.options.color?.range || null, this.options.color?.scheme));
     hasAxisXMark = $derived(!!this.marks.find((mark) => mark.type === 'axis-x' && !mark.automatic));
     hasAxisYMark = $derived(!!this.marks.find((mark) => mark.type === 'axis-y' && !mark.automatic));
@@ -87,12 +99,27 @@ export class Plot {
         this.options = opts;
     }
     addMark(mark) {
-        // console.log('addMark: ' + mark);
         this.marks = [...this.marks, mark];
-        // add mark to respective channels
-        console.log('y', this.hasChannelY, this.marks.filter(m => !m.automatic && m.channels.has('y')));
     }
     removeMark(removeMark) {
         this.marks = this.marks.filter((mark) => mark.id !== removeMark.id);
     }
 }
+/**
+ * users can pass options to the D3 scale function
+ */
+function getScaleOptions(scaleType, options = {}) {
+    return scaleType === 'linear'
+        ? pick(options, ['clamp', 'unknown'])
+        : scaleType === 'pow'
+            ? pick(options, ['exponent'])
+            : scaleType === 'log'
+                ? { base: 10, ...pick(options, ['base']) }
+                : scaleType === 'symlog'
+                    ? pick(options, ['constant'])
+                    : scaleType === 'point'
+                        ? pick(options, ['padding', 'align', 'round'])
+                        : scaleType === 'band'
+                            ? pick(options, ['padding', 'paddingInner', 'paddingOuter', 'align', 'round'])
+                            : {};
+}

package/dist/classes/Scale.svelte.js

@@ -0,0 +1,95 @@
+import resolveChannel from '../helpers/resolveChannel.js';
+import { extent } from 'd3-array';
+import { CHANNEL_SCALE } from '../contants.js';
+import { isBooleanOrNull, isColorOrNull, isDateOrNull, isNumberOrNull, isStringOrNull } from '../helpers/typeChecks.js';
+import { uniq } from 'underscore';
+import isDataRecord from '../helpers/isDataRecord.js';
+const FUNCTION = '(function)';
+export class Scale {
+    name = undefined;
+    plot = $state(undefined);
+    constructor(name, plot) {
+        this.name = name;
+        this.plot = plot;
+    }
+    // readonly type: ScaleType = SCALE_TYPES.position;
+    // all marks that have this channel
+    marks = $derived(this.plot?.marks ?? []);
+    scaleOptions = $derived(this.plot && this.name !== undefined ? this.plot.options[this.name] || {} : {});
+    forceDomain = $derived(this.plot && (this.name === 'x' || this.name === 'y')
+        ? this.scaleOptions?.domain || null
+        : null);
+    possibleChannels = $derived(Object.entries(CHANNEL_SCALE)
+        .filter(([, channel]) => channel === this.name)
+        .map(([prop]) => prop));
+    activeMarks = $derived(this.marks.filter((mark) => this.possibleChannels.find((channel) => mark.channels.has(channel) && mark.props[channel] !== undefined)));
+    manualActiveMarks = $derived(this.activeMarks.filter((mark) => !mark.automatic));
+    propNames = $derived(uniq(this.manualActiveMarks
+        .map((mark) => this.possibleChannels
+        .filter((channel) => mark.channels.has(channel) &&
+        (typeof mark.props[channel] === 'string' ||
+            typeof mark.props[channel] === 'function') &&
+        !String(mark.props[channel]).startsWith('__'))
+        .map((channel) => typeof mark.props[channel] === 'string' ? mark.props[channel] : FUNCTION))
+        .flat(2)));
+    autoTitle = $derived(this.propNames.length === 1 && this.propNames[0] !== FUNCTION ? this.propNames[0] : null);
+    uniqueMarkProps = $derived(uniq(this.manualActiveMarks
+        .map((mark) => this.possibleChannels
+        .filter((prop) => mark.props[prop] !== undefined)
+        .map((prop) => mark.props[prop]))
+        .flat(2)));
+    dataValues = $derived([
+        ...this.activeMarks
+            // only check marks with data
+            .filter((mark) => mark.props.data.length)
+            .map((mark) => this.possibleChannels.map((prop) => mark.props.data.map((row) => resolveChannel(prop, row, mark.props))))
+            .flat(3)
+            .filter((d) => d != null),
+        ...(this.forceDomain || [])
+    ]);
+    isPosition = $derived(this.name === 'x' || this.name === 'y');
+    isColor = $derived(this.name === 'color');
+    scaleType = $derived(this.scaleOptions.type ||
+        inferScaleType(this.dataValues, { isPosition: this.isPosition, isColor: this.isColor }));
+    // readonly valueType = $derived(
+    //     this.dataValues.every((v) => v == null)
+    //         ? 'null'
+    //         : this.dataValues.every(isColorOrNull)
+    //           ? 'color'
+    //           : this.dataValues.every(isBooleanOrNull)
+    //             ? 'boolean'
+    //             : this.dataValues.every(isStringOrNull)
+    //               ? 'text'
+    //               : this.dataValues.every(isNumberOrNull)
+    //                 ? 'number'
+    //                 : this.dataValues.every(isDateOrNull)
+    //                   ? 'date'
+    //                   : 'mixed'
+    // );
+    domain = $derived(this.scaleOptions.domain || inferScaleDomain(this.dataValues, this.scaleType));
+}
+// opacity: typeof === 'number' && between [0,1]
+function inferScaleType(dataValues, { isPosition, isColor }) {
+    if (!dataValues.length)
+        return 'linear';
+    if (dataValues.every(isNumberOrNull))
+        return 'linear';
+    if (dataValues.every(isDateOrNull))
+        return 'time';
+    if (dataValues.every(isStringOrNull))
+        return 'band';
+    return 'linear';
+}
+function inferScaleDomain(dataValues, scaleType) {
+    if (scaleType === 'point' || scaleType === 'band') {
+        return uniq(dataValues);
+    }
+    if (scaleType === 'linear' ||
+        scaleType === 'pow' ||
+        scaleType === 'log' ||
+        scaleType === 'sqrt' ||
+        scaleType === 'sequential' ||
+        scaleType === 'time') {
+        return extent(dataValues);
+    }
+}

package/dist/contants.d.ts

@@ -1,3 +1,3 @@
-import type { ChannelName, MarkProps, MarkStyleProps } from './types';
-export declare const CHANNEL_TYPES: Record<ChannelName, symbol>;
-export declare const MARK_PROP_CHANNEL: Record<MarkProps & MarkStyleProps, ChannelName>;
+import type { ScaleName, ChannelName } from './types';
+export declare const SCALE_TYPES: Record<ScaleName, symbol>;
+export declare const CHANNEL_SCALE: Record<ChannelName, ScaleName>;

package/dist/contants.js

@@ -1,4 +1,4 @@
-export const CHANNEL_TYPES = {
+export const SCALE_TYPES = {
     opacity: Symbol('opacity'),
     color: Symbol('color'),
     x: Symbol('position'),
@@ -6,9 +6,10 @@ export const CHANNEL_TYPES = {
     angle: Symbol('angle'),
     symbol: Symbol('symbol'),
     radius: Symbol('radius'),
-    width: Symbol('width')
+    width: Symbol('width'),
+    fontSize: Symbol('width')
 };
-export const MARK_PROP_CHANNEL = {
+export const CHANNEL_SCALE = {
     x: 'x',
     x1: 'x',
     x2: 'x',
@@ -23,18 +24,19 @@ export const MARK_PROP_CHANNEL = {
     opacity: 'opacity',
     fillOpacity: 'opacity',
     strokeOpacity: 'opacity',
-    strokeWidth: 'width'
+    strokeWidth: 'width',
+    fontSize: 'fontSize'
 };
-// export const CHANNEL_MAP: Record<ChannelName, ValueOf<typeof CHANNEL_TYPES>> = {
-// 	x: CHANNEL_TYPES.x,
-// 	y: CHANNEL_TYPES.y,
-// 	opacity: CHANNEL_TYPES.opacity,
-// 	strokeOpacity: CHANNEL_TYPES.opacity,
-// 	strokeWidth: CHANNEL_TYPES.width,
-// 	fillOpacity: CHANNEL_TYPES.opacity,
-// 	stroke: CHANNEL_TYPES.color,
-// 	fill: CHANNEL_TYPES.color,
-// 	r: CHANNEL_TYPES.radius,
-// 	rotate: CHANNEL_TYPES.angle,
-// 	symbol: CHANNEL_TYPES.symbol
+// export const CHANNEL_MAP: Record<ScaleName, ValueOf<typeof SCALE_TYPES>> = {
+// 	x: SCALE_TYPES.x,
+// 	y: SCALE_TYPES.y,
+// 	opacity: SCALE_TYPES.opacity,
+// 	strokeOpacity: SCALE_TYPES.opacity,
+// 	strokeWidth: SCALE_TYPES.width,
+// 	fillOpacity: SCALE_TYPES.opacity,
+// 	stroke: SCALE_TYPES.color,
+// 	fill: SCALE_TYPES.color,
+// 	r: SCALE_TYPES.radius,
+// 	rotate: SCALE_TYPES.angle,
+// 	symbol: SCALE_TYPES.symbol
 // };

package/dist/helpers/autoTimeFormat.d.ts

@@ -1,2 +1,2 @@
-import type { Channel } from '../classes/Channel.svelte';
-export default function autoTimeFormat(x: Channel, plotWidth: number): (date: Date) => string[];
+import type { Scale } from '../classes/Scale.svelte';
+export default function autoTimeFormat(x: Scale, plotWidth: number): (date: Date) => string[];

package/dist/helpers/createScale.js

@@ -1,32 +1,45 @@
-import { scaleBand, scaleLinear, scaleTime, scaleSqrt, scaleLog, scaleOrdinal } from 'd3-scale';
+import { scaleBand, scaleLinear, scaleTime, scaleSqrt, scaleLog, scaleOrdinal, scalePoint, scaleSymlog, scalePow } from 'd3-scale';
 import { scaleSequential, scaleDiverging } from 'd3-scale';
 import { getLogTicks } from './getLogTicks.js';
 import { categoricalSchemes, isCategoricalScheme, isQuantitativeScheme, ordinalScheme, quantitativeScheme } from './colors.js';
 import { isColorOrNull } from './typeChecks.js';
+import callWithProps from './callWithProps.js';
+import { count, nice } from 'd3-array';
 const Scales = {
+    point: scalePoint,
     band: scaleBand,
     linear: scaleLinear,
     time: scaleTime,
     sqrt: scaleSqrt,
+    pow: scalePow,
     log: scaleLog,
+    symlog: scaleSymlog,
     ordinal: scaleOrdinal,
     sequential: scaleSequential,
     diverging: scaleDiverging
 };
 export function createScale(type, domain, range, options = {}) {
-    const scale = Scales[type](domain, range);
+    const scale = Scales[type]();
+    // scale defaults
+    if (type === 'band' &&
+        options.padding === undefined &&
+        options.paddingInner === undefined &&
+        options.paddingOuter === undefined) {
+        options.padding = 0.2;
+    }
     // allow setting arbiraty scale options
-    for (const [key, val] of Object.entries(options)) {
+    // callWithProps(scale, { domain,})
+    for (const [key, val] of Object.entries({ domain, range, ...options })) {
         if (typeof scale[key] === 'function')
             scale[key](val);
         else
             console.warn('unknown scale setter ' + key);
     }
+    if (type === 'band' || type === 'point') {
+        scale.ticks = () => domain;
+    }
     if (type === 'log') {
-        // overwrite scaleLog's internal ticks() method
         scale.ticks = (count) => getLogTicks(domain, count);
-        // console.log({domain})
-        // console.log(getLogTicks(domain, 5))
     }
     return scale;
 }

package/dist/helpers/curves.d.ts

@@ -0,0 +1,3 @@
+import type { Curve } from '../types.js';
+import { type CurveFactory, type CurveBundleFactory } from 'd3-shape';
+export declare function maybeCurve(curve: Curve | CurveFactory | undefined, tension: number): CurveFactory | CurveBundleFactory;

package/dist/helpers/curves.js

@@ -0,0 +1,42 @@
+import { curveBasis, curveBasisClosed, curveBasisOpen, curveBundle, curveBumpX, curveBumpY, curveCardinal, curveCardinalClosed, curveCardinalOpen, curveCatmullRom, curveCatmullRomClosed, curveCatmullRomOpen, curveLinear, curveLinearClosed, curveMonotoneX, curveMonotoneY, curveNatural, curveStep, curveStepAfter, curveStepBefore } from 'd3-shape';
+const curves = new Map([
+    ['basis', curveBasis],
+    ['basis-closed', curveBasisClosed],
+    ['basis-open', curveBasisOpen],
+    ['bundle', curveBundle],
+    ['bump-x', curveBumpX],
+    ['bump-y', curveBumpY],
+    ['cardinal', curveCardinal],
+    ['cardinal-closed', curveCardinalClosed],
+    ['cardinal-open', curveCardinalOpen],
+    ['catmull-rom', curveCatmullRom],
+    ['catmull-rom-closed', curveCatmullRomClosed],
+    ['catmull-rom-open', curveCatmullRomOpen],
+    ['linear', curveLinear],
+    ['linear-closed', curveLinearClosed],
+    ['monotone-x', curveMonotoneX],
+    ['monotone-y', curveMonotoneY],
+    ['natural', curveNatural],
+    ['step', curveStep],
+    ['step-after', curveStepAfter],
+    ['step-before', curveStepBefore]
+]);
+export function maybeCurve(curve = curveLinear, tension) {
+    if (typeof curve === 'function')
+        return curve; // custom curve
+    const c = curves.get(`${curve}`.toLowerCase());
+    if (!c)
+        throw new Error(`unknown curve: ${curve}`);
+    if (tension !== undefined) {
+        if ('beta' in c) {
+            return c.beta(tension);
+        }
+        else if ('tension' in c) {
+            return c.tension(tension);
+        }
+        else if ('alpha' in c) {
+            return c.alpha(tension);
+        }
+    }
+    return c;
+}

package/dist/helpers/getBaseStyles.js

@@ -1,4 +1,4 @@
-import { MARK_PROP_CHANNEL } from '../contants.js';
+import { CHANNEL_SCALE } from '../contants.js';
 import resolveChannel from './resolveChannel.js';
 const styleProps = {
     fill: 'fill',
@@ -13,6 +13,6 @@ const styleProps = {
 export default function (datum, props) {
     return Object.entries(styleProps)
         .filter(([key, cssKey]) => cssKey && props[key] != null)
-        .map(([key, cssKey]) => `${cssKey}: ${resolveChannel(MARK_PROP_CHANNEL[key], datum, props[key])}`)
+        .map(([key, cssKey]) => `${cssKey}: ${resolveChannel(key, datum, props)}`)
         .join(';');
 }

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/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 { CHANNEL_SCALE } from '../contants.js';
 import isDataRecord from './isDataRecord.js';
-export default function (channel, datum, accessor = null) {
+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/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,9 +1,11 @@
-export { default as AxisX } from './marks/AxisX.svelte';
-export { default as AxisY } from './marks/AxisY.svelte';
-export { default as ColorLegend } from './marks/ColorLegend.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';
@@ -17,3 +19,8 @@ export { default as Plot } from './Plot.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,10 +1,12 @@
 // Reexport your entry components here
-export { default as AxisX } from './marks/AxisX.svelte';
-export { default as AxisY } from './marks/AxisY.svelte';
-export { default as ColorLegend } from './marks/ColorLegend.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';
@@ -18,3 +20,9 @@ export { default as Plot } from './Plot.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';