svelteplot 0.11.0 → 0.11.1-pr-520.0

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

@@ -12,7 +12,7 @@ declare function $$render<Datum = RawValue>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

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

@@ -12,7 +12,7 @@ declare function $$render<Datum = RawValue>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/HTMLTooltip.svelte

@@ -27,6 +27,8 @@
     import { quadtree } from 'd3-quadtree';
     import { projectX, projectY } from '../helpers/scales.js';
     import { groupFacetsAndZ } from '../helpers/group.js';
+    import { detectFacet, facetKey } from '../helpers/facets.js';
+    import { SvelteMap } from 'svelte/reactivity';
 
     const plot = usePlot();
 
@@ -40,21 +42,19 @@
     let facetOffsetY = $state(0);
 
     function onPointerMove(evt: MouseEvent) {
-        const plotRect = plot.body.getBoundingClientRect();
-        let facetEl: Element | null = evt.target as Element;
-        while (facetEl && !facetEl.classList.contains('facet')) {
-            facetEl = facetEl.parentElement as Element | null;
-        }
-        const facetIndex = +((facetEl as HTMLElement)?.dataset?.facet ?? 0);
-        const facetRect = ((facetEl?.firstChild as Element) ?? plot.body).getBoundingClientRect();
+        const { fxValue, fyValue, offsetX, offsetY } = detectFacet(evt, plot);
+        const bodyRect = plot.body.getBoundingClientRect();
+
+        facetOffsetX = offsetX;
+        facetOffsetY = offsetY;
 
-        facetOffsetX = facetRect.left - plotRect.left - plot.options.marginLeft;
-        facetOffsetY = facetRect.top - plotRect.top - plot.options.marginTop;
+        const relativeX = evt.clientX - bodyRect.left - offsetX;
+        const relativeY = evt.clientY - bodyRect.top - offsetY;
 
-        const relativeX = evt.clientX - facetRect.left + (plot.options.marginLeft ?? 0);
-        const relativeY = evt.clientY - facetRect.top + (plot.options.marginTop ?? 0);
+        const key = facetKey(fxValue, fyValue);
+        const facetTrees = treeMap.get(key) ?? [];
+        const pt = facetTrees.length > 0 ? facetTrees[0].find(relativeX, relativeY, 25) : null;
 
-        const pt = trees[facetIndex].find(relativeX, relativeY, 25);
         if (pt) {
             tooltipX = resolveChannel('x', pt, { x, y, r });
             tooltipY = resolveChannel('y', pt, { x, y, r });
@@ -73,25 +73,28 @@
         plot.body?.addEventListener('pointermove', onPointerMove);
 
         return () => {
-            plot.body?.removeEventListener('mouseleave', onPointerLeave);
+            plot.body?.removeEventListener('pointerleave', onPointerLeave);
             plot.body?.removeEventListener('pointermove', onPointerMove);
         };
     });
 
-    const groups = $derived.by(() => {
-        const groups: Datum[][] = [];
-        groupFacetsAndZ(data, { fx, fy }, (d) => groups.push(d));
-        return groups;
-    });
-
-    const trees = $derived(
-        groups.map((items) =>
-            quadtree<Datum>()
+    const treeMap = $derived.by(() => {
+        const map = new SvelteMap<string, ReturnType<typeof quadtree<Datum>>[]>();
+        groupFacetsAndZ(data, { fx, fy }, (items) => {
+            if (!items.length) return;
+            const fxVal = fx ? resolveChannel('fx', items[0], { fx }) : true;
+            const fyVal = fy ? resolveChannel('fy', items[0], { fy }) : true;
+            const key = facetKey(fxVal, fyVal);
+            const tree = quadtree<Datum>()
                 .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)
-        )
-    );
+                .addAll(items);
+            const existing = map.get(key) ?? [];
+            existing.push(tree);
+            map.set(key, existing);
+        });
+        return map;
+    });
 </script>
 
 <div

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

@@ -12,7 +12,7 @@ declare function $$render<Datum extends DataRecord>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/Line.svelte

@@ -94,28 +94,65 @@
     const args = $derived(sort(recordizeXY({ data, ...options })));
 
     /**
-     * Groups the data by the specified key
+     * Groups the data by the specified key (and optionally a secondary key).
+     * When a secondary key is provided, each primary group is further split by
+     * the secondary key, with each sub-segment extended to include the first point
+     * of the next sub-segment so consecutive segments share an endpoint (enabling
+     * multi-colored lines without gaps).
      */
-    function groupIndex(data: ScaledDataRecord[], groupByKey: ChannelAccessor<Datum> | null) {
-        if (!groupByKey) return [data];
-        let group: ScaledDataRecord[] = [];
-        const groups: ScaledDataRecord[][] = [group];
-        let lastGroupValue;
+    function groupIndex(
+        data: ScaledDataRecord[],
+        groupByKey: ChannelAccessor<Datum> | null,
+        secondaryKey: ChannelAccessor<Datum> | null = null
+    ) {
+        if (!groupByKey && !secondaryKey) return [data];
+
+        // Group by the primary key
+        const primaryGroups: ScaledDataRecord[][] = [];
+        let primaryGroup: ScaledDataRecord[] = [];
+        let lastPrimaryValue: unknown;
         for (const d of data) {
-            const groupValue = resolveProp(groupByKey, d.datum);
-            if (groupValue === lastGroupValue) {
-                group.push(d);
+            const primaryValue = resolveProp(groupByKey!, d.datum);
+            if (primaryValue === lastPrimaryValue) {
+                primaryGroup.push(d);
             } else {
-                // new group
-                group = [d];
-                groups.push(group);
-                lastGroupValue = groupValue;
+                primaryGroup = [d];
+                primaryGroups.push(primaryGroup);
+                lastPrimaryValue = primaryValue;
+            }
+        }
+
+        if (!secondaryKey) return primaryGroups;
+
+        // Further split each primary group by the secondary key. Each sub-segment is
+        // extended to include the first point of the next sub-segment so that
+        // consecutive segments share an endpoint (no gaps in multi-colored lines).
+        const result: ScaledDataRecord[][] = [];
+        for (const pGroup of primaryGroups) {
+            if (pGroup.length === 0) continue;
+            let subGroup: ScaledDataRecord[] = [pGroup[0]];
+            let lastSecondaryValue = resolveProp(secondaryKey, pGroup[0].datum);
+            for (let i = 1; i < pGroup.length; i++) {
+                const d = pGroup[i];
+                const secondaryValue = resolveProp(secondaryKey, d.datum);
+                if (secondaryValue === lastSecondaryValue) {
+                    subGroup.push(d);
+                } else {
+                    subGroup.push(d); // extend to connect to next sub-segment
+                    result.push(subGroup);
+                    subGroup = [d]; // new sub-segment begins here
+                    lastSecondaryValue = secondaryValue;
+                }
             }
+            result.push(subGroup);
         }
-        return groups;
+        return result;
     }
 
     const groupByKey = $derived(args.z || args.stroke) as ChannelAccessor<Datum> | null;
+    const secondaryKey = $derived(
+        args.z && args.stroke ? args.stroke : null
+    ) as ChannelAccessor<Datum> | null;
 
     const plot = usePlot();
 
@@ -155,7 +192,7 @@
     {...args}>
     {#snippet children({ mark, usedScales, scaledData })}
         {#if scaledData.length > 0}
-            {@const groupedLineData = groupIndex(scaledData, groupByKey)}
+            {@const groupedLineData = groupIndex(scaledData, groupByKey, secondaryKey)}
             {#if canvas}
                 <LineCanvas {groupedLineData} {mark} {usedScales} {linePath} {groupByKey} />
             {:else}

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

@@ -14,7 +14,7 @@ declare function $$render<Datum extends DataRecord>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

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

@@ -12,7 +12,7 @@ declare function $$render<Datum extends DataRow>(): {
         fill: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Record<string | symbol, import("../types/index.js").RawValue>>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Record<string | symbol, import("../types/index.js").RawValue>>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Record<string | symbol, import("../types/index.js").RawValue>>;

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

@@ -12,7 +12,7 @@ declare function $$render<Datum extends DataRow>(): {
         fill: import("../types/index.js").ChannelAccessor<Record<string | symbol, import("../types/index.js").RawValue>>;
         fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Record<string | symbol, import("../types/index.js").RawValue>>;
-        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Record<string | symbol, import("../types/index.js").RawValue>>;
+        fontSize: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontSize<number>, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Record<string | symbol, import("../types/index.js").RawValue>>;
         fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Record<string | symbol, import("../types/index.js").RawValue>>;

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

@@ -13,7 +13,7 @@ declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
         fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
-        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
         fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
         fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
         fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;

package/dist/marks/Pointer.svelte

@@ -40,6 +40,8 @@
     import { groupFacetsAndZ } from '../helpers/group.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { usePlot } from '../hooks/usePlot.svelte.js';
+    import { detectFacet, facetKey } from '../helpers/facets.js';
+    import { SvelteMap } from 'svelte/reactivity';
 
     const plot = usePlot();
 
@@ -71,17 +73,14 @@
     let selectedData = $state<any[]>([]);
 
     function onPointerMove(evt: MouseEvent) {
-        let facetEl: Element | null = evt.target as Element;
-        while (facetEl && !facetEl.classList.contains('facet')) {
-            facetEl = facetEl.parentElement as Element | null;
-        }
-        const facetRect = ((facetEl?.firstChild as Element) ?? plot.body).getBoundingClientRect();
+        const { fxValue, fyValue, offsetX, offsetY } = detectFacet(evt, plot);
+        const bodyRect = plot.body.getBoundingClientRect();
 
-        const relativeX = evt.clientX - facetRect.left + (plot.options.marginLeft ?? 0);
-        const relativeY = evt.clientY - facetRect.top + (plot.options.marginTop ?? 0);
+        const relativeX = evt.clientX - bodyRect.left - offsetX;
+        const relativeY = evt.clientY - bodyRect.top - offsetY;
 
-        // console.log({ relativeX, relativeY }, evt);
-        updateSelection(relativeX, relativeY);
+        const key = facetKey(fxValue, fyValue);
+        updateSelection(relativeX, relativeY, key);
     }
 
     function onPointerLeave() {
@@ -89,13 +88,14 @@
         if (onupdate) onupdate(selectedData);
     }
 
-    function updateSelection(ex: number, ey: number) {
-        // find data row with minimum distance to
-        const points = trees.map((tree) =>
+    function updateSelection(ex: number, ey: number, key: string) {
+        const facetTrees = treeMap.get(key) ?? [];
+        // find data row with minimum distance to cursor
+        const points = facetTrees.map((tree) =>
             tree.find(x != null ? ex : 0, y != null ? ey : 0, maxDistance)
         );
         // also include other points that share the same x or y value
-        const otherPoints = trees.flatMap((tree, i) => {
+        const otherPoints = facetTrees.flatMap((tree, i) => {
             return tree
                 .data()
                 .filter((d) => d !== points[i])
@@ -121,21 +121,19 @@
         };
     });
 
-    const groups = $derived.by(() => {
-        const groups: any[][] = [];
-        groupFacetsAndZ(indexData(data as object[]) as any, { x, y, z, fx, fy }, (d) =>
-            groups.push(d)
-        );
-        return groups;
-    });
-
-    const trees = $derived(
-        groups.map((items) =>
-            quadtree<any>()
+    const treeMap = $derived.by(() => {
+        const map = new SvelteMap<string, ReturnType<typeof quadtree<any>>[]>();
+        groupFacetsAndZ(indexData(data as object[]) as any, { x, y, z, fx, fy }, (items) => {
+            if (!items.length) return;
+            // Recover fx/fy values from the first datum in the group
+            const fxVal = fx ? resolveChannel('fx', items[0], { fx }) : true;
+            const fyVal = fy ? resolveChannel('fy', items[0], { fy }) : true;
+            const key = facetKey(fxVal, fyVal);
+            const tree = quadtree<any>()
                 .x(x != null ? (d: any) => d[POINTER_X] : () => 0)
                 .y(y != null ? (d: any) => d[POINTER_Y] : () => 0)
                 .addAll(
-                    items?.map((d: any) => {
+                    items.map((d: any) => {
                         const [px, py] = projectXY(
                             plot.scales,
                             resolveChannel('x', d, { x }),
@@ -148,10 +146,14 @@
                             [POINTER_X]: px,
                             [POINTER_Y]: py
                         };
-                    }) ?? []
-                )
-        )
-    );
+                    })
+                );
+            const existing = map.get(key) ?? [];
+            existing.push(tree);
+            map.set(key, existing);
+        });
+        return map;
+    });
 </script>
 
 {#if children}