svelteplot 0.10.3 → 0.11.0

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

@@ -1,85 +1,158 @@
-import type { DataRecord, ChannelAccessor, LinkableMarkProps } from '../types';
-import { type WaffleOptions } from './helpers/waffle';
+import type { DataRecord, ChannelAccessor, LinkableMarkProps } from '../types/index.js';
+import { type WaffleOptions } from './helpers/waffle.js';
 declare function $$render<Datum extends DataRecord>(): {
     props: Partial<{
-        filter: import("../types").ConstantAccessor<boolean, Datum>;
+        filter: import("../types/index.js").ConstantAccessor<boolean, Datum>;
         facet: "auto" | "include" | "exclude";
         fx: ChannelAccessor<Datum>;
         fy: ChannelAccessor<Datum>;
-        dx: import("../types").ConstantAccessor<number, Datum>;
-        dy: import("../types").ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dx: import("../types/index.js").ConstantAccessor<number, Datum>;
+        dy: import("../types/index.js").ConstantAccessor<number, Datum>;
+        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
+        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
         fill: ChannelAccessor<Datum>;
-        fillOpacity: import("../types").ConstantAccessor<number, Datum>;
-        sort: ((a: import("../types").RawValue, b: import("../types").RawValue) => number) | {
+        fillOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
+        fontFamily: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: import("../types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontStyle: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: import("../types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: import("../types/index.js").ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: import("../types/index.js").ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
+        sort: ((a: import("../types/index.js").RawValue, b: import("../types/index.js").RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
-        } | import("../types").ConstantAccessor<import("../types").RawValue, Datum>;
+        } | import("../types/index.js").ConstantAccessor<import("../types/index.js").RawValue, Datum>;
         stroke: ChannelAccessor<Datum>;
-        strokeWidth: import("../types").ConstantAccessor<number, Datum>;
-        strokeOpacity: import("../types").ConstantAccessor<number, Datum>;
-        strokeLinejoin: import("../types").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
-        strokeLinecap: import("../types").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
-        strokeMiterlimit: import("../types").ConstantAccessor<number, Datum>;
+        strokeWidth: import("../types/index.js").ConstantAccessor<number, Datum>;
+        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Datum>;
+        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Datum>;
+        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Datum>;
+        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Datum>;
         opacity: ChannelAccessor<Datum>;
-        strokeDasharray: import("../types").ConstantAccessor<string, Datum>;
-        strokeDashoffset: import("../types").ConstantAccessor<number, Datum>;
-        mixBlendMode: import("../types").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Datum>;
+        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
+        blend: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
+        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: string;
-        imageFilter: import("../types").ConstantAccessor<string, Datum>;
-        shapeRendering: import("../types").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
-        paintOrder: import("../types").ConstantAccessor<string, Datum>;
-        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
+        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
+        paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;
+        onclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondblclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousedown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousemove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointercancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerdown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointermove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrag: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrop: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchmove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchcancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        oncontextmenu: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onwheel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
         class: string;
         style: string;
-        cursor: import("../types").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: import("../types/index.js").ConstantAccessor<string, Datum>;
     }> & LinkableMarkProps<Datum> & WaffleOptions<Datum> & {
+        /** the input data array */
         data?: Datum[];
         /**
-         * bound to a babd scale
+         * the horizontal position channel; bound to a band scale
          */
         x?: ChannelAccessor<Datum>;
         /**
-         * bound to a quantitative scale
+         * the vertical position channel; bound to a quantitative scale
          */
         y?: ChannelAccessor<Datum>;
         /**
-         * bound to a quantitative scale
+         * the starting vertical position; bound to a quantitative scale
          */
         y1?: ChannelAccessor<Datum>;
         /**
-         * bound to a quantitative scale
+         * the ending vertical position; bound to a quantitative scale
          */
         y2?: ChannelAccessor<Datum>;
     };

package/dist/marks/helpers/Anchor.svelte

@@ -1,21 +1,36 @@
 <script lang="ts" generics="Datum extends Record<string, any>">
     import { resolveProp } from '../../helpers/resolve.js';
-    import type { ConstantAccessor } from '../../types';
+    import type { ConstantAccessor } from '../../types/index.js';
 
     interface AnchorProps {
         datum?: Datum;
         options?: {
+            /**
+             * The URL or URL fragment the hyperlink points to.
+             */
             href?: ConstantAccessor<string, Datum>;
+            /**
+             * Where to display the linked URL, e.g. _self, _blank
+             */
             target?: ConstantAccessor<string, Datum>;
+            /**
+             * The relationship of the target object to the link object.
+             */
             rel?: ConstantAccessor<string, Datum>;
+            /**
+             * A MIME type for the linked URL.
+             */
             type?: ConstantAccessor<string, Datum>;
+            /**
+             * Instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file.
+             */
             download?: ConstantAccessor<string, Datum>;
             [key: string]: any;
         };
         children?: () => any;
     }
 
-    let { datum = {}, options = {}, children }: AnchorProps = $props();
+    let { datum = {} as Datum, options = {}, children }: AnchorProps = $props();
 
     const href = $derived(resolveProp(options.href, datum, null));
     const target = $derived(resolveProp(options.target, datum, null));

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

@@ -1,12 +1,27 @@
-import type { ConstantAccessor } from '../../types';
+import type { ConstantAccessor } from '../../types/index.js';
 declare function $$render<Datum extends Record<string, any>>(): {
     props: {
         datum?: Datum;
         options?: {
+            /**
+             * The URL or URL fragment the hyperlink points to.
+             */
             href?: ConstantAccessor<string, Datum>;
+            /**
+             * Where to display the linked URL, e.g. _self, _blank
+             */
             target?: ConstantAccessor<string, Datum>;
+            /**
+             * The relationship of the target object to the link object.
+             */
             rel?: ConstantAccessor<string, Datum>;
+            /**
+             * A MIME type for the linked URL.
+             */
             type?: ConstantAccessor<string, Datum>;
+            /**
+             * Instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file.
+             */
             download?: ConstantAccessor<string, Datum>;
             [key: string]: any;
         };

package/dist/marks/helpers/AreaCanvas.svelte

@@ -47,13 +47,13 @@
                     const firstPoint = group[0];
                     if (!firstPoint || !firstPoint.valid) continue;
 
-                    let { fill, stroke, ...restStyles } = resolveScaledStyleProps(
+                    const { fill, stroke, ...restStyles } = resolveScaledStyleProps(
                         firstPoint.datum,
                         mark.options,
                         usedScales,
                         plot,
                         'fill'
-                    );
+                    ) as { fill: string; stroke: string } & Record<string, unknown>;
 
                     const opacity = maybeOpacity(restStyles['opacity']);
                     const fillOpacity = maybeOpacity(restStyles['fill-opacity']);
@@ -65,23 +65,23 @@
                         0
                     ) as number;
 
-                    fill = resolveColor(fill || 'currentColor', canvas);
-                    stroke = resolveColor(stroke, canvas);
+                    const fillStyle = resolveColor(fill || 'currentColor', canvas);
+                    const strokeStyle = resolveColor(stroke, canvas);
 
                     // Start drawing the area
                     context.beginPath();
                     areaPath(group);
 
                     // Fill the area
-                    if (fill && fill !== 'none') {
-                        context.fillStyle = fill;
+                    if (fillStyle && fillStyle !== 'none') {
+                        context.fillStyle = fillStyle;
                         context.globalAlpha = opacity * fillOpacity;
                         context.fill();
                     }
 
                     // Stroke the area outline if strokeWidth > 0
-                    if (stroke && stroke !== 'none' && strokeWidth > 0) {
-                        context.strokeStyle = stroke;
+                    if (strokeStyle && strokeStyle !== 'none' && strokeWidth > 0) {
+                        context.strokeStyle = strokeStyle;
                         context.lineWidth = strokeWidth;
                         context.globalAlpha = opacity * strokeOpacity;
                         context.stroke();

package/dist/marks/helpers/BaseAxisX.svelte

@@ -5,42 +5,38 @@
     import removeIdenticalLines from '../../helpers/removeIdenticalLines.js';
     import type {
         AutoMarginStores,
-        ChannelAccessor,
         ConstantAccessor,
         PlotState,
+        PlotScaleFunction,
         RawValue,
         ScaledDataRecord,
         ScaleType
     } from '../../types/index.js';
+    import type { AxisTickDatum, AxisXTick, BaseAxisXOptions } from '../../types/axes.js';
     import { resolveProp, resolveStyles } from '../../helpers/resolve.js';
     import { max } from 'd3-array';
     import { randomId, testFilter } from '../../helpers/index.js';
-    import { INDEX } from '../../constants';
-    import { RAW_VALUE } from '../../transforms/recordize';
-    import wordwrap from '../../helpers/wordwrap';
+    import { INDEX } from '../../constants.js';
+    import { RAW_VALUE } from '../../transforms/recordize.js';
+    import wordwrap from '../../helpers/wordwrap.js';
+    type AxisDatum = AxisTickDatum<typeof RAW_VALUE, typeof INDEX>;
+    type AxisTick = AxisXTick<AxisDatum>;
 
     type BaseAxisXProps = {
-        scaleFn: (d: RawValue) => number;
+        scaleFn: PlotScaleFunction;
         scaleType: ScaleType;
         ticks: RawValue[];
         tickFormat: (d: RawValue, i: number, ticks: RawValue[]) => string | string[];
-        anchor: 'top' | 'bottom';
-        tickSize: number;
-        tickPadding: number;
-        tickFontSize: ConstantAccessor<number>;
-        tickClass: ConstantAccessor<string>;
+        anchor?: 'top' | 'bottom';
+        tickSize?: number;
+        tickPadding?: number;
+        tickFontSize?: ConstantAccessor<number>;
+        tickClass?: ConstantAccessor<string>;
         marginTop: number;
         height: number;
-        title: string;
-        options: {
-            dx: ConstantAccessor<number>;
-            dy: ConstantAccessor<number>;
-            filter: ChannelAccessor;
-            wordwrap: boolean;
-            textAnchor: ConstantAccessor<'start' | 'middle' | 'end'> | 'auto';
-            removeDuplicateTicks: boolean;
-        };
-        text: boolean;
+        title: string | null;
+        options: BaseAxisXOptions;
+        text?: boolean | null;
         plot: PlotState;
         class: string | undefined;
     };
@@ -50,16 +46,16 @@
         scaleType,
         ticks,
         tickFormat,
-        anchor,
-        tickSize,
-        tickPadding,
-        tickFontSize,
-        tickClass,
+        anchor = 'bottom',
+        tickSize = 6,
+        tickPadding = 3,
+        tickFontSize = 11,
+        tickClass = null,
         marginTop,
         height,
         options,
         plot,
-        title,
+        title = null,
         class: className = 'axis-x',
         text = true
     }: BaseAxisXProps = $props();
@@ -74,7 +70,7 @@
               ? wordwrap(tick, {
                     maxLineWidth: bandWidth * 0.9,
                     minCharactersPerLine: 4,
-                    fontSize: +resolveProp(tickFontSize, {}, 11),
+                    fontSize: Number(resolveProp(tickFontSize, null, 11) ?? 11),
                     monospace: false
                 })
               : [tick];
@@ -92,23 +88,24 @@
     const { autoMarginTop, autoMarginBottom, autoMarginLeft, autoMarginRight } =
         getContext<AutoMarginStores>('svelteplot/autoMargins');
 
-    let tickTextElements = $state([] as SVGTextElement[]);
+    let tickTextElements = $state([] as (SVGTextElement | undefined)[]);
+    const toScaledDatum = (tick: AxisTick) => ({ datum: tick }) as unknown as ScaledDataRecord;
 
     const positionedTicks = $derived.by(() => {
         let tickObjects = removeIdenticalLines(
             ticks.map((tick, i) => {
-                const datum = { [RAW_VALUE]: tick, [INDEX]: i };
+                const datum: AxisDatum = { [RAW_VALUE]: tick, [INDEX]: i };
                 return {
                     ...datum,
                     hidden: false,
-                    dx: +resolveProp(options.dx, datum, 0),
-                    dy: +resolveProp(options.dy, datum, 0),
-                    x: scaleFn(tick) + (scaleType === 'band' ? scaleFn.bandwidth() * 0.5 : 0),
+                    dx: Number(resolveProp(options.dx, datum, 0) ?? 0),
+                    dy: Number(resolveProp(options.dy, datum, 0) ?? 0),
+                    x: scaleFn(tick) + (isBandScale ? scaleFn.bandwidth() * 0.5 : 0),
                     text: splitTick(tickFormat(tick, i, ticks)),
                     element: null as SVGTextElement | null
                 };
             })
-        );
+        ) as AxisTick[];
         const T = tickObjects.length;
         if (text) {
             for (let i = 0; i < T; i++) {
@@ -123,7 +120,7 @@
                 }
             }
         }
-        return tickObjects as ScaledDataRecord[];
+        return tickObjects;
     });
 
     $effect(() => {
@@ -153,7 +150,7 @@
                             return tickTextElements[i].getBoundingClientRect().height;
                         return 0;
                     }) as number[]
-                )
+                ) ?? 0
             ) +
             Math.max(0, tickPadding + tickSize) +
             (title ? 15 : 0);
@@ -182,7 +179,7 @@
     {#each positionedTicks as tick, t (tick[RAW_VALUE])}
         {#if testFilter(tick, options) && !tick.hidden}
             {@const tickClass_ = resolveProp(tickClass, tick)}
-            {@const tickFontSize_ = +resolveProp(tickFontSize, tick, 10)}
+            {@const tickFontSize_ = Number(resolveProp(tickFontSize, tick, 10) ?? 10)}
             <g
                 class="tick {tickClass_ || ''}"
                 transform="translate({tick.x + tick.dx}, {tickY + tick.dy})"
@@ -190,10 +187,10 @@
                 {#if tickSize}
                     {@const [tickLineStyle, tickLineClass] = resolveStyles(
                         plot,
-                        { datum: tick },
+                        toScaledDatum(tick),
                         options,
                         'stroke',
-                        { x: true },
+                        { x: true } as any,
                         true
                     )}
                     <line
@@ -204,14 +201,14 @@
 
                 {#if text}
                     {@const textLines = tick.text}
-                    {@const prevTextLines = t && positionedTicks[t - 1].text}
+                    {@const prevTextLines = t > 0 ? positionedTicks[t - 1].text : null}
 
                     {@const moveDown =
                         (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize_ * 0.35 : 0)) *
                         (anchor === 'bottom' ? 1 : -1)}
                     {@const [textStyle, textClass] = resolveStyles(
                         plot,
-                        { datum: tick },
+                        toScaledDatum(tick),
                         {
                             fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
                             ...options,
@@ -228,7 +225,7 @@
                             stroke: null
                         },
                         'fill',
-                        { x: true },
+                        { x: true } as any,
                         true
                     )}
                     <text

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

@@ -1,26 +1,20 @@
-import type { ChannelAccessor, ConstantAccessor, PlotState, RawValue, ScaleType } from '../../types/index.js';
+import type { ConstantAccessor, PlotState, PlotScaleFunction, RawValue, ScaleType } from '../../types/index.js';
+import type { BaseAxisXOptions } from '../../types/axes.js';
 type BaseAxisXProps = {
-    scaleFn: (d: RawValue) => number;
+    scaleFn: PlotScaleFunction;
     scaleType: ScaleType;
     ticks: RawValue[];
     tickFormat: (d: RawValue, i: number, ticks: RawValue[]) => string | string[];
-    anchor: 'top' | 'bottom';
-    tickSize: number;
-    tickPadding: number;
-    tickFontSize: ConstantAccessor<number>;
-    tickClass: ConstantAccessor<string>;
+    anchor?: 'top' | 'bottom';
+    tickSize?: number;
+    tickPadding?: number;
+    tickFontSize?: ConstantAccessor<number>;
+    tickClass?: ConstantAccessor<string>;
     marginTop: number;
     height: number;
-    title: string;
-    options: {
-        dx: ConstantAccessor<number>;
-        dy: ConstantAccessor<number>;
-        filter: ChannelAccessor;
-        wordwrap: boolean;
-        textAnchor: ConstantAccessor<'start' | 'middle' | 'end'> | 'auto';
-        removeDuplicateTicks: boolean;
-    };
-    text: boolean;
+    title: string | null;
+    options: BaseAxisXOptions;
+    text?: boolean | null;
     plot: PlotState;
     class: string | undefined;
 };