svelteplot 0.9.0 → 0.9.1

package/README.md

@@ -2,10 +2,10 @@
 
 ![License](https://img.shields.io/npm/l/svelteplot.svg) ![Tests](https://github.com/svelteplot/svelteplot/actions/workflows/test.yml/badge.svg) [![Netlify Status](https://api.netlify.com/api/v1/badges/81163b24-76c1-4256-833c-919284f211ed/deploy-status)](https://app.netlify.com/projects/svelteplot/deploys)
 
-SveltePlot is a visualization framework based on the [layered grammar of graphics](https://vita.had.co.nz/papers/layered-grammar.html) ideas. It's API is heavily inspired by [Observable Plot](https://github.com/observablehq/plot). Created by Gregor Aisch.
-
 <img src="static/logo.svg" alt="SveltePlot logo" width="401" />
 
+SveltePlot is a [Svelte](https://svelte.dev/)-native visualization framework based on the [layered grammar of graphics](https://vita.had.co.nz/papers/layered-grammar.html) principle. It's API is heavily inspired by [Observable Plot](https://github.com/observablehq/plot). Created by Gregor Aisch.
+
 ## Development
 
 Clone the repo and install dependencies:

package/dist/Mark.svelte

@@ -325,7 +325,7 @@
 
 <style>
     text {
-        stroke: var(--plot-bg);
+        stroke: var(--svp-bg);
         fill: crimson;
         font-size: 11px;
         stroke-width: 3px;

package/dist/Plot.svelte

@@ -177,17 +177,13 @@
 </svelte:boundary>
 
 <style>
-    :root {
-        --plot-bg: white;
-        --plot-fg: currentColor;
-    }
     .error {
         font-size: 11px;
         stroke-width: 3px;
         font-weight: bold;
     }
     text.error {
-        stroke: var(--plot-bg);
+        stroke: var(--svelteplot-bg, white);
         fill: crimson;
         paint-order: stroke fill;
     }

package/dist/constants.js

@@ -86,8 +86,15 @@ export const VALID_SCALE_TYPES = {
         'quantile',
         'quantize',
         'threshold'
-    ])
-    // ...
+    ]),
+    symbol: new Set(['categorical', 'ordinal']),
+    opacity: new Set(['linear', 'log', 'symlog', 'sqrt', 'pow']),
+    r: new Set(['linear', 'log', 'symlog', 'sqrt', 'pow']),
+    length: new Set(['linear', 'log', 'symlog', 'sqrt', 'pow']),
+    fx: new Set(['band']),
+    fy: new Set(['band']),
+    // projection is a special type not mapping to a D3 scale
+    projection: new Set()
 };
 /**
  * Map of all scaled channels

package/dist/core/FacetAxes.svelte

@@ -21,10 +21,16 @@
 
     // create band scales for fx and fy
     const facetXScale = $derived(
-        scaleBand().paddingInner(0.1).domain(fxValues).rangeRound([0, plot.plotWidth])
+        scaleBand()
+            .paddingInner(plot.options.fx?.paddingInner ?? plot.options.fx?.padding ?? 0.1)
+            .domain(fxValues)
+            .rangeRound([0, plot.plotWidth])
     );
     const facetYScale = $derived(
-        scaleBand().paddingInner(0.1).domain(fyValues).rangeRound([0, plot.plotHeight])
+        scaleBand()
+            .paddingInner(plot.options.fy?.paddingInner ?? plot.options.fy?.padding ?? 0.1)
+            .domain(fyValues)
+            .rangeRound([0, plot.plotHeight])
     );
 </script>
 
@@ -32,13 +38,17 @@
 {#if fxValues.length > 1 && plot.options.fx.axis}
     <g transform="translate({plot.options.marginLeft}, 0)">
         <BaseAxisX
+            class="facet-axis-x"
             scaleFn={facetXScale}
             scaleType="band"
             ticks={fxValues}
             tickFormat={plot.options.fx.tickFormat || ((d) => d)}
             tickFontSize={11}
             tickSize={0}
-            tickPadding={5}
+            tickPadding={plot.options.x.axis === plot.options.fx.axis ||
+            plot.options.x.axis === 'both'
+                ? 25
+                : 5}
             anchor={plot.options.fx.axis}
             options={plot.options.fx.axisOptions || {}}
             {...plot.options.fx.axisProps || {}}
@@ -50,6 +60,7 @@
 {#if fyValues.length > 1 && plot.options.fy.axis}
     <g transform="translate(0, {plot.options.marginTop})">
         <BaseAxisY
+            class="facet-axis-y"
             scaleFn={facetYScale}
             scaleType="band"
             ticks={fyValues}

package/dist/core/FacetGrid.svelte

@@ -9,10 +9,11 @@
     import { scaleBand } from 'd3-scale';
     import Facet from './Facet.svelte';
     import { getEmptyFacets } from '../helpers/facets.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
-    const { getPlotState, updateDimensions } = getContext<PlotContext>('svelteplot');
+    const { updateDimensions } = getContext<PlotContext>('svelteplot');
     // we need the plot context for the overall width & height
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     let {
         children,
@@ -36,13 +37,23 @@
     // create band scales for fx and fy
     const facetXScale = $derived(
         scaleBand()
-            .paddingInner(fxValues.length > 1 ? 0.1 : 0)
+            .paddingOuter(0)
+            .paddingInner(
+                fxValues.length > 1
+                    ? (plot.options.fx?.paddingInner ?? plot.options.fx?.padding ?? 0.1)
+                    : 0
+            )
             .domain(fxValues)
             .rangeRound([0, plot.plotWidth])
     );
     const facetYScale = $derived(
         scaleBand()
-            .paddingInner(fyValues.length > 1 ? 0.1 : 0)
+            .paddingOuter(0)
+            .paddingInner(
+                fyValues.length > 1
+                    ? (plot.options.fy?.paddingInner ?? plot.options.fy?.padding ?? 0.1)
+                    : 0
+            )
             .domain(fyValues)
             .rangeRound([0, plot.plotHeight])
     );

package/dist/core/Plot.svelte

@@ -578,12 +578,8 @@
 </figure>
 
 <style>
-    :root {
-        --plot-bg: white;
-        --plot-fg: currentColor;
-    }
-
     figure {
+        --svp-bg: var(--svelteplot-bg, white);
         margin: 0;
         padding: 0;
     }

package/dist/helpers/autoProjection.d.ts

@@ -1,11 +1,15 @@
+import type { GeoProjection } from 'd3-geo';
+type ProjectionOptions = {
+    width: number;
+    height: number;
+    rotate?: [number, number] | [number, number, number];
+    precision?: number;
+    clip?: number | null;
+    parallels?: [number, number];
+    domain?: any;
+};
 export declare function namedProjection(projection: string): {
-    type: ({ width, height, rotate, precision, clip }: {
-        width: any;
-        height: any;
-        rotate: any;
-        precision?: number | undefined;
-        clip: any;
-    }) => any;
+    type: ({ width, height, rotate, precision, clip }: ProjectionOptions) => GeoProjection;
     aspectRatio: number;
 } | {
     type: () => {
@@ -13,7 +17,8 @@ export declare function namedProjection(projection: string): {
     };
 } | {
     type: () => {
-        invert(x: any, y: any): any[];
+        invert(x: number, y: number): number[];
         stream(s: import("d3-geo").GeoStream): import("d3-geo").GeoTransformPrototype & import("d3-geo").GeoStream;
     };
 };
+export {};

package/dist/helpers/autoProjection.js

@@ -75,7 +75,7 @@ function conicProjection(createProjection, kx, ky) {
             const { parallels, domain, width, height } = options;
             const projection = type(options);
             if (parallels != null) {
-                projection.parallels(parallels);
+                projection.parallels?.(parallels);
                 if (domain === undefined) {
                     projection.fitSize([width, height], { type: 'Sphere' });
                 }

package/dist/helpers/autoScales.d.ts

@@ -9,7 +9,7 @@ export declare function autoScale({ name, type, domain, scaleOptions, plotOption
     plotHeight: number;
     plotHasFilledDotMarks: boolean;
     plotDefaults: PlotDefaults;
-}): Record<string, (v: any) => void>;
+}): (val: any) => any;
 export declare function autoScaleColor({ type, domain, scaleOptions, plotOptions, plotWidth, plotHeight, plotHasFilledDotMarks, plotDefaults }: {
     name: ScaleName;
     type: ScaleType;

package/dist/helpers/autoTicks.d.ts

@@ -1,3 +1,12 @@
 import type { RawValue, ScaleType } from '../types/index.js';
-export declare function maybeInterval(interval: null | number | string | (<T>(d: T) => T)): any;
-export declare function autoTicks(type: ScaleType, ticks: RawValue[], interval: string | number | null, domain: RawValue[], scaleFn: any, count: number): any;
+type IntervalLike = {
+    floor: (d: number) => number;
+    round?: (d: number) => number;
+    offset: (d: number, step?: number) => number;
+    range: (lo: number, hi: number) => number[];
+};
+export declare function maybeInterval(interval: null | number | string | IntervalLike): any;
+export declare function autoTicks(type: ScaleType, ticks: RawValue[], interval: string | number | null, domain: RawValue[], scaleFn: {
+    ticks?: (count: number) => RawValue[];
+}, count: number): any;
+export {};

package/dist/helpers/autoTicks.js

@@ -34,7 +34,9 @@ export function autoTicks(type, ticks, interval, domain, scaleFn, count) {
         return ticks;
     if (interval) {
         const [lo, hi] = extent(domain);
-        const I = maybeInterval(interval, type);
+        if (lo == null || hi == null)
+            return [];
+        const I = maybeInterval(interval);
         return I.range(lo, I.offset(hi)).filter((d) => d >= lo && d <= hi);
     }
     return typeof scaleFn.ticks === 'function' ? scaleFn.ticks(count) : [];

package/dist/helpers/callWithProps.d.ts

@@ -1,8 +1,6 @@
 import type { RawValue } from '../types/index.js';
-type Setter = (v: any) => void;
 /**
  * Helper function to call a D3 "function class" while also calling
  * property setter functions on the result.
  */
-export default function (d3func: () => Record<string, Setter>, args: RawValue[], props?: Record<string, RawValue>): Record<string, Setter>;
-export {};
+export default function <T extends object>(d3func: (...args: RawValue[]) => T, args?: RawValue[], props?: Record<string, RawValue>): T;

package/dist/helpers/callWithProps.js

@@ -2,12 +2,14 @@
  * Helper function to call a D3 "function class" while also calling
  * property setter functions on the result.
  */
-export default function (d3func, args, props = {}) {
+export default function (d3func, args = [], props = {}) {
     const res = d3func(...args);
+    const resWithKeys = res;
     for (const [key, val] of Object.entries(props)) {
-        if (typeof res[key] !== 'function')
+        const setter = resWithKeys[key];
+        if (typeof setter !== 'function')
             throw new Error(`function ${key} does not exist`);
-        res[key](val);
+        setter(val);
     }
     return res;
 }

package/dist/helpers/colors.d.ts

@@ -4,10 +4,10 @@ export declare const categoricalSchemes: Map<string, readonly string[]>;
 export declare function isCategoricalScheme(scheme: string): boolean;
 type SchemeGetter = (n: number) => readonly string[];
 export declare function isOrdinalScheme(scheme: ColorScheme): boolean;
-export declare function ordinalScheme(scheme: string): SchemeGetter | undefined;
-export declare function ordinalRange(scheme: string, length: number): readonly string[] | undefined;
-export declare function maybeBooleanRange(domain: boolean[], scheme?: string): unknown[] | undefined;
+export declare function ordinalScheme(scheme: ColorScheme | string): SchemeGetter;
+export declare function ordinalRange(scheme: ColorScheme | string, length: number): readonly string[];
+export declare function maybeBooleanRange(domain: boolean[], scheme?: ColorScheme | string): unknown[] | undefined;
 export declare function isQuantitativeScheme(scheme: string): boolean;
-export declare function quantitativeScheme(scheme: string): typeof interpolateBrBG | undefined;
+export declare function quantitativeScheme(scheme: ColorScheme | string): typeof interpolateBrBG | undefined;
 export declare function isDivergingScheme(scheme: string): boolean;
 export {};

package/dist/helpers/colors.js

@@ -113,13 +113,14 @@ function schemeicyclical(interpolate) {
 }
 export function ordinalScheme(scheme) {
     const s = `${scheme}`.toLowerCase();
-    if (!ordinalSchemes.has(s))
+    const match = ordinalSchemes.get(s);
+    if (!match)
         throw new Error(`unknown ordinal scheme: ${s}`);
-    return ordinalSchemes.get(s);
+    return match;
 }
 export function ordinalRange(scheme, length) {
     const s = ordinalScheme(scheme);
-    const r = typeof s === 'function' ? s({ length }) : s;
+    const r = typeof s === 'function' ? s(length) : s;
     return r.length !== length ? r.slice(0, length) : r;
 }
 // If the specified domain contains only booleans (ignoring null and undefined),

package/dist/helpers/curves.d.ts

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

package/dist/helpers/getBaseStyles.d.ts

@@ -1,9 +1,8 @@
 import type { Channels } from '../types/index.js';
-import type { DataRow } from '../types/index.js';
-export declare function getBaseStylesObject(datum: DataRow, props: Partial<Channels>): {
+export declare function getBaseStylesObject<T>(datum: T, props: Partial<Channels<T>>): {
     [k: string]: string | number;
 };
-export default function (datum: DataRow, props: Partial<Channels>): string;
+export default function <T>(datum: T, props: Partial<Channels<T>>): string;
 export declare function maybeToPixel(cssKey: string, value: string | number): string | number;
 export declare function maybeFromPixel(value: string | number): string | number;
 export declare function maybeFromRem(value: string | number, rootFontSize?: number): string | number;

package/dist/helpers/getBaseStyles.js

@@ -32,7 +32,8 @@ export function getBaseStylesObject(datum, props) {
         .filter(([key, cssKey]) => cssKey && props[key] != null)
         .map(([key, cssKey]) => [
         cssKey,
-        maybeToPixel(cssKey, resolveProp(props[key], datum, styleDefaults[key] || null))
+        maybeToPixel(cssKey, (resolveProp(props[key], datum, styleDefaults[key] || null) ??
+            ''))
     ]));
 }
 export default function (datum, props) {

package/dist/helpers/group.d.ts

@@ -3,4 +3,4 @@ import type { Channels } from '../types/index.js';
  * Groups the data by the fx, fy and z channels and calls the reduce function
  * for each group. Returns the new channels to be added in the transform.
  */
-export declare function groupFacetsAndZ<T>(items: T[], channels: Channels<T>, reduce: (items: T[]) => any): any;
+export declare function groupFacetsAndZ<T>(items: T[], channels: Channels<T>, reduce: (items: T[], groupProps?: Record<string, unknown>) => any): any;

package/dist/helpers/group.js

@@ -6,17 +6,18 @@ import { groups as d3Groups } from 'd3-array';
  */
 export function groupFacetsAndZ(items, channels, reduce) {
     const groupBy = ['fx', 'fy', 'z'].map((groupChannel) => {
-        const groupByChannel = groupChannel === 'z'
-            ? channels.z
-                ? 'z'
-                : channels.fill
-                    ? 'fill'
-                    : channels.stroke
-                        ? 'stroke'
-                        : false
-            : channels[groupChannel]
-                ? groupChannel
-                : false;
+        let groupByChannel = null;
+        if (groupChannel === 'z') {
+            if (channels.z)
+                groupByChannel = 'z';
+            else if (channels.fill)
+                groupByChannel = 'fill';
+            else if (channels.stroke)
+                groupByChannel = 'stroke';
+        }
+        else if (channels[groupChannel]) {
+            groupByChannel = groupChannel;
+        }
         if (groupByChannel) {
             const groupByPropName = typeof channels[groupByChannel] === 'string'
                 ? channels[groupByChannel]
@@ -34,13 +35,13 @@ export function groupFacetsAndZ(items, channels, reduce) {
     const groups = d3Groups(items, ...groupBy.map((d) => d[2]));
     for (const [fxKey, fxGroups] of groups) {
         const newItemGroupProps = {};
-        if (groupBy[0][0] !== null)
+        if (groupBy[0][0] !== null && groupBy[0][1])
             newItemGroupProps[groupBy[0][1]] = fxKey;
         for (const [fyKey, fyGroups] of fxGroups) {
-            if (groupBy[1][0] !== null)
+            if (groupBy[1][0] !== null && groupBy[1][1])
                 newItemGroupProps[groupBy[1][1]] = fyKey;
             for (const [zKey, zGroups] of fyGroups) {
-                if (groupBy[2][0] !== null)
+                if (groupBy[2][0] !== null && groupBy[2][1])
                     newItemGroupProps[groupBy[2][1]] = zKey;
                 reduce(zGroups, newItemGroupProps);
             }

package/dist/helpers/math.d.ts

@@ -12,8 +12,8 @@ export declare function normdev(p: number): number | false;
 export declare function confidenceInterval(data: {
     x: number;
     y: number;
-}[], predict: any, confidenceLevel: number): (x: any) => {
-    x: any;
+}[], predict: (x: number) => number, confidenceLevel: number): (x: number) => {
+    x: number;
     left: number;
-    right: any;
+    right: number;
 };

package/dist/helpers/math.js

@@ -75,7 +75,13 @@ function inverseT(p, df) {
     if (y > 0.05 + a) {
         // The procedure normdev(p) is assumed to return a negative normal
         // deviate at the lower tail probability level p, e.g. -2.32 for p = 0.01.
-        x = normdev(p / 2);
+        const _x = normdev(p / 2);
+        if (_x === false) {
+            throw new Error('normdev returned false for p/2 in inverseT');
+        }
+        else {
+            x = _x;
+        }
         y = x * x;
         if (df < 5)
             c = c + 0.3 * (df - 4.5) * (x + 0.6);

package/dist/helpers/resolve.d.ts

@@ -3,7 +3,7 @@ import type { ScaleName, ChannelName, ScaledChannelName, ChannelAccessor, DataRo
 type ChannelAlias = {
     channel: ScaledChannelName;
 };
-export declare function resolveProp<K, T>(accessor: ConstantAccessor<K, T>, datum: DataRecord | null, _defaultValue?: K | null): K | typeof _defaultValue;
+export declare function resolveProp<K, T>(accessor: ConstantAccessor<K, T>, datum: DataRecord<T> | null, _defaultValue?: K | null): K | typeof _defaultValue;
 type ChannelOptions = {
     value: ChannelAccessor;
     scale?: ScaleName | null;

package/dist/helpers/resolve.js

@@ -6,17 +6,22 @@ import { getBaseStylesObject } from './getBaseStyles.js';
 import { RAW_VALUE } from '../transforms/recordize.js';
 export function resolveProp(accessor, datum, _defaultValue = null) {
     if (typeof accessor === 'function') {
+        const accessorFn = accessor;
         // datum[RAW_VALUE] exists if an array of raw values was used as dataset and got
-        // "recordized" by the recordize transform. We want to hide this wrapping to the user
+        // "recordized" by the recordi e transform. We want to hide this wrapping to the user
         // so we're passing the original value to accessor functions instead of our wrapped record
         return datum == null
-            ? accessor()
-            : accessor(datum.hasOwnProperty(RAW_VALUE) ? datum[RAW_VALUE] : datum, datum[INDEX]);
+            ? accessorFn()
+            : accessorFn(datum.hasOwnProperty(RAW_VALUE) ? datum[RAW_VALUE] : datum, datum[INDEX]);
     }
-    else if ((typeof accessor === 'string' || typeof accessor === 'symbol') &&
-        datum &&
-        datum[accessor] !== undefined) {
-        return datum[accessor];
+    else {
+        const accessorValue = accessor;
+        // accessor may be a
+        if ((typeof accessorValue === 'string' || typeof accessorValue === 'symbol') &&
+            datum &&
+            datum[accessorValue] !== undefined) {
+            return datum[accessor];
+        }
     }
     return isRawValue(accessor) ? accessor : _defaultValue;
 }

package/dist/helpers/symbols.d.ts

@@ -1,5 +1,7 @@
 import { type SymbolType } from 'd3-shape';
 export declare const sqrt3: number;
 export declare const sqrt4_3: number;
-export declare function isSymbol(value: string | SymbolType): boolean;
+type BuiltinSymbol = 'asterisk' | 'circle' | 'cross' | 'diamond' | 'diamond2' | 'hexagon' | 'plus' | 'square' | 'square2' | 'star' | 'times' | 'triangle' | 'triangle2' | 'wye';
+export declare function isSymbol(value: any): value is SymbolType | BuiltinSymbol;
 export declare function maybeSymbol(symbol: SymbolType | string): SymbolType;
+export {};

package/dist/helpers/typeChecks.d.ts

@@ -1,10 +1,10 @@
 import type { RawValue } from '../types/index.js';
-export declare function isBooleanOrNull(v: RawValue): v is boolean;
+export declare function isBooleanOrNull(v: RawValue): v is boolean | null;
 export declare function isDate(v: RawValue): v is Date;
 export declare function isDateOrNull(v: RawValue | null | undefined): v is Date | null | undefined;
 export declare function isNumberOrNull(v: RawValue | null | undefined): boolean;
 export declare function isNumberOrNullOrNaN(v: RawValue | null | undefined): boolean;
 export declare function isStringOrNull(v: RawValue | null | undefined): v is string | null | undefined;
-export declare function isSymbolOrNull(v: RawValue | null | undefined): boolean;
+export declare function isSymbolOrNull(v: RawValue | null | undefined): v is ("square" | "circle" | "asterisk" | "cross" | "diamond" | "diamond2" | "hexagon" | "plus" | "square2" | "star" | "times" | "triangle" | "triangle2" | "wye") | import("d3-shape").SymbolType | null | undefined;
 export declare function isColorOrNull(v: RawValue | null | undefined): boolean;
 export declare function isOpacityOrNull(v: RawValue): boolean;

package/dist/marks/CellX.svelte

@@ -2,13 +2,15 @@
     @component
     For arbitrary rectangles with fixed y position, requires band x scale
 -->
-<script lang="ts">
+<script lang="ts" generics="Datum extends DataRow">
     import Cell from './Cell.svelte';
     import { recordizeY } from '../index.js';
     import type { ComponentProps } from 'svelte';
-    import type { TransformArgsRow } from '../types/index.js';
+    import type { DataRow, TransformArgsRow } from '../types/index.js';
 
-    interface CellXMarkProps extends Omit<ComponentProps<typeof Cell>, 'y'> {}
+    interface CellXMarkProps extends Omit<ComponentProps<typeof Cell>, 'y' | 'data'> {
+        data: Datum[];
+    }
 
     let { data = [{}], ...options }: CellXMarkProps = $props();
 
@@ -16,7 +18,7 @@
         recordizeY({
             data,
             ...options
-        } as TransformArgsRow)
+        } as TransformArgsRow<Datum>)
     );
 </script>
 

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

@@ -1,8 +1,95 @@
-import Cell from './Cell.svelte';
-import type { ComponentProps } from 'svelte';
-interface CellXMarkProps extends Omit<ComponentProps<typeof Cell>, 'y'> {
+import type { DataRow } from '../types/index.js';
+declare function $$render<Datum extends DataRow>(): {
+    props: Omit<Partial<{
+        filter: import("../types/index.js").ConstantAccessor<boolean, Record<string | symbol, import("../types/index.js").RawValue>>;
+        facet: "auto" | "include" | "exclude";
+        fx: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+        fy: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+        dx: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+        dy: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+        dodgeX: import("../transforms/dodge").DodgeXOptions;
+        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        fill: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+        fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+        sort: ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | {
+            channel: string;
+            order?: "ascending" | "descending";
+        } | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Record<string | symbol, import("../types/index.js").RawValue>>;
+        stroke: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+        strokeWidth: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Record<string | symbol, import("../types/index.js").RawValue>>;
+        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Record<string | symbol, import("../types/index.js").RawValue>>;
+        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+        opacity: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
+        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
+        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/index.js").RawValue>>;
+        clipPath: string;
+        mask: string;
+        imageFilter: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
+        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types/index.js").RawValue>>;
+        paintOrder: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/index.js").RawValue>>;
+        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        class: string;
+        style: string;
+        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Record<string | symbol, import("../types/index.js").RawValue>>;
+    }> & import("../types/index.js").LinkableMarkProps<Record<string | symbol, import("../types/index.js").RawValue>> & import("../types/index.js").BaseRectMarkProps<Record<string | symbol, import("../types/index.js").RawValue>> & {
+        data: Record<string | symbol, import("../types/index.js").RawValue>[];
+        x?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+        y?: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
+    }, "data" | "y"> & {
+        data: Datum[];
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Datum extends DataRow> {
+    props(): ReturnType<typeof $$render<Datum>>['props'];
+    events(): ReturnType<typeof $$render<Datum>>['events'];
+    slots(): ReturnType<typeof $$render<Datum>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <Datum extends DataRow>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
+    } & ReturnType<__sveltets_Render<Datum>['exports']>;
+    <Datum extends DataRow>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
 /** For arbitrary rectangles with fixed y position, requires band x scale */
-declare const CellX: import("svelte").Component<CellXMarkProps, {}, "">;
-type CellX = ReturnType<typeof CellX>;
+declare const CellX: $$IsomorphicComponent;
+type CellX<Datum extends DataRow> = InstanceType<typeof CellX<Datum>>;
 export default CellX;