feat: apply frame mark defaults

svelteplot · gka · Jun 5, 2025 · Jun 3, 2025 · Jun 3, 2025 · Jun 3, 2025
commit 7a066aab671bf6253ccf8a6e035d91d08b34cc32
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,6 +51,8 @@
     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 = {
@@ -59,17 +61,7 @@
         inset: 0,
         colorScheme: 'turbo',
         unknown: '#cccccc99',
-        implicitMarks: {
-            frame: false,
-            grid: false,
-            axes: true
-        },
-        axisX: {
-            anchor: 'bottom'
-        },
-        axisY: {
-            anchor: 'left'
-        },
+
         categoricalColorScheme: 'observable10',
         pointScaleHeight: 18,
         bandScaleHeight: 30,
@@ -80,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 {
@@ -393,16 +407,16 @@
                   ? margins
                   : Math.max(5, maxMarginBottom),
             inset: isOneDimensional ? 10 : DEFAULTS.inset,
-            grid: DEFAULTS.implicitMarks.grid,
-            axes: DEFAULTS.implicitMarks.axes,
-            frame: DEFAULTS.implicitMarks.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.axisX.anchor : false,
+                axis: DEFAULTS.axisX.implicit && autoXAxis ? DEFAULTS.axisX.anchor : false,
                 labelAnchor: 'auto',
                 reverse: false,
                 clamp: false,
@@ -413,11 +427,11 @@
                 align: 0.5,
                 tickSpacing: DEFAULTS.axisX.tickSpacing ?? 80,
                 tickFormat: 'auto',
-                grid: false
+                grid: DEFAULTS.gridX.implicit ?? false
             },
             y: {
                 type: 'auto',
-                axis: autoYAxis ? DEFAULTS.axisY.anchor : false,
+                axis: DEFAULTS.axisY.implicit && autoYAxis ? DEFAULTS.axisY.anchor : false,
                 labelAnchor: 'auto',
                 reverse: false,
                 clamp: false,
@@ -428,7 +442,7 @@
                 align: 0.5,
                 tickSpacing: DEFAULTS.axisY.tickSpacing ?? 50,
                 tickFormat: 'auto',
-                grid: false
+                grid: DEFAULTS.gridY.implicit ?? false
             },
             opacity: {
                 type: 'linear',

diff --git a/src/lib/marks/Frame.svelte b/src/lib/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());

diff --git a/src/lib/types.ts b/src/lib/types.ts
@@ -30,6 +30,8 @@ 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'
@@ -833,7 +835,7 @@ export type AutoMarginStores = {
     autoMarginBottom: Writable<Map<string, number>>;
 };
 
-type IgnoreDefaults = 'data' | 'facet' | ChannelName | 'title';
+type IgnoreDefaults = 'data' | 'facet' | ChannelName | 'title' | 'automatic';
 
 /**
  * these are the default options for the plot marks that can be set using
@@ -853,20 +855,6 @@ export type PlotDefaults = {
      */
     colorScheme: ColorScheme;
     categoricalColorScheme: ColorScheme | string[];
-    implicitMarks: {
-        /**
-         * add grid to plots by default
-         */
-        grid: boolean;
-        /**
-         * add axes to plots by default
-         */
-        axes: boolean;
-        /**
-         * add frame to plots by default
-         */
-        frame: boolean;
-    };
     /**
      * fallback color to be used for null/NA
      */
@@ -924,16 +912,16 @@ export type PlotDefaults = {
         Omit<
             AxisXMarkProps,
             'data' | 'facet' | ChannelName | 'facetAnchor' | 'labelAnchor' | 'anchor'
-        >
+        > & { implicit: boolean }
     >;
     /**
      * default props for axisX marks
      */
-    axisX: Partial<Omit<AxisXMarkProps, IgnoreDefaults>>;
+    axisX: Partial<Omit<AxisXMarkProps, IgnoreDefaults> & { implicit: boolean }>;
     /**
      * default props for axisY marks
      */
-    axisY: Partial<Omit<AxisYMarkProps, IgnoreDefaults>>;
+    axisY: Partial<Omit<AxisYMarkProps, IgnoreDefaults> & { implicit: boolean }>;
     /**
      * default props for bar marks, applied to both barX and barY marks
      */
@@ -969,7 +957,7 @@ export type PlotDefaults = {
     /**
      * default props for frame marks
      */
-    frame: Partial<FrameMarkProps>;
+    frame: Partial<FrameMarkProps & { implicit: boolean }>;
     /**
      * default props for geo marks
      */
@@ -981,15 +969,15 @@ export type PlotDefaults = {
     /**
      * default props for grid marks, applied to both gridX and gridY marks
      */
-    grid: Partial<Omit<AxisXMarkProps, IgnoreDefaults>>;
+    grid: Partial<Omit<GridXMarkProps, IgnoreDefaults> & { implicit: boolean }>;
     /**
      * default props for gridX marks
      */
-    gridX: Partial<Omit<AxisXMarkProps, IgnoreDefaults>>;
+    gridX: Partial<Omit<GridXMarkProps, IgnoreDefaults> & { implicit: boolean }>;
     /**
      * default props for gridY marks
      */
-    gridY: Partial<Omit<AxisYMarkProps, IgnoreDefaults>>;
+    gridY: Partial<Omit<GridYMarkProps, IgnoreDefaults> & { implicit: boolean }>;
     /**
      * default props for line marks
      */

diff --git a/src/routes/features/defaults/+page.md b/src/routes/features/defaults/+page.md
@@ -66,16 +66,21 @@ SveltePlot is also relying on CSS variables.
 
     let { penguins } = $derived(page.data.data);
     setContext('svelteplot/defaults', {
-        dotRadius: 5,
-        tickSize: 0,
-        frame: true,
-        grid: true,
+        axis: {
+            tickSize: 0,
+            tickPadding: 5
+        },
+        frame: { implicit: true },
+        grid: { implicit: true },
         inset: 15,
         categoricalColorScheme: [
             'var(--svp-red)',
             'var(--svp-blue)',
             'var(--svp-green)'
-        ]
+        ],
+        dot: {
+            r: 5
+        }
     });
 </script>
 
@@ -92,12 +97,21 @@ SveltePlot is also relying on CSS variables.
 ```svelte
 <script>
     setContext('svelteplot/defaults', {
-        dotRadius: 5,
-        tickSize: 0,
-        frame: true,
-        grid: true,
+        axis: {
+            tickSize: 0,
+            tickPadding: 5
+        },
+        frame: { implicit: true },
+        grid: { implicit: true },
         inset: 15,
-        categoricalColorScheme: ['red', 'blue', 'green']
+        categoricalColorScheme: [
+            'var(--svp-red)',
+            'var(--svp-blue)',
+            'var(--svp-green)'
+        ],
+        dot: {
+            r: 5
+        }
     });
 </script>