svelteplot 0.2.10 → 0.3.0

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,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,7 +95,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 +103,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/BoxX.svelte

@@ -1,23 +1,39 @@
 <!-- @component
     Creates a horizontal box plot for visualizing data distribution with quartiles and outliers
 -->
+<script module lang="ts">
+    export type BoxXMarkProps = BoxYMarkProps;
+</script>
+
 <script lang="ts">
     import GroupMultiple from './helpers/GroupMultiple.svelte';
-    import type { BoxProps } from './BoxY.svelte';
+    import type { BoxYMarkProps } from './BoxY.svelte';
     import { BarX, TickX, RuleY, Dot, groupY } from '../index.js';
     import { resolveChannel } from '../helpers/resolve.js';
+    import { getContext } from 'svelte';
+    import type { PlotDefaults } from '../types.js';
 
-    let {
+    let markProps: BoxXMarkProps = $props();
+    const DEFAULTS = {
+        tickMedian: true,
+        tickMinMax: false,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').box,
+        ...getContext<PlotDefaults>('svelteplot/_defaults').boxX
+    };
+    const {
         data = [{}],
-        x,
-        y,
-        rule,
         bar,
-        tickMedian = true,
-        tickMinMax = false,
+        rule,
+        tickMedian,
+        tickMinMax,
         dot,
-        class: className = null
-    }: BoxProps = $props();
+        x,
+        y,
+        class: className = ''
+    }: BoxXMarkProps = $derived({
+        ...DEFAULTS,
+        ...markProps
+    });
 
     const { data: grouped } = $derived(
         groupY(

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

@@ -1,5 +1,6 @@
-import type { BoxProps } from './BoxY.svelte';
+export type BoxXMarkProps = BoxYMarkProps;
+import type { BoxYMarkProps } from './BoxY.svelte';
 /** Creates a horizontal box plot for visualizing data distribution with quartiles and outliers */
-declare const BoxX: import("svelte").Component<BoxProps, {}, "">;
+declare const BoxX: import("svelte").Component<BoxYMarkProps, {}, "">;
 type BoxX = ReturnType<typeof BoxX>;
 export default BoxX;