svelteplot 0.2.8 → 0.2.9-pr-95.1

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/dist/marks/helpers/MarkerPath.svelte.d.ts

@@ -1,44 +1,4 @@
-import { type MarkerShape } from './Marker.svelte';
-import type { BaseMarkProps, ConstantAccessor, DataRecord, Mark, PlotScales } from '../../types.js';
-type MarkerPathProps = BaseMarkProps & {
-    /**
-     * the datum associated with this path, usually the first
-     * element of the data array group
-     */
-    datum: DataRecord;
-    /**
-     * the marker shape to use at the start of the path, defaults to
-     * circle
-     */
-    markerStart?: boolean | MarkerShape;
-    /**
-     * the marker shape to use at the middle of the path, defaults to circle
-     */
-    markerMid?: boolean | MarkerShape;
-    /**
-     * the marker shape to use at the end of the path, defaults to circle
-     */
-    markerEnd?: boolean | MarkerShape;
-    /**
-     * shorthand for setting all markers
-     */
-    marker?: boolean | MarkerShape;
-    /**
-     * path string
-     */
-    d: string;
-    style: string;
-    startOffset: string;
-    textStyle: string;
-    textStyleClass?: string | null;
-    text: string;
-    transform: string;
-    color: string;
-    strokeWidth: ConstantAccessor<number>;
-    mark: Mark<BaseMarkProps>;
-    scales: PlotScales;
-};
 /** Helper component for paths with markers and optional text along the path. */
-declare const MarkerPath: import("svelte").Component<MarkerPathProps, {}, "">;
+declare const MarkerPath: import("svelte").Component<any, {}, "">;
 type MarkerPath = ReturnType<typeof MarkerPath>;
 export default MarkerPath;

package/dist/transforms/bollinger.d.ts

@@ -11,11 +11,4 @@ export type BollingerOptions = {
 };
 export declare function bollingerX(args: TransformArg<DataRecord>, options?: BollingerOptions): TransformArg<DataRecord>;
 export declare function bollingerY(args: TransformArg<DataRecord>, options?: BollingerOptions): TransformArg<DataRecord>;
-export declare function bollingerDim(dim: 'x' | 'y', { data, ...channels }: TransformArg<DataRecord>, options?: BollingerOptions): {
-    data: {
-        __x: import("../types.js").RawValue;
-        __lo: number;
-        __avg: number;
-        __hi: number;
-    }[];
-};
+export declare function bollingerDim(dim: 'x' | 'y', { data, ...channels }: TransformArg<DataRecord>, options?: BollingerOptions): any;

package/dist/transforms/centroid.d.ts

@@ -1,9 +1,2 @@
 import type { DataRecord, TransformArg } from '../types.js';
-export declare function geoCentroid({ data, ...options }: TransformArg<DataRecord>): {
-    x: (d: any) => any;
-    y: (d: any) => any;
-    data: {
-        __centroid__: [number, number];
-        ___orig___?: import("../types.js").RawValue | [import("../types.js").RawValue, import("../types.js").RawValue];
-    }[];
-};
+export declare function geoCentroid({ data, ...options }: TransformArg<DataRecord>): any;

package/dist/transforms/group.d.ts

@@ -38,29 +38,21 @@ type GroupZOptions = GroupXOptions | GroupYOptions;
  * groups the dataset by x and y channel and optionally reduces the group items
  * to output channels fill, stroke, r, opacity, fillOpacity, or strokeOpacity
  */
-export declare function group({ data, ...channels }: TransformArg<T, DataRecord>, options?: GroupXOptions): {
-    data: DataRecord[];
-};
+export declare function group({ data, ...channels }: TransformArg<T, DataRecord>, options?: GroupXOptions): any;
 /**
  * groups the dataset by the x channel and optionally reduces the group items
  * to output channels y, y1, y2, fill, stroke, r, opacity, fillOpacity, or strokeOpacity
  */
-export declare function groupX(input: TransformArg<T, DataRecord>, options?: GroupXOptions): {
-    data: DataRecord[];
-};
+export declare function groupX(input: TransformArg<T, DataRecord>, options?: GroupXOptions): any;
 /**
  * groups the dataset by the y channel and optionally reduces the group items
  * to output channels x, x1, x2, fill, stroke, r, opacity, fillOpacity, or strokeOpacity
  */
-export declare function groupY(input: TransformArg<T, DataRecord>, options?: GroupYOptions): {
-    data: DataRecord[];
-};
+export declare function groupY(input: TransformArg<T, DataRecord>, options?: GroupYOptions): any;
 /**
  * groups the dataset by the z channel and optionally reduces the group items
  * to output channels x, x1, x2, y, y1, y2, fill, stroke, r, opacity, fillOpacity,
  * or strokeOpacity
  */
-export declare function groupZ(input: TransformArg<T, DataRecord>, options?: GroupZOptions): {
-    data: DataRecord[];
-};
+export declare function groupZ(input: TransformArg<T, DataRecord>, options?: GroupZOptions): any;
 export {};

package/dist/transforms/interval.d.ts

@@ -1,11 +1,7 @@
 import type { PlotState, TransformArg } from '../types.js';
 export declare function intervalX<T>(args: TransformArg<T>, { plot }: {
     plot: PlotState;
-}): {
-    data: T[];
-};
+}): any;
 export declare function intervalY<T>(args: TransformArg<T>, { plot }: {
     plot: PlotState;
-}): {
-    data: T[];
-};
+}): any;

package/dist/transforms/map.d.ts

@@ -1,10 +1,4 @@
-import type { TransformArg, MapOptions, MapMethod, DataRecord } from '../types.js';
-export declare function map<T>(args: TransformArg<T>, options: MapOptions): {
-    data: DataRecord[];
-};
-export declare function mapX<T>(args: TransformArg<T>, mapper: MapMethod): {
-    data: DataRecord[];
-};
-export declare function mapY<T>(args: TransformArg<T>, mapper: MapMethod): {
-    data: DataRecord[];
-};
+import type { TransformArg, MapOptions, MapMethod } from '../types.js';
+export declare function map<T>(args: TransformArg<T>, options: MapOptions): any;
+export declare function mapX<T>(args: TransformArg<T>, mapper: MapMethod): any;
+export declare function mapY<T>(args: TransformArg<T>, mapper: MapMethod): any;

package/dist/transforms/normalize.d.ts

@@ -1,9 +1,5 @@
 import type { TransformArg, MapIndexObject } from '../types.js';
 type NormalizeBasis = 'deviation' | 'first' | 'last' | 'min' | 'max' | 'mean' | 'median' | 'sum' | 'extent' | MapIndexObject;
-export declare function normalizeX<T>(args: TransformArg<T>, basis: NormalizeBasis): {
-    data: import("../types.js").DataRecord[];
-};
-export declare function normalizeY<T>(args: TransformArg<T>, basis: NormalizeBasis): {
-    data: import("../types.js").DataRecord[];
-};
+export declare function normalizeX<T>(args: TransformArg<T>, basis: NormalizeBasis): any;
+export declare function normalizeY<T>(args: TransformArg<T>, basis: NormalizeBasis): any;
 export {};

package/dist/transforms/select.d.ts

@@ -5,31 +5,17 @@ type AtLeastOne<T, U = {
 type SelectOptions = 'first' | 'last' | AtLeastOne<{
     [k in ChannelName]: 'min' | 'max';
 }>;
-export declare function select({ data, ...channels }: TransformArg<DataRecord>, options: SelectOptions): {
-    data: DataRecord[];
-};
+export declare function select({ data, ...channels }: TransformArg<DataRecord>, options: SelectOptions): any;
 /**
  * Keeps only the first item of each group
  */
-export declare function selectFirst(args: TransformArg<DataRecord>): {
-    data: DataRecord[];
-};
+export declare function selectFirst(args: TransformArg<DataRecord>): any;
 /**
  * Keeps only the last item of each group
  */
-export declare function selectLast(args: TransformArg<DataRecord>): {
-    data: DataRecord[];
-};
-export declare function selectMinX(args: TransformArg<DataRecord>): {
-    data: DataRecord[];
-};
-export declare function selectMaxX(args: TransformArg<DataRecord>): {
-    data: DataRecord[];
-};
-export declare function selectMinY(args: TransformArg<DataRecord>): {
-    data: DataRecord[];
-};
-export declare function selectMaxY(args: TransformArg<DataRecord>): {
-    data: DataRecord[];
-};
+export declare function selectLast(args: TransformArg<DataRecord>): any;
+export declare function selectMinX(args: TransformArg<DataRecord>): any;
+export declare function selectMaxX(args: TransformArg<DataRecord>): any;
+export declare function selectMinY(args: TransformArg<DataRecord>): any;
+export declare function selectMaxY(args: TransformArg<DataRecord>): any;
 export {};

package/dist/transforms/sort.d.ts

@@ -2,27 +2,14 @@ import type { DataRecord, DataRow, TransformArg } from '../types.js';
 export declare const SORT_KEY: unique symbol;
 export declare function sort({ data, ...channels }: TransformArg<DataRecord>, options?: {
     reverse?: boolean;
-}): {
-    sort: null;
-    data: {
-        ___orig___?: import("../types.js").RawValue | [import("../types.js").RawValue, import("../types.js").RawValue];
-    }[];
-} | {
-    data: DataRecord[];
-};
+}): any;
 /**
  * reverses the data row order
  */
 export declare function shuffle({ data, ...channels }: TransformArg<DataRow[]>, options?: {
     seed?: number;
-}): {
-    sort: null;
-    data: DataRow[][];
-};
+}): any;
 /**
  * reverses the data row order
  */
-export declare function reverse({ data, ...channels }: TransformArg<DataRow[]>): {
-    sort: null;
-    data: DataRow[][];
-};
+export declare function reverse({ data, ...channels }: TransformArg<DataRow[]>): any;

package/dist/transforms/window.d.ts

@@ -7,18 +7,6 @@ type WindowOptions = {
     reduce: ReducerName;
     strict: boolean;
 };
-export declare function windowX(args: TransformArg<DataRecord>, options: WindowOptions): {
-    data: {
-        [x: string]: import("../types.js").RawValue;
-        [x: symbol]: import("../types.js").RawValue;
-        ___orig___?: import("../types.js").RawValue | [import("../types.js").RawValue, import("../types.js").RawValue];
-    }[];
-};
-export declare function windowY(args: TransformArg<DataRecord>, options: WindowOptions): {
-    data: {
-        [x: string]: import("../types.js").RawValue;
-        [x: symbol]: import("../types.js").RawValue;
-        ___orig___?: import("../types.js").RawValue | [import("../types.js").RawValue, import("../types.js").RawValue];
-    }[];
-};
+export declare function windowX(args: TransformArg<DataRecord>, options: WindowOptions): any;
+export declare function windowY(args: TransformArg<DataRecord>, options: WindowOptions): any;
 export {};

package/dist/ui/ExamplesGrid.svelte

@@ -0,0 +1,64 @@
+<script>
+    let { examples } = $props();
+</script>
+
+<div class="list">
+    {#each examples as page, i (i)}
+        <a href={page.url}>
+            <div>
+                {#if page.screenshot}
+                    <img src={page.screenshot} alt={page.title} />{/if}
+            </div>
+            <h4>
+                {page.title}
+            </h4>
+        </a>
+    {/each}
+</div>
+
+<style>
+    .list {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+        gap: 1rem;
+        width: 100%;
+        margin: 2rem 0;
+    }
+
+    .list > a {
+        display: flex;
+        flex-direction: column;
+        align-items: left;
+        row-gap: 0.3rem;
+        text-decoration: none;
+
+        > div {
+            border: 1px solid #88888822;
+            border-radius: 2px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
+            padding: 1.5ex;
+        }
+
+        &:hover {
+            text-decoration: underline;
+            color: var(--svp-text);
+            > div {
+                border: 1px solid var(--svp-text);
+            }
+        }
+    }
+
+    .list img {
+        width: 100%;
+        box-sizing: border-box;
+        border-radius: 3px;
+        transition: transform 0.2s ease-in-out;
+    }
+
+    .list h4 {
+        margin: 0rem;
+        font-weight: normal;
+        font-size: 13px;
+        line-height: 1;
+    }
+</style>

package/dist/ui/ExamplesGrid.svelte.d.ts

@@ -0,0 +1,11 @@
+export default ExamplesGrid;
+type ExamplesGrid = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const ExamplesGrid: import("svelte").Component<{
+    examples: any;
+}, {}, "">;
+type $$ComponentProps = {
+    examples: any;
+};