svelteplot 0.1.3-next.9 → 0.2.1

package/dist/marks/Geo.svelte

@@ -1,15 +1,22 @@
 <script lang="ts">
     import { getContext } from 'svelte';
-    import type { DataRecord, PlotContext, BaseMarkProps } from '../types.js';
+    import type {
+        DataRecord,
+        PlotContext,
+        BaseMarkProps,
+        FacetContext,
+        ConstantAccessor,
+        UsedScales
+    } from '../types.js';
     import Mark from '../Mark.svelte';
     import { geoPath } from 'd3-geo';
-    import { resolveChannel, resolveProp, resolveScaledStyles } from '../helpers/resolve.js';
-    import { getUsedScales } from '../helpers/scales.js';
+    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import callWithProps from '../helpers/callWithProps.js';
     import { sort } from '../index.js';
-    import { testFilter } from '../helpers/index.js';
     import { addEventHandlers } from './helpers/events.js';
     import GeoCanvas from './helpers/GeoCanvas.svelte';
+    import { recordize } from '../transforms/recordize.js';
+    import { GEOJSON_PREFER_STROKE } from '../helpers/index.js';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -19,6 +26,8 @@
         geoType?: 'sphere' | 'graticule';
         dragRotate: boolean;
         canvas: boolean;
+        href: ConstantAccessor<string>;
+        target: ConstantAccessor<string>;
     } & BaseMarkProps;
 
     let {
@@ -39,60 +48,60 @@
     );
 
     const args = $derived(
-        sort({
-            data,
-            ...(options.r ? { sort: { channel: '-r' } } : {}),
-            ...options
-        })
+        sort(
+            recordize({
+                data,
+                ...(options.r ? { sort: { channel: '-r' } } : {}),
+                ...options
+            })
+        )
     );
-    const preferStroke = new Set(['MultiLineString', 'LineString']);
-
-    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
-    const testFacet = $derived(getTestFacet());
 </script>
 
 <Mark
     type="geo"
     channels={['fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity', 'r']}
     {...args}>
-    {#snippet children({ mark, usedScales })}
+    {#snippet children({ mark, scaledData, usedScales })}
+        {#snippet el(d)}
+            {@const title = resolveProp(args.title, d.datum, '')}
+            {@const geometry = resolveProp(args.geometry, d.datum, d.datum)}
+            {@const [style, styleClass] = resolveStyles(
+                plot,
+                d,
+                args,
+                GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill',
+                usedScales
+            )}
+            <path
+                d={path(geometry)}
+                {style}
+                class={[styleClass]}
+                use:addEventHandlers={{
+                    getPlotState,
+                    options: args,
+                    datum: d.datum
+                }}>
+                {#if title}<title>{title}</title>{/if}
+            </path>
+        {/snippet}
         <g
             aria-label="geo"
             class={['geo', geoType && `geo-${geoType}`, className]}
             style="fill:currentColor">
             {#if canvas}
-                <GeoCanvas data={args.data} {mark} {plot} {testFacet} {usedScales} {path} />
+                <GeoCanvas data={scaledData} {path} {mark} {usedScales} />
             {:else}
-                {#each args.data as datum}
-                    {#if testFilter(datum, mark.options) && testFacet(datum, mark.options)}
-                        {#snippet el(datum)}
-                            {@const title = resolveProp(args.title, datum, '')}
-                            {@const geometry = resolveProp(args.geometry, datum, datum)}
-                            <path
-                                d={path(geometry)}
-                                style={resolveScaledStyles(
-                                    datum,
-                                    args,
-                                    usedScales,
-                                    plot,
-                                    preferStroke.has(geometry.type) ? 'stroke' : 'fill'
-                                )}
-                                use:addEventHandlers={{
-                                    getPlotState,
-                                    options: args,
-                                    datum
-                                }}>
-                                {#if title}<title>{title}</title>{/if}
-                            </path>
-                        {/snippet}
+                {#each scaledData as d}
+                    {#if d.valid}
                         {#if options.href}
                             <a
-                                href={resolveProp(args.href, datum, '')}
-                                target={resolveProp(args.target, datum, '_self')}>
-                                {@render el(datum)}
+                                href={resolveProp(args.href, d.datum, '')}
+                                target={resolveProp(args.target, d.datum, '_self')}>
+                                {@render el(d)}
                             </a>
                         {:else}
-                            {@render el(datum)}
+                            {@render el(d)}
                         {/if}
                     {/if}
                 {/each}

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

@@ -1,9 +1,11 @@
-import type { DataRecord, BaseMarkProps } from '../types.js';
+import type { DataRecord, BaseMarkProps, ConstantAccessor } from '../types.js';
 type GeoMarkProps = {
     data: DataRecord[];
     geoType?: 'sphere' | 'graticule';
     dragRotate: boolean;
     canvas: boolean;
+    href: ConstantAccessor<string>;
+    target: ConstantAccessor<string>;
 } & BaseMarkProps;
 declare const Geo: import("svelte").Component<GeoMarkProps, {}, "">;
 type Geo = ReturnType<typeof Geo>;

package/dist/marks/GridX.svelte

@@ -2,10 +2,10 @@
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
     import type { PlotContext, BaseMarkProps, RawValue } from '../types.js';
-    import { resolveChannel, resolveScaledStyles } from '../helpers/resolve.js';
+    import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
-    import { getUsedScales } from '../helpers/scales.js';
     import { testFilter } from '../helpers/index.js';
+    import { RAW_VALUE } from '../transforms/recordize.js';
 
     type GrixXMarkProps = BaseMarkProps & {
         data?: RawValue[];
@@ -15,13 +15,13 @@
     let { data = [], automatic = false, ...options }: GrixXMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
-    let autoTickCount = $derived(
+    const autoTickCount = $derived(
         Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))
     );
 
-    let ticks: RawValue[] = $derived(
+    const ticks: RawValue[] = $derived(
         data.length > 0
             ? // use custom tick values if user passed any as prop
               data
@@ -39,9 +39,9 @@
 
 <Mark
     type="gridX"
-    data={data.length ? data.map((tick) => ({ __x: tick })) : []}
+    data={data.length ? data.map((tick) => ({ [RAW_VALUE]: tick })) : []}
     channels={['y1', 'y2', 'x', 'stroke', 'strokeOpacity']}
-    {...{ ...options, x: '__x' }}
+    {...{ ...options, x: RAW_VALUE }}
     {automatic}>
     {#snippet children({ usedScales })}
         <g class="grid-x">
@@ -54,9 +54,18 @@
                     {@const y2_ = resolveChannel('y2', tick, options)}
                     {@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(
+                        plot,
+                        { datum: { [RAW_VALUE]: tick } },
+                        options,
+                        'stroke',
+                        usedScales,
+                        true
+                    )}
                     <line
+                        class={styleClass}
                         transform="translate({x},{plot.options.marginTop})"
-                        style={resolveScaledStyles(tick, options, usedScales, plot, 'stroke')}
+                        {style}
                         {y1}
                         {y2} />
                 {/if}

package/dist/marks/GridY.svelte

@@ -2,23 +2,23 @@
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
     import type { PlotContext, BaseMarkProps, RawValue, DataRecord } from '../types.js';
-    import { resolveChannel, resolveScaledStyles } from '../helpers/resolve.js';
+    import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
-    import { getUsedScales } from '../helpers/scales.js';
     import { testFilter } from '../helpers/index.js';
+    import { RAW_VALUE } from '../transforms/recordize.js';
 
     type GridYMarkProps = BaseMarkProps & { data?: RawValue[]; automatic?: boolean };
 
     let { data = [], automatic = false, ...options }: GridYMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
-    let autoTickCount = $derived(
+    const autoTickCount = $derived(
         Math.max(2, Math.round(plot.facetHeight / plot.options.y.tickSpacing))
     );
 
-    let ticks: RawValue[] = $derived(
+    const ticks: RawValue[] = $derived(
         data.length > 0
             ? // use custom tick values if user passed any as prop
               data
@@ -36,9 +36,9 @@
 
 <Mark
     type="gridY"
-    data={data.length ? data.map((tick) => ({ ___orig___: tick })) : []}
+    data={data.length ? data.map((tick) => ({ [RAW_VALUE]: tick })) : []}
     channels={['x1', 'x2', 'y', 'stroke', 'strokeOpacity']}
-    {...{ ...options, y: '___orig___' }}
+    {...{ ...options, y: RAW_VALUE }}
     {automatic}>
     {#snippet children({ usedScales })}
         <g class="grid-y">
@@ -51,9 +51,18 @@
                     {@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 [style, styleClass] = resolveStyles(
+                        plot,
+                        { datum: { [RAW_VALUE]: tick } },
+                        options,
+                        'stroke',
+                        usedScales,
+                        true
+                    )}
                     <line
+                        {style}
+                        class={styleClass}
                         transform="translate({plot.options.marginLeft},{y})"
-                        style={resolveScaledStyles(tick, options, usedScales, plot, 'stroke')}
                         {x1}
                         {x2} />
                 {/if}

package/dist/marks/Pointer.svelte

@@ -10,12 +10,12 @@
         /**
          * maximum cursor distance to select data points
          */
-        maxDistance: number;
+        maxDistance?: number;
         /**
          * called whenever the selection changes
          * @param data
          */
-        onupdate: (data: DataRow[]) => void;
+        onupdate?: (data: DataRow[]) => void;
     };
 </script>
 
@@ -31,6 +31,7 @@
     import { quadtree } from 'd3-quadtree';
     import { projectXY } from '../helpers/scales.js';
     import isDataRecord from '../helpers/isDataRecord.js';
+    import { RAW_VALUE } from '../transforms/recordize.js';
 
     let {
         data = [{}],
@@ -109,7 +110,7 @@
                             true
                         );
                         return {
-                            ...(isDataRecord(d) ? d : { ___orig___: d }),
+                            ...(isDataRecord(d) ? d : { [RAW_VALUE]: d }),
                             __pointerX: px,
                             __pointerY: py
                         };

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

@@ -10,12 +10,12 @@ export type PointerMarkProps = {
     /**
      * maximum cursor distance to select data points
      */
-    maxDistance: number;
+    maxDistance?: number;
     /**
      * called whenever the selection changes
      * @param data
      */
-    onupdate: (data: DataRow[]) => void;
+    onupdate?: (data: DataRow[]) => void;
 };
 import { type Snippet } from 'svelte';
 declare const Pointer: import("svelte").Component<PointerMarkProps, {}, "">;

package/dist/marks/Rect.svelte

@@ -5,15 +5,9 @@
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
-    import { recordizeY, intervalX, intervalY } from '../index.js';
-    import {
-        resolveChannel,
-        resolveProp,
-        resolveScaledStyles,
-        resolveStyles
-    } from '../helpers/resolve.js';
-    import { getUsedScales, projectX, projectY } from '../helpers/scales.js';
-    import { coalesce, testFilter, maybeNumber } from '../helpers/index.js';
+    import { intervalX, intervalY } from '../index.js';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import { coalesce, maybeNumber } from '../helpers/index.js';
     import type {
         PlotContext,
         DataRecord,
@@ -21,7 +15,6 @@
         BaseRectMarkProps,
         ChannelAccessor
     } from '../types.js';
-    import { isValid } from '../helpers/isValid.js';
     import { addEventHandlers } from './helpers/events.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
 
@@ -36,7 +29,7 @@
         interval?: number | string;
     } & BaseRectMarkProps;
 
-    let { data = [{}], class: className = null, ...options }: RectMarkProps = $props();
+    let { data = [{}], class: className = 'rect', ...options }: RectMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());
@@ -51,8 +44,8 @@
     required={[]}
     channels={['x1', 'x2', 'y1', 'y2', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
     {...args}>
-    {#snippet children({ mark, usedScales, scaledData })}
-        <g class="rect">
+    {#snippet children({ usedScales, scaledData })}
+        <GroupMultiple class={scaledData.length > 1 ? className : null} length={scaledData.length}>
             {#each scaledData as d}
                 {#if d.valid}
                     {@const x1 = d.x1 == null ? plot.options.marginLeft : d.x1}
@@ -69,14 +62,14 @@
                     {@const insetRight = resolveProp(args.insetRight, d.datum)}
                     {@const insetTop = resolveProp(args.insetTop, d.datum)}
                     {@const insetBottom = resolveProp(args.insetBottom, d.datum)}
-                    {@const insetL = maybeNumber(coalesce(insetLeft, inset, 0))}
-                    {@const insetT = maybeNumber(coalesce(insetTop, inset, 0))}
-                    {@const insetR = maybeNumber(coalesce(insetRight, inset, 0))}
-                    {@const insetB = maybeNumber(coalesce(insetBottom, inset, 0))}
+                    {@const insetL = maybeNumber(coalesce(insetLeft, inset, 0)) ?? 0}
+                    {@const insetT = maybeNumber(coalesce(insetTop, inset, 0)) ?? 0}
+                    {@const insetR = maybeNumber(coalesce(insetRight, inset, 0)) ?? 0}
+                    {@const insetB = maybeNumber(coalesce(insetBottom, inset, 0)) ?? 0}
 
                     {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
                     <rect
-                        class={[styleClass]}
+                        class={[scaledData.length === 1 && className, styleClass]}
                         {style}
                         x={minx + insetL}
                         y={miny + insetT}
@@ -91,7 +84,7 @@
                         }} />
                 {/if}
             {/each}
-        </g>
+        </GroupMultiple>
     {/snippet}
 </Mark>
 

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

@@ -10,16 +10,16 @@ declare const Sphere: import("svelte").Component<Partial<{
     stroke: import("../types.js").ConstantAccessor<string>;
     strokeWidth: import("../types.js").ConstantAccessor<number>;
     strokeOpacity: import("../types.js").ConstantAccessor<number>;
-    strokeLinejoin: import("../types.js").ConstantAccessor<"bevel" | "miter" | "miter-clip" | "round">;
-    strokeLinecap: import("../types.js").ConstantAccessor<"butt" | "square" | "round">;
+    strokeLinejoin: import("../types.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin>;
+    strokeLinecap: import("../types.js").ConstantAccessor<import("csstype").Property.StrokeLinecap>;
     strokeMiterlimit: import("../types.js").ConstantAccessor<number>;
     opacity: import("../types.js").ConstantAccessor<number>;
     strokeDasharray: import("../types.js").ConstantAccessor<string>;
     strokeDashoffset: import("../types.js").ConstantAccessor<number>;
-    mixBlendMode: import("../types.js").ConstantAccessor<"normal" | "multiply" | "screen" | "overlay" | "darken" | "lighten" | "color-dodge" | "color-burn" | "hard-light" | "soft-light" | "difference" | "exclusion" | "hue" | "saturation" | "color" | "luminosity" | "plus-darker" | "plus-lighter">;
+    mixBlendMode: import("../types.js").ConstantAccessor<import("csstype").Property.MixBlendMode>;
     clipPath: string;
     imageFilter: import("../types.js").ConstantAccessor<string>;
-    shapeRendering: import("../types.js").ConstantAccessor<"crispEdges" | "geometricPrecision" | "optimizeSpeed" | "auto">;
+    shapeRendering: import("../types.js").ConstantAccessor<import("csstype").Property.ShapeRendering>;
     paintOrder: import("../types.js").ConstantAccessor<string>;
     onclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
     ondblclick?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
@@ -29,6 +29,15 @@ declare const Sphere: import("svelte").Component<Partial<{
     onmousemove?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
     onmouseleave?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
     onmouseout?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    onmouseover?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    onpointercancel?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    onpointerdown?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    onpointerup?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    onpointerenter?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    onpointerleave?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    onpointermove?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    onpointerover?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+    onpointerout?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
     ondrag?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
     ondrop?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
     ondragstart?: import("svelte/elements").MouseEventHandler<SVGPathElement>;
@@ -46,6 +55,7 @@ declare const Sphere: import("svelte").Component<Partial<{
     href: import("../types.js").ConstantAccessor<string>;
     target: import("../types.js").ConstantAccessor<"_self" | "_blank" | string>;
     class: string;
+    cursor: import("../types.js").ConstantAccessor<import("csstype").Property.Cursor>;
 }>, {}, "">;
 type Sphere = ReturnType<typeof Sphere>;
 export default Sphere;

package/dist/marks/Text.svelte

@@ -22,11 +22,11 @@
         dx?: ConstantAccessor<number>;
         dy?: ConstantAccessor<number>;
         text: ConstantAccessor<string>;
-        title: ConstantAccessor<string>;
+        title?: ConstantAccessor<string>;
         /**
          * if you want to apply class names to individual text elements
          */
-        textClass: ConstantAccessor<string>;
+        textClass?: ConstantAccessor<string>;
         /**
          * the line anchor for vertical position; top, bottom, or middle
          */

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

@@ -10,11 +10,11 @@ type TextMarkProps = BaseMarkProps & {
     dx?: ConstantAccessor<number>;
     dy?: ConstantAccessor<number>;
     text: ConstantAccessor<string>;
-    title: ConstantAccessor<string>;
+    title?: ConstantAccessor<string>;
     /**
      * if you want to apply class names to individual text elements
      */
-    textClass: ConstantAccessor<string>;
+    textClass?: ConstantAccessor<string>;
     /**
      * the line anchor for vertical position; top, bottom, or middle
      */

package/dist/marks/helpers/CanvasLayer.svelte

@@ -1,18 +1,12 @@
 <script lang="ts">
-    let {
-        canvas = $bindable(),
-        devicePixelRatio = $bindable(1),
-        plot
-    }: {
-        canvas: HTMLCanvasElement;
-        devicePixelRatio: number;
-        plot: PlotState;
-    } = $props();
+    import { getContext } from 'svelte';
+    import type { PlotContext } from '../../types';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
 
-    $effect(() => {
-        devicePixelRatio = window.devicePixelRatio || 1;
-        const ctx = canvas.getContext('2d');
-    });
+    let restProps: {} = $props();
+
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
 </script>
 
 <!-- 
@@ -24,9 +18,9 @@
 <foreignObject x="0" y="0" width={plot.width} height={plot.height}>
     <canvas
         xmlns="http://www.w3.org/1999/xhtml"
-        bind:this={canvas}
-        width={plot.width * devicePixelRatio}
-        height={plot.height * devicePixelRatio}
+        {...restProps}
+        width={plot.width * (devicePixelRatio.current ?? 1)}
+        height={plot.height * (devicePixelRatio.current ?? 1)}
         style="width: {plot.width}px; height: {plot.height}px;"></canvas>
 </foreignObject>
 

package/dist/marks/helpers/CanvasLayer.svelte.d.ts

@@ -1,13 +1,9 @@
-type $$ComponentProps = {
-    canvas: HTMLCanvasElement;
-    devicePixelRatio: number;
-    plot: PlotState;
-};
+type $$ComponentProps = {};
 /**
  * The CanvasLayer component is a helper component that inserts a
  * canvas element inside a foreignObject for use in a plot and takes care of
  * scaling it to the device pixel ratio.
  */
-declare const CanvasLayer: import("svelte").Component<$$ComponentProps, {}, "canvas" | "devicePixelRatio">;
+declare const CanvasLayer: import("svelte").Component<$$ComponentProps, {}, "">;
 type CanvasLayer = ReturnType<typeof CanvasLayer>;
 export default CanvasLayer;