svelteplot 0.4.2 → 0.4.3-pr-199.0

package/dist/marks/BoxX.svelte

@@ -12,12 +12,14 @@
     import type BoxY from './BoxY.svelte';
 
     let markProps: BoxXMarkProps = $props();
+
     const DEFAULTS = {
         tickMedian: true,
         tickMinMax: false,
         ...getContext<PlotDefaults>('svelteplot/_defaults').box,
         ...getContext<PlotDefaults>('svelteplot/_defaults').boxX
     };
+
     const {
         data = [{}],
         bar,
@@ -27,80 +29,122 @@
         dot,
         x,
         y,
+        fx,
+        fy,
+        fill,
+        stroke,
         class: className = ''
     }: BoxXMarkProps = $derived({
         ...DEFAULTS,
         ...markProps
     });
 
-    const { data: grouped } = $derived(
+    const { data: grouped, ...groupChannels } = $derived(
         groupY(
             {
                 data: data.filter((d) => resolveChannel('x', d, { x, y }) != null),
                 x,
                 y,
                 x1: x,
-                x2: x
+                x2: x,
+                fx,
+                fy
             },
             { x: 'median', x1: 'p25', x2: 'p75', fill: (rows) => rows }
         )
     );
 
+    const X = Symbol('x'),
+        Y = Symbol('y'),
+        FX = Symbol('fx'),
+        FY = Symbol('fy'),
+        P25 = Symbol('p25'),
+        P75 = Symbol('p75'),
+        MEDIAN = Symbol('median'),
+        MIN = Symbol('min'),
+        MAX = Symbol('max'),
+        OUTLIERS = Symbol('outliers');
+
+    const facets = $derived({
+        ...(fx != null && { fx: FX }),
+        ...(fy != null && { fy: FY })
+    });
+
     const boxData = $derived(
         grouped
             .map((row) => {
-                const iqr = row.__x2 - row.__x1;
+                const { x: median, x1: p25, x2: p75, fill: fill, y: ry } = groupChannels;
+
+                const iqr = row[p75] - row[p25];
                 const whisker = iqr * 1.5;
-                const lower = row.__x1 - whisker;
-                const upper = row.__x2 + whisker;
-                const data = row.__fill.map((d) => ({
+                const lower = row[p25] - whisker;
+                const upper = row[p75] + whisker;
+                const data = row[fill].map((d) => ({
                     ...d,
-                    __x: resolveChannel('x', d, { x, y })
+                    [X]: resolveChannel('x', d, { x, y })
                 }));
-                const outliers = data.filter((d) => d.__x < lower || d.__x > upper);
+                const outliers = data.filter((d) => d[X] < lower || d[X] > upper);
                 const inside = data
-                    .filter((d) => d.__x >= lower && d.__x <= upper)
-                    .sort((a, b) => a.__x - b.__x);
+                    .filter((d) => d[X] >= lower && d[X] <= upper)
+                    .sort((a, b) => a[X] - b[X]);
+
                 // if (inside.length === 0) console.log('No data inside boxplot', data, row, lower, upper);
                 return {
-                    [y]: row[y],
-                    __y: row[y],
-                    p25: row.__x1,
-                    p75: row.__x2,
-                    median: row.__x,
-                    min: inside[0].__x,
-                    max: inside.at(-1).__x,
-                    outliers
+                    ...data[0],
+                    [Y]: row[ry],
+                    [P25]: row[p25],
+                    [MEDIAN]: row[median],
+                    [P75]: row[p75],
+                    [MIN]: inside[0][X],
+                    [MAX]: inside.at(-1)[X],
+                    [FX]: resolveChannel('fx', data[0], { fx }, null),
+                    [FY]: resolveChannel('fy', data[0], { fy }, null),
+                    [OUTLIERS]: outliers
                 };
             })
-            .sort((a, b) => b.median - a.median)
+            .sort((a, b) => b[MEDIAN] - a[MEDIAN])
     );
 </script>
 
 <GroupMultiple class="box-x {className || ''}" length={className ? 2 : grouped.length}>
-    <RuleY data={boxData} y="__y" x1="min" x2="max" {...rule || {}} />
-    <BarX data={boxData} y="__y" x1="p25" x2="p75" fill="#ddd" {...bar || {}} />
+    <RuleY data={boxData} y={Y} x1={MIN} x2={P25} {stroke} {...rule || {}} {...facets} />
+    <RuleY data={boxData} y={Y} x1={P75} x2={MAX} {stroke} {...rule || {}} {...facets} />
+    <BarX data={boxData} y={Y} x1={P25} x2={P75} {fill} {stroke} {...facets} {...bar || {}} />
     {#if tickMedian}
         <TickX
             data={boxData}
-            y="__y"
-            x="median"
+            y={Y}
+            x={MEDIAN}
+            {...facets}
+            {stroke}
             strokeWidth={2}
             {...typeof tickMedian === 'object' ? tickMedian : {}} />
     {/if}
     {#if tickMinMax}
         <TickX
             data={boxData}
-            x="min"
-            y="__y"
+            x={MIN}
+            y={Y}
+            {stroke}
+            {...facets}
             inset="20%"
             {...typeof tickMinMax === 'object' ? tickMinMax : {}} />
         <TickX
             data={boxData}
-            x="max"
-            y="__y"
+            x={MAX}
+            y={Y}
+            {stroke}
+            {...facets}
             inset="20%"
             {...typeof tickMinMax === 'object' ? tickMinMax : {}} />
     {/if}
-    <Dot data={boxData.map((d) => d.outliers).flat()} {x} {y} {...dot || {}} />
+    <Dot
+        data={boxData.map((d) => d[OUTLIERS]).flat()}
+        {x}
+        {y}
+        {fx}
+        {fy}
+        {fill}
+        {stroke}
+        {...dot || {}} />
 </GroupMultiple>

package/dist/marks/BoxY.svelte

@@ -2,7 +2,8 @@
     Creates a vertical box plot for visualizing data distribution with quartiles and outliers
 -->
 <script lang="ts" generics="Datum extends DataRecord">
-    interface BoxYMarkProps extends Pick<BaseMarkProps<Datum>, 'class'> {
+    interface BoxYMarkProps
+        extends Pick<BaseMarkProps<Datum>, 'class' | 'fill' | 'stroke' | 'fx' | 'fy'> {
         data: Datum[];
         x: ChannelAccessor;
         y: ChannelAccessor;
@@ -28,95 +29,144 @@
         dot: Record<string, ChannelAccessor<Datum>>;
     }
     import GroupMultiple from './helpers/GroupMultiple.svelte';
-    import type { BaseMarkProps, ChannelAccessor, DataRecord } from '../types/index.js';
     import { groupX, BarY, TickY, RuleX, Dot } from '../index.js';
     import { resolveChannel } from '../helpers/resolve.js';
-    import { getContext } from 'svelte';
+    import { getContext, type ComponentProps } from 'svelte';
     import type { PlotDefaults } from '../types/index.js';
 
     let markProps: BoxYMarkProps = $props();
+
     const DEFAULTS = {
         tickMedian: true,
         tickMinMax: false,
         ...getContext<PlotDefaults>('svelteplot/_defaults').box,
         ...getContext<PlotDefaults>('svelteplot/_defaults').boxY
     };
+
     const {
-        data = [{} as Datum],
-        class: className = '',
+        data = [{}],
         bar,
         rule,
         tickMedian,
         tickMinMax,
         dot,
         x,
-        y
+        y,
+        fx,
+        fy,
+        fill,
+        stroke,
+        class: className = ''
     }: BoxYMarkProps = $derived({
         ...DEFAULTS,
         ...markProps
     });
 
-    let { data: grouped } = $derived(
+    const { data: grouped, ...groupChannels } = $derived(
         groupX(
             {
                 data: data.filter((d) => resolveChannel('x', d, { x, y }) != null),
                 x,
                 y,
                 y1: y,
-                y2: y
+                y2: y,
+                fx,
+                fy
             },
             { y: 'median', y1: 'p25', y2: 'p75', fill: (rows) => rows }
         )
     );
 
-    let boxData = $derived(
-        grouped.map((row) => {
-            const iqr = row.__y2 - row.__y1;
-            const whisker = iqr * 1.5;
-            const lower = row.__y1 - whisker;
-            const upper = row.__y2 + whisker;
-            const data = row.__fill.map((d) => ({ ...d, __y: resolveChannel('y', d, { x, y }) }));
-            const outliers = data.filter((d) => d.__y < lower || d.__y > upper);
-            const inside = data
-                .filter((d) => d.__y >= lower && d.__y <= upper)
-                .sort((a, b) => a.__y - b.__y);
-            return {
-                __x: row[x],
-                p25: row.__y1,
-                p75: row.__y2,
-                median: row.__y,
-                min: inside[0].__y,
-                max: inside.at(-1).__y,
-                outliers
-            };
-        })
+    const X = Symbol('x'),
+        Y = Symbol('y'),
+        FX = Symbol('fx'),
+        FY = Symbol('fy'),
+        P25 = Symbol('p25'),
+        P75 = Symbol('p75'),
+        MEDIAN = Symbol('median'),
+        MIN = Symbol('min'),
+        MAX = Symbol('max'),
+        OUTLIERS = Symbol('outliers');
+
+    const facets = $derived({
+        ...(fx != null && { fx: FX }),
+        ...(fy != null && { fy: FY })
+    });
+
+    const boxData = $derived(
+        grouped
+            .map((row) => {
+                const { y: median, y1: p25, y2: p75, fill: fill, x: rx } = groupChannels;
+
+                const iqr = row[p75] - row[p25];
+                const whisker = iqr * 1.5;
+                const lower = row[p25] - whisker;
+                const upper = row[p75] + whisker;
+                const data = row[fill].map((d) => ({
+                    ...d,
+                    [Y]: resolveChannel('y', d, { x, y })
+                }));
+                const outliers = data.filter((d) => d[Y] < lower || d[Y] > upper);
+                const inside = data
+                    .filter((d) => d[Y] >= lower && d[Y] <= upper)
+                    .sort((a, b) => a[Y] - b[Y]);
+
+                return {
+                    ...data[0],
+                    [X]: row[rx],
+                    [P25]: row[p25],
+                    [MEDIAN]: row[median],
+                    [P75]: row[p75],
+                    [MIN]: inside[0][Y],
+                    [MAX]: inside.at(-1)[Y],
+                    [FX]: resolveChannel('fx', data[0], { fx }, null),
+                    [FY]: resolveChannel('fy', data[0], { fy }, null),
+                    [OUTLIERS]: outliers
+                };
+            })
+            .sort((a, b) => b[MEDIAN] - a[MEDIAN])
     );
 </script>
 
 <GroupMultiple class="box-y {className || ''}" length={className ? 2 : grouped.length}>
-    <RuleX data={boxData} x="__x" y1="min" y2="max" {...rule || {}} />
-    <BarY data={boxData} x="__x" y1="p25" y2="p75" fill="#ddd" {...bar || {}} />
+    <RuleX data={boxData} x={X} y1={MIN} y2={P25} {stroke} {...rule || {}} {...facets} />
+    <RuleX data={boxData} x={X} y1={P75} y2={MAX} {stroke} {...rule || {}} {...facets} />
+    <BarY data={boxData} x={X} y1={P25} y2={P75} {fill} {stroke} {...facets} {...bar || {}} />
     {#if tickMedian}
         <TickY
             data={boxData}
-            x="__x"
-            y="median"
+            x={X}
+            y={MEDIAN}
+            {...facets}
+            {stroke}
             strokeWidth={2}
             {...typeof tickMedian === 'object' ? tickMedian : {}} />
     {/if}
     {#if tickMinMax}
         <TickY
             data={boxData}
-            x="__x"
-            y="min"
+            x={X}
+            y={MIN}
+            {stroke}
+            {...facets}
             inset="20%"
             {...typeof tickMinMax === 'object' ? tickMinMax : {}} />
         <TickY
             data={boxData}
-            x="__x"
-            y="max"
+            x={X}
+            y={MAX}
+            {stroke}
+            {...facets}
             inset="20%"
             {...typeof tickMinMax === 'object' ? tickMinMax : {}} />
     {/if}
-    <Dot data={boxData.map((d) => d.outliers).flat()} {x} {y} {...dot || {}} />
+    <Dot
+        data={boxData.map((d) => d[OUTLIERS]).flat()}
+        {x}
+        {y}
+        {fx}
+        {fy}
+        {fill}
+        {stroke}
+        {...dot || {}} />
 </GroupMultiple>

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

@@ -1,88 +1,28 @@
-import type { ChannelAccessor, DataRecord } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRecord> {
-    props(): Pick<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>;
-    }>, "class"> & {
+    props(): Pick<BaseMarkProps<Datum_1>, "fill" | "stroke" | "fx" | "fy" | "class"> & {
         data: Datum[];
         x: ChannelAccessor;
         y: ChannelAccessor;
         /**
          * Options for the rule marks that represent the min/max range
          */
-        rule: Record<string, ChannelAccessor<Datum>>;
+        rule: Record<string, ChannelAccessor<Datum_1>>;
         /**
          * Options for the bar marks that represent the IQR range
          */
-        bar: Record<string, ChannelAccessor<Datum>>;
+        bar: Record<string, ChannelAccessor<Datum_1>>;
         /**
          * Options for the tick marks that represent the median
          */
-        tickMedian: boolean | Record<string, ChannelAccessor<Datum>>;
+        tickMedian: Record<string, ChannelAccessor<Datum_1>> | boolean;
         /**
          * Options for the tick marks that represent the min/max range
          */
-        tickMinMax: boolean | Record<string, ChannelAccessor<Datum>>;
+        tickMinMax: Record<string, ChannelAccessor<Datum_1>> | boolean;
         /**
          * Options for the dot marks that represent the outliers
          */
-        dot: Record<string, ChannelAccessor<Datum>>;
+        dot: Record<string, ChannelAccessor<Datum_1>>;
     };
     events(): {};
     slots(): {};

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

@@ -1,84 +1,6 @@
-import type { DataRecord, ChannelAccessor, ScaledDataRecord, UsedScales } from '../types/index.js';
-import type { Snippet } from 'svelte';
+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[] | undefined;
-        x?: ChannelAccessor<Datum>;
-        x1?: ChannelAccessor<Datum>;
-        x2?: ChannelAccessor<Datum>;
-        y?: ChannelAccessor<Datum>;
-        y1?: ChannelAccessor<Datum>;
-        y2?: ChannelAccessor<Datum>;
-        r?: ChannelAccessor<Datum>;
-        mark?: Snippet<[{
-            record: ScaledDataRecord<Datum>;
-            index: number;
-            usedScales: UsedScales;
-        }]> | undefined;
-        marks?: Snippet<[{
-            records: ScaledDataRecord<Datum>[];
-            usedScales: UsedScales;
-        }]> | undefined;
-    };
+    props(): any;
     events(): {};
     slots(): {};
     bindings(): "";

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

@@ -1,82 +1,23 @@
 import type { ChannelAccessor, CurveName, DataRecord } from '../types/index.js';
 import type { CurveFactory } from 'd3-shape';
 declare class __sveltets_Render<Datum extends DataRecord> {
-    props(): Omit<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>;
-    }>, "fill" | "fillOpacity"> & {
+    props(): Omit<BaseMarkProps<Datum_1>, "fill" | "fillOpacity"> & {
         data: Datum[];
-        x1: ChannelAccessor<Datum>;
+        x1: ChannelAccessor<Datum_1>;
         /**
          * the horizontal position of the metric; bound to the x scale
          */
-        x2: ChannelAccessor<Datum>;
-        x: ChannelAccessor<Datum>;
+        x2: ChannelAccessor<Datum_1>;
+        x: ChannelAccessor<Datum_1>;
         /**
          * the vertical position of the comparison; bound to the y scale
          */
-        y1: ChannelAccessor<Datum>;
+        y1: ChannelAccessor<Datum_1>;
         /**
          * the vertical position of the metric; bound to the y scale
          */
-        y2: ChannelAccessor<Datum>;
-        y: ChannelAccessor<Datum>;
+        y2: ChannelAccessor<Datum_1>;
+        y: ChannelAccessor<Datum_1>;
         fillOpacity?: number;
         /**
          * the stroke color of the "positive" area; defaults to 'blue'