svelteplot 0.3.11-pr-153.0 → 0.3.11-pr-153.2

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/group.d.ts

@@ -3,4 +3,4 @@ import type { Channels, DataRecord } 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, reduce: (items: DataRecord[]) => any): any;

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;
         }]>;

package/dist/transforms/stack.d.ts

@@ -1,4 +1,4 @@
-import type { TransformArg } from '../types/index.js';
+import type { ChannelAccessor, TransformArg } from '../types/index.js';
 export type StackOrder = 'none' | 'appearance' | 'inside-out' | 'sum';
 export type StackOffset = 'none' | 'wiggle' | 'center' | 'normalize' | 'diverging';
 export type StackOptions = {
@@ -8,18 +8,28 @@ export type StackOptions = {
 };
 export declare function stackY<T>({ data, ...channels }: T, opts?: Partial<StackOptions>): T;
 export declare function stackX({ data, ...channels }: TransformArg, opts?: Partial<StackOptions>): TransformArg;
-export declare function stackMarimekko({ data, x, y, value, ...rest }: {
-    [x: string]: any;
-    data: any;
-    x: any;
-    y: any;
-    value: any;
-}, { x: xOpt, y: yOpt }?: {}): {
-    data: any[];
+export declare function stackMarimekko<T>({ data, x, y, value, ...rest }: {
+    data: T[];
+    x: ChannelAccessor<T>;
+    y: ChannelAccessor<T>;
+    value: ChannelAccessor<T>;
+    fx?: ChannelAccessor<T>;
+    fy?: ChannelAccessor<T>;
+}, { x: xOpt, y: yOpt }?: {
+    x?: {
+        percent?: boolean;
+    };
+    y?: {
+        percent?: boolean;
+    };
+}): {
+    data: T[];
     x: symbol;
     x1: symbol;
     x2: symbol;
     y: symbol;
     y1: symbol;
     y2: symbol;
+    fx?: ChannelAccessor<T>;
+    fy?: ChannelAccessor<T>;
 };

package/dist/transforms/stack.js

@@ -1,7 +1,8 @@
 import isDataRecord from '../helpers/isDataRecord.js';
-import { resolveChannel } from '../helpers/resolve.js';
+import { resolveChannel, resolveProp } from '../helpers/resolve.js';
 import { stack, stackOffsetExpand, stackOffsetSilhouette, stackOffsetWiggle, stackOrderAppearance, stackOrderAscending, stackOrderInsideOut, stackOrderNone, stackOffsetDiverging } from 'd3-shape';
 import { index, union, sum, groups as d3Groups } from 'd3-array';
+import { groupFacetsAndZ } from '../helpers/group';
 const GROUP = Symbol('group');
 const FACET = Symbol('group');
 const DEFAULT_STACK_OPTIONS = {
@@ -113,30 +114,34 @@ function applyDefaults(opts) {
 const X = Symbol('x'), X1 = Symbol('x1'), X2 = Symbol('x2');
 const Y = Symbol('y'), Y1 = Symbol('y1'), Y2 = Symbol('y2');
 export function stackMarimekko({ data, x, y, value, ...rest }, { x: xOpt, y: yOpt } = {}) {
-    const total = sum(data, (d) => d[value]);
-    let xPos = 0;
-    const grouped = d3Groups(data, (d) => d[x]).flatMap(([k, items]) => {
-        const groupValue = sum(items, (d) => d[value]);
-        const x1 = xPos, x2 = xPos + groupValue;
-        xPos = x2;
-        let yPos = 0;
-        return items.map((d) => {
-            const y1 = yPos, y2 = yPos + d[value];
-            yPos = y2;
-            const normX1 = xOpt?.percent ? x1 / total : x1;
-            const normX2 = xOpt?.percent ? x2 / total : x2;
-            const normY1 = yOpt?.percent ? y1 / groupValue : y1;
-            const normY2 = yOpt?.percent ? y2 / groupValue : y2;
-            return {
-                ...d,
-                [X1]: normX1,
-                [X2]: normX2,
-                [Y1]: normY1,
-                [Y2]: normY2,
-                [X]: (normX1 + normX2) / 2,
-                [Y]: (normY1 + normY2) / 2
-            };
+    const out = [];
+    groupFacetsAndZ(data, { ...rest }, (data) => {
+        const total = sum(data, (d) => d[value]);
+        let xPos = 0;
+        const grouped = d3Groups(data, (d) => resolveProp(d[x], d)).flatMap(([k, items]) => {
+            const groupValue = sum(items, (d) => resolveProp(d[value], d));
+            const x1 = xPos, x2 = xPos + groupValue;
+            xPos = x2;
+            let yPos = 0;
+            return items.map((d) => {
+                const y1 = yPos, y2 = yPos + resolveProp(d[value], d);
+                yPos = y2;
+                const normX1 = xOpt?.percent ? x1 / total : x1;
+                const normX2 = xOpt?.percent ? x2 / total : x2;
+                const normY1 = yOpt?.percent ? y1 / groupValue : y1;
+                const normY2 = yOpt?.percent ? y2 / groupValue : y2;
+                return {
+                    ...d,
+                    [X1]: normX1,
+                    [X2]: normX2,
+                    [Y1]: normY1,
+                    [Y2]: normY2,
+                    [X]: (normX1 + normX2) / 2,
+                    [Y]: (normY1 + normY2) / 2
+                };
+            });
         });
+        out.push(...grouped);
     });
-    return { ...rest, data: grouped, x: X, x1: X1, x2: X2, y: Y, y1: Y1, y2: Y2 };
+    return { ...rest, data: out, x: X, x1: X1, x2: X2, y: Y, y1: Y1, y2: Y2 };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.3.11-pr-153.0",
+    "version": "0.3.11-pr-153.2",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",