svelteplot 0.5.3-pr-255.1 → 0.5.3-pr-255.2

package/dist/Plot.svelte

@@ -12,7 +12,7 @@
 <script lang="ts">
     import Plot from './core/Plot.svelte';
 
-    import type { PlotOptions } from './types/index.js';
+    import type { PlotOptions, RawValue, ScaleOptions } from './types/index.js';
 
     // implicit marks
     import AxisX from './marks/AxisX.svelte';
@@ -62,12 +62,22 @@
     const scales = $derived(
         Object.fromEntries(
             ['x', 'y', 'r', 'color', 'opacity', 'symbol', 'length', 'fx', 'fy'].map((scale) => {
-                const scaleOpts = restOptions[scale] || {};
+                const scaleOpts = maybeScaleOptions(restOptions[scale]);
                 const scaleFn = scaleOpts.scale || (scale === 'color' ? autoScaleColor : autoScale);
                 return [scale, { ...scaleOpts, scale: scaleFn }];
             })
         )
     );
+
+    function maybeScaleOptions(
+        scaleOptions: undefined | false | RawValue[] | object
+    ): Partial<ScaleOptions> | undefined {
+        if (scaleOptions === false) return { axis: false };
+        if (Array.isArray(scaleOptions)) return { domain: scaleOptions };
+        return scaleOptions || {};
+    }
+
+    $inspect({ scales });
 </script>
 
 {#snippet header()}

package/dist/core/Plot.svelte

@@ -114,7 +114,7 @@
         class: className = '',
         css = DEFAULTS.css,
         width: fixedWidth,
-        ...initialOpts
+        ...initialOptions
     }: Partial<PlotOptions> = $props();
 
     let width = $state(DEFAULTS.initialWidth);
@@ -164,7 +164,7 @@
     );
 
     const explicitDomains = $derived(
-        new Set(SCALES.filter((scale) => !!initialOpts[scale]?.domain))
+        new Set(SCALES.filter((scale) => !!initialOptions[scale]?.domain))
     );
 
     // one-dimensional plots have different automatic margins and heights
@@ -173,12 +173,12 @@
     // construct the plot options from the user-defined options (top-level props) as well
     // as extending them from smart context-aware defaults
     const plotOptions = $derived(
-        extendPlotOptions(initialOpts, {
+        extendPlotOptions(initialOptions, {
             explicitScales,
             explicitDomains,
-            hasProjection: !!initialOpts.projection,
-            margin: initialOpts.margin,
-            inset: initialOpts.inset
+            hasProjection: !!initialOptions.projection,
+            margin: initialOptions.margin,
+            inset: initialOptions.inset
         })
     );
 
@@ -369,7 +369,7 @@
             {},
             { sortOrdinalDomains: DEFAULTS.sortOrdinalDomains },
             smartDefaultPlotOptions(opts),
-            initialOpts
+            initialOptions
         );
     }
 

package/dist/marks/helpers/BaseAxisX.svelte

@@ -88,7 +88,7 @@
     // generate id used for registering margins
     const id = randomId();
 
-    const { autoMarginTop, autoMarginBottom } =
+    const { autoMarginTop, autoMarginBottom, autoMarginLeft, autoMarginRight } =
         getContext<AutoMarginStores>('svelteplot/autoMargins');
 
     let tickTextElements = $state([] as SVGTextElement[]);
@@ -125,6 +125,14 @@
         return tickObjects as ScaledDataRecord[];
     });
 
+    $effect(() => {
+        // just add some minimal horizontal margins for axis ticks
+        untrack(() => $autoMarginLeft);
+        untrack(() => $autoMarginRight);
+        $autoMarginLeft.set(id, 5);
+        $autoMarginRight.set(id, 5);
+    });
+
     $effect(() => {
         untrack(() => [$autoMarginTop, $autoMarginBottom]);
         if (!text) return;
@@ -163,6 +171,8 @@
         return () => {
             if ($autoMarginBottom.has(id)) $autoMarginBottom.delete(id);
             if ($autoMarginTop.has(id)) $autoMarginTop.delete(id);
+            if ($autoMarginLeft.has(id)) $autoMarginLeft.delete(id);
+            if ($autoMarginRight.has(id)) $autoMarginRight.delete(id);
         };
     });
 </script>

package/dist/types/plot.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentProps } from 'svelte';
 import type { ColorScheme } from './colorScheme.js';
 import type { GeoProjection } from 'd3-geo';
-import type { ChannelAccessor, ChannelName, ColorScaleOptions, DataRecord, LegendScaleOptions, PlotScales, ScaleOptions, XScaleOptions, YScaleOptions } from './index.js';
+import type { ChannelAccessor, ChannelName, ColorScaleOptions, DataRecord, LegendScaleOptions, PlotScales, RawValue, ScaleOptions, XScaleOptions, YScaleOptions } from './index.js';
 import type { Snippet } from 'svelte';
 import type { Area, AreaX, AreaY, Arrow, AxisX, AxisY, BarX, BarY, BoxX, BoxY, Brush, BrushX, BrushY, Cell, DifferenceY, Dot, Frame, Geo, Graticule, GridX, GridY, Image, Line, Link, Pointer, Rect, RectX, RectY, RuleX, RuleY, Sphere, Spike, Text, TickX, TickY, Vector } from '../marks/index.js';
 import type WaffleX from '../marks/WaffleX.svelte';
@@ -423,11 +423,11 @@ export type PlotOptions = {
     /**
      * Options for the shared x scale.
      */
-    x: Partial<XScaleOptions>;
+    x: Partial<XScaleOptions> | false | RawValue[];
     /**
      * Options for the shared y scale
      */
-    y: Partial<YScaleOptions>;
+    y: Partial<YScaleOptions> | false | RawValue[];
     /**
      * Options for the shared radius scale
      */
@@ -436,8 +436,8 @@ export type PlotOptions = {
     opacity: Partial<ScaleOptions>;
     symbol: Partial<LegendScaleOptions>;
     length: Partial<ScaleOptions>;
-    fx: Partial<XScaleOptions>;
-    fy: Partial<YScaleOptions>;
+    fx: Partial<XScaleOptions> | false | RawValue[];
+    fy: Partial<YScaleOptions> | false | RawValue[];
     children: Snippet<[
         {
             width: number;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.5.3-pr-255.1",
+    "version": "0.5.3-pr-255.2",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",