svelteplot 0.3.11 → 0.4.1

package/dist/core/FacetGrid.svelte

@@ -59,6 +59,9 @@
     {#each fyValues as facetY, j (j)}
         <g
             class="facet"
+            data-facet-x={i}
+            data-facet-y={j}
+            data-facet={i * fyValues.length + j}
             fill="currentColor"
             style:display={emptyFacets.get(facetX)?.get(facetY) ? 'none' : 'block'}
             transform="translate({useFacetX ? facetXScale(facetX) : 0}, {useFacetY

package/dist/helpers/autoScales.js

@@ -180,7 +180,7 @@ export function autoScaleColor({ type, domain, scaleOptions, plotOptions, plotWi
         }
     }
     if (!fn) {
-        console.warn('color problem', type);
+        console.error('color problem', type);
         // problem
         fn = () => 'red';
         fn.range = () => ['red'];

package/dist/helpers/group.d.ts

@@ -1,6 +1,6 @@
-import type { Channels, DataRecord } from '../types/index.js';
+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(items: DataRecord[], channels: Channels, reduce: (items: DataRecord[]) => any): any;
+export declare function groupFacetsAndZ<T>(items: T[], channels: Channels<T>, reduce: (items: T[]) => any): any;

package/dist/helpers/index.d.ts

@@ -1,18 +1,15 @@
-import type { ChannelAccessor, ChannelName, DataRecord, RawValue } from '../types/index.js';
+import type { ChannelName, Channels, DataRecord, 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(datum: DataRecord, options: Record<ChannelName, ChannelAccessor>): string | number | boolean | symbol | Date | {
-    value: import("../types/index.js").ChannelValue<Record<string | symbol, RawValue>>;
-    scale: boolean | null;
-} | null;
+export declare function testFilter<T>(datum: T, options: Channels<T>): true | T | null;
 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(option: object | RawValue): option is object;
+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;
 export declare const POSITION_CHANNELS: Set<ChannelName>;

package/dist/helpers/index.js

@@ -14,7 +14,7 @@ export function coalesce(...args) {
 }
 export function testFilter(datum, options) {
     return (options.filter == null ||
-        resolveProp(options.filter, datum?.hasOwnProperty(RAW_VALUE) ? datum[RAW_VALUE] : datum));
+        resolveProp(options.filter, isObject(datum) && datum.hasOwnProperty(RAW_VALUE) ? datum[RAW_VALUE] : datum));
 }
 export function randomId() {
     return Math.ceil(1e9 + Math.random() * 1e9).toString(36);

package/dist/helpers/mergeDeep.js

@@ -1,4 +1,3 @@
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 function isObject(item) {
     return item && typeof item === 'object' && !Array.isArray(item);
 }

package/dist/helpers/reduce.js

@@ -72,7 +72,6 @@ export function reduceOutputs(newDatum, data, options, outputs, channels, newCha
                     if (typeof channels[k] === 'string') {
                         // the named reducer is applied to a column name, so we can use a combination
                         // of both as axis labels, e.g. MEAN(weight)
-                        // eslint-disable-next-line no-irregular-whitespace
                         newChannels[`__${k}_origField`] = `${reducerName} ( ${channels[k]} )`;
                     }
                     else {

package/dist/helpers/scales.js

@@ -177,7 +177,7 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
         }
         else {
             if (markTypes.size > 0) {
-                console.warn('Setting interval via axis options is only supported for ordinal scales');
+                console.error('Setting interval via axis options is only supported for ordinal scales');
             }
         }
     }

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

@@ -1,32 +1,32 @@
 import type { ChannelAccessor, DataRow } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<Partial<{
-        filter?: import("../types/index.js").ConstantAccessor<boolean, import("../types/data").DataRecord>;
+        filter?: import("../types/index.js").ConstantAccessor<boolean, Record<string | symbol, import("../types/data").RawValue>>;
         facet?: "auto" | "include" | "exclude";
-        fx: ChannelAccessor<import("../types/data").DataRecord>;
-        fy: ChannelAccessor<import("../types/data").DataRecord>;
-        dx: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        dy: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        fill: ChannelAccessor<import("../types/data").DataRecord>;
-        fillOpacity: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        fx: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        fy: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        dx: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        dy: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        fill: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, import("../types/data").DataRecord>;
-        stroke: ChannelAccessor<import("../types/data").DataRecord>;
-        strokeWidth: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        strokeOpacity: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, import("../types/data").DataRecord>;
-        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, import("../types/data").DataRecord>;
-        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        opacity: ChannelAccessor<import("../types/data").DataRecord>;
-        strokeDasharray: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
-        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, import("../types/data").DataRecord>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Record<string | symbol, import("../types/data").RawValue>>;
+        stroke: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        strokeWidth: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        opacity: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/data").RawValue>>;
         clipPath: string;
-        imageFilter: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
-        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, import("../types/data").DataRecord>;
-        paintOrder: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
+        imageFilter: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
+        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types/data").RawValue>>;
+        paintOrder: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
         onclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
         ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
         onmouseup?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
@@ -58,14 +58,14 @@ declare class __sveltets_Render<Datum extends DataRow> {
         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, import("../types/data").DataRecord>;
-    }> & import("../types/mark").LinkableMarkProps<import("../types/data").DataRecord> & {
-        data: import("../types/data").DataRecord[];
-        x1?: ChannelAccessor<import("../types/data").DataRecord>;
-        x2?: ChannelAccessor<import("../types/data").DataRecord>;
-        y1?: ChannelAccessor<import("../types/data").DataRecord>;
-        y2?: ChannelAccessor<import("../types/data").DataRecord>;
-        z?: ChannelAccessor<import("../types/data").DataRecord>;
+        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Record<string | symbol, import("../types/data").RawValue>>;
+    }> & import("../types/mark").LinkableMarkProps<Record<string | symbol, import("../types/data").RawValue>> & {
+        data: Record<string | symbol, import("../types/data").RawValue>[];
+        x1?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        x2?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        y1?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        y2?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        z?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
         curve?: import("../types/index.js").CurveName | import("d3-shape").CurveFactory;
         tension?: number;
         sort?: import("../types/index.js").ConstantAccessor<import("../types/data").RawValue> | {

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

@@ -1,32 +1,32 @@
 import type { ChannelAccessor, DataRow } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<Partial<{
-        filter?: import("../types/index.js").ConstantAccessor<boolean, import("../types/data").DataRecord>;
+        filter?: import("../types/index.js").ConstantAccessor<boolean, Record<string | symbol, import("../types/data").RawValue>>;
         facet?: "auto" | "include" | "exclude";
-        fx: ChannelAccessor<import("../types/data").DataRecord>;
-        fy: ChannelAccessor<import("../types/data").DataRecord>;
-        dx: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        dy: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        fill: ChannelAccessor<import("../types/data").DataRecord>;
-        fillOpacity: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        fx: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        fy: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        dx: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        dy: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        fill: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, import("../types/data").DataRecord>;
-        stroke: ChannelAccessor<import("../types/data").DataRecord>;
-        strokeWidth: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        strokeOpacity: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, import("../types/data").DataRecord>;
-        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, import("../types/data").DataRecord>;
-        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        opacity: ChannelAccessor<import("../types/data").DataRecord>;
-        strokeDasharray: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
-        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, import("../types/data").DataRecord>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Record<string | symbol, import("../types/data").RawValue>>;
+        stroke: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        strokeWidth: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        opacity: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/data").RawValue>>;
         clipPath: string;
-        imageFilter: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
-        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, import("../types/data").DataRecord>;
-        paintOrder: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
+        imageFilter: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
+        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types/data").RawValue>>;
+        paintOrder: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
         onclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
         ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
         onmouseup?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
@@ -58,14 +58,14 @@ declare class __sveltets_Render<Datum extends DataRow> {
         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, import("../types/data").DataRecord>;
-    }> & import("../types/mark").LinkableMarkProps<import("../types/data").DataRecord> & {
-        data: import("../types/data").DataRecord[];
-        x1?: ChannelAccessor<import("../types/data").DataRecord>;
-        x2?: ChannelAccessor<import("../types/data").DataRecord>;
-        y1?: ChannelAccessor<import("../types/data").DataRecord>;
-        y2?: ChannelAccessor<import("../types/data").DataRecord>;
-        z?: ChannelAccessor<import("../types/data").DataRecord>;
+        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Record<string | symbol, import("../types/data").RawValue>>;
+    }> & import("../types/mark").LinkableMarkProps<Record<string | symbol, import("../types/data").RawValue>> & {
+        data: Record<string | symbol, import("../types/data").RawValue>[];
+        x1?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        x2?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        y1?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        y2?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        z?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
         curve?: import("../types/index.js").CurveName | import("d3-shape").CurveFactory;
         tension?: number;
         sort?: import("../types/index.js").ConstantAccessor<import("../types/data").RawValue> | {

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

@@ -1,32 +1,32 @@
 import type { DataRow } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<Partial<{
-        filter?: import("../types/index.js").ConstantAccessor<boolean, import("../types/data").DataRecord>;
+        filter?: import("../types/index.js").ConstantAccessor<boolean, Record<string | symbol, import("../types/data").RawValue>>;
         facet?: "auto" | "include" | "exclude";
-        fx: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord>;
-        fy: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord>;
-        dx: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        dy: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        fill: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord>;
-        fillOpacity: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        fx: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        fy: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        dx: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        dy: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        fill: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, import("../types/data").DataRecord>;
-        stroke: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord>;
-        strokeWidth: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        strokeOpacity: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, import("../types/data").DataRecord>;
-        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, import("../types/data").DataRecord>;
-        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        opacity: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord>;
-        strokeDasharray: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
-        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, import("../types/data").DataRecord>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Record<string | symbol, import("../types/data").RawValue>>;
+        stroke: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        strokeWidth: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        opacity: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/data").RawValue>>;
         clipPath: string;
-        imageFilter: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
-        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, import("../types/data").DataRecord>;
-        paintOrder: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
+        imageFilter: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
+        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types/data").RawValue>>;
+        paintOrder: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
         onclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
         ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
         onmouseup?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
@@ -58,15 +58,15 @@ declare class __sveltets_Render<Datum extends DataRow> {
         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, import("../types/data").DataRecord>;
-    }> & import("../types/mark").LinkableMarkProps<import("../types/data").DataRecord> & {
-        data: import("../types/data").DataRecord[];
-        x: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord>;
-        y: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord>;
-        r?: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord>;
-        symbol?: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord> | import("svelte").Snippet<[number, string]>;
+        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Record<string | symbol, import("../types/data").RawValue>>;
+    }> & import("../types/mark").LinkableMarkProps<Record<string | symbol, import("../types/data").RawValue>> & {
+        data: Record<string | symbol, import("../types/data").RawValue>[];
+        x: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        y: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        r?: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        symbol?: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>> | import("svelte").Snippet<[number, string]>;
         canvas?: boolean;
-        dotClass?: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
+        dotClass?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
     }, "y" | "data"> & {
         data: Datum[];
     };

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

@@ -1,32 +1,32 @@
 import type { DataRow } from '../types/index.js';
 declare class __sveltets_Render<Datum extends DataRow> {
     props(): Omit<Partial<{
-        filter?: import("../types/index.js").ConstantAccessor<boolean, import("../types/data").DataRecord>;
+        filter?: import("../types/index.js").ConstantAccessor<boolean, Record<string | symbol, import("../types/data").RawValue>>;
         facet?: "auto" | "include" | "exclude";
-        fx: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord>;
-        fy: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord>;
-        dx: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        dy: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        fill: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord>;
-        fillOpacity: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
+        fx: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        fy: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        dx: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        dy: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        fill: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         sort: {
             channel: string;
             order?: "ascending" | "descending";
-        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, import("../types/data").DataRecord>;
-        stroke: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord>;
-        strokeWidth: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        strokeOpacity: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, import("../types/data").DataRecord>;
-        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, import("../types/data").DataRecord>;
-        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        opacity: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord>;
-        strokeDasharray: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
-        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, import("../types/data").DataRecord>;
-        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, import("../types/data").DataRecord>;
+        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Record<string | symbol, import("../types/data").RawValue>>;
+        stroke: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        strokeWidth: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        opacity: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
+        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
+        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/data").RawValue>>;
         clipPath: string;
-        imageFilter: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
-        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, import("../types/data").DataRecord>;
-        paintOrder: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
+        imageFilter: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
+        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types/data").RawValue>>;
+        paintOrder: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
         onclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
         ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
         onmouseup?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
@@ -58,15 +58,15 @@ declare class __sveltets_Render<Datum extends DataRow> {
         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, import("../types/data").DataRecord>;
-    }> & import("../types/mark").LinkableMarkProps<import("../types/data").DataRecord> & {
-        data: import("../types/data").DataRecord[];
-        x: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord>;
-        y: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord>;
-        r?: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord>;
-        symbol?: import("../types/channel").ChannelAccessor<import("../types/data").DataRecord> | import("svelte").Snippet<[number, string]>;
+        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Record<string | symbol, import("../types/data").RawValue>>;
+    }> & import("../types/mark").LinkableMarkProps<Record<string | symbol, import("../types/data").RawValue>> & {
+        data: Record<string | symbol, import("../types/data").RawValue>[];
+        x: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        y: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        r?: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
+        symbol?: import("../types/channel").ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>> | import("svelte").Snippet<[number, string]>;
         canvas?: boolean;
-        dotClass?: import("../types/index.js").ConstantAccessor<string, import("../types/data").DataRecord>;
+        dotClass?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
     }, "x" | "data"> & {
         data: Datum[];
     };

package/dist/marks/GridX.svelte

@@ -9,7 +9,7 @@
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
     import type { PlotContext, BaseMarkProps, RawValue, PlotDefaults } from '../types/index.js';
-    import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
+    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { testFilter } from '../helpers/index.js';
     import { RAW_VALUE } from '../transforms/recordize.js';
@@ -68,6 +68,8 @@
                         (plot.scales.x.type === 'band' ? plot.scales.x.fn.bandwidth() * 0.5 : 0)}
                     {@const y1_ = resolveChannel('y1', tick, options)}
                     {@const y2_ = resolveChannel('y2', tick, options)}
+                    {@const dx = +resolveProp(options?.dx, tick, 0)}
+                    {@const dy = +resolveProp(options?.dy, tick, 0)}
                     {@const y1 = options.y1 != null ? plot.scales.y.fn(y1_) : 0}
                     {@const y2 = options.y2 != null ? plot.scales.y.fn(y2_) : plot.facetHeight}
                     {@const [style, styleClass] = resolveStyles(
@@ -80,7 +82,7 @@
                     )}
                     <line
                         class={styleClass}
-                        transform="translate({x},{plot.options.marginTop})"
+                        transform="translate({x + dx},{plot.options.marginTop + dy})"
                         {style}
                         {y1}
                         {y2} />

package/dist/marks/GridY.svelte

@@ -9,7 +9,7 @@
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
     import type { PlotContext, BaseMarkProps, RawValue, PlotDefaults } from '../types/index.js';
-    import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
+    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { testFilter } from '../helpers/index.js';
     import { RAW_VALUE } from '../transforms/recordize.js';
@@ -70,6 +70,8 @@
                     {@const x2_ = resolveChannel('x2', tick, options)}
                     {@const x1 = options.x1 != null ? plot.scales.x.fn(x1_) : 0}
                     {@const x2 = options.x2 != null ? plot.scales.x.fn(x2_) : plot.facetWidth}
+                    {@const dx = +resolveProp(options?.dx, tick, 0)}
+                    {@const dy = +resolveProp(options?.dy, tick, 0)}
                     {@const [style, styleClass] = resolveStyles(
                         plot,
                         { datum: { [RAW_VALUE]: tick } },
@@ -81,7 +83,7 @@
                     <line
                         {style}
                         class={styleClass}
-                        transform="translate({plot.options.marginLeft},{y})"
+                        transform="translate({plot.options.marginLeft + dx},{y + dy})"
                         {x1}
                         {x2} />
                 {/if}

package/dist/marks/HTMLTooltip.svelte

@@ -8,6 +8,8 @@
         x?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
         r?: ChannelAccessor<Datum>;
+        fx?: ChannelAccessor<Datum>;
+        fy?: ChannelAccessor<Datum>;
         children: Snippet<[{ datum: Datum }]>;
     }
     import { getContext, type Snippet } from 'svelte';
@@ -19,18 +21,33 @@
     import { resolveChannel } from '../helpers/resolve.js';
     import { quadtree } from 'd3-quadtree';
     import { projectX, projectY } from '../helpers/scales.js';
+    import { groupFacetsAndZ } from '../helpers/group.js';
 
-    let { data, x, y, r, children }: HTMLTooltipMarkProps = $props();
+    let { data, x, y, r, fx, fy, children }: HTMLTooltipMarkProps = $props();
 
     let datum = $state(false);
     let tooltipX = $state();
     let tooltipY = $state();
 
+    let facetOffsetX = $state(0);
+    let facetOffsetY = $state(0);
+
     function onPointerMove(evt: MouseEvent) {
         const plotRect = plot.body.getBoundingClientRect();
-        let relativeX = evt.clientX - plotRect.left;
-        let relativeY = evt.clientY - plotRect.top;
-        const pt = tree.find(relativeX, relativeY, 25);
+        let facetEl = evt.target as SVGElement;
+        while (facetEl && !facetEl.classList.contains('facet')) {
+            facetEl = facetEl.parentElement;
+        }
+        const facetIndex = +(facetEl?.dataset?.facet ?? 0);
+        const facetRect = (facetEl?.firstChild ?? plot.body).getBoundingClientRect();
+
+        facetOffsetX = facetRect.left - plotRect.left - plot.options.marginLeft;
+        facetOffsetY = facetRect.top - plotRect.top - plot.options.marginTop;
+
+        const relativeX = evt.clientX - facetRect.left + (plot.options.marginLeft ?? 0);
+        const relativeY = evt.clientY - facetRect.top + (plot.options.marginTop ?? 0);
+
+        const pt = trees[facetIndex].find(relativeX, relativeY, 25);
         if (pt) {
             tooltipX = resolveChannel('x', pt, { x, y, r });
             tooltipY = resolveChannel('y', pt, { x, y, r });
@@ -54,18 +71,26 @@
         };
     });
 
-    let tree = $derived(
-        quadtree()
-            .x((d) => projectX('x', plot.scales, resolveChannel('x', d, { x, y, r })))
-            .y((d) => projectY('y', plot.scales, resolveChannel('y', d, { x, y, r })))
-            .addAll(data)
+    const groups = $derived.by(() => {
+        const groups: Datum[][] = [];
+        groupFacetsAndZ(data, { fx, fy }, (d) => groups.push(d));
+        return groups;
+    });
+
+    const trees = $derived(
+        groups.map((items) =>
+            quadtree()
+                .x((d) => projectX('x', plot.scales, resolveChannel('x', d, { x, y, r })))
+                .y((d) => projectY('y', plot.scales, resolveChannel('y', d, { x, y, r })))
+                .addAll(items)
+        )
     );
 </script>
 
 <div
     class={['tooltip', { hide: !datum }]}
-    style:left="{tooltipX ? projectX('x', plot.scales, tooltipX) : 0}px"
-    style:top="{tooltipY ? projectY('y', plot.scales, tooltipY) : 0}px">
+    style:left="{tooltipX ? facetOffsetX + projectX('x', plot.scales, tooltipX) : 0}px"
+    style:top="{tooltipY ? facetOffsetY + projectY('y', plot.scales, tooltipY) : 0}px">
     <div class="tooltip-body">
         {@render children({ datum })}
     </div>
@@ -77,9 +102,10 @@
         background: var(--svelteplot-tooltip-bg);
         border: 1px solid #ccc;
         border-color: var(--svelteplot-tooltip-border);
-        font-size: 13px;
+        font-size: 12px;
         padding: 1ex 1em;
         border-radius: 3px;
+        line-height: 1.2;
         box-shadow:
             rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
             rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;

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

@@ -6,6 +6,8 @@ declare class __sveltets_Render<Datum = DataRow> {
         x?: ChannelAccessor<Datum>;
         y?: ChannelAccessor<Datum>;
         r?: ChannelAccessor<Datum>;
+        fx?: ChannelAccessor<Datum>;
+        fy?: ChannelAccessor<Datum>;
         children: Snippet<[{
             datum: Datum;
         }]>;