svelteplot 0.3.11-pr-153.2 → 0.3.11-pr-175.1

package/dist/core/FacetGrid.svelte

@@ -59,9 +59,6 @@
     {#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<T>(items: T[], channels: Channels, reduce: (items: DataRecord[]) => any): any;
+export declare function groupFacetsAndZ(items: DataRecord[], channels: Channels, reduce: (items: DataRecord[]) => any): any;

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,8 +8,6 @@
         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';
@@ -21,33 +19,18 @@
     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, fx, fy, children }: HTMLTooltipMarkProps = $props();
+    let { data, x, y, r, 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 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);
+        let relativeX = evt.clientX - plotRect.left;
+        let relativeY = evt.clientY - plotRect.top;
+        const pt = tree.find(relativeX, relativeY, 25);
         if (pt) {
             tooltipX = resolveChannel('x', pt, { x, y, r });
             tooltipY = resolveChannel('y', pt, { x, y, r });
@@ -71,26 +54,18 @@
         };
     });
 
-    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)
-        )
+    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)
     );
 </script>
 
 <div
     class={['tooltip', { hide: !datum }]}
-    style:left="{tooltipX ? facetOffsetX + projectX('x', plot.scales, tooltipX) : 0}px"
-    style:top="{tooltipY ? facetOffsetY + projectY('y', plot.scales, tooltipY) : 0}px">
+    style:left="{tooltipX ? projectX('x', plot.scales, tooltipX) : 0}px"
+    style:top="{tooltipY ? projectY('y', plot.scales, tooltipY) : 0}px">
     <div class="tooltip-body">
         {@render children({ datum })}
     </div>
@@ -102,10 +77,9 @@
         background: var(--svelteplot-tooltip-bg);
         border: 1px solid #ccc;
         border-color: var(--svelteplot-tooltip-border);
-        font-size: 12px;
+        font-size: 13px;
         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,8 +6,6 @@ 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/index.d.ts

@@ -12,5 +12,5 @@ export { renameChannels, replaceChannels } from './rename.js';
 export { select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY } from './select.js';
 export { shiftX, shiftY } from './shift.js';
 export { sort, shuffle, reverse } from './sort.js';
-export { stackX, stackY, stackMarimekko } from './stack.js';
+export { stackX, stackY } from './stack.js';
 export { windowX, windowY } from './window.js';

package/dist/transforms/index.js

@@ -12,5 +12,5 @@ export { renameChannels, replaceChannels } from './rename.js';
 export { select, selectFirst, selectLast, selectMaxX, selectMaxY, selectMinX, selectMinY } from './select.js';
 export { shiftX, shiftY } from './shift.js';
 export { sort, shuffle, reverse } from './sort.js';
-export { stackX, stackY, stackMarimekko } from './stack.js';
+export { stackX, stackY } from './stack.js';
 export { windowX, windowY } from './window.js';

package/dist/transforms/stack.d.ts

@@ -1,4 +1,4 @@
-import type { ChannelAccessor, TransformArg } from '../types/index.js';
+import type { 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,28 +8,3 @@ 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<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,8 +1,7 @@
 import isDataRecord from '../helpers/isDataRecord.js';
-import { resolveChannel, resolveProp } from '../helpers/resolve.js';
+import { resolveChannel } 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';
+import { index, union, groups as d3Groups } from 'd3-array';
 const GROUP = Symbol('group');
 const FACET = Symbol('group');
 const DEFAULT_STACK_OPTIONS = {
@@ -111,37 +110,3 @@ function applyDefaults(opts) {
     }
     return { ...DEFAULT_STACK_OPTIONS, ...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 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: 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.2",
+    "version": "0.3.11-pr-175.1",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",