svelteplot 0.2.9-pr-109.1 → 0.2.10-pr-110.0

package/README.md

@@ -1,6 +1,6 @@
 # SveltePlot
 
-![Tests](https://github.com/svelteplot/svelteplot/actions/workflows/test.yml/badge.svg)
+![License](https://img.shields.io/npm/l/svelteplot.svg) ![Tests](https://github.com/svelteplot/svelteplot/actions/workflows/test.yml/badge.svg)
 
 SveltePlot is a visualization framework based on the [layered grammar of graphics](https://vita.had.co.nz/papers/layered-grammar.html) ideas. It's API is heavily inspired by [Observable Plot](https://github.com/observablehq/plot). Created by Gregor Aisch.
 

package/dist/Plot.svelte

@@ -12,7 +12,7 @@
 <script lang="ts">
     import Plot from './core/Plot.svelte';
 
-    import type { PlotOptions } from './types.js';
+    import type { PlotDefaults, PlotOptions } from './types.js';
 
     // implicit marks
     import AxisX from './marks/AxisX.svelte';
@@ -28,6 +28,7 @@
     import { autoScale, autoScaleColor } from './helpers/autoScales.js';
     import { namedProjection } from './helpers/autoProjection.js';
     import { isObject } from './helpers/index.js';
+    import { getContext } from 'svelte';
 
     let {
         header: userHeader,

package/dist/core/Plot.svelte

@@ -51,22 +51,17 @@
     const maxMarginBottom = $derived(Math.max(...$autoMarginBottom.values()));
     const maxMarginTop = $derived(Math.max(...$autoMarginTop.values()));
 
+    const USER_DEFAULTS = getContext<Partial<PlotDefaults>>('svelteplot/defaults') || {};
+
     // default settings in the plot and marks can be overwritten by
     // defining the svelteplot/defaults context outside of Plot
     const DEFAULTS: PlotDefaults = {
-        axisXAnchor: 'bottom',
-        axisYAnchor: 'left',
-        xTickSpacing: 80,
-        yTickSpacing: 50,
         height: 350,
         initialWidth: 500,
         inset: 0,
         colorScheme: 'turbo',
         unknown: '#cccccc99',
-        dotRadius: 3,
-        frame: false,
-        axes: true,
-        grid: false,
+
         categoricalColorScheme: 'observable10',
         pointScaleHeight: 18,
         bandScaleHeight: 30,
@@ -77,7 +72,29 @@
             compactDisplay: 'short'
         },
         markerDotRadius: 3,
-        ...getContext<Partial<PlotDefaults>>('svelteplot/defaults')
+        ...USER_DEFAULTS,
+        axisX: {
+            anchor: 'bottom',
+            implicit: true,
+            ...USER_DEFAULTS.axis,
+            ...USER_DEFAULTS.axisX
+        },
+        axisY: {
+            anchor: 'left',
+            implicit: true,
+            ...USER_DEFAULTS.axis,
+            ...USER_DEFAULTS.axisY
+        },
+        gridX: {
+            implicit: false,
+            ...USER_DEFAULTS.grid,
+            ...USER_DEFAULTS.gridX
+        },
+        gridY: {
+            implicit: false,
+            ...USER_DEFAULTS.grid,
+            ...USER_DEFAULTS.gridY
+        }
     };
 
     let {
@@ -390,16 +407,16 @@
                   ? margins
                   : Math.max(5, maxMarginBottom),
             inset: isOneDimensional ? 10 : DEFAULTS.inset,
-            grid: DEFAULTS.grid,
-            axes: DEFAULTS.axes,
-            frame: DEFAULTS.frame,
+            grid: (DEFAULTS.gridX?.implicit ?? false) && (DEFAULTS.gridY?.implicit ?? false),
+            axes: (DEFAULTS.axisX?.implicit ?? false) && (DEFAULTS.axisY?.implicit ?? false),
+            frame: DEFAULTS.frame?.implicit ?? false,
             projection: null,
             aspectRatio: null,
             facet: {},
             padding: 0.1,
             x: {
                 type: 'auto',
-                axis: autoXAxis ? DEFAULTS.axisXAnchor : false,
+                axis: DEFAULTS.axisX.implicit && autoXAxis ? DEFAULTS.axisX.anchor : false,
                 labelAnchor: 'auto',
                 reverse: false,
                 clamp: false,
@@ -408,13 +425,13 @@
                 round: false,
                 percent: false,
                 align: 0.5,
-                tickSpacing: DEFAULTS.xTickSpacing,
+                tickSpacing: DEFAULTS.axisX.tickSpacing ?? 80,
                 tickFormat: 'auto',
-                grid: false
+                grid: DEFAULTS.gridX.implicit ?? false
             },
             y: {
                 type: 'auto',
-                axis: autoYAxis ? DEFAULTS.axisYAnchor : false,
+                axis: DEFAULTS.axisY.implicit && autoYAxis ? DEFAULTS.axisY.anchor : false,
                 labelAnchor: 'auto',
                 reverse: false,
                 clamp: false,
@@ -423,9 +440,9 @@
                 round: false,
                 percent: false,
                 align: 0.5,
-                tickSpacing: DEFAULTS.yTickSpacing,
+                tickSpacing: DEFAULTS.axisY.tickSpacing ?? 50,
                 tickFormat: 'auto',
-                grid: false
+                grid: DEFAULTS.gridY.implicit ?? false
             },
             opacity: {
                 type: 'linear',

package/dist/marks/Area.svelte

@@ -39,12 +39,22 @@
         ConstantAccessor,
         ChannelAccessor,
         ScaledDataRecord,
-        LinkableMarkProps
+        LinkableMarkProps,
+        PlotDefaults
     } from '../types.js';
     import type { RawValue } from '../types.js';
     import type { StackOptions } from '../transforms/stack.js';
 
-    let {
+    let markProps: AreaMarkProps = $props();
+
+    const DEFAULTS = {
+        fill: 'currentColor',
+        curve: 'linear',
+        tension: 0,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').area
+    };
+
+    const {
         data,
         /** the curve */
         curve = 'linear',
@@ -52,7 +62,7 @@
         class: className = '',
         canvas = false,
         ...options
-    }: AreaMarkProps = $props();
+    }: AreaMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

package/dist/marks/AreaX.svelte

@@ -7,15 +7,19 @@
     import { renameChannels } from '../transforms/rename.js';
     import { stackX } from '../transforms/stack.js';
     import { recordizeX } from '../transforms/recordize.js';
-    import type { ChannelAccessor } from '../types.js';
+    import type { ChannelAccessor, PlotDefaults } from '../types.js';
+    import { getContext } from 'svelte';
 
     type AreaXProps = Omit<AreaMarkProps, 'y1' | 'y2'> & {
         x?: ChannelAccessor;
         y?: ChannelAccessor;
     };
 
-    // we're discarding y1 and y2 props since they are not
-    let { data, stack, ...options }: AreaXProps = $props();
+    let markProps: AreaMarkProps = $props();
+
+    const DEFAULTS = getContext<PlotDefaults>('svelteplot/_defaults').areaX;
+
+    const { data, stack, ...options }: AreaMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const args = $derived(
         renameChannels<AreaXProps>(

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

@@ -1,13 +1,8 @@
 import { type AreaMarkProps } from './Area.svelte';
-import type { ChannelAccessor } from '../types.js';
-type AreaXProps = Omit<AreaMarkProps, 'y1' | 'y2'> & {
-    x?: ChannelAccessor;
-    y?: ChannelAccessor;
-};
 /**
  * Creates a horizontal area chart with x value and baseline.  Areas are implicitly
  * stacked horizontally if just the x channel is defined.
  */
-declare const AreaX: import("svelte").Component<AreaXProps, {}, "">;
+declare const AreaX: import("svelte").Component<AreaMarkProps, {}, "">;
 type AreaX = ReturnType<typeof AreaX>;
 export default AreaX;

package/dist/marks/AreaY.svelte

@@ -7,7 +7,8 @@
     import { renameChannels } from '../transforms/rename.js';
     import { stackY } from '../transforms/stack.js';
     import { recordizeY } from '../transforms/recordize.js';
-    import type { ChannelAccessor } from '../types.js';
+    import type { ChannelAccessor, PlotDefaults } from '../types.js';
+    import { getContext } from 'svelte';
 
     /**
      * AreaY mark foo
@@ -17,7 +18,11 @@
         y?: ChannelAccessor;
     };
 
-    let { data, stack, ...options }: AreaYProps = $props();
+    let markProps: AreaMarkProps = $props();
+
+    const DEFAULTS = getContext<PlotDefaults>('svelteplot/_defaults').areaY;
+
+    const { data, stack, ...options }: AreaMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const args = $derived(
         renameChannels<AreaYProps>(

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

@@ -1,16 +1,8 @@
 import { type AreaMarkProps } from './Area.svelte';
-import type { ChannelAccessor } from '../types.js';
-/**
- * AreaY mark foo
- */
-type AreaYProps = Omit<AreaMarkProps, 'x1' | 'x2'> & {
-    x?: ChannelAccessor;
-    y?: ChannelAccessor;
-};
 /**
  * Creates a vertical area chart with y value and baseline. Areas are implicitly
  * stacked vertically if just the y channel is defined.
  */
-declare const AreaY: import("svelte").Component<AreaYProps, {}, "">;
+declare const AreaY: import("svelte").Component<AreaMarkProps, {}, "">;
 type AreaY = ReturnType<typeof AreaY>;
 export default AreaY;

package/dist/marks/Arrow.svelte

@@ -38,14 +38,15 @@
 </script>
 
 <script lang="ts">
-    import { getContext, type Snippet } from 'svelte';
+    import { getContext } from 'svelte';
     import type {
         PlotContext,
         DataRecord,
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
-        RawValue
+        RawValue,
+        PlotDefaults
     } from '../types.js';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { coalesce, maybeData, maybeNumber } from '../helpers/index.js';
@@ -55,7 +56,20 @@
     import { addEventHandlers } from './helpers/events.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
 
-    let { data = [{}], class: className = null, ...options }: ArrowMarkProps = $props();
+    let markProps: ArrowMarkProps = $props();
+
+    const DEFAULTS = {
+        headAngle: 60,
+        headLength: 8,
+        inset: 0,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').arrow
+    };
+
+    const {
+        data = [{}],
+        class: className = null,
+        ...options
+    }: ArrowMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -68,7 +82,7 @@
             : maybeData(data)
     );
 
-    const args: ArrowProps = $derived(
+    const args: ArrowMarkProps = $derived(
         replaceChannels({ data: sorted, ...options }, { y: ['y1', 'y2'], x: ['x1', 'x2'] })
     );
 </script>
@@ -78,7 +92,7 @@
     required={['x1', 'x2', 'y1', 'y2']}
     channels={['x1', 'y1', 'x2', 'y2', 'opacity', 'stroke', 'strokeOpacity']}
     {...args}>
-    {#snippet children({ mark, usedScales, scaledData })}
+    {#snippet children({ usedScales, scaledData })}
         {@const sweep = maybeSweep(args.sweep)}
         <GroupMultiple class="arrow" length={scaledData.length}>
             {#each scaledData as d, i (i)}
@@ -86,8 +100,8 @@
                     {@const inset = resolveProp(args.inset, d.datum, 0)}
                     {@const insetStart = resolveProp(args.insetStart, d.datum)}
                     {@const insetEnd = resolveProp(args.insetEnd, d.datum)}
-                    {@const headAngle = resolveProp(args.headAngle, d.datum, 60)}
-                    {@const headLength = resolveProp(args.headLength, d.datum, 8)}
+                    {@const headAngle = resolveProp(args.headAngle, d.datum)}
+                    {@const headLength = resolveProp(args.headLength, d.datum)}
                     {@const bend = resolveProp(args.bend, d.datum, 0)}
                     {@const strokeWidth = resolveProp(args.strokeWidth, d.datum, 1)}
                     {@const arrPath = arrowPath(

package/dist/marks/AxisX.svelte

@@ -27,16 +27,11 @@
         ticks?: number | string | RawValue[];
         /** set to false or null to disable tick labels */
         text: boolean | null;
-    } & XOR<
-            {
-                /** approximate number of ticks to be generated */
-                tickCount?: number;
-            },
-            {
-                /** approximate number of pixels between generated ticks */
-                tickSpacing?: number;
-            }
-        >;
+        /** approximate number of ticks to be generated */
+        tickCount?: number;
+        /** approximate number of pixels between generated ticks */
+        tickSpacing?: number;
+    };
 </script>
 
 <script lang="ts">
@@ -49,32 +44,36 @@
         RawValue,
         ConstantAccessor,
         FacetContext,
-        DefaultOptions
+        PlotDefaults,
+        ChannelName
     } from '../types.js';
     import autoTimeFormat from '../helpers/autoTimeFormat.js';
     import { derived } from 'svelte/store';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { resolveScaledStyles } from '../helpers/resolve.js';
 
-    const DEFAULTS = {
+    let markProps: AxisXMarkProps = $props();
+
+    const DEFAULTS: Omit<AxisXMarkProps, 'data' | ChannelName> = {
         tickSize: 6,
         tickPadding: 3,
         tickFontSize: 11,
-        axisXAnchor: 'bottom',
-        ...getContext<Partial<DefaultOptions>>('svelteplot/_defaults')
+        anchor: 'bottom',
+        ...getContext<PlotDefaults>('svelteplot/_defaults').axis,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').axisX
     };
 
-    let {
+    const {
         ticks: magicTicks,
         data = Array.isArray(magicTicks) ? magicTicks : [],
         automatic = false,
         title,
-        anchor = DEFAULTS.axisXAnchor as 'top' | 'bottom',
+        anchor,
         facetAnchor = 'auto',
         interval = typeof magicTicks === 'string' ? magicTicks : undefined,
-        tickSize = DEFAULTS.tickSize,
-        tickFontSize = DEFAULTS.tickFontSize,
-        tickPadding = DEFAULTS.tickPadding,
+        tickSize,
+        tickFontSize,
+        tickPadding,
         labelAnchor,
         tickFormat,
         tickClass,
@@ -83,7 +82,7 @@
         tickSpacing,
         text = true,
         ...options
-    }: AxisXMarkProps = $props();
+    }: AxisXMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

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

@@ -1,4 +1,3 @@
-import type { XOR } from 'ts-essentials';
 export type AxisXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'> & {
     data?: RawValue[];
     automatic?: boolean;
@@ -16,13 +15,11 @@ export type AxisXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paint
     ticks?: number | string | RawValue[];
     /** set to false or null to disable tick labels */
     text: boolean | null;
-} & XOR<{
     /** approximate number of ticks to be generated */
     tickCount?: number;
-}, {
     /** approximate number of pixels between generated ticks */
     tickSpacing?: number;
-}>;
+};
 import type { BaseMarkProps, RawValue, ConstantAccessor } from '../types.js';
 /** Renders a horizontal axis with labels and tick marks */
 declare const AxisX: import("svelte").Component<AxisXMarkProps, {}, "">;

package/dist/marks/AxisY.svelte

@@ -28,16 +28,11 @@
         ticks?: number | string | RawValue[];
         /** set to false or null to disable tick labels */
         text: boolean | null;
-    } & XOR<
-            {
-                /** approximate number of ticks to be generated */
-                tickCount?: number;
-            },
-            {
-                /** approximate number of pixels between generated ticks */
-                tickSpacing?: number;
-            }
-        >;
+        /** approximate number of ticks to be generated */
+        tickCount?: number;
+        /** approximate number of pixels between generated ticks */
+        tickSpacing?: number;
+    };
 </script>
 
 <script lang="ts">
@@ -49,40 +44,44 @@
         BaseMarkProps,
         RawValue,
         FacetContext,
-        DefaultOptions
+        PlotDefaults,
+        ChannelName
     } from '../types.js';
     import autoTimeFormat from '../helpers/autoTimeFormat.js';
     import type { ConstantAccessor } from '../types.js';
     import { autoTicks } from '../helpers/autoTicks.js';
     import { resolveScaledStyles } from '../helpers/resolve.js';
 
-    const DEFAULTS = {
+    let markProps: AxisYMarkProps = $props();
+
+    const DEFAULTS: Omit<AxisYMarkProps, 'data' | ChannelName> = {
         tickSize: 6,
         tickPadding: 3,
         tickFontSize: 11,
-        axisYAnchor: 'left',
-        ...getContext<Partial<DefaultOptions>>('svelteplot/_defaults')
+        anchor: 'left',
+        ...getContext<PlotDefaults>('svelteplot/_defaults').axis,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').axisY
     };
 
-    let {
+    const {
         ticks: magicTicks,
         data = Array.isArray(magicTicks) ? magicTicks : [],
         automatic = false,
         title,
-        anchor = DEFAULTS.axisYAnchor as 'left' | 'right',
+        anchor,
         facetAnchor = 'auto',
         interval = typeof magicTicks === 'string' ? magicTicks : undefined,
         lineAnchor = 'center',
-        tickSize = DEFAULTS.tickSize,
-        tickFontSize = DEFAULTS.tickFontSize,
-        tickPadding = DEFAULTS.tickPadding,
+        tickSize,
+        tickFontSize,
+        tickPadding,
         tickFormat,
         tickClass,
         tickCount = typeof magicTicks === 'number' ? magicTicks : undefined,
         tickSpacing,
         text = true,
         ...options
-    }: AxisYMarkProps = $props();
+    }: AxisYMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

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

@@ -1,4 +1,3 @@
-import type { XOR } from 'ts-essentials';
 export type AxisYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'> & {
     data?: RawValue[];
     automatic?: boolean;
@@ -17,13 +16,11 @@ export type AxisYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paint
     ticks?: number | string | RawValue[];
     /** set to false or null to disable tick labels */
     text: boolean | null;
-} & XOR<{
     /** approximate number of ticks to be generated */
     tickCount?: number;
-}, {
     /** approximate number of pixels between generated ticks */
     tickSpacing?: number;
-}>;
+};
 import type { BaseMarkProps, RawValue } from '../types.js';
 import type { ConstantAccessor } from '../types.js';
 /** Renders a vertical axis with labels and tick marks */

package/dist/marks/BarX.svelte

@@ -8,7 +8,8 @@
         BaseMarkProps,
         BaseRectMarkProps,
         ChannelAccessor,
-        LinkableMarkProps
+        LinkableMarkProps,
+        PlotDefaults
     } from '../types.js';
 
     export type BarXMarkProps = BaseMarkProps &
@@ -38,7 +39,20 @@
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
 
-    let { data = [{}], class: className = null, stack, ...options }: BarXMarkProps = $props();
+    const DEFAULTS = {
+        fill: 'currentColor',
+        ...getContext<PlotDefaults>('svelteplot/_defaults').bar,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').barX
+    };
+
+    let markProps: BarXMarkProps = $props();
+
+    const {
+        data = [{}],
+        class: className = null,
+        stack,
+        ...options
+    }: BarXMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

package/dist/marks/BarY.svelte

@@ -8,7 +8,8 @@
         BaseMarkProps,
         BaseRectMarkProps,
         ChannelAccessor,
-        DataRow
+        DataRow,
+        PlotDefaults
     } from '../types.js';
 
     export type BarYMarkProps = BaseMarkProps &
@@ -37,11 +38,24 @@
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
 
-    let { data = [{}], class: className = null, stack, ...options }: BarYMarkProps = $props();
-
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
 
+    const DEFAULTS = {
+        fill: 'currentColor',
+        ...getContext<PlotDefaults>('svelteplot/_defaults').bar,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').barY
+    };
+
+    let markProps: BarYMarkProps = $props();
+
+    const {
+        data = [{}],
+        class: className = null,
+        stack,
+        ...options
+    }: BarYMarkProps = $derived({ ...DEFAULTS, ...markProps });
+
     const args = $derived(
         stackY(
             intervalY(

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/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'
@@ -20,7 +20,7 @@
 
     const DEFAULTS = {
         graticuleStep: 10,
-        ...getContext<Partial<DefaultOptions>>('svelteplot/defaults')
+        ...getContext<Partial<PlotDefaults>>('svelteplot/defaults')
     };
 
     let { step = DEFAULTS.graticuleStep, stepX, stepY, ...options }: GraticuleMarkProps = $props();

package/dist/types.d.ts

@@ -4,6 +4,34 @@ import type { MouseEventHandler } from 'svelte/elements';
 import type { MarkerShape } from './marks/helpers/Marker.svelte';
 import type { Writable } from 'svelte/store';
 import type * as CSS from 'csstype';
+import type { AreaMarkProps } from './marks/Area.svelte';
+import type { ArrowMarkProps } from './marks/Arrow.svelte';
+import type { AxisXMarkProps } from './marks/AxisX.svelte';
+import type { AxisYMarkProps } from './marks/AxisY.svelte';
+import type { BarXMarkProps } from './marks/BarX.svelte';
+import type { CellMarkProps } from './marks/Cell.svelte';
+import type { DotMarkProps } from './marks/Dot.svelte';
+import type { FrameMarkProps } from './marks/Frame.svelte';
+import type { GeoMarkProps } from './marks/Geo.svelte';
+import type { GraticuleMarkProps } from './marks/Graticule.svelte';
+import type { LineMarkProps } from './marks/Line.svelte';
+import type { LinkMarkProps } from './marks/Link.svelte';
+import type { RectMarkProps } from './marks/Rect.svelte';
+import type { RuleXMarkProps } from './marks/RuleX.svelte';
+import type { SphereMarkProps } from './marks/Sphere.svelte';
+import type { SpikeMarkProps } from './marks/Spike.svelte';
+import type { TextMarkProps } from './marks/Text.svelte';
+import type { TickXMarkProps } from './marks/TickX.svelte';
+import type { VectorMarkProps } from './marks/Vector.svelte';
+import type { BrushMarkProps } from './marks/Brush.svelte';
+import type { BrushXMarkProps } from './marks/BrushX.svelte';
+import type { BrushYMarkProps } from './marks/BrushY.svelte';
+import type { RectXMarkProps } from './marks/RectX.svelte';
+import type { RectYMarkProps } from './marks/RectY.svelte';
+import type { RuleYMarkProps } from './marks/RuleY.svelte';
+import type { TickYMarkProps } from './marks/TickY.svelte';
+import type { GridYMarkProps } from './marks/GridY.svelte';
+import type { GridXMarkProps } from './marks/GridX.svelte';
 export type MarkType = 'area' | 'arrow' | 'axisX' | 'axisY' | 'barX' | 'barY' | 'cell' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY';
 export type ScaleName = 'x' | 'y' | 'r' | 'color' | 'opacity' | 'length' | 'symbol' | 'fx' | 'fy' | 'projection';
 export type ScaleType = 'linear' | 'pow' | 'sqrt' | 'log' | 'symlog' | 'time' | 'point' | 'ordinal' | 'sequential' | 'band' | 'categorical' | 'cyclical' | 'threshold' | 'quantile-cont' | 'quantile' | 'quantize' | 'diverging' | 'diverging-log' | 'diverging-pow' | 'diverging-sqrt' | 'diverging-symlog';
@@ -300,51 +328,6 @@ export type PlotOptions = {
      */
     css: (d: string) => string | undefined;
 };
-export type PlotDefaults = {
-    axisXAnchor: AxisXAnchor;
-    axisYAnchor: AxisYAnchor;
-    xTickSpacing: number;
-    yTickSpacing: number;
-    height: number;
-    inset: number;
-    colorScheme: ColorScheme | string[];
-    categoricalColorScheme: ColorScheme | string[];
-    dotRadius: number;
-    /**
-     * for computing the automatic height based on the number of
-     * domain items in a point scale
-     */
-    pointScaleHeight: number;
-    /**
-     * for computing the automatic height based on the number of
-     * domain items in a band scale
-     */
-    bandScaleHeight: number;
-    /**
-     * add frame to plots by default
-     */
-    frame: boolean;
-    grid: boolean;
-    axes: boolean;
-    /**
-     * initial width of the plot before measuring the actual width
-     */
-    initialWidth: number;
-    /**
-     * locale, used for automatic axis ticks
-     */
-    locale: string;
-    /**
-     * default number format for axis ticks
-     */
-    numberFormat: Intl.NumberFormatOptions;
-    markerDotRadius: number;
-    /**
-     * fallback color to be used for null/NA
-     */
-    unknown: string;
-    css: (d: string) => string | undefined;
-};
 export type GenericMarkOptions = Record<string | symbol, any>;
 export type DataRecord = Record<string | symbol, RawValue> & {
     ___orig___?: RawValue | [RawValue, RawValue];
@@ -492,27 +475,27 @@ export type LinkableMarkProps = {
     /**
      * if set, the mark element will be wrapped in a <a> link element
      */
-    href: ConstantAccessor<string>;
+    href?: ConstantAccessor<string>;
     /**
      * the relationship of the target object to the link object (e.g. "noopener")
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#rel
      */
-    rel: ConstantAccessor<string>;
+    rel?: ConstantAccessor<string>;
     /**
      * the link target mime type, e.g. "text/csv"
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#type
      */
-    type: ConstantAccessor<string>;
+    type?: ConstantAccessor<string>;
     /**
      * the target of the link, e.g. "_blank" or "_self"
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#target
      */
-    target: ConstantAccessor<'_self' | '_blank' | '_parent' | '_top' | string>;
+    target?: ConstantAccessor<'_self' | '_blank' | '_parent' | '_top' | string>;
     /**
      * if set to true, the link will be downloaded instead of navigating to it
      * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download
      */
-    download: ConstantAccessor<boolean>;
+    download?: ConstantAccessor<boolean>;
     [key: `data-sveltekit-${string}`]: string | boolean;
 };
 export type BaseMarkProps = Partial<{
@@ -618,11 +601,12 @@ export type AutoMarginStores = {
     autoMarginRight: Writable<Map<string, number>>;
     autoMarginBottom: Writable<Map<string, number>>;
 };
+type IgnoreDefaults = 'data' | 'facet' | ChannelName | 'title' | 'automatic';
 /**
  * these are the default options for the plot marks that can be set using
  * the 'svelteplot/defaults' context.
  */
-export type DefaultOptions = {
+export type PlotDefaults = {
     /**
      * default plot height
      */
@@ -632,41 +616,32 @@ export type DefaultOptions = {
      */
     inset: number;
     /**
-     * default tick line length
-     */
-    tickSize: number;
-    /**
-     * default padding between tick line and tick label
-     */
-    tickPadding: number;
-    /**
-     * default font size for tick labels
-     */
-    tickFontSize: number;
-    /**
-     * default anchor for x axis
+     * default color scheme
      */
-    axisXAnchor: 'bottom' | 'top';
+    colorScheme: ColorScheme;
+    categoricalColorScheme: ColorScheme | string[];
     /**
-     * default anchor for y axis
+     * fallback color to be used for null/NA
      */
-    axisYAnchor: 'left' | 'right';
+    unknown: string;
     /**
-     * default spacing between ticks in AxisX and GridX
+     * optional @emotion/css function to style the plot
      */
-    xTickSpacing: number;
+    css: (d: string) => string | undefined;
     /**
-     * default spacing between ticks in AxisY and GridY
+     * for computing the automatic height based on the number of
+     * domain items in a point scale
      */
-    yTickSpacing: number;
+    pointScaleHeight: number;
     /**
-     * default color scheme
+     * for computing the automatic height based on the number of
+     * domain items in a band scale
      */
-    colorScheme: ColorScheme;
+    bandScaleHeight: number;
     /**
-     * default step for graticule, in degrees
+     * initial width of the plot before measuring the actual width
      */
-    graticuleStep: number;
+    initialWidth: number;
     /**
      * locale, used for automatic axis ticks
      */
@@ -679,6 +654,164 @@ export type DefaultOptions = {
      * default dot radius for line markers, used in dot, circle, and circle-stroke markers
      */
     markerDotRadius: number;
+    /**
+     * default props for area marks, applied to area, areaX, and areaY marks
+     */
+    area: Partial<Omit<AreaMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for areaX marks
+     */
+    areaX: Partial<Omit<AreaMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for areaY marks
+     */
+    areaY: Partial<Omit<AreaMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for arrow marks
+     */
+    arrow: Partial<Omit<ArrowMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for axis marks, applied to both axisX and axisY marks
+     */
+    axis: Partial<Omit<AxisXMarkProps, 'data' | 'facet' | ChannelName | 'facetAnchor' | 'labelAnchor' | 'anchor'> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for axisX marks
+     */
+    axisX: Partial<Omit<AxisXMarkProps, IgnoreDefaults> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for axisY marks
+     */
+    axisY: Partial<Omit<AxisYMarkProps, IgnoreDefaults> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for bar marks, applied to both barX and barY marks
+     */
+    bar: Partial<Omit<BarXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for barX marks
+     */
+    barX: Partial<Omit<BarXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for barY marks
+     */
+    barY: Partial<Omit<BarXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for brush marks, applied to brush, brushX and brushY marks
+     */
+    brush: Partial<Omit<BrushMarkProps, IgnoreDefaults | 'limitDimension'>>;
+    /**
+     * default props for brushX marks
+     */
+    brushX: Partial<Omit<BrushXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for brushY marks
+     */
+    brushY: Partial<Omit<BrushYMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for cell marks
+     */
+    cell: Partial<Omit<CellMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for dot marks
+     */
+    dot: Partial<Omit<DotMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for frame marks
+     */
+    frame: Partial<FrameMarkProps & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for geo marks
+     */
+    geo: Partial<Omit<GeoMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for graticule marks
+     */
+    graticule: Partial<Omit<GraticuleMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for grid marks, applied to both gridX and gridY marks
+     */
+    grid: Partial<Omit<GridXMarkProps, IgnoreDefaults> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for gridX marks
+     */
+    gridX: Partial<Omit<GridXMarkProps, IgnoreDefaults> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for gridY marks
+     */
+    gridY: Partial<Omit<GridYMarkProps, IgnoreDefaults> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for line marks
+     */
+    line: Partial<Omit<LineMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for link marks
+     */
+    link: Partial<Omit<LinkMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rect marks, applied to rect and rectX marks
+     */
+    rect: Partial<Omit<RectMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rectX marks
+     */
+    rectX: Partial<Omit<RectXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rectY marks
+     */
+    rectY: Partial<Omit<RectYMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rule marks
+     */
+    rule: Partial<Omit<RuleXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rule marks
+     */
+    ruleX: Partial<Omit<RuleXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rule marks
+     */
+    ruleY: Partial<Omit<RuleYMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for sphere marks
+     */
+    sphere: Partial<SphereMarkProps>;
+    /**
+     * default props for spike marks
+     */
+    spike: Partial<Omit<SpikeMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for text marks
+     */
+    text: Partial<Omit<TextMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for tick marks, applied to tickX and tickY marks
+     */
+    tick: Partial<Omit<TickXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for tickX marks
+     */
+    tickX: Partial<Omit<TickXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for tickY marks
+     */
+    tickY: Partial<Omit<TickYMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for vector marks
+     */
+    vector: Partial<Omit<VectorMarkProps, IgnoreDefaults>>;
 };
 export type MapIndexObject = {
     mapIndex: (I: number[], S: RawValue[], T: RawValue[]) => void;

package/dist/ui/ExamplesGrid.svelte

@@ -36,7 +36,7 @@
             border: 1px solid #88888822;
             border-radius: 2px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
-            padding: 1.5ex;
+            padding: 1.5ex 1.5ex 0.4ex 1.5ex;
         }
 
         &:hover {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.9-pr-109.1",
+    "version": "0.2.10-pr-110.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",