svelteplot 0.2.6-next.5 → 0.2.6-pr-67.0

package/dist/Mark.svelte

@@ -286,7 +286,7 @@
 
 {#if errors.length}
     <text transform="translate(10,10)">
-        {#each errors as error, i}
+        {#each errors as error, i (i)}
             <tspan x="0" dy={i ? 14 : 0}>{error}</tspan>
         {/each}
     </text>

package/dist/Plot.svelte

@@ -152,7 +152,7 @@
             })}
             {#snippet failed(error, reset)}
                 <text class="error" transform="translate(10,10)">
-                    {#each error.message.split('\n') as line, i}
+                    {#each error.message.split('\n') as line, i (i)}
                         <tspan x="0" dy={i ? 14 : 0}>{line}</tspan>
                     {/each}
                 </text>{/snippet}

package/dist/core/FacetGrid.svelte

@@ -55,8 +55,8 @@
     });
 </script>
 
-{#each fxValues as facetX, i}
-    {#each fyValues as facetY, j}
+{#each fxValues as facetX, i (i)}
+    {#each fyValues as facetY, j (j)}
         <g
             class="facet"
             fill="currentColor"

package/dist/core/Plot.svelte

@@ -232,6 +232,7 @@
     let facetWidth: number | null = $state(null);
     let facetHeight: number | null = $state(null);
 
+    // eslint-disable-next-line svelte/prefer-writable-derived
     let plotState: PlotState = $state(computePlotState());
 
     $effect(() => {

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/resolve.js

@@ -13,7 +13,9 @@ export function resolveProp(accessor, datum, _defaultValue = null) {
             ? accessor()
             : accessor(datum[RAW_VALUE] != null ? datum[RAW_VALUE] : datum);
     }
-    else if ((typeof accessor === 'string' || typeof accessor === 'symbol') && datum && datum[accessor] !== undefined) {
+    else if ((typeof accessor === 'string' || typeof accessor === 'symbol') &&
+        datum &&
+        datum[accessor] !== undefined) {
         return datum[accessor];
     }
     return isRawValue(accessor) ? accessor : _defaultValue;
@@ -51,7 +53,8 @@ function resolve(datum, accessor, channel, scale) {
             // so we're passing the original value to accessor functions instead of our wrapped record
             return accessor(datum[RAW_VALUE] != null ? datum[RAW_VALUE] : datum);
         // use accessor string
-        if ((typeof accessor === 'string' || typeof accessor === 'symbol') && datum[accessor] !== undefined)
+        if ((typeof accessor === 'string' || typeof accessor === 'symbol') &&
+            datum[accessor] !== undefined)
             return datum[accessor];
         // fallback to channel name as accessor
         if (accessor === null && datum[channel] !== undefined)
@@ -122,7 +125,7 @@ function stylePropsToCSS(props) {
 }
 export function resolveStyles(plot, datum, channels, defaultColorProp = null, useScale, recomputeChannels = false) {
     const styleProps = {
-        ...getBaseStylesObject(datum.datum, channels),
+        ...getBaseStylesObject(datum?.datum, channels),
         fill: 'none',
         stroke: 'none',
         ...(defaultColorProp && channels[oppositeColor[defaultColorProp]] == null
@@ -133,7 +136,7 @@ export function resolveStyles(plot, datum, channels, defaultColorProp = null, us
             .map(([key, cssAttr]) => [
             key,
             cssAttr,
-            recomputeChannels ? resolveChannel(key, datum.datum, channels) : datum[key]
+            recomputeChannels ? resolveChannel(key, datum?.datum, channels) : datum?.[key]
         ])
             .filter(([key, , value]) => isValid(value) || key === 'fill' || key === 'stroke')
             .map(([key, cssAttr, value]) => {

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

@@ -113,7 +113,8 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
                             for (const datum of mark.data) {
                                 const value = resolveProp(channelOptions.value, datum);
                                 dataValues.add(value);
-                                if (name === 'color' && scaleOptions.type === 'quantile' || scaleOptions.type === 'quantile-cont') {
+                                if ((name === 'color' && scaleOptions.type === 'quantile') ||
+                                    scaleOptions.type === 'quantile-cont') {
                                     allDataValues.push(value);
                                 }
                             }

package/dist/helpers/time.d.ts

@@ -1,6 +1,7 @@
+export declare const durations: Map<string, number>;
 export declare const intervalDuration: unique symbol;
 export declare const intervalType: unique symbol;
-export declare function parseTimeInterval(input: any): (string | number)[];
-export declare function maybeTimeInterval(input: any): any;
-export declare function maybeUtcInterval(input: any): any;
+export declare function parseTimeInterval(input: string): [string, number];
+export declare function maybeTimeInterval(input: string): any;
+export declare function maybeUtcInterval(input: string): any;
 export declare function generalizeTimeInterval(interval: any, n: any): any;

package/dist/helpers/time.js

@@ -54,7 +54,7 @@ const tickIntervals = [
     ['50 years', 50 * durationYear],
     ['100 years', 100 * durationYear] // TODO generalize to longer time scales
 ];
-const durations = new Map([
+export const durations = new Map([
     ['second', durationSecond],
     ['minute', durationMinute],
     ['hour', durationHour],

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 isDate(v: RawValue): 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): 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

@@ -1,16 +1,21 @@
+<!-- @component
+    Creates an area chart with filled regions between two x-y value pairs
+-->
 <script module lang="ts">
     export type AreaMarkProps = {
+        data: DataRecord[];
+        x1?: ChannelAccessor;
+        x2?: ChannelAccessor;
+        y1?: ChannelAccessor;
+        y2?: ChannelAccessor;
         z?: ChannelAccessor;
-        fill?: ChannelAccessor;
-        stroke?: ChannelAccessor;
-        dx?: ConstantAccessor<number>;
-        dy?: ConstantAccessor<number>;
         curve?: CurveName | CurveFactory;
         tension?: number;
         sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
         stack?: Partial<StackOptions>;
         canvas?: boolean;
-    };
+    } & BaseMarkProps &
+        LinkableMarkProps;
 </script>
 
 <script lang="ts">
@@ -33,22 +38,12 @@
         ConstantAccessor,
         ChannelAccessor,
         FacetContext,
-        ScaledDataRecord
+        ScaledDataRecord,
+        LinkableMarkProps
     } from '../types.js';
     import type { RawValue } from '../types.js';
     import type { StackOptions } from '../transforms/stack.js';
 
-    type AreaProps = BaseMarkProps & {
-        data: DataRecord[];
-        /**
-         * Lorem ipsum
-         */
-        x1?: ChannelAccessor;
-        x2?: ChannelAccessor;
-        y1?: ChannelAccessor;
-        y2?: ChannelAccessor;
-    } & AreaMarkProps;
-
     let {
         data,
         /** the curve */
@@ -57,7 +52,7 @@
         class: className = '',
         canvas = false,
         ...options
-    }: AreaProps = $props();
+    }: AreaMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -103,9 +98,6 @@
         }
         return groups;
     }
-
-    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
-    let testFacet = $derived(getTestFacet());
 </script>
 
 <Mark
@@ -120,8 +112,9 @@
             <AreaCanvas groupedAreaData={grouped} {mark} {usedScales} {areaPath} />
         {:else}
             <GroupMultiple length={grouped.length}>
-                {#each grouped as areaData}
+                {#each grouped as areaData, i (i)}
                     {#snippet el(datum: ScaledDataRecord)}
+                        {@const title = resolveProp(options.title, datum.datum, '')}
                         {@const [style, styleClass] = resolveStyles(
                             plot,
                             datum,
@@ -133,7 +126,8 @@
                             class={['svelteplot-area', className, styleClass]}
                             clip-path={options.clipPath}
                             d={areaPath(areaData)}
-                            {style} />
+                            {style}
+                            >{#if title}<title>{title}</title>{/if}</path>
                     {/snippet}
                     {#if areaData.length > 0}
                         {#if options.href}

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

@@ -1,9 +1,10 @@
 export type AreaMarkProps = {
+    data: DataRecord[];
+    x1?: ChannelAccessor;
+    x2?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
     z?: ChannelAccessor;
-    fill?: ChannelAccessor;
-    stroke?: ChannelAccessor;
-    dx?: ConstantAccessor<number>;
-    dy?: ConstantAccessor<number>;
     curve?: CurveName | CurveFactory;
     tension?: number;
     sort?: ConstantAccessor<RawValue> | {
@@ -11,21 +12,12 @@ export type AreaMarkProps = {
     };
     stack?: Partial<StackOptions>;
     canvas?: boolean;
-};
+} & BaseMarkProps & LinkableMarkProps;
 import { type CurveFactory } from 'd3-shape';
-import type { CurveName, DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+import type { CurveName, DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, LinkableMarkProps } from '../types.js';
 import type { RawValue } from '../types.js';
 import type { StackOptions } from '../transforms/stack.js';
-type AreaProps = BaseMarkProps & {
-    data: DataRecord[];
-    /**
-     * Lorem ipsum
-     */
-    x1?: ChannelAccessor;
-    x2?: ChannelAccessor;
-    y1?: ChannelAccessor;
-    y2?: ChannelAccessor;
-} & AreaMarkProps;
-declare const Area: import("svelte").Component<AreaProps, {}, "">;
+/** Creates an area chart with filled regions between two x-y value pairs */
+declare const Area: import("svelte").Component<AreaMarkProps, {}, "">;
 type Area = ReturnType<typeof Area>;
 export default Area;

package/dist/marks/AreaX.svelte

@@ -1,17 +1,18 @@
+<!-- @component
+    Creates a horizontal area chart with x value and baseline.  Areas are implicitly 
+    stacked horizontally if just the x channel is defined.
+-->
 <script lang="ts">
     import Area, { type AreaMarkProps } from './Area.svelte';
     import { renameChannels } from '../transforms/rename.js';
     import { stackX } from '../transforms/stack.js';
     import { recordizeX } from '../transforms/recordize.js';
-    import type { DataRecord, BaseMarkProps, ChannelAccessor } from '../types.js';
+    import type { ChannelAccessor } from '../types.js';
 
-    type AreaXProps = BaseMarkProps & {
-        data: DataRecord[];
+    type AreaXProps = Omit<AreaMarkProps, 'y1' | 'y2'> & {
         x?: ChannelAccessor;
-        x1?: ChannelAccessor;
-        x2?: ChannelAccessor;
         y?: ChannelAccessor;
-    } & AreaMarkProps;
+    };
 
     // we're discarding y1 and y2 props since they are not
     let { data, stack, ...options }: AreaXProps = $props();

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

@@ -1,12 +1,13 @@
 import { type AreaMarkProps } from './Area.svelte';
-import type { DataRecord, BaseMarkProps, ChannelAccessor } from '../types.js';
-type AreaXProps = BaseMarkProps & {
-    data: DataRecord[];
+import type { ChannelAccessor } from '../types.js';
+type AreaXProps = Omit<AreaMarkProps, 'y1' | 'y2'> & {
     x?: ChannelAccessor;
-    x1?: ChannelAccessor;
-    x2?: ChannelAccessor;
     y?: ChannelAccessor;
-} & AreaMarkProps;
+};
+/**
+ * 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, {}, "">;
 type AreaX = ReturnType<typeof AreaX>;
 export default AreaX;

package/dist/marks/AreaY.svelte

@@ -1,23 +1,21 @@
+<!-- @component
+    Creates a vertical area chart with y value and baseline. Areas are implicitly 
+    stacked vertically if just the y channel is defined.
+-->
 <script lang="ts">
     import Area, { type AreaMarkProps } from './Area.svelte';
     import { renameChannels } from '../transforms/rename.js';
     import { stackY } from '../transforms/stack.js';
     import { recordizeY } from '../transforms/recordize.js';
-    import type { DataRecord, BaseMarkProps, ChannelAccessor } from '../types.js';
+    import type { ChannelAccessor } from '../types.js';
 
     /**
      * AreaY mark foo
      */
-    type AreaYProps = BaseMarkProps & {
-        data: DataRecord[];
+    type AreaYProps = Omit<AreaMarkProps, 'x1' | 'x2'> & {
         x?: ChannelAccessor;
-        y1?: ChannelAccessor;
-        y2?: ChannelAccessor;
-        /**
-         * this some extensive help for the y channel
-         */
         y?: ChannelAccessor;
-    } & AreaMarkProps;
+    };
 
     let { data, stack, ...options }: AreaYProps = $props();
 
@@ -29,10 +27,4 @@
     );
 </script>
 
-<!--
-@component
-The AreaY component can be used for foobar
-
--->
-
 <Area {...args}></Area>

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

@@ -1,19 +1,16 @@
 import { type AreaMarkProps } from './Area.svelte';
-import type { DataRecord, BaseMarkProps, ChannelAccessor } from '../types.js';
+import type { ChannelAccessor } from '../types.js';
 /**
  * AreaY mark foo
  */
-type AreaYProps = BaseMarkProps & {
-    data: DataRecord[];
+type AreaYProps = Omit<AreaMarkProps, 'x1' | 'x2'> & {
     x?: ChannelAccessor;
-    y1?: ChannelAccessor;
-    y2?: ChannelAccessor;
-    /**
-     * this some extensive help for the y channel
-     */
     y?: ChannelAccessor;
-} & AreaMarkProps;
-/** The AreaY component can be used for foobar */
+};
+/**
+ * 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, {}, "">;
 type AreaY = ReturnType<typeof AreaY>;
 export default AreaY;

package/dist/marks/Arrow.svelte

@@ -1,32 +1,14 @@
-<!--
-    @component Arrow2
+<!-- @component
+    Creates arrows with customizable heads, angles, and bending
 -->
-<script lang="ts">
-    import { getContext, type Snippet } from 'svelte';
-    import type {
-        PlotContext,
-        DataRecord,
-        BaseMarkProps,
-        ConstantAccessor,
-        ChannelAccessor,
-        RawValue
-    } from '../types.js';
-    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
-    import { coalesce, maybeData, maybeNumber } from '../helpers/index.js';
-    import Mark from '../Mark.svelte';
-    import { arrowPath, maybeSweep, type SweepOption } from '../helpers/arrowPath.js';
-    import { replaceChannels } from '../transforms/rename.js';
-    import { addEventHandlers } from './helpers/events.js';
-    import GroupMultiple from './helpers/GroupMultiple.svelte';
-
-    type ArrowProps = BaseMarkProps & {
+<script module lang="ts">
+    export type ArrowMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
         data: DataRecord[];
         sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
         x1: ChannelAccessor;
         y1: ChannelAccessor;
         x2: ChannelAccessor;
         y2: ChannelAccessor;
-        stroke?: ChannelAccessor;
         /**
          * the bend angle, in degrees; defaults to 0°; true for 22.5°
          */
@@ -52,10 +34,28 @@
          */
         inset?: ConstantAccessor<number>;
         sweep?: SweepOption;
-        children?: Snippet;
     };
+</script>
+
+<script lang="ts">
+    import { getContext, type Snippet } from 'svelte';
+    import type {
+        PlotContext,
+        DataRecord,
+        BaseMarkProps,
+        ConstantAccessor,
+        ChannelAccessor,
+        RawValue
+    } from '../types.js';
+    import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
+    import { coalesce, maybeData, maybeNumber } from '../helpers/index.js';
+    import Mark from '../Mark.svelte';
+    import { arrowPath, maybeSweep, type SweepOption } from '../helpers/arrowPath.js';
+    import { replaceChannels } from '../transforms/rename.js';
+    import { addEventHandlers } from './helpers/events.js';
+    import GroupMultiple from './helpers/GroupMultiple.svelte';
 
-    let { data = [{}], class: className = null, ...options }: ArrowProps = $props();
+    let { data = [{}], class: className = null, ...options }: ArrowMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -81,7 +81,7 @@
     {#snippet children({ mark, usedScales, scaledData })}
         {@const sweep = maybeSweep(args.sweep)}
         <GroupMultiple class="arrow" length={scaledData.length}>
-            {#each scaledData as d}
+            {#each scaledData as d, i (i)}
                 {#if d.valid}
                     {@const inset = resolveProp(args.inset, d.datum, 0)}
                     {@const insetStart = resolveProp(args.insetStart, d.datum)}

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

@@ -1,7 +1,4 @@
-import { type Snippet } from 'svelte';
-import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, RawValue } from '../types.js';
-import { type SweepOption } from '../helpers/arrowPath.js';
-type ArrowProps = BaseMarkProps & {
+export type ArrowMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity'> & {
     data: DataRecord[];
     sort?: ConstantAccessor<RawValue> | {
         channel: 'stroke' | 'fill';
@@ -10,7 +7,6 @@ type ArrowProps = BaseMarkProps & {
     y1: ChannelAccessor;
     x2: ChannelAccessor;
     y2: ChannelAccessor;
-    stroke?: ChannelAccessor;
     /**
      * the bend angle, in degrees; defaults to 0°; true for 22.5°
      */
@@ -36,9 +32,10 @@ type ArrowProps = BaseMarkProps & {
      */
     inset?: ConstantAccessor<number>;
     sweep?: SweepOption;
-    children?: Snippet;
 };
-/** Arrow2 */
-declare const Arrow: import("svelte").Component<ArrowProps, {}, "">;
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, RawValue } from '../types.js';
+import { type SweepOption } from '../helpers/arrowPath.js';
+/** Creates arrows with customizable heads, angles, and bending */
+declare const Arrow: import("svelte").Component<ArrowMarkProps, {}, "">;
 type Arrow = ReturnType<typeof Arrow>;
 export default Arrow;

package/dist/marks/AxisX.svelte

@@ -1,3 +1,30 @@
+<!-- @component
+    Renders a horizontal axis with labels and tick marks
+-->
+<script module lang="ts">
+    export type AxisXMarkProps = Omit<
+        BaseMarkProps,
+        'fill' | 'fillOpacity' | 'paintOrder' | 'title' | 'href' | 'target'
+    > & {
+        data?: RawValue[];
+        automatic?: boolean;
+        title?: string;
+        anchor?: 'top' | 'bottom';
+        interval?: string | number;
+        facetAnchor?: 'auto' | 'top-empty' | 'bottom-empty' | 'top' | 'bottom';
+        labelAnchor?: 'auto' | 'left' | 'center' | 'right';
+        tickSize?: number;
+        tickFontSize?: ConstantAccessor<number>;
+        tickPadding?: number;
+        tickFormat?:
+            | 'auto'
+            | Intl.DateTimeFormatOptions
+            | Intl.NumberFormatOptions
+            | ((d: RawValue) => string);
+        tickClass?: ConstantAccessor<string>;
+    };
+</script>
+
 <script lang="ts">
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
@@ -23,30 +50,11 @@
         ...getContext<Partial<DefaultOptions>>('svelteplot/_defaults')
     };
 
-    type AxisXProps = BaseMarkProps & {
-        data?: RawValue[];
-        automatic?: boolean;
-        title?: string;
-        anchor?: 'top' | 'bottom';
-        interval?: string | number;
-        facetAnchor?: 'auto' | 'top-empty' | 'bottom-empty' | 'top' | 'bottom';
-        labelAnchor?: 'auto' | 'left' | 'center' | 'right';
-        tickSize?: number;
-        tickFontSize?: ConstantAccessor<number>;
-        tickPadding?: number;
-        tickFormat?:
-            | 'auto'
-            | Intl.DateTimeFormatOptions
-            | Intl.NumberFormatOptions
-            | ((d: RawValue) => string);
-        tickClass?: ConstantAccessor<string>;
-    };
-
     let {
         data = [],
         automatic = false,
         title,
-        anchor = DEFAULTS.axisXAnchor,
+        anchor = DEFAULTS.axisXAnchor as 'top' | 'bottom',
         facetAnchor = 'auto',
         interval,
         tickSize = DEFAULTS.tickSize,
@@ -55,17 +63,18 @@
         labelAnchor,
         tickFormat,
         tickClass,
+        class: className,
         ...options
-    }: AxisXProps = $props();
+    }: AxisXMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
-    let autoTickCount = $derived(
+    const autoTickCount = $derived(
         Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))
     );
 
-    let ticks: RawValue[] = $derived(
+    const ticks: RawValue[] = $derived(
         data.length > 0
             ? // use custom tick values if user passed any as prop
               data
@@ -103,12 +112,11 @@
                         }).format(d)
     );
 
-    let optionsLabel = $derived(plot.options?.x?.label);
+    const optionsLabel = $derived(plot.options?.x?.label);
+    const scaleType = $derived(plot.scales.x.type);
+    const isQuantitative = $derived(scaleType !== 'point' && scaleType !== 'band');
 
-    let scaleType = $derived(plot.scales.x.type);
-    let isQuantitative = $derived(scaleType !== 'point' && scaleType !== 'band');
-
-    let useTitle = $derived(
+    const useTitle = $derived(
         title ||
             (optionsLabel === null
                 ? null
@@ -123,28 +131,26 @@
                     : '')
     );
 
-    let useLabelAnchor = $derived(labelAnchor || plot.options?.x?.labelAnchor || 'auto');
-    let titleAlign = $derived(
+    const useLabelAnchor = $derived(labelAnchor || plot.options?.x?.labelAnchor || 'auto');
+    const titleAlign = $derived(
         useLabelAnchor === 'auto' ? (isQuantitative ? 'right' : 'center') : useLabelAnchor
     );
 
     const { getFacetState } = getContext<FacetContext>('svelteplot/facet');
-    let { left, top, bottom, bottomEmpty, topEmpty } = $derived(getFacetState());
+    const { left, top, bottom, bottomEmpty, topEmpty } = $derived(getFacetState());
 
-    let useFacetAnchor = $derived(
+    const useFacetAnchor = $derived(
         facetAnchor !== 'auto' ? facetAnchor : anchor === 'bottom' ? 'bottom-empty' : 'top-empty'
     );
-    let showAxis = $state(false);
-    $effect.pre(() => {
-        showAxis =
-            useFacetAnchor === 'top'
-                ? top
-                : useFacetAnchor === 'bottom'
-                  ? bottom
-                  : useFacetAnchor === 'top-empty'
-                    ? topEmpty
-                    : bottomEmpty;
-    });
+    const showAxis = $derived(
+        useFacetAnchor === 'top'
+            ? top
+            : useFacetAnchor === 'bottom'
+              ? bottom
+              : useFacetAnchor === 'top-empty'
+                ? topEmpty
+                : bottomEmpty
+    );
 </script>
 
 <Mark