svelteplot · gka · Jun 5, 2025 · Jun 3, 2025 · Jun 3, 2025 · Jun 3, 2025
diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml
@@ -0,0 +1,2 @@
+onlyBuiltDependencies:
+  - puppeteer
diff --git a/screenshot-examples.js b/screenshot-examples.js
@@ -94,7 +94,9 @@ const takeScreenshot = async (page, urlPath, outputPath, isDarkMode = false) =>
     const finalOutputPath = outputPath.replace('.png', `${themeSuffix}.png`);
 
     // Wait for the Plot component to be rendered
-    await page.waitForSelector('.content > figure.svelteplot', { timeout: 10000 });
+    await page.waitForSelector('.content figure.svelteplot ', {
+        timeout: 10000
+    });
 
     // Toggle dark mode if needed
     if (isDarkMode) {
@@ -112,7 +114,7 @@ const takeScreenshot = async (page, urlPath, outputPath, isDarkMode = false) =>
 
     // Get the Plot SVG element
     const elementHandle = await page.evaluateHandle(() =>
-        document.querySelector('.content > figure.svelteplot > .plot-body > svg')
+        document.querySelector('.content .screenshot')
     );
 
     // Take a screenshot of the element

diff --git a/src/lib/Plot.svelte b/src/lib/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,

diff --git a/src/lib/core/Plot.svelte b/src/lib/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',

diff --git a/src/lib/marks/Area.svelte b/src/lib/marks/Area.svelte
@@ -39,20 +39,30 @@
         ConstantAccessor,
         ChannelAccessor,
         ScaledDataRecord,
-        LinkableMarkProps
+        LinkableMarkProps,
+        PlotDefaults
     } from '../types.js';
     import type { RawValue } from '$lib/types.js';
     import type { StackOptions } from '$lib/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',
         tension = 0,
         class: className = '',
         canvas = false,
         ...options
-    }: AreaMarkProps = $props();
+    }: AreaMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());

diff --git a/src/lib/marks/AreaX.svelte b/src/lib/marks/AreaX.svelte
@@ -7,15 +7,19 @@
     import { renameChannels } from '$lib/transforms/rename.js';
     import { stackX } from '$lib/transforms/stack.js';
     import { recordizeX } from '$lib/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>(

diff --git a/src/lib/marks/AreaY.svelte b/src/lib/marks/AreaY.svelte
@@ -7,7 +7,8 @@
     import { renameChannels } from '$lib/transforms/rename.js';
     import { stackY } from '$lib/transforms/stack.js';
     import { recordizeY } from '$lib/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>(

diff --git a/src/lib/marks/Arrow.svelte b/src/lib/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,23 @@
     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 = '',
+        ...options
+    }: ArrowMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -68,7 +85,7 @@
             : maybeData(data)
     );
 
-    const args: ArrowProps = $derived(
+    const args: ArrowMarkProps = $derived(
         replaceChannels({ data: sorted, ...options }, { y: ['y1', 'y2'], x: ['x1', 'x2'] })
     );
 </script>
@@ -78,16 +95,16 @@
     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)}
                 {#if d.valid}
                     {@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(

diff --git a/src/lib/marks/AxisX.svelte b/src/lib/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 '$lib/helpers/autoTimeFormat.js';
     import { derived } from 'svelte/store';
     import { autoTicks } from '$lib/helpers/autoTicks.js';
     import { resolveScaledStyles } from '$lib/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());