svelteplot 0.12.0 → 0.14.0-pr-545.0

package/dist/core/Plot.svelte

@@ -210,11 +210,8 @@
         (fixedWidth || width) - plotOptions.marginLeft - plotOptions.marginRight
     );
 
-    // Width used for aspectRatio/projection height computation only.
-    // Excludes reactive auto-margins to prevent a feedback loop:
-    //   height → plotHeight → y-tick density → y-label widths → autoMarginLeft → plotWidth → height
-    // Using explicit user-specified margins (0 when set to 'auto') keeps height stable
-    // while still updating when the container width or user-specified margins change.
+    // Width used for geo-projection aspect-ratio height computation only.
+    // Excludes reactive auto-margins to prevent a feedback loop in projection mode.
     const plotWidthForAspectRatio = $derived(
         (fixedWidth || width) -
             maybeMargin(
@@ -267,7 +264,7 @@
                                 preScales.x,
                                 preScales.y,
                                 plotOptions.aspectRatio,
-                                plotWidthForAspectRatio,
+                                plotWidth,
                                 plotOptions.marginTop,
                                 plotOptions.marginBottom
                             )

package/dist/helpers/group.d.ts

@@ -3,4 +3,4 @@ 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<T>(items: T[], channels: Channels<T>, reduce: (items: T[], groupProps?: Record<string, unknown>) => any): any;
+export declare function groupFacetsAndZ<T>(items: T[], channels: Channels<T>, reduce: (items: T[], groupProps?: Record<string, unknown>) => any, implicitColorZ?: boolean): any;

package/dist/helpers/group.js

@@ -4,15 +4,15 @@ import { groups as d3Groups } from 'd3-array';
  * 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 function groupFacetsAndZ(items, channels, reduce) {
+export function groupFacetsAndZ(items, channels, reduce, implicitColorZ = true) {
     const groupBy = ['fx', 'fy', 'z'].map((groupChannel) => {
         let groupByChannel = null;
         if (groupChannel === 'z') {
             if (channels.z)
                 groupByChannel = 'z';
-            else if (channels.fill)
+            else if (channels.fill && implicitColorZ)
                 groupByChannel = 'fill';
-            else if (channels.stroke)
+            else if (channels.stroke && implicitColorZ)
                 groupByChannel = 'stroke';
         }
         else if (channels[groupChannel]) {

package/dist/helpers/scales.js

@@ -151,6 +151,14 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
                     !mark.options[ORIGINAL_NAME_KEYS[name]].startsWith('__')) {
                     propNames.add(mark.options[ORIGINAL_NAME_KEYS[name]]);
                 }
+                // marks that use a Symbol as fill accessor (e.g. Contour) pass the
+                // original field name via ORIGINAL_NAME_KEYS.fill so the color scale
+                // can still derive an autoTitle
+                if (name === 'color' &&
+                    mark.options[ORIGINAL_NAME_KEYS.fill] &&
+                    !mark.options[ORIGINAL_NAME_KEYS.fill].startsWith('__')) {
+                    propNames.add(mark.options[ORIGINAL_NAME_KEYS.fill]);
+                }
             }
             else {
                 // also skip marks without data to prevent exceptions

package/dist/helpers/vectorShapes.d.ts

@@ -0,0 +1,13 @@
+import { pathRound as path } from 'd3-path';
+type D3Path = ReturnType<typeof path>;
+export type ShapeRenderer = {
+    draw(context: D3Path, l: number, r: number): void;
+};
+declare const defaultRadius = 3;
+export declare const shapeArrow: ShapeRenderer;
+export declare const shapeSpike: ShapeRenderer;
+export declare const shapeArrowFilled: ShapeRenderer;
+export declare function isShapeObject(value: unknown): value is ShapeRenderer;
+export declare function maybeShape(shape: string | ShapeRenderer): ShapeRenderer;
+export declare function shapePath(shape: string | ShapeRenderer, l: number, r: number): string;
+export { defaultRadius };

package/dist/helpers/vectorShapes.js

@@ -0,0 +1,57 @@
+import { pathRound as path } from 'd3-path';
+const defaultRadius = 3;
+const wingRatio = defaultRadius * 5;
+export const shapeArrow = {
+    draw(context, l, r) {
+        const wing = (l * r) / wingRatio;
+        context.moveTo(0, 0);
+        context.lineTo(0, -l);
+        context.moveTo(-wing, wing - l);
+        context.lineTo(0, -l);
+        context.lineTo(wing, wing - l);
+    }
+};
+export const shapeSpike = {
+    draw(context, l, r) {
+        context.moveTo(-r, 0);
+        context.lineTo(0, -l);
+        context.lineTo(r, 0);
+    }
+};
+export const shapeArrowFilled = {
+    draw(context, l, r) {
+        const headLength = Math.max(3, l * 0.3);
+        const headSpike = headLength * 0.2;
+        const headWidth = Math.max(2, l * 0.3);
+        const tailWidth = Math.max(2, l * 0.3) * 0.3;
+        context.moveTo(0, 0);
+        context.lineTo(tailWidth * 0.5, -l + headLength - headSpike);
+        context.lineTo(headWidth * 0.5, -l + headLength);
+        context.lineTo(0, -l);
+        context.lineTo(-headWidth * 0.5, -l + headLength);
+        context.lineTo(-tailWidth * 0.5, -l + headLength - headSpike);
+        context.closePath();
+    }
+};
+const shapes = new Map([
+    ['arrow', shapeArrow],
+    ['arrow-filled', shapeArrowFilled],
+    ['spike', shapeSpike]
+]);
+export function isShapeObject(value) {
+    return value != null && typeof value.draw === 'function';
+}
+export function maybeShape(shape) {
+    if (isShapeObject(shape))
+        return shape;
+    const value = shapes.get(`${shape}`.toLowerCase());
+    if (value)
+        return value;
+    throw new Error(`invalid shape: ${shape}`);
+}
+export function shapePath(shape, l, r) {
+    const context = path();
+    maybeShape(shape).draw(context, l, r);
+    return context.toString();
+}
+export { defaultRadius };

package/dist/marks/Arrow.svelte

@@ -43,6 +43,8 @@
         inset?: ConstantAccessor<number, Datum>;
         /** controls the sweep direction of the arrow arc; 1 or -1 */
         sweep?: SweepOption;
+        /** if true, renders using Canvas instead of SVG */
+        canvas?: boolean;
     }
     import type {
         DataRecord,
@@ -62,6 +64,7 @@
     } from '../helpers/arrowPath.js';
     import { replaceChannels } from '../transforms/rename.js';
     import { addEventHandlers } from './helpers/events.js';
+    import ArrowCanvas from './helpers/ArrowCanvas.svelte';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import { sort } from '../transforms/sort.js';
     import { indexData } from '../transforms/recordize.js';
@@ -79,6 +82,7 @@
 
     const {
         data = [{} as Datum],
+        canvas = false,
         class: className = '',
         ...options
     }: ArrowMarkProps = $derived({
@@ -106,66 +110,73 @@
     {#snippet children({ usedScales, scaledData })}
         {@const sweep = maybeSweep(args.sweep) as SweepFunc}
         <GroupMultiple class="arrow" length={scaledData.length}>
-            {#each scaledData as d, i (i)}
-                {#if d.valid}
-                    {@const datum = d.datum as unknown as Datum}
-                    {@const inset = resolveProp(args.inset, datum, 0)}
-                    {@const insetStart = resolveProp(args.insetStart, datum)}
-                    {@const insetEnd = resolveProp(args.insetEnd, datum)}
-                    {@const headAngle = (resolveProp(args.headAngle, datum, 60) ?? 60) as number}
-                    {@const headLength = (resolveProp(args.headLength, datum, 8) ?? 8) as number}
-                    {@const bendVal =
-                        args.bend === true
-                            ? 22.5
-                            : (resolveProp(
-                                  args.bend as ConstantAccessor<number, Datum>,
-                                  datum,
-                                  0
-                              ) ?? 0)}
-                    {@const strokeWidth = (resolveProp(args.strokeWidth, datum, 1) ?? 1) as number}
-                    {@const arrPath = arrowPath(
-                        d.x1 ?? 0,
-                        d.y1 ?? 0,
-                        d.x2 ?? 0,
-                        d.y2 ?? 0,
-                        maybeNumber(coalesce(insetStart, inset)) ?? 0,
-                        maybeNumber(coalesce(insetEnd, inset)) ?? 0,
-                        headAngle,
-                        headLength,
-                        bendVal,
-                        strokeWidth,
-                        sweep
-                    )}
-                    {@const [style, styleClass] = resolveStyles(
-                        plot,
-                        d,
-                        {
-                            strokeLinecap: 'round',
-                            strokeLinejoin: 'round',
-                            ...args,
-                            strokeWidth: strokeWidth ?? 1.6
-                        },
-                        'stroke',
-                        usedScales
-                    )}
-                    <g
-                        class={[className]}
-                        {@attach addEventHandlers({
+            {#if canvas}
+                <ArrowCanvas data={scaledData} options={args as any} {usedScales} />
+            {:else}
+                {#each scaledData as d, i (i)}
+                    {#if d.valid}
+                        {@const datum = d.datum as unknown as Datum}
+                        {@const inset = resolveProp(args.inset, datum, 0)}
+                        {@const insetStart = resolveProp(args.insetStart, datum)}
+                        {@const insetEnd = resolveProp(args.insetEnd, datum)}
+                        {@const headAngle = (resolveProp(args.headAngle, datum, 60) ??
+                            60) as number}
+                        {@const headLength = (resolveProp(args.headLength, datum, 8) ??
+                            8) as number}
+                        {@const bendVal =
+                            args.bend === true
+                                ? 22.5
+                                : (resolveProp(
+                                      args.bend as ConstantAccessor<number, Datum>,
+                                      datum,
+                                      0
+                                  ) ?? 0)}
+                        {@const strokeWidth = (resolveProp(args.strokeWidth, datum, 1) ??
+                            1) as number}
+                        {@const arrPath = arrowPath(
+                            d.x1 ?? 0,
+                            d.y1 ?? 0,
+                            d.x2 ?? 0,
+                            d.y2 ?? 0,
+                            maybeNumber(coalesce(insetStart, inset)) ?? 0,
+                            maybeNumber(coalesce(insetEnd, inset)) ?? 0,
+                            headAngle,
+                            headLength,
+                            bendVal,
+                            strokeWidth,
+                            sweep
+                        )}
+                        {@const [style, styleClass] = resolveStyles(
                             plot,
-                            options: options as any,
-                            datum: d?.datum
-                        })}>
-                        {#if options.onmouseenter || options.onclick}
-                            <!-- add invisible path in bg for easier mouse access -->
-                            <path
-                                d={arrPath}
-                                style="fill:none;stroke-width: {(strokeWidth || 1) +
-                                    10}; stroke: red; stroke-opacity:0" />
-                        {/if}
-                        <path class={[styleClass]} d={arrPath} {style} />
-                    </g>
-                {/if}
-            {/each}
+                            d,
+                            {
+                                strokeLinecap: 'round',
+                                strokeLinejoin: 'round',
+                                ...args,
+                                strokeWidth: strokeWidth ?? 1.6
+                            },
+                            'stroke',
+                            usedScales
+                        )}
+                        <g
+                            class={[className]}
+                            {@attach addEventHandlers({
+                                plot,
+                                options: options as any,
+                                datum: d?.datum
+                            })}>
+                            {#if options.onmouseenter || options.onclick}
+                                <!-- add invisible path in bg for easier mouse access -->
+                                <path
+                                    d={arrPath}
+                                    style="fill:none;stroke-width: {(strokeWidth || 1) +
+                                        10}; stroke: red; stroke-opacity:0" />
+                            {/if}
+                            <path class={[styleClass]} d={arrPath} {style} />
+                        </g>
+                    {/if}
+                {/each}
+            {/if}
         </GroupMultiple>
     {/snippet}
 </Mark>

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

@@ -177,6 +177,8 @@ declare function $$render<Datum = DataRecord | GeoJSON.GeoJsonObject>(): {
         inset?: ConstantAccessor<number, Datum>;
         /** controls the sweep direction of the arrow arc; 1 or -1 */
         sweep?: SweepOption;
+        /** if true, renders using Canvas instead of SVG */
+        canvas?: boolean;
     };
     exports: {};
     bindings: "";

package/dist/marks/ColorLegend.svelte

@@ -19,8 +19,12 @@
 
     const DEFAULTS = getPlotDefaults();
 
-    const legendTitle = $derived(plot.options.color.label);
     const scaleType = $derived(plot.scales.color.type);
+    const legendTitle = $derived(
+        scaleType === 'categorical'
+            ? (plot.options.color.label ?? '')
+            : (plot.options.color.label ?? plot.scales.color?.autoTitle)
+    );
     const tickFormat = $derived(
         typeof plot.options.color?.tickFormat === 'function'
             ? plot.options.color.tickFormat
@@ -158,12 +162,12 @@
 <style>
     .color-legend {
         text-align: left;
-        font-size: 12px;
+        font-size: 11px;
         display: inline-block;
         margin-right: 2em;
     }
     .title {
-        font-weight: 500;
+        opacity: 0.8;
     }
     .item {
         margin: 0 1em 0.5ex 0;