svelteplot 0.2.9 → 0.2.10-pr-110.1

package/README.md

@@ -1,6 +1,6 @@
 # SveltePlot
 
-![Tests](https://github.com/svelteplot/svelteplot/actions/workflows/test.yml/badge.svg)
+![License](https://img.shields.io/npm/l/svelteplot.svg) ![Tests](https://github.com/svelteplot/svelteplot/actions/workflows/test.yml/badge.svg)
 
 SveltePlot is a visualization framework based on the [layered grammar of graphics](https://vita.had.co.nz/papers/layered-grammar.html) ideas. It's API is heavily inspired by [Observable Plot](https://github.com/observablehq/plot). Created by Gregor Aisch.
 

package/dist/Mark.svelte

@@ -56,7 +56,7 @@
 
     const channelsWithFacets: ScaledChannelName[] = $derived([...channels, 'fx', 'fy']);
 
-    const { addMark, updateMark, updatePlotState, removeMark, getTopLevelFacet, getPlotState } =
+    const { addMark, removeMark, getTopLevelFacet, getPlotState } =
         getContext<PlotContext>('svelteplot');
 
     const plot = $derived(getPlotState());
@@ -258,16 +258,17 @@
                 if (options?.[channel] != null && out[channel] === undefined) {
                     // resolve value
                     const value = row[channel];
-
                     const scaled = usedScales[channel]
                         ? scale === 'x'
                             ? projectX(channel as 'x' | 'x1' | 'x2', plot.scales, value)
                             : scale === 'y'
                               ? projectY(channel as 'y' | 'y1' | 'y1', plot.scales, value)
-                              : plot.scales[scale].fn(value)
+                              : scale === 'color' && !isValid(value)
+                                ? plot.options.color.unknown
+                                : plot.scales[scale].fn(value)
                         : value;
 
-                    out.valid = out.valid && isValid(value);
+                    out.valid = out.valid && (scale === 'color' || isValid(value));
 
                     // apply dx/dy transform
                     out[channel] =

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,
@@ -117,7 +118,7 @@
             scales,
             ...restProps
         })}
-            <svelte:boundary onerror={(err) => console.warn(err)}>
+            <svelte:boundary onerror={(err) => console.error(err)}>
                 <!-- implicit axes -->
                 {#if !hasProjection && !hasExplicitAxisX}
                     {#if options.axes && (options.x.axis === 'top' || options.x.axis === 'both')}

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: '#cccccc',
-        dotRadius: 3,
-        frame: false,
-        axes: true,
-        grid: false,
+        unknown: '#cccccc99',
+
         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',
@@ -450,7 +467,7 @@
                 padding: 0,
                 align: 0
             },
-            color: { type: 'auto' },
+            color: { type: 'auto', unknown: DEFAULTS.unknown },
             length: { type: 'linear' },
             symbol: { type: 'ordinal' },
             fx: { type: 'band', axis: 'top' },

package/dist/helpers/colors.d.ts

@@ -6,7 +6,7 @@ type SchemeGetter = (n: number) => readonly string[];
 export declare function isOrdinalScheme(scheme: ColorScheme): boolean;
 export declare function ordinalScheme(scheme: string): SchemeGetter | undefined;
 export declare function ordinalRange(scheme: string, length: number): readonly string[] | undefined;
-export declare function maybeBooleanRange(domain: boolean[], scheme?: string): unknown[] | undefined;
+export declare function maybeBooleanRange(domain: boolean[], scheme?: string): any[] | undefined;
 export declare function isQuantitativeScheme(scheme: string): boolean;
 export declare function quantitativeScheme(scheme: string): typeof interpolateBrBG | undefined;
 export declare function isDivergingScheme(scheme: string): boolean;

package/dist/helpers/index.d.ts

@@ -3,8 +3,8 @@ import type { Snippet } from 'svelte';
 /**
  * Returns first argument that is not null or undefined
  */
-export declare function coalesce(...args: (RawValue | undefined | null)[]): RawValue | null;
-export declare function testFilter(datum: DataRecord, options: Record<ChannelName, ChannelAccessor>): string | number | boolean | symbol | Date | null;
+export declare function coalesce(...args: (RawValue | undefined | null)[]): any;
+export declare function testFilter(datum: DataRecord, options: Record<ChannelName, ChannelAccessor>): any;
 export declare function randomId(): string;
 export declare function isSnippet(value: unknown): value is Snippet;
 export declare function isValid(value: RawValue | undefined): value is number | Date | string;

package/dist/helpers/scales.d.ts

@@ -15,7 +15,7 @@ export declare function createScale<T extends ScaleOptions>(name: ScaleName, sca
     autoTitle?: undefined;
 } | {
     type: ScaleType;
-    domain: RawValue[] | [undefined, undefined];
+    domain: any;
     range: any;
     fn: any;
     skip: Map<ScaledChannelName, Set<symbol>>;

package/dist/helpers/scales.js

@@ -6,6 +6,7 @@ import { resolveProp, toChannelOption } from './resolve.js';
 import isDataRecord from './isDataRecord.js';
 import { createProjection } from './projection.js';
 import { maybeInterval } from './autoTicks.js';
+import { IS_SORTED } from '../transforms/sort.js';
 /**
  * compute the plot scales
  */
@@ -54,8 +55,9 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
         // we're deliberately checking for !== undefined and not for != null
         // since the explicit sort transforms like shuffle will set the
         // sort channel to null to we know that there's an explicit order
-        if (mark.channels.sort !== undefined)
+        if ((name === 'x' || name === 'y') && mark.options[IS_SORTED] != undefined) {
             sortOrdinalDomain = false;
+        }
         for (const channel of mark.channels) {
             // channelOptions can be passed as prop, but most often users will just
             // pass the channel accessor or constant value, so we may need to wrap
@@ -135,6 +137,12 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
             }
         }
     }
+    if ((name === 'x' || name === 'y') && scaleOptions.sort) {
+        sortOrdinalDomain = true;
+    }
+    if ((name === 'x' || name === 'y') && scaleOptions.sort === false) {
+        sortOrdinalDomain = false;
+    }
     // construct domain from data values
     const valueArr = [...dataValues.values(), ...(scaleOptions.domain || [])].filter((d) => d != null);
     const type = scaleOptions.type === 'auto'

package/dist/helpers/typeChecks.d.ts

@@ -1,10 +1,10 @@
 import type { RawValue } from '../types.js';
-export declare function isBooleanOrNull(v: RawValue): v is boolean;
+export declare function isBooleanOrNull(v: RawValue): boolean;
 export declare function isDate(v: RawValue): v is Date;
-export declare function isDateOrNull(v: RawValue | null | undefined): v is Date | null | undefined;
+export declare function isDateOrNull(v: RawValue | null | undefined): boolean;
 export declare function isNumberOrNull(v: RawValue | null | undefined): boolean;
 export declare function isNumberOrNullOrNaN(v: RawValue | null | undefined): boolean;
-export declare function isStringOrNull(v: RawValue | null | undefined): v is string | null | undefined;
+export declare function isStringOrNull(v: RawValue | null | undefined): boolean;
 export declare function isSymbolOrNull(v: RawValue | null | undefined): boolean;
-export declare function isColorOrNull(v: RawValue | null | undefined): boolean;
+export declare function isColorOrNull(v: RawValue | null | undefined): any;
 export declare function isOpacityOrNull(v: RawValue): boolean;

package/dist/marks/Area.svelte

@@ -29,6 +29,7 @@
     import { maybeCurve } from '../helpers/curves.js';
     import { isValid } from '../helpers/index.js';
     import AreaCanvas from './helpers/AreaCanvas.svelte';
+    import Anchor from './helpers/Anchor.svelte';
 
     import type {
         CurveName,
@@ -37,14 +38,23 @@
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
-        FacetContext,
         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());
@@ -113,32 +123,24 @@
         {:else}
             <GroupMultiple length={grouped.length}>
                 {#each grouped as areaData, i (i)}
-                    {#snippet el(datum: ScaledDataRecord)}
-                        {@const title = resolveProp(options.title, datum.datum, '')}
-                        {@const [style, styleClass] = resolveStyles(
-                            plot,
-                            datum,
-                            options,
-                            'fill',
-                            usedScales
-                        )}
-                        <path
-                            class={['svelteplot-area', className, styleClass]}
-                            clip-path={options.clipPath}
-                            d={areaPath(areaData)}
-                            {style}
-                            >{#if title}<title>{title}</title>{/if}</path>
-                    {/snippet}
+                    {@const datum = areaData[0]}
                     {#if areaData.length > 0}
-                        {#if options.href}
-                            <a
-                                href={resolveProp(options.href, areaData[0].datum, '')}
-                                target={resolveProp(options.target, areaData[0].datum, '_self')}>
-                                {@render el(areaData[0])}
-                            </a>
-                        {:else}
-                            {@render el(areaData[0])}
-                        {/if}
+                        <Anchor {options} {datum}>
+                            {@const title = resolveProp(options.title, datum.datum, '')}
+                            {@const [style, styleClass] = resolveStyles(
+                                plot,
+                                datum,
+                                options,
+                                'fill',
+                                usedScales
+                            )}
+                            <path
+                                class={['svelteplot-area', className, styleClass]}
+                                clip-path={options.clipPath}
+                                d={areaPath(areaData)}
+                                {style}
+                                >{#if title}<title>{title}</title>{/if}</path>
+                        </Anchor>
                     {/if}
                 {/each}
             </GroupMultiple>

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

@@ -25,16 +25,13 @@
         tickClass?: ConstantAccessor<string>;
         /** ticks is a shorthand for defining data, tickCount or interval */
         ticks?: number | string | RawValue[];
-    } & XOR<
-            {
-                /** approximate number of ticks to be generated */
-                tickCount?: number;
-            },
-            {
-                /** approximate number of pixels between generated ticks */
-                tickSpacing?: number;
-            }
-        >;
+        /** set to false or null to disable tick labels */
+        text: boolean | null;
+        /** approximate number of ticks to be generated */
+        tickCount?: number;
+        /** approximate number of pixels between generated ticks */
+        tickSpacing?: number;
+    };
 </script>
 
 <script lang="ts">
@@ -47,40 +44,45 @@
         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,
         class: className,
         tickCount = typeof magicTicks === 'number' ? magicTicks : undefined,
         tickSpacing,
+        text = true,
         ...options
-    }: AxisXMarkProps = $props();
+    }: AxisXMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -96,7 +98,7 @@
     const ticks: RawValue[] = $derived(
         data.length > 0
             ? // use custom tick values if user passed any as prop
-              data
+              Array.from(new Set(data))
             : // use custom scale tick values if user passed any as plot scale option
               autoTicks(
                   plot.scales.x.type,
@@ -220,6 +222,7 @@
             {tickPadding}
             {tickFontSize}
             {tickClass}
+            {text}
             {options}
             title={useTitle}
             {plot} />

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;
@@ -14,13 +13,13 @@ export type AxisXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paint
     tickClass?: ConstantAccessor<string>;
     /** ticks is a shorthand for defining data, tickCount or interval */
     ticks?: number | string | RawValue[];
-} & XOR<{
+    /** set to false or null to disable tick labels */
+    text: boolean | null;
     /** 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, {}, "">;