svelteplot 0.2.8-pr-78.1 → 0.2.9-pr-95.0

package/dist/marks/AxisX.svelte

@@ -23,6 +23,10 @@
             | Intl.NumberFormatOptions
             | ((d: RawValue) => string);
         tickClass?: ConstantAccessor<string>;
+        /** ticks is a shorthand for defining data, tickCount or interval */
+        ticks?: number | string | RawValue[];
+        /** set to false or null to disable tick labels */
+        text: boolean | null;
     } & XOR<
             {
                 /** approximate number of ticks to be generated */
@@ -61,12 +65,13 @@
     };
 
     let {
-        data = [],
+        ticks: magicTicks,
+        data = Array.isArray(magicTicks) ? magicTicks : [],
         automatic = false,
         title,
         anchor = DEFAULTS.axisXAnchor as 'top' | 'bottom',
         facetAnchor = 'auto',
-        interval,
+        interval = typeof magicTicks === 'string' ? magicTicks : undefined,
         tickSize = DEFAULTS.tickSize,
         tickFontSize = DEFAULTS.tickFontSize,
         tickPadding = DEFAULTS.tickPadding,
@@ -74,8 +79,9 @@
         tickFormat,
         tickClass,
         class: className,
-        tickCount,
+        tickCount = typeof magicTicks === 'number' ? magicTicks : undefined,
         tickSpacing,
+        text = true,
         ...options
     }: AxisXMarkProps = $props();
 
@@ -217,6 +223,7 @@
             {tickPadding}
             {tickFontSize}
             {tickClass}
+            {text}
             {options}
             title={useTitle}
             {plot} />

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

@@ -12,6 +12,10 @@ export type AxisXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paint
     tickPadding?: number;
     tickFormat?: 'auto' | Intl.DateTimeFormatOptions | Intl.NumberFormatOptions | ((d: RawValue) => string);
     tickClass?: ConstantAccessor<string>;
+    /** ticks is a shorthand for defining data, tickCount or interval */
+    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;

package/dist/marks/AxisY.svelte

@@ -24,6 +24,10 @@
             | Intl.NumberFormatOptions
             | ((d: RawValue) => string);
         tickClass?: ConstantAccessor<string>;
+        /** ticks is a shorthand for defining data, tickCount or interval */
+        ticks?: number | string | RawValue[];
+        /** set to false or null to disable tick labels */
+        text: boolean | null;
     } & XOR<
             {
                 /** approximate number of ticks to be generated */
@@ -61,20 +65,22 @@
     };
 
     let {
-        data = [],
+        ticks: magicTicks,
+        data = Array.isArray(magicTicks) ? magicTicks : [],
         automatic = false,
         title,
         anchor = DEFAULTS.axisYAnchor as 'left' | 'right',
         facetAnchor = 'auto',
-        interval,
+        interval = typeof magicTicks === 'string' ? magicTicks : undefined,
         lineAnchor = 'center',
         tickSize = DEFAULTS.tickSize,
         tickFontSize = DEFAULTS.tickFontSize,
         tickPadding = DEFAULTS.tickPadding,
         tickFormat,
         tickClass,
-        tickCount,
+        tickCount = typeof magicTicks === 'number' ? magicTicks : undefined,
         tickSpacing,
+        text = true,
         ...options
     }: AxisYMarkProps = $props();
 
@@ -197,6 +203,7 @@
             {tickFontSize}
             {tickClass}
             {options}
+            {text}
             title={useTitle}
             {plot} />
     {/if}

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

@@ -13,6 +13,10 @@ export type AxisYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paint
     tickPadding?: number;
     tickFormat?: 'auto' | Intl.DateTimeFormatOptions | Intl.NumberFormatOptions | ((d: RawValue) => string);
     tickClass?: ConstantAccessor<string>;
+    /** ticks is a shorthand for defining data, tickCount or interval */
+    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;

package/dist/marks/helpers/BaseAxisX.svelte

@@ -33,6 +33,7 @@
             dy: ConstantAccessor<number>;
             filter: ChannelAccessor;
         };
+        text: boolean;
         plot: PlotState;
     };
 
@@ -50,7 +51,8 @@
         height,
         options,
         plot,
-        title
+        title,
+        text = true
     }: BaseAxisXProps = $props();
 
     function splitTick(tick: string | string[]) {
@@ -86,15 +88,17 @@
             })
         );
         const T = tickObjects.length;
-        for (let i = 0; i < T; i++) {
-            let j = i;
-            // find the preceding tick that was not hidden
-            do {
-                j--;
-            } while (j >= 0 && tickObjects[j].hidden);
-            if (j >= 0) {
-                const tickLabelSpace = Math.abs(tickObjects[i].x - tickObjects[j].x);
-                tickObjects[i].hidden = tickLabelSpace < 15;
+        if (text) {
+            for (let i = 0; i < T; i++) {
+                let j = i;
+                // find the preceding tick that was not hidden
+                do {
+                    j--;
+                } while (j >= 0 && tickObjects[j].hidden);
+                if (j >= 0) {
+                    const tickLabelSpace = Math.abs(tickObjects[i].x - tickObjects[j].x);
+                    tickObjects[i].hidden = tickLabelSpace < 15;
+                }
             }
         }
         return tickObjects;
@@ -102,6 +106,7 @@
 
     $effect(() => {
         untrack(() => [$autoMarginTop, $autoMarginBottom]);
+        if (!text) return;
         const outsideTextAnchor = anchor === 'top' ? 'end' : 'start';
         // measure tick label heights
         const maxLabelHeight =
@@ -144,26 +149,7 @@
 <g class="axis-x">
     {#each positionedTicks as tick, t (t)}
         {#if testFilter(tick.value, options) && !tick.hidden}
-            {@const textLines = tick.text}
-            {@const prevTextLines = t && positionedTicks[t - 1].text}
-            {@const fontSize = resolveProp(tickFontSize, tick)}
             {@const tickClass_ = resolveProp(tickClass, tick.value)}
-            {@const estLabelWidth = max(textLines.map((t) => t.length)) * fontSize * 0.2}
-            {@const moveDown =
-                (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) *
-                (anchor === 'bottom' ? 1 : -1)}
-            {@const [textStyle, textClass] = resolveStyles(
-                plot,
-                tick,
-                {
-                    fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
-                    ...options,
-                    fontSize: tickFontSize,
-                    stroke: null
-                },
-                'fill',
-                { x: true }
-            )}
             <g
                 class="tick {tickClass_ || ''}"
                 transform="translate({tick.x + tick.dx}, {tickY + tick.dy})"
@@ -182,31 +168,51 @@
                         y2={anchor === 'bottom' ? tickSize : -tickSize} />
                 {/if}
 
-                <text
-                    bind:this={tickTextElements[t]}
-                    transform="translate(0, {moveDown})  rotate({tickRotate})"
-                    style={textStyle}
-                    class={textClass}
-                    x={0}
-                    y={0}
-                    dominant-baseline={tickRotate !== 0
-                        ? 'central'
-                        : anchor === 'bottom'
-                          ? 'hanging'
-                          : 'auto'}>
-                    {#if ticks.length > 0 || t === 0 || t === ticks.length - 1}
-                        {#if textLines.length === 1}
-                            {textLines[0]}
-                        {:else}
-                            {#each textLines as line, i (i)}
-                                <tspan x="0" dy={i ? 12 : 0}
-                                    >{!prevTextLines || prevTextLines[i] !== line
-                                        ? line
-                                        : ''}</tspan>
-                            {/each}
+                {#if text}
+                    {@const textLines = tick.text}
+                    {@const prevTextLines = t && positionedTicks[t - 1].text}
+
+                    {@const moveDown =
+                        (tickSize + tickPadding + (tickRotate !== 0 ? tickFontSize * 0.35 : 0)) *
+                        (anchor === 'bottom' ? 1 : -1)}
+                    {@const [textStyle, textClass] = resolveStyles(
+                        plot,
+                        tick,
+                        {
+                            fontVariant: isQuantitative ? 'tabular-nums' : 'normal',
+                            ...options,
+                            fontSize: tickFontSize,
+                            stroke: null
+                        },
+                        'fill',
+                        { x: true }
+                    )}
+                    <text
+                        bind:this={tickTextElements[t]}
+                        transform="translate(0, {moveDown})  rotate({tickRotate})"
+                        style={textStyle}
+                        class={textClass}
+                        x={0}
+                        y={0}
+                        dominant-baseline={tickRotate !== 0
+                            ? 'central'
+                            : anchor === 'bottom'
+                              ? 'hanging'
+                              : 'auto'}>
+                        {#if ticks.length > 0 || t === 0 || t === ticks.length - 1}
+                            {#if textLines.length === 1}
+                                {textLines[0]}
+                            {:else}
+                                {#each textLines as line, i (i)}
+                                    <tspan x="0" dy={i ? 12 : 0}
+                                        >{!prevTextLines || prevTextLines[i] !== line
+                                            ? line
+                                            : ''}</tspan>
+                                {/each}
+                            {/if}
                         {/if}
-                    {/if}
-                </text>
+                    </text>
+                {/if}
             </g>
         {/if}
     {/each}

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

@@ -17,6 +17,7 @@ type BaseAxisXProps = {
         dy: ConstantAccessor<number>;
         filter: ChannelAccessor;
     };
+    text: boolean;
     plot: PlotState;
 };
 declare const BaseAxisX: import("svelte").Component<BaseAxisXProps, {}, "">;

package/dist/marks/helpers/BaseAxisY.svelte

@@ -29,6 +29,7 @@
             dy: ConstantAccessor<number>;
         };
         plot: PlotState;
+        text: boolean | null;
     };
 
     let {
@@ -46,7 +47,8 @@
         width,
         title,
         plot,
-        options
+        options,
+        text = true
     }: BaseAxisYProps = $props();
 
     const LINE_ANCHOR = {
@@ -67,16 +69,18 @@
                 element: null as SVGTextElement | null
             };
         });
-        const T = tickObjects.length;
-        for (let i = 0; i < T; i++) {
-            let j = i;
-            // find the preceding tick that was not hidden
-            do {
-                j--;
-            } while (j >= 0 && tickObjects[j].hidden);
-            if (j >= 0) {
-                const tickLabelSpace = Math.abs(tickObjects[i].y - tickObjects[j].y);
-                tickObjects[i].hidden = tickLabelSpace < 15;
+        if (text) {
+            const T = tickObjects.length;
+            for (let i = 0; i < T; i++) {
+                let j = i;
+                // find the preceding tick that was not hidden
+                do {
+                    j--;
+                } while (j >= 0 && tickObjects[j].hidden);
+                if (j >= 0) {
+                    const tickLabelSpace = Math.abs(tickObjects[i].y - tickObjects[j].y);
+                    tickObjects[i].hidden = tickLabelSpace < 15;
+                }
             }
         }
         return tickObjects;
@@ -176,13 +180,15 @@
                         class={tickLineClass}
                         x2={anchor === 'left' ? -tickSize : tickSize} />
                 {/if}
-                <text
-                    bind:this={tickTexts[t]}
-                    class={[textClass, { 'is-left': anchor === 'left' }]}
-                    style={textStyle}
-                    x={(tickSize + tickPadding) * (anchor === 'left' ? -1 : 1)}
-                    dominant-baseline={LINE_ANCHOR[lineAnchor]}
-                    >{Array.isArray(tick.text) ? tick.text.join(' ') : tick.text}</text>
+                {#if text}
+                    <text
+                        bind:this={tickTexts[t]}
+                        class={[textClass, { 'is-left': anchor === 'left' }]}
+                        style={textStyle}
+                        x={(tickSize + tickPadding) * (anchor === 'left' ? -1 : 1)}
+                        dominant-baseline={LINE_ANCHOR[lineAnchor]}
+                        >{Array.isArray(tick.text) ? tick.text.join(' ') : tick.text}</text>
+                {/if}
             </g>
         {/if}
     {/each}

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.2.8-pr-78.1",
+    "version": "0.2.9-pr-95.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",