svelteplot 0.2.9 → 0.2.10-pr-110.1

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

@@ -6,9 +6,9 @@ export type DotMarkProps = BaseMarkProps & {
     symbol?: ChannelAccessor | Snippet<[number, string]>;
     canvas?: boolean;
     dotClass?: ConstantAccessor<string>;
-};
+} & LinkableMarkProps;
 import { type Snippet } from 'svelte';
-import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, LinkableMarkProps } from '../types.js';
 /** Creates dots or symbols at specified positions with customizable size and appearance */
 declare const Dot: import("svelte").Component<DotMarkProps, {}, "">;
 type Dot = ReturnType<typeof Dot>;

package/dist/marks/Frame.svelte

@@ -7,6 +7,7 @@
         BaseMarkProps,
         'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'
     > &
+        LinkableMarkProps &
         Omit<
             BaseRectMarkProps,
             'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'
@@ -27,19 +28,38 @@
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
-    import type { PlotContext, BaseRectMarkProps } from '../types.js';
+    import type {
+        PlotContext,
+        BaseRectMarkProps,
+        LinkableMarkProps,
+        PlotDefaults
+    } from '../types.js';
     import type { BaseMarkProps } from '../types.js';
     import RectPath from './helpers/RectPath.svelte';
 
-    let {
+    let markProps: FrameMarkProps = $props();
+
+    const DEFAULTS: FrameMarkProps = {
+        fill: 'none',
+        class: 'frame',
+        stroke: 'currentColor',
+        fillOpacity: 1,
+        strokeOpacity: 1,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').frame
+    };
+
+    const {
         automatic,
-        class: className = 'frame',
+        class: className,
         fill,
         stroke,
         fillOpacity,
         strokeOpacity,
         ...options
-    }: FrameMarkProps = $props();
+    }: FrameMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

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

@@ -1,4 +1,4 @@
-export type FrameMarkProps = Omit<BaseMarkProps, 'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'> & Omit<BaseRectMarkProps, 'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'> & {
+export type FrameMarkProps = Omit<BaseMarkProps, 'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'> & LinkableMarkProps & Omit<BaseRectMarkProps, 'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'> & {
     fill: string;
     stroke: string;
     fillOpacity: number;
@@ -10,7 +10,7 @@ export type FrameMarkProps = Omit<BaseMarkProps, 'fill' | 'stroke' | 'fillOpacit
     insetTop?: number;
     insetBottom?: number;
 };
-import type { BaseRectMarkProps } from '../types.js';
+import type { BaseRectMarkProps, LinkableMarkProps } from '../types.js';
 import type { BaseMarkProps } from '../types.js';
 /** Renders a simple frame around the entire plot domain */
 declare const Frame: import("svelte").Component<FrameMarkProps, {}, "">;

package/dist/marks/Geo.svelte

@@ -7,8 +7,10 @@
         geoType?: 'sphere' | 'graticule';
         dragRotate: boolean;
         canvas: boolean;
-        href: ConstantAccessor<string>;
-        target: ConstantAccessor<string>;
+        /**
+         * simple browser tooltip to be displayed on mouseover
+         */
+        title: ConstantAccessor<string>;
     } & BaseMarkProps &
         LinkableMarkProps;
 </script>
@@ -20,7 +22,8 @@
         PlotContext,
         BaseMarkProps,
         ConstantAccessor,
-        LinkableMarkProps
+        LinkableMarkProps,
+        PlotDefaults
     } from '../types.js';
     import Mark from '../Mark.svelte';
     import { geoPath } from 'd3-geo';
@@ -31,18 +34,28 @@
     import GeoCanvas from './helpers/GeoCanvas.svelte';
     import { recordize } from '../transforms/recordize.js';
     import { GEOJSON_PREFER_STROKE } from '../helpers/index.js';
+    import Anchor from './helpers/Anchor.svelte';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
-    let {
+    let markProps: GeoMarkProps = $props();
+
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').geo
+    };
+
+    const {
         data = [{}],
         canvas = false,
         geoType,
         dragRotate,
-        class: className = null,
+        class: className = '',
         ...options
-    }: GeoMarkProps = $props();
+    }: GeoMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const path = $derived(
         callWithProps(geoPath, [plot.scales.projection], {
@@ -68,28 +81,6 @@
     channels={['fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity', 'r']}
     {...args}>
     {#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]}
@@ -99,15 +90,28 @@
             {:else}
                 {#each scaledData as d, i (i)}
                     {#if d.valid}
-                        {#if options.href}
-                            <a
-                                href={resolveProp(args.href, d.datum, '')}
-                                target={resolveProp(args.target, d.datum, '_self')}>
-                                {@render el(d)}
-                            </a>
-                        {:else}
-                            {@render el(d)}
-                        {/if}
+                        <Anchor {options} datum={d.datum}>
+                            {@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>
+                        </Anchor>
                     {/if}
                 {/each}
             {/if}

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

@@ -3,8 +3,10 @@ export type GeoMarkProps = {
     geoType?: 'sphere' | 'graticule';
     dragRotate: boolean;
     canvas: boolean;
-    href: ConstantAccessor<string>;
-    target: ConstantAccessor<string>;
+    /**
+     * simple browser tooltip to be displayed on mouseover
+     */
+    title: ConstantAccessor<string>;
 } & BaseMarkProps & LinkableMarkProps;
 import type { DataRecord, BaseMarkProps, ConstantAccessor, LinkableMarkProps } from '../types.js';
 /** Renders geographical data using projections and GeoJSON geometries */

package/dist/marks/Graticule.svelte

@@ -2,7 +2,7 @@
     Renders a geographic graticule grid with customizable step sizes
 -->
 <script module lang="ts">
-    import type { DefaultOptions, BaseMarkProps } from '../types.js';
+    import type { PlotDefaults, BaseMarkProps } from '../types.js';
     export type GraticuleMarkProps = Omit<
         BaseMarkProps,
         'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target' | 'cursor'
@@ -17,17 +17,26 @@
     import Geo from './Geo.svelte';
     import { geoGraticule } from 'd3-geo';
     import { getContext } from 'svelte';
+    import type { PlotDefaults } from '../types.js';
+
+    let markProps: GraticuleMarkProps = $props();
 
     const DEFAULTS = {
-        graticuleStep: 10,
-        ...getContext<Partial<DefaultOptions>>('svelteplot/defaults')
+        ...getContext<PlotDefaults>('svelteplot/_defaults').graticule
     };
 
-    let { step = DEFAULTS.graticuleStep, stepX, stepY, ...options }: GraticuleMarkProps = $props();
+    const {
+        data = [{}],
+        class: className = '',
+        ...options
+    }: GraticuleMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     let graticule = $derived.by(() => {
         const graticule = geoGraticule();
-        graticule.stepMinor([stepX || step, stepY || step]);
+        graticule.stepMinor([options.stepX || options.step, options.stepY || options.step]);
         return graticule;
     });
 </script>

package/dist/marks/GridX.svelte

@@ -11,13 +11,27 @@
 <script lang="ts">
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
-    import type { PlotContext, BaseMarkProps, RawValue } from '../types.js';
+    import type { PlotContext, BaseMarkProps, RawValue, PlotDefaults } from '../types.js';
     import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { testFilter } from '../helpers/index.js';
     import { RAW_VALUE } from '../transforms/recordize.js';
 
-    let { data = [], automatic = false, ...options }: GridXMarkProps = $props();
+    let markProps: GridXMarkProps = $props();
+
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').grid,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').gridX
+    };
+
+    const {
+        data = [],
+        automatic = false,
+        ...options
+    }: GridXMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

package/dist/marks/GridY.svelte

@@ -11,13 +11,27 @@
 <script lang="ts">
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
-    import type { PlotContext, BaseMarkProps, RawValue } from '../types.js';
+    import type { PlotContext, BaseMarkProps, RawValue, PlotDefaults } from '../types.js';
     import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { testFilter } from '../helpers/index.js';
     import { RAW_VALUE } from '../transforms/recordize.js';
 
-    let { data = [], automatic = false, ...options }: GridYMarkProps = $props();
+    let markProps: GridYMarkProps = $props();
+
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').grid,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').gridY
+    };
+
+    const {
+        data = [],
+        automatic = false,
+        ...options
+    }: GridYMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

package/dist/marks/Line.svelte

@@ -47,22 +47,36 @@
     import { pick } from 'es-toolkit';
     import LineCanvas from './helpers/LineCanvas.svelte';
 
-    import type { RawValue } from '../types.js';
+    import type { RawValue, PlotDefaults } from '../types.js';
     import { isValid } from '../helpers/index.js';
     import { sort } from '../transforms/sort.js';
     import { recordizeXY } from '../transforms/recordize.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
 
-    let {
+    let markProps: LineMarkProps = $props();
+
+    const DEFAULTS: LineMarkProps = {
+        curve: 'auto',
+        tension: 0,
+        canvas: false,
+        class: null,
+        lineClass: null,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').line
+    };
+
+    const {
         data = [{}],
-        curve = 'auto',
-        tension = 0,
+        curve,
+        tension,
         text,
-        canvas = false,
-        class: className = null,
-        lineClass = null,
+        canvas,
+        class: className,
+        lineClass,
         ...options
-    }: LineMarkProps = $props();
+    }: LineMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const args = $derived(sort(recordizeXY({ data, ...options })));
 

package/dist/marks/Link.svelte

@@ -28,7 +28,8 @@
         CurveName,
         MarkerOptions,
         RawValue,
-        ScaledDataRecord
+        ScaledDataRecord,
+        PlotDefaults
     } from '../types.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { maybeData } from '../helpers/index.js';
@@ -41,14 +42,21 @@
     import { geoPath } from 'd3-geo';
     import { pick } from 'es-toolkit';
 
-    let {
+    let markProps: LinkMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').link
+    };
+    const {
         data = [{}],
         curve = 'auto',
         tension = 0,
         text,
-        class: className = null,
+        class: className = '',
         ...options
-    }: LinkMarkProps = $props();
+    }: LinkMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());

package/dist/marks/Pointer.svelte

@@ -21,7 +21,7 @@
 
 <script lang="ts">
     import { getContext, type Snippet } from 'svelte';
-    import type { PlotContext } from '../types.js';
+    import type { PlotContext, PlotDefaults } from '../types.js';
     import { groups as d3Groups } from 'd3-array';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
@@ -33,7 +33,13 @@
     import isDataRecord from '../helpers/isDataRecord.js';
     import { RAW_VALUE } from '../transforms/recordize.js';
 
-    let {
+    let markProps: PointerMarkProps = $props();
+
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').pointer
+    };
+
+    const {
         data = [{}],
         children,
         x,
@@ -41,7 +47,10 @@
         z,
         maxDistance = 15,
         onupdate = null
-    }: PointerMarkProps = $props();
+    }: PointerMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     let selectedData = $state([]);
 

package/dist/marks/Rect.svelte

@@ -13,6 +13,7 @@
         y2?: ChannelAccessor;
         interval?: number | string;
     } & BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps;
 </script>
 
@@ -25,12 +26,26 @@
         DataRecord,
         BaseMarkProps,
         BaseRectMarkProps,
-        ChannelAccessor
+        ChannelAccessor,
+        PlotDefaults
     } from '../types.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
 
-    let { data = [{}], class: className = 'rect', ...options }: RectMarkProps = $props();
+    let markProps: RectMarkProps = $props();
+
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').rect
+    };
+
+    const {
+        data = [{}],
+        class: className = '',
+        ...options
+    }: RectMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());

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

@@ -7,9 +7,9 @@ export type RectMarkProps = {
     y1?: ChannelAccessor;
     y2?: ChannelAccessor;
     interval?: number | string;
-} & BaseMarkProps & BaseRectMarkProps;
+} & BaseMarkProps & LinkableMarkProps & BaseRectMarkProps;
 import type { DataRecord, BaseMarkProps, BaseRectMarkProps, ChannelAccessor } from '../types.js';
 /** For arbitrary rectangles, requires quantitative x and y scales */
-declare const Rect: import("svelte").Component<RectMarkProps, {}, "">;
+declare const Rect: import("svelte").Component<any, {}, "">;
 type Rect = ReturnType<typeof Rect>;
 export default Rect;

package/dist/marks/RectX.svelte

@@ -8,11 +8,25 @@
 <script lang="ts">
     import Rect, { type RectMarkProps } from './Rect.svelte';
     import { intervalY, stackX, recordizeX } from '../index.js';
-    import type { PlotContext } from '../types.js';
+    import type { PlotContext, PlotDefaults } from '../types.js';
     import { getContext } from 'svelte';
     import type { StackOptions } from '../transforms/stack';
 
-    let { data = [{}], stack, ...options }: RectXMarkProps = $props();
+    let markProps: RectXMarkProps = $props();
+
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').rect,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').rectX
+    };
+
+    const {
+        data = [{}],
+        stack,
+        ...options
+    }: RectXMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     let plot = $derived(getPlotState());

package/dist/marks/RectY.svelte

@@ -8,11 +8,25 @@
 <script lang="ts">
     import Rect, { type RectMarkProps } from './Rect.svelte';
     import { intervalX, stackY, recordizeY } from '../index.js';
-    import type { PlotContext } from '../types.js';
+    import type { PlotContext, PlotDefaults } from '../types.js';
     import { getContext } from 'svelte';
     import type { StackOptions } from '../transforms/stack';
 
-    let { data = [{}], stack, ...options }: RectYMarkProps = $props();
+    let markProps: RectYMarkProps = $props();
+
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').rect,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').rectY
+    };
+
+    const {
+        data = [{}],
+        stack,
+        ...options
+    }: RectYMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

package/dist/marks/RuleX.svelte

@@ -24,10 +24,23 @@
         DataRecord,
         BaseMarkProps,
         ConstantAccessor,
-        ChannelAccessor
+        ChannelAccessor,
+        PlotDefaults
     } from '../types.js';
 
-    let { data = [{}], class: className = null, ...options }: RuleXMarkProps = $props();
+    let markProps: RuleXMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').rule,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').ruleX
+    };
+    const {
+        data = [{}],
+        class: className = '',
+        ...options
+    }: RuleXMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

package/dist/marks/RuleY.svelte

@@ -24,10 +24,23 @@
         DataRecord,
         BaseMarkProps,
         ConstantAccessor,
-        ChannelAccessor
+        ChannelAccessor,
+        PlotDefaults
     } from '../types.js';
 
-    let { data = [{}], class: className = null, ...options }: RuleYMarkProps = $props();
+    let markProps: RuleYMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').rule,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').ruleY
+    };
+    const {
+        data = [{}],
+        class: className = '',
+        ...options
+    }: RuleYMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

package/dist/marks/Sphere.svelte

@@ -2,14 +2,27 @@
     Geo mark with Sphere geometry object  -->
 
 <script module lang="ts">
-    import { type BaseMarkProps } from '../types.js';
-    export type SphereMarkProps = BaseMarkProps;
+    import { type BaseMarkProps, type LinkableMarkProps } from '../types.js';
+    export type SphereMarkProps = BaseMarkProps & LinkableMarkProps;
 </script>
 
 <script lang="ts">
     import Geo from './Geo.svelte';
+    import { getContext } from 'svelte';
+    import type { PlotDefaults } from '../types.js';
 
-    let { ...args }: SphereMarkProps = $props();
+    let markProps: SphereMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').sphere
+    };
+    const {
+        data = [{}],
+        class: className = '',
+        ...options
+    }: SphereMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 </script>
 
-<Geo data={[{ type: 'Sphere' }]} {...args} geoType="sphere" />
+<Geo {data} {...options} geoType="sphere" />