svelteplot 0.2.10 → 0.3.0

package/dist/marks/BoxY.svelte

@@ -2,7 +2,7 @@
     Creates a vertical box plot for visualizing data distribution with quartiles and outliers
 -->
 <script lang="ts" module>
-    export type BoxProps = {
+    export type BoxYMarkProps = Pick<BaseMarkProps, 'class'> & {
         data: DataRecord[];
         x: ChannelAccessor;
         y: ChannelAccessor;
@@ -31,21 +31,33 @@
 
 <script lang="ts">
     import GroupMultiple from './helpers/GroupMultiple.svelte';
-    import type { ChannelAccessor, DataRecord } from '../types.js';
+    import type { BaseMarkProps, ChannelAccessor, DataRecord } from '../types.js';
     import { groupX, BarY, TickY, RuleX, Dot } from '../index.js';
     import { resolveChannel } from '../helpers/resolve.js';
+    import { getContext } from 'svelte';
+    import type { PlotDefaults } from '../types.js';
 
-    let {
+    let markProps: BoxYMarkProps = $props();
+    const DEFAULTS = {
+        tickMedian: true,
+        tickMinMax: false,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').box,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').boxY
+    };
+    const {
         data = [{}],
-        x,
-        y,
-        rule,
+        class: className = '',
         bar,
-        tickMedian = true,
-        tickMinMax = false,
+        rule,
+        tickMedian,
+        tickMinMax,
         dot,
-        class: className = null
-    }: BoxProps = $props();
+        x,
+        y
+    }: BoxYMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     let { data: grouped } = $derived(
         groupX(

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

@@ -1,4 +1,4 @@
-export type BoxProps = {
+export type BoxYMarkProps = Pick<BaseMarkProps, 'class'> & {
     data: DataRecord[];
     x: ChannelAccessor;
     y: ChannelAccessor;
@@ -23,8 +23,8 @@ export type BoxProps = {
      */
     dot: Record<string, ChannelAccessor>;
 };
-import type { ChannelAccessor, DataRecord } from '../types.js';
+import type { BaseMarkProps, ChannelAccessor, DataRecord } from '../types.js';
 /** Creates a vertical box plot for visualizing data distribution with quartiles and outliers */
-declare const BoxY: import("svelte").Component<BoxProps, {}, "">;
+declare const BoxY: import("svelte").Component<BoxYMarkProps, {}, "">;
 type BoxY = ReturnType<typeof BoxY>;
 export default BoxY;

package/dist/marks/Brush.svelte

@@ -44,27 +44,41 @@
     import { getContext } from 'svelte';
     import Frame from './Frame.svelte';
     import Rect from './Rect.svelte';
-    import type { BaseMarkProps, PlotContext } from '../types.js';
+    import type { BaseMarkProps, PlotContext, PlotDefaults } from '../types.js';
     import { clientToLayerCoordinates } from './helpers/events.js';
 
-    let {
-        brush = $bindable({ enabled: false }),
-        stroke = 'currentColor',
+    let { brush = $bindable({ enabled: false }), ...markProps }: BrushMarkProps = $props();
+
+    const DEFAULTS = {
+        stroke: 'currentColor',
+        strokeDasharray: '2,3',
+        strokeOpacity: 0.6,
+        resizeHandleSize: 10,
+        constrainToDomain: false,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').brush
+    };
+
+    const {
+        data = [{}],
+        stroke,
         strokeWidth,
-        strokeDasharray = '2,3',
-        strokeOpacity = 0.6,
+        strokeDasharray,
+        strokeOpacity,
         strokeLinecap,
         strokeDashoffset,
         strokeLinejoin,
         strokeMiterlimit,
         cursor: forceCursor,
         limitDimension = false,
-        constrainToDomain = false,
-        resizeHandleSize = 10,
+        constrainToDomain,
+        resizeHandleSize,
         onbrushstart,
         onbrushend,
         onbrush
-    }: BrushMarkProps = $props();
+    }: BrushMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -361,4 +375,10 @@
         {strokeMiterlimit}
         {strokeWidth} />
 {/if}
-<Frame fill="transparent" inset={-20} {cursor} {onpointerdown} {onpointermove} />
+<Frame
+    fill="transparent"
+    stroke="transparent"
+    inset={-20}
+    {cursor}
+    {onpointerdown}
+    {onpointermove} />

package/dist/marks/BrushX.svelte

@@ -4,8 +4,14 @@
 
 <script lang="ts">
     import Brush, { type BrushMarkProps } from './Brush.svelte';
+    import type { PlotDefaults } from '../types.js';
+    import { getContext } from 'svelte';
 
-    let { brush, ...restProps }: BrushXMarkProps = $props();
+    let { brush = $bindable({ enabled: false }), ...options }: BrushXMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').brush,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').brushX
+    };
 </script>
 
-<Brush bind:brush limitDimension="x" {...restProps} />
+<Brush bind:brush limitDimension="x" {...DEFAULTS} {...options} />

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

@@ -1,5 +1,5 @@
 export type BrushXMarkProps = Omit<BrushMarkProps, 'limitDimension'>;
 import { type BrushMarkProps } from './Brush.svelte';
-declare const BrushX: import("svelte").Component<BrushXMarkProps, {}, "">;
+declare const BrushX: import("svelte").Component<BrushXMarkProps, {}, "brush">;
 type BrushX = ReturnType<typeof BrushX>;
 export default BrushX;

package/dist/marks/BrushY.svelte

@@ -4,8 +4,14 @@
 
 <script lang="ts">
     import Brush, { type BrushMarkProps } from './Brush.svelte';
+    import type { PlotDefaults } from '../types.js';
+    import { getContext } from 'svelte';
 
-    let { brush, ...restProps }: BrushYMarkProps = $props();
+    let { brush = $bindable({ enabled: false }), ...options }: BrushYMarkProps = $props();
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').brush,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').brushY
+    };
 </script>
 
-<Brush bind:brush limitDimension="y" {...restProps} />
+<Brush bind:brush limitDimension="y" {...DEFAULTS} {...options} />

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

@@ -1,5 +1,5 @@
 export type BrushYMarkProps = Omit<BrushMarkProps, 'limitDimension'>;
 import { type BrushMarkProps } from './Brush.svelte';
-declare const BrushY: import("svelte").Component<BrushYMarkProps, {}, "">;
+declare const BrushY: import("svelte").Component<BrushYMarkProps, {}, "brush">;
 type BrushY = ReturnType<typeof BrushY>;
 export default BrushY;

package/dist/marks/Cell.svelte

@@ -8,7 +8,8 @@
         DataRecord,
         BaseMarkProps,
         BaseRectMarkProps,
-        ChannelAccessor
+        ChannelAccessor,
+        PlotDefaults
     } from '../types.js';
 
     export type CellMarkProps = BaseMarkProps &
@@ -29,7 +30,20 @@
     import { isValid } from '../helpers/isValid.js';
     import RectPath from './helpers/RectPath.svelte';
 
-    let { data = [{}], class: className = null, ...options }: CellMarkProps = $props();
+    let markProps: CellMarkProps = $props();
+
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').cell
+    };
+
+    const {
+        data = [{}],
+        class: className = '',
+        ...options
+    }: CellMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

package/dist/marks/ColorLegend.svelte

@@ -11,14 +11,14 @@
     import { range as d3Range, extent } from 'd3-array';
     import { maybeSymbol } from '../helpers/symbols.js';
 
-    import type { DefaultOptions, PlotContext } from '../types.js';
+    import type { PlotDefaults, PlotContext } from '../types.js';
 
     let { class: className = null }: ColorLegendMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
-    const DEFAULTS = getContext<Partial<DefaultOptions>>('svelteplot/_defaults');
+    const DEFAULTS = getContext<Partial<PlotDefaults>>('svelteplot/_defaults');
 
     const legendTitle = $derived(plot.options.color.label);
     const scaleType = $derived(plot.scales.color.type);

package/dist/marks/Dot.svelte

@@ -35,13 +35,19 @@
     import { addEventHandlers } from './helpers/events.js';
     import Anchor from './helpers/Anchor.svelte';
 
-    let {
+    const DEFAULTS = {
+        ...getContext<PlotDefaults>('svelteplot/_defaults').dot
+    };
+
+    let markProps: DotMarkProps = $props();
+
+    const {
         data = [{}],
         canvas = false,
         class: className = '',
         dotClass = null,
         ...options
-    }: DotMarkProps = $props();
+    }: DotMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -50,8 +56,6 @@
         return d3Symbol(maybeSymbol(symbolType), size)();
     }
 
-    const { dotRadius } = getContext<PlotDefaults>('svelteplot/_defaults');
-
     const args = $derived(
         // todo: move sorting to Mark
         sort(
@@ -80,7 +84,7 @@
         'fillOpacity',
         'strokeOpacity'
     ]}
-    defaults={{ r: dotRadius, symbol: 'circle' }}
+    defaults={{ r: 3, symbol: 'circle' }}
     {...args}>
     {#snippet children({ mark, usedScales, scaledData })}
         <g class="dot {className || ''}">

package/dist/marks/Frame.svelte

@@ -28,19 +28,38 @@
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
-    import type { PlotContext, BaseRectMarkProps, LinkableMarkProps } 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/Geo.svelte

@@ -22,7 +22,8 @@
         PlotContext,
         BaseMarkProps,
         ConstantAccessor,
-        LinkableMarkProps
+        LinkableMarkProps,
+        PlotDefaults
     } from '../types.js';
     import Mark from '../Mark.svelte';
     import { geoPath } from 'd3-geo';
@@ -38,14 +39,23 @@
     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], {

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,27 @@
     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')
+        step: 10,
+        ...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

@@ -26,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/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());