svelteplot 0.4.2 → 0.4.3-pr-199.0

package/dist/Mark.svelte

@@ -40,6 +40,7 @@
     import { getUsedScales, projectXY, projectX, projectY } from './helpers/scales.js';
     import { testFilter, isValid } from './helpers/index.js';
     import { resolveChannel, resolveProp } from './helpers/resolve.js';
+    import { RENAME } from './transforms/rename.js';
 
     let {
         data = [],
@@ -135,11 +136,12 @@
     const resolvedData: ResolvedDataRecord<Datum>[] = $derived(
         data
             .map((d, i) => ({ ...d, [INDEX]: i }))
-            .flatMap((row) => {
+            .flatMap((row, index) => {
                 const channels = options as Record<ChannelName, ChannelAccessor<Datum>>;
                 if (!testFacet(row, channels) || !testFilter(row, channels)) return [];
                 const out: ResolvedDataRecord<Datum> = {
-                    datum: row
+                    datum: row,
+                    index
                 };
                 for (const [channel] of Object.entries(CHANNEL_SCALE) as [
                     ScaledChannelName,
@@ -208,6 +210,7 @@
         resolvedData.flatMap((row) => {
             const out: ScaledDataRecord<Datum> = {
                 datum: row.datum,
+                index: row[INDEX],
                 valid: true
             };
             // compute dx/dy
@@ -256,11 +259,13 @@
                 if (options?.[channel] != null && out[channel] === undefined) {
                     // resolve value
                     const value = row[channel];
+                    // if this channel was renamed, use the original channel for scaling
+                    const origChannel = options?.[RENAME]?.[channel] || channel;
                     const scaled = usedScales[channel]
                         ? scale === 'x'
-                            ? projectX(channel as 'x' | 'x1' | 'x2', plot.scales, value)
+                            ? projectX(origChannel as 'x' | 'x1' | 'x2', plot.scales, value)
                             : scale === 'y'
-                              ? projectY(channel as 'y' | 'y1' | 'y1', plot.scales, value)
+                              ? projectY(origChannel as 'y' | 'y1' | 'y1', plot.scales, value)
                               : scale === 'color' && !isValid(value)
                                 ? plot.options.color.unknown
                                 : plot.scales[scale].fn(value)

package/dist/core/Plot.svelte

@@ -499,8 +499,7 @@
             width={fixedWidth || width}
             {height}
             fill="currentColor"
-            viewBox="0 0 {width} {height}"
-            font-family="system-ui, sans-serif">
+            viewBox="0 0 {width} {height}">
             {@render facetAxes?.()}
             <FacetGrid marks={explicitMarks}>
                 {#if children}

package/dist/helpers/colors.d.ts

@@ -6,7 +6,7 @@ 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 maybeBooleanRange(domain: boolean[], scheme?: string): any[] | undefined;
 export declare function isQuantitativeScheme(scheme: string): boolean;
 export declare function quantitativeScheme(scheme: string): typeof interpolateBrBG | undefined;
 export declare function isDivergingScheme(scheme: string): boolean;

package/dist/helpers/index.d.ts

@@ -1,14 +1,13 @@
-import type { ChannelName, Channels, DataRecord, RawValue } from '../types/index.js';
+import type { ChannelName, Channels, RawValue } from '../types/index.js';
 import type { Snippet } from 'svelte';
 /**
  * Returns first argument that is not null or undefined
  */
-export declare function coalesce(...args: (RawValue | undefined | null)[]): RawValue | null;
-export declare function testFilter<T>(datum: T, options: Channels<T>): true | T | null;
+export declare function coalesce(...args: (RawValue | undefined | null)[]): any;
+export declare function testFilter<T>(datum: T, options: Channels<T>): any;
 export declare function randomId(): string;
 export declare function isSnippet(value: unknown): value is Snippet;
 export declare function isValid(value: RawValue | undefined): value is number | Date | string;
-export declare function maybeData(data: DataRecord[]): DataRecord[];
 export declare function isObject<T>(option: object | T): option is object;
 export declare function maybeNumber(value: RawValue | null): number | null;
 export declare const constant: <T>(x: T) => () => T;

package/dist/helpers/index.js

@@ -13,8 +13,7 @@ export function coalesce(...args) {
     return null; // Return null if all arguments are null or undefined
 }
 export function testFilter(datum, options) {
-    return (options.filter == null ||
-        resolveProp(options.filter, isObject(datum) && datum.hasOwnProperty(RAW_VALUE) ? datum[RAW_VALUE] : datum));
+    return options.filter == null || resolveProp(options.filter, datum);
 }
 export function randomId() {
     return Math.ceil(1e9 + Math.random() * 1e9).toString(36);
@@ -28,10 +27,6 @@ export function isValid(value) {
         !Number.isNaN(value) &&
         (typeof value !== 'number' || Number.isFinite(value)));
 }
-export function maybeData(data) {
-    // if (data.type === 'FeatureCollection') return data.features;
-    return data;
-}
 export function isObject(option) {
     // doesn't work with Proxies
     return (typeof option === 'object' && !isDate(option) && !Array.isArray(option) && option !== null);

package/dist/helpers/resolve.js

@@ -1,4 +1,4 @@
-import { CHANNEL_SCALE } from '../constants.js';
+import { CHANNEL_SCALE, INDEX } from '../constants.js';
 import isDataRecord from './isDataRecord.js';
 import isRawValue from './isRawValue.js';
 import { isValid } from './index.js';
@@ -11,7 +11,7 @@ export function resolveProp(accessor, datum, _defaultValue = null) {
         // so we're passing the original value to accessor functions instead of our wrapped record
         return datum == null
             ? accessor()
-            : accessor(datum[RAW_VALUE] != null ? datum[RAW_VALUE] : datum);
+            : accessor(datum[RAW_VALUE] != null ? datum[RAW_VALUE] : datum, datum[INDEX]);
     }
     else if ((typeof accessor === 'string' || typeof accessor === 'symbol') &&
         datum &&
@@ -51,7 +51,7 @@ function resolve(datum, accessor, channel, scale) {
             // 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
             // so we're passing the original value to accessor functions instead of our wrapped record
-            return accessor(datum[RAW_VALUE] != null ? datum[RAW_VALUE] : datum);
+            return accessor(datum[RAW_VALUE] != null ? datum[RAW_VALUE] : datum, datum?.[INDEX]);
         // use accessor string
         if ((typeof accessor === 'string' || typeof accessor === 'symbol') &&
             datum[accessor] !== undefined)
@@ -69,7 +69,7 @@ function resolve(datum, accessor, channel, scale) {
     else {
         // return single value or accessor
         return typeof accessor === 'function'
-            ? accessor(datum)
+            ? accessor(datum, datum?.[INDEX])
             : accessor !== null && isRawValue(accessor)
                 ? accessor
                 : !Array.isArray(datum) && (scale === 'x' || scale === 'y')

package/dist/helpers/scales.d.ts

@@ -15,7 +15,7 @@ export declare function createScale<T extends ScaleOptions>(name: ScaleName, sca
     autoTitle?: undefined;
 } | {
     type: ScaleType;
-    domain: RawValue[] | [undefined, undefined];
+    domain: any;
     range: any;
     fn: any;
     skip: Map<ScaledChannelName, Set<symbol>>;

package/dist/helpers/scales.js

@@ -253,7 +253,7 @@ export function inferScaleType(name, dataValues, markTypes) {
     if (dataValues.every(isDateOrNull))
         return 'time';
     if (dataValues.every(isStringOrNull))
-        return markTypes.has('arrow') ? 'point' : 'band';
+        return 'point';
     return 'linear';
 }
 const scaledChannelNames = [

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): boolean;
 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 isDateOrNull(v: RawValue | null | undefined): boolean;
 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 isStringOrNull(v: RawValue | null | undefined): boolean;
 export declare function isSymbolOrNull(v: RawValue | null | undefined): boolean;
-export declare function isColorOrNull(v: RawValue | null | undefined): boolean;
+export declare function isColorOrNull(v: RawValue | null | undefined): any;
 export declare function isOpacityOrNull(v: RawValue): boolean;

package/dist/marks/Area.svelte

@@ -136,11 +136,11 @@
                                 class={['svelteplot-area', className, styleClass]}
                                 clip-path={options.clipPath}
                                 d={areaPath(areaData)}
-                                use:addEventHandlers={{
+                                {@attach addEventHandlers({
                                     getPlotState,
                                     options,
-                                    datum: datum.datum
-                                }}
+                                    datum: datum?.datum
+                                })}
                                 {style}
                                 >{#if title}<title>{title}</title>{/if}</path>
                         </Anchor>

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

@@ -1,3 +1,4 @@
+import { renameChannels } from '../transforms/rename.js';
 import type { ChannelAccessor, DataRow } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<Partial<{
@@ -71,7 +72,7 @@ declare class __sveltets_Render<Datum extends DataRow> {
         sort?: import("../types/index.js").ConstantAccessor<import("../types/data").RawValue> | {
             channel: "stroke" | "fill";
         };
-        stack?: Partial<import("../transforms/stack.js").StackOptions>;
+        stack?: Partial<renameChannels>;
         canvas?: boolean;
     }, "y1" | "y2"> & {
         x?: ChannelAccessor<Datum>;

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

@@ -1,3 +1,4 @@
+import { renameChannels } from '../transforms/rename.js';
 import type { ChannelAccessor, DataRow } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<Partial<{
@@ -71,7 +72,7 @@ declare class __sveltets_Render<Datum extends DataRow> {
         sort?: import("../types/index.js").ConstantAccessor<import("../types/data").RawValue> | {
             channel: "stroke" | "fill";
         };
-        stack?: Partial<import("../transforms/stack.js").StackOptions>;
+        stack?: Partial<renameChannels>;
         canvas?: boolean;
     }, "x1" | "x2"> & {
         x?: ChannelAccessor<Datum>;

package/dist/marks/Arrow.svelte

@@ -4,7 +4,9 @@
 <script lang="ts" generics="Datum extends DataRecord">
     interface ArrowMarkProps extends Omit<BaseMarkProps<Datum>, 'fill' | 'fillOpacity'> {
         data: Datum[];
-        sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
+        sort?:
+            | ConstantAccessor<RawValue>
+            | { channel: 'stroke' | 'fill' | 'x1' | 'y1' | 'x2' | 'y2' };
         x1: ChannelAccessor<Datum>;
         y1: ChannelAccessor<Datum>;
         x2: ChannelAccessor<Datum>;
@@ -46,12 +48,14 @@
         PlotDefaults
     } from '../types/index.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { coalesce, maybeData, maybeNumber } from '../helpers/index.js';
+    import { coalesce, maybeNumber } from '../helpers/index.js';
     import Mark from '../Mark.svelte';
     import { arrowPath, maybeSweep, type SweepOption } from '../helpers/arrowPath.js';
     import { replaceChannels } from '../transforms/rename.js';
     import { addEventHandlers } from './helpers/events.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
+    import { sort } from '../transforms/sort.js';
+    import { indexData } from '../transforms/recordize.js';
 
     let markProps: ArrowMarkProps = $props();
 
@@ -74,16 +78,13 @@
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
-    const sorted = $derived(
-        options.sort
-            ? maybeData(data).toSorted((a, b) =>
-                  resolveChannel('sort', a, options) > resolveChannel('sort', b, options) ? 1 : -1
-              )
-            : maybeData(data)
-    );
-
     const args: ArrowMarkProps = $derived(
-        replaceChannels({ data: sorted, ...options }, { y: ['y1', 'y2'], x: ['x1', 'x2'] })
+        sort(
+            replaceChannels(
+                { data: indexData(data), ...options },
+                { y: ['y1', 'y2'], x: ['x1', 'x2'] }
+            )
+        )
     );
 </script>
 
@@ -131,11 +132,11 @@
                     )}
                     <g
                         class={[className]}
-                        use:addEventHandlers={{
+                        {@attach addEventHandlers({
                             getPlotState,
-                            options: args,
-                            datum: d.datum
-                        }}>
+                            options,
+                            datum: d?.datum
+                        })}>
                         {#if options.onmouseenter || options.onclick}
                             <!-- add invisible path in bg for easier mouse access -->
                             <path

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

@@ -63,7 +63,7 @@ declare class __sveltets_Render<Datum extends DataRecord> {
     }>, "fill" | "fillOpacity"> & {
         data: Datum[];
         sort?: ConstantAccessor<RawValue> | {
-            channel: "stroke" | "fill";
+            channel: "stroke" | "fill" | "x1" | "y1" | "x2" | "y2";
         };
         x1: ChannelAccessor<Datum>;
         y1: ChannelAccessor<Datum>;

package/dist/marks/AxisX.svelte

@@ -39,7 +39,7 @@
             | 'auto'
             | Intl.DateTimeFormatOptions
             | Intl.NumberFormatOptions
-            | ((d: RawValue) => string);
+            | ((d: RawValue, i: number) => string);
         tickClass?: ConstantAccessor<string, Datum>;
         /** ticks is a shorthand for defining data, tickCount or interval */
         ticks?: number | string | Datum[];

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

@@ -59,7 +59,7 @@ declare class __sveltets_Render<Datum extends RawValue> {
         onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
         class: string | null;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }>, "fill" | "fillOpacity" | "href" | "target" | "paintOrder" | "title"> & {
+    }>, "fill" | "fillOpacity" | "href" | "target" | "title" | "paintOrder"> & {
         data?: Datum[] | undefined;
         automatic?: boolean;
         title?: string | false | null;
@@ -71,7 +71,7 @@ declare class __sveltets_Render<Datum extends RawValue> {
         tickFontSize?: ConstantAccessor<number, Datum>;
         titleFontSize?: number;
         tickPadding?: number;
-        tickFormat?: "auto" | Intl.NumberFormatOptions | Intl.DateTimeFormatOptions | ((d: RawValue) => string) | undefined;
+        tickFormat?: "auto" | Intl.NumberFormatOptions | Intl.DateTimeFormatOptions | ((d: RawValue, i: number) => string) | undefined;
         tickClass?: ConstantAccessor<string, Datum>;
         /** ticks is a shorthand for defining data, tickCount or interval */
         ticks?: string | number | Datum[] | undefined;

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

@@ -59,7 +59,7 @@ declare class __sveltets_Render<Datum extends RawValue> {
         onwheel?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
         class: string | null;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }>, "fill" | "fillOpacity" | "href" | "target" | "paintOrder" | "title"> & {
+    }>, "fill" | "fillOpacity" | "href" | "target" | "title" | "paintOrder"> & {
         data?: Datum[] | undefined;
         automatic?: boolean;
         title?: string | false | null;

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

@@ -14,7 +14,7 @@ declare class __sveltets_Render<Datum extends DataRow> {
         sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Datum>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
         strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
         strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;

package/dist/marks/BarY.svelte

@@ -42,7 +42,6 @@
     const plot = $derived(getPlotState());
 
     const DEFAULTS = {
-        fill: 'currentColor',
         ...getContext<PlotDefaults>('svelteplot/_defaults').bar,
         ...getContext<PlotDefaults>('svelteplot/_defaults').barY
     };

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

@@ -1,77 +1,6 @@
-import type { ChannelAccessor, DataRecord } from '../types/index.js';
+import type { DataRecord } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
-    props(): Partial<{
-        filter?: import("../types/index.js").ConstantAccessor<boolean, Datum>;
-        facet?: "auto" | "include" | "exclude";
-        fx: ChannelAccessor<Datum>;
-        fy: ChannelAccessor<Datum>;
-        dx: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        fill: ChannelAccessor<Datum>;
-        fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        sort: {
-            channel: string;
-            order?: "ascending" | "descending";
-        } | ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Datum>;
-        stroke: ChannelAccessor<Datum>;
-        strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
-        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
-        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
-        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
-        opacity: ChannelAccessor<Datum>;
-        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
-        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
-        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
-        clipPath: string;
-        imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
-        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
-        paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;
-        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 | null;
-        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }> & {
-        data: Datum[];
-        x?: ChannelAccessor<Datum>;
-        y?: ChannelAccessor<Datum>;
-        /**
-         * the window size (the window transform's k option), an integer; defaults to 20
-         */
-        n?: number;
-        /**
-         * the band radius, a number representing a multiple of standard deviations; defaults to 2
-         */
-        k?: number;
-    };
+    props(): any;
     events(): {};
     slots(): {};
     bindings(): "";

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

@@ -1,77 +1,6 @@
-import type { ChannelAccessor, DataRecord } from '../types/index.js';
+import type { DataRecord } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
-    props(): Partial<{
-        filter?: import("../types/index.js").ConstantAccessor<boolean, Datum>;
-        facet?: "auto" | "include" | "exclude";
-        fx: ChannelAccessor<Datum>;
-        fy: ChannelAccessor<Datum>;
-        dx: import("../types/index.js").ConstantAccessor<number, Datum>;
-        dy: import("../types/index.js").ConstantAccessor<number, Datum>;
-        fill: ChannelAccessor<Datum>;
-        fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        sort: {
-            channel: string;
-            order?: "ascending" | "descending";
-        } | ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Datum>;
-        stroke: ChannelAccessor<Datum>;
-        strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
-        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
-        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
-        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
-        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
-        opacity: ChannelAccessor<Datum>;
-        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
-        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
-        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
-        clipPath: string;
-        imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
-        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
-        paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;
-        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 | null;
-        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-    }> & {
-        data: Datum[];
-        x?: ChannelAccessor<Datum>;
-        y?: ChannelAccessor<Datum>;
-        /**
-         * the window size (the window transform's k option), an integer; defaults to 20
-         */
-        n?: number;
-        /**
-         * the band radius, a number representing a multiple of standard deviations; defaults to 2
-         */
-        k?: number;
-    };
+    props(): any;
     events(): {};
     slots(): {};
     bindings(): "";