svelteplot 0.9.0-pr-311.5 → 0.9.0-pr-312.0

package/dist/core/FacetAxes.svelte

@@ -21,10 +21,16 @@
 
     // create band scales for fx and fy
     const facetXScale = $derived(
-        scaleBand().paddingInner(0.1).domain(fxValues).rangeRound([0, plot.plotWidth])
+        scaleBand()
+            .paddingInner(plot.options.fx?.paddingInner ?? plot.options.fx?.padding ?? 0.1)
+            .domain(fxValues)
+            .rangeRound([0, plot.plotWidth])
     );
     const facetYScale = $derived(
-        scaleBand().paddingInner(0.1).domain(fyValues).rangeRound([0, plot.plotHeight])
+        scaleBand()
+            .paddingInner(plot.options.fy?.paddingInner ?? plot.options.fy?.padding ?? 0.1)
+            .domain(fyValues)
+            .rangeRound([0, plot.plotHeight])
     );
 </script>
 
@@ -32,13 +38,17 @@
 {#if fxValues.length > 1 && plot.options.fx.axis}
     <g transform="translate({plot.options.marginLeft}, 0)">
         <BaseAxisX
+            class="facet-axis-x"
             scaleFn={facetXScale}
             scaleType="band"
             ticks={fxValues}
             tickFormat={plot.options.fx.tickFormat || ((d) => d)}
             tickFontSize={11}
             tickSize={0}
-            tickPadding={5}
+            tickPadding={plot.options.x.axis === plot.options.fx.axis ||
+            plot.options.x.axis === 'both'
+                ? 25
+                : 5}
             anchor={plot.options.fx.axis}
             options={plot.options.fx.axisOptions || {}}
             {...plot.options.fx.axisProps || {}}
@@ -50,6 +60,7 @@
 {#if fyValues.length > 1 && plot.options.fy.axis}
     <g transform="translate(0, {plot.options.marginTop})">
         <BaseAxisY
+            class="facet-axis-y"
             scaleFn={facetYScale}
             scaleType="band"
             ticks={fyValues}

package/dist/core/FacetGrid.svelte

@@ -9,10 +9,11 @@
     import { scaleBand } from 'd3-scale';
     import Facet from './Facet.svelte';
     import { getEmptyFacets } from '../helpers/facets.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
-    const { getPlotState, updateDimensions } = getContext<PlotContext>('svelteplot');
+    const { updateDimensions } = getContext<PlotContext>('svelteplot');
     // we need the plot context for the overall width & height
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     let {
         children,
@@ -36,13 +37,23 @@
     // create band scales for fx and fy
     const facetXScale = $derived(
         scaleBand()
-            .paddingInner(fxValues.length > 1 ? 0.1 : 0)
+            .paddingOuter(0)
+            .paddingInner(
+                fxValues.length > 1
+                    ? (plot.options.fx?.paddingInner ?? plot.options.fx?.padding ?? 0.1)
+                    : 0
+            )
             .domain(fxValues)
             .rangeRound([0, plot.plotWidth])
     );
     const facetYScale = $derived(
         scaleBand()
-            .paddingInner(fyValues.length > 1 ? 0.1 : 0)
+            .paddingOuter(0)
+            .paddingInner(
+                fyValues.length > 1
+                    ? (plot.options.fy?.paddingInner ?? plot.options.fy?.padding ?? 0.1)
+                    : 0
+            )
             .domain(fyValues)
             .rangeRound([0, plot.plotHeight])
     );

package/dist/marks/helpers/BaseAxisX.svelte

@@ -42,6 +42,7 @@
         };
         text: boolean;
         plot: PlotState;
+        class: string;
     };
 
     let {
@@ -59,6 +60,7 @@
         options,
         plot,
         title,
+        class: className = 'axis-x',
         text = true
     }: BaseAxisXProps = $props();
 
@@ -176,7 +178,7 @@
     });
 </script>
 
-<g class="axis-x">
+<g class={className}>
     {#each positionedTicks as tick, t (tick[RAW_VALUE])}
         {#if testFilter(tick, options) && !tick.hidden}
             {@const tickClass_ = resolveProp(tickClass, tick)}

package/dist/marks/helpers/BaseAxisX.svelte.d.ts

@@ -22,6 +22,7 @@ type BaseAxisXProps = {
     };
     text: boolean;
     plot: PlotState;
+    class: string;
 };
 declare const BaseAxisX: import("svelte").Component<BaseAxisXProps, {}, "">;
 type BaseAxisX = ReturnType<typeof BaseAxisX>;

package/dist/marks/helpers/BaseAxisY.svelte

@@ -36,6 +36,7 @@
         };
         plot: PlotState;
         text: boolean | null;
+        class: string;
     };
 
     let {
@@ -54,7 +55,8 @@
         title,
         plot,
         options,
-        text = true
+        text = true,
+        class: className = 'axis-y'
     }: BaseAxisYProps = $props();
 
     const LINE_ANCHOR = {
@@ -153,7 +155,7 @@
     });
 </script>
 
-<g class="axis-y">
+<g class={className}>
     {#each positionedTicks as tick, t (tick[RAW_VALUE])}
         {#if testFilter(tick, options) && !tick.hidden}
             {@const tickClass_ = resolveProp(tickClass, tick)}

package/dist/marks/helpers/BaseAxisY.svelte.d.ts

@@ -20,6 +20,7 @@ type BaseAxisYProps = {
     };
     plot: PlotState;
     text: boolean | null;
+    class: string;
 };
 declare const BaseAxisY: import("svelte").Component<BaseAxisYProps, {}, "">;
 type BaseAxisY = ReturnType<typeof BaseAxisY>;

package/dist/types/scale.d.ts

@@ -12,17 +12,17 @@ export type ScaleOptions = {
      * Set a custom domain for the scale instead of auto-computing the domain
      * from the mark data channels.
      */
-    domain?: RawValue[];
+    domain: RawValue[];
     /**
      * Set a custom range for the scale.
      */
-    range?: RawValue[];
+    range: RawValue[];
     /**
      * Reverse the scale.
      */
     reverse: boolean;
-    label?: string | false;
-    interval?: string | number;
+    label: string | false;
+    interval: string | number;
     clamp: boolean;
     /**
      * Extend the domain to nice round numbers (applicable to quantitative scales only)
@@ -46,23 +46,23 @@ export type ScaleOptions = {
     /**
      * set the inner padding for band scales
      */
-    paddingInner?: number;
+    paddingInner: number;
     /**
      * set the outer padding for band scales
      */
-    paddingOuter?: number;
-    insetLeft?: number;
-    insetRight?: number;
-    insetTop?: number;
-    insetBottom?: number;
-    ticks?: (number | Date)[];
+    paddingOuter: number;
+    insetLeft: number;
+    insetRight: number;
+    insetTop: number;
+    insetBottom: number;
+    ticks: (number | Date)[];
     tickSpacing: number;
-    base?: number;
-    sort?: ChannelAccessor | ((a: RawValue, b: RawValue) => number) | {
+    base: number;
+    sort: ChannelAccessor | ((a: RawValue, b: RawValue) => number) | {
         channel: string;
         order: 'ascending' | 'descending';
     };
-    constant?: number;
+    constant: number;
 };
 export type ColorScaleOptions = ScaleOptions & {
     legend: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.9.0-pr-311.5",
+    "version": "0.9.0-pr-312.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",