svelteplot 0.10.1-pr-357.2 → 0.10.1

package/dist/ui/ExamplesPagePreview.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+    import { resolve } from '$app/paths';
+    import { useDark } from './isDark.svelte';
+
+    const exampleImages = import.meta.glob('../../snapshots/*/*.png', {
+        eager: true,
+        query: {
+            enhanced: true,
+            w: 440
+        }
+    });
+
+    let {
+        paths,
+        pages
+    }: {
+        paths: Record<string, string[]>;
+        pages: Record<
+            string,
+            {
+                title: string;
+                description?: string;
+                sortKey?: number;
+                transforms?: string[];
+            }
+        >;
+    } = $props();
+
+    const ds = useDark();
+
+    function sortPages(a: string, b: string) {
+        const sortA = pages[a].sortKey ?? 10;
+        const sortB = pages[b].sortKey ?? 10;
+        return sortA - sortB;
+    }
+</script>
+
+<div class="column-container">
+    {#each Object.entries(paths).sort( (a, b) => a[0].localeCompare(b[0]) ) as [group, groupPages] (group)}
+        <div>
+            <h2 id={group}>
+                <a href={resolve(`/examples/${group}`)}
+                    >{pages[groupPages.find((p) => p.endsWith('/_index.svelte'))]?.title ??
+                        group}</a>
+            </h2>
+            <div class="example-grid">
+                {#each groupPages
+                    .sort(sortPages)
+                    .filter((p) => !p.endsWith('/_index.svelte')) as page (page)}
+                    {@const imageKey = `../../snapshots/${page
+                        .replace('./', '')
+                        .replace('.svelte', ds.isDark ? '.dark.png' : '.png')}`}
+                    <a
+                        animate:slide
+                        href={resolve(page.replace('./', './examples/').replace('.svelte', ''))}
+                        ><div>
+                            {#if exampleImages[imageKey]}
+                                <enhanced:img
+                                    title={pages[page].title}
+                                    src={exampleImages[imageKey].default}
+                                    alt={pages[page].title} />
+                            {/if}
+                            <div class="title">{pages[page].title}</div>
+                        </div></a>
+                {/each}
+            </div>
+        </div>
+    {/each}
+</div>
+
+<style>
+    :global(.content) h2 {
+        margin-top: 1rem !important;
+        margin-bottom: 1rem;
+        text-transform: capitalize;
+        border: 0;
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+    }
+
+    .column-container {
+        container-type: inline-size;
+    }
+
+    .example-grid {
+        --example-grid-columns: 5;
+
+        /* width: 100%; */
+        display: grid;
+        /* overflow-x: clip; */
+        grid-template-columns: repeat(var(--example-grid-columns), 1fr);
+        grid-auto-rows: 1fr;
+        gap: 1.25rem;
+
+        a {
+            text-decoration: none;
+            color: inherit;
+        }
+
+        .title {
+            font-size: 0.75rem;
+            opacity: 0.8;
+            line-height: 1.2;
+            text-decoration: none;
+        }
+    }
+
+    @container (max-width: 800px) {
+        .example-grid {
+            --example-grid-columns: 4;
+        }
+    }
+    @container (max-width: 600px) {
+        .example-grid {
+            --example-grid-columns: 3;
+        }
+    }
+    @container (max-width: 500px) {
+        .example-grid {
+            --example-grid-columns: 2;
+        }
+    }
+
+    .example-grid :global(img) {
+        height: auto !important;
+        aspect-ratio: 4 / 3;
+        object-fit: cover;
+        width: 100%;
+        height: auto;
+
+        position: relative;
+        transition: transform 0.05s ease-out;
+        &:hover {
+            transform: scale(1.5);
+            object-fit: contain;
+            z-index: 1;
+
+            background: fixed var(--svelteplot-bg);
+
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
+        }
+    }
+</style>

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

@@ -0,0 +1,12 @@
+type $$ComponentProps = {
+    paths: Record<string, string[]>;
+    pages: Record<string, {
+        title: string;
+        description?: string;
+        sortKey?: number;
+        transforms?: string[];
+    }>;
+};
+declare const ExamplesPagePreview: import("svelte").Component<$$ComponentProps, {}, "">;
+type ExamplesPagePreview = ReturnType<typeof ExamplesPagePreview>;
+export default ExamplesPagePreview;

package/dist/ui/RadioInput.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    let {
+        label = '',
+        value = $bindable(),
+        options,
+        format = (d) => d
+    }: {
+        label?: string;
+        value: string | number | undefined;
+        options: any[];
+        format?: (d: any) => string;
+    } = $props();
+
+    const randomId = (Math.random() * 1e7).toString(32);
+</script>
+
+<div style="display:inline-block">
+    {#if label}
+        <label for={randomId}>{label}:</label>
+    {/if}
+    {#each options as p (p)}
+        <label>
+            <input type="radio" id={randomId} bind:group={value} value={p} />
+            {format(p)}
+        </label>
+    {/each}
+</div>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    label?: string;
+    value: string | number | undefined;
+    options: any[];
+    format?: (d: any) => string;
+};
+declare const RadioInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type RadioInput = ReturnType<typeof RadioInput>;
+export default RadioInput;

package/dist/ui/Select.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+    let {
+        label = '',
+        value = $bindable(),
+        options,
+        format = (d) => d
+    }: {
+        label?: string;
+        value: string | number | undefined;
+        options: any[];
+        format?: (d: any) => string;
+    } = $props();
+</script>
+
+<label
+    >{label || ''}
+    <select bind:value>
+        {#each options as p (p)}
+            <option value={p}>{format(p)}</option>
+        {/each}
+    </select></label>
+
+<style>
+    label {
+        margin-right: 1em;
+    }
+</style>

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

@@ -0,0 +1,9 @@
+type $$ComponentProps = {
+    label?: string;
+    value: string | number | undefined;
+    options: any[];
+    format?: (d: any) => string;
+};
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/ui/Slider.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+    let {
+        label,
+        value = $bindable(),
+        min = 0,
+        max = 100,
+        step = 1,
+        type = 'range'
+    }: {
+        label: string;
+        type?: 'range' | 'number';
+        value: number;
+        min?: number;
+        max?: number;
+        step?: number;
+    } = $props();
+</script>
+
+<label>
+    <span>{label}:</span>
+    {#if type === 'range'}
+        <input type="range" bind:value {min} {max} {step} />
+        <span class="value">({value})</span>{:else}
+        <input
+            type="number"
+            style:width={`${`${Math.max(Math.abs(min), Math.abs(max))}`.length}rem`}
+            bind:value
+            {min}
+            {max}
+            {step} />
+    {/if}
+</label>
+
+<style>
+    label {
+        display: inline-flex;
+        gap: 1ex;
+        margin-right: 1em;
+    }
+    .value {
+        opacity: 0.5;
+    }
+    input {
+        accent-color: var(--svp-accent);
+        width: 15ex;
+    }
+</style>

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

@@ -0,0 +1,11 @@
+type $$ComponentProps = {
+    label: string;
+    type?: 'range' | 'number';
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+};
+declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/ui/Spiral.svelte

@@ -0,0 +1,35 @@
+<script>
+    import { usePlot } from '../hooks/usePlot.svelte';
+
+    let { numTurns = 4, finalRadius = 10, duration = 2, ...restProps } = $props();
+
+    const plot = usePlot();
+
+    const pathD = $derived.by(() => {
+        const numPoints = 100;
+        const k = finalRadius / (2 * Math.PI * numTurns);
+        const angleStep = (2 * Math.PI * numTurns) / numPoints;
+
+        const points = [];
+        for (let i = 0; i <= numPoints; i++) {
+            const t = i * angleStep;
+            const r = k * t;
+            const x = r * Math.cos(t);
+            const y = r * Math.sin(t);
+            points.push([x, y]);
+        }
+
+        let d = `M ${points[0][0].toFixed(2)},${points[0][1].toFixed(2)} `;
+        for (let i = 1; i < points.length; i++) {
+            d += `L ${points[i][0].toFixed(2)},${points[i][1].toFixed(2)} `;
+        }
+        return d.trim();
+    });
+</script>
+
+<path
+    d={pathD}
+    style:animation-duration="{duration}s"
+    stroke="currentColor"
+    fill="none"
+    {...restProps} />

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

@@ -0,0 +1,15 @@
+export default Spiral;
+type Spiral = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Spiral: import("svelte").Component<{
+    numTurns?: number;
+    finalRadius?: number;
+    duration?: number;
+} & Record<string, any>, {}, "">;
+type $$ComponentProps = {
+    numTurns?: number;
+    finalRadius?: number;
+    duration?: number;
+} & Record<string, any>;

package/dist/ui/index.d.ts

@@ -0,0 +1,4 @@
+export { default as Slider } from './Slider.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as RadioInput } from './RadioInput.svelte';

package/dist/ui/index.js

@@ -0,0 +1,4 @@
+export { default as Slider } from './Slider.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as RadioInput } from './RadioInput.svelte';

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

@@ -0,0 +1,6 @@
+declare class DarkState {
+    isDark: boolean;
+    constructor();
+}
+export declare function useDark(): DarkState;
+export {};

package/dist/ui/isDark.svelte.js

@@ -0,0 +1,10 @@
+class DarkState {
+    isDark = $state(false);
+    constructor() {
+        this.isDark = false;
+    }
+}
+const darkState = new DarkState();
+export function useDark() {
+    return darkState;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.10.1-pr-357.2",
+    "version": "0.10.1",
     "description": "A Svelte-native data visualization framework based on the layered grammar of graphics principles.",
     "keywords": [
         "svelte",

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

@@ -1,110 +0,0 @@
-import type { ChannelAccessor, DataRow } from '../types/index.js';
-declare function $$render<Datum extends DataRow>(): {
-    props: Omit<Partial<{
-        filter: import("../types/index.js").ConstantAccessor<boolean, Record<string | symbol, import("../types/data").RawValue>>;
-        facet: "auto" | "include" | "exclude";
-        fx: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        fy: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        dx: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        dy: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        dodgeX: DodgeXOptions;
-        dodgeY: DodgeYOptions;
-        fill: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        fillOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        sort: {
-            channel: string;
-            order?: "ascending" | "descending";
-        } | ((a: import("../types/data").RawValue, b: import("../types/data").RawValue) => number) | import("../types/index.js").ConstantAccessor<import("../types/data").RawValue, Record<string | symbol, import("../types/data").RawValue>>;
-        stroke: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        strokeWidth: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        strokeOpacity: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        strokeLinejoin: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinejoin, Record<string | symbol, import("../types/data").RawValue>>;
-        strokeLinecap: import("../types/index.js").ConstantAccessor<import("csstype").Property.StrokeLinecap, Record<string | symbol, import("../types/data").RawValue>>;
-        strokeMiterlimit: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        opacity: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        strokeDasharray: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
-        strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
-        mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/data").RawValue>>;
-        clipPath: string;
-        mask: string;
-        imageFilter: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
-        shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types/data").RawValue>>;
-        paintOrder: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
-        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>;
-        class: string;
-        style: string;
-        cursor: import("../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Record<string | symbol, import("../types/data").RawValue>>;
-    }> & import("../types/mark").LinkableMarkProps<Record<string | symbol, import("../types/data").RawValue>> & {
-        data: Record<string | symbol, import("../types/data").RawValue>[];
-        x1?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        x2?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        y1?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        y2?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        z?: ChannelAccessor<Record<string | symbol, import("../types/data").RawValue>>;
-        curve?: import("../types/index.js").CurveName | import("d3-shape").CurveFactory;
-        tension?: number;
-        sort?: import("../types/index.js").ConstantAccessor<import("../types/data").RawValue> | {
-            channel: "stroke" | "fill";
-        };
-        stack?: Partial<import("../transforms/stack.js").StackOptions>;
-        canvas?: boolean;
-        areaClass?: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
-    }, "x1" | "x2"> & {
-        x?: ChannelAccessor<Datum>;
-        y?: ChannelAccessor<Datum>;
-    };
-    exports: {};
-    bindings: "";
-    slots: {};
-    events: {};
-};
-declare class __sveltets_Render<Datum extends DataRow> {
-    props(): ReturnType<typeof $$render<Datum>>['props'];
-    events(): ReturnType<typeof $$render<Datum>>['events'];
-    slots(): ReturnType<typeof $$render<Datum>>['slots'];
-    bindings(): "";
-    exports(): {};
-}
-interface $$IsomorphicComponent {
-    new <Datum extends DataRow>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<Datum>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<Datum>['props']>, ReturnType<__sveltets_Render<Datum>['events']>, ReturnType<__sveltets_Render<Datum>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<Datum>['bindings']>;
-    } & ReturnType<__sveltets_Render<Datum>['exports']>;
-    <Datum extends DataRow>(internal: unknown, props: ReturnType<__sveltets_Render<Datum>['props']> & {}): ReturnType<__sveltets_Render<Datum>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
-}
-/**
- * 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: $$IsomorphicComponent;
-type AreaY<Datum extends DataRow> = InstanceType<typeof AreaY<Datum>>;
-export default AreaY;

package/dist/transforms/normalize.d.ts

@@ -1,34 +0,0 @@
-import type { TransformArg, RawValue, MapIndexObject } from '../types/index.js';
-import { sort } from './sort.js';
-type BasisFunction = (I: number[], S: RawValue[]) => number;
-type NormalizeBasis = 'deviation' | 'first' | 'last' | 'min' | 'max' | 'mean' | 'median' | 'sum' | 'extent' | BasisFunction | MapIndexObject;
-type NormalizeOptions = NormalizeBasis | {
-    basis: NormalizeBasis;
-};
-/**
- * Normalizes the x values based on the specified basis. Uses mapX.
- */
-export declare function normalizeX<T>(args: TransformArg<T>, options: NormalizeOptions): any;
-/**
- * Normalizes the y values based on the specified basis. Uses mapY.
- */
-export declare function normalizeY<T>(args: TransformArg<T>, options: NormalizeOptions): any;
-/**
- * Convenience wrapper for normalizeY for parallel coordinates.
- *
- * Channels:
- * - x: the categorical axis (e.g., 'Measurement')
- * - y: the value to normalize (e.g., 'Value')
- * - z: the grouping variable (e.g., 'Id')
- */
-export declare function normalizeParallelY<T>(args: TransformArg<T>, basis: NormalizeBasis): ReturnType<typeof sort<T>>;
-/**
- * Convenience wrapper for normalizeY for parallel coordinates.
- *
- * Channels:
- * - x: the categorical axis (e.g., 'Measurement')
- * - y: the value to normalize (e.g., 'Value')
- * - z: the grouping variable (e.g., 'Id')
- */
-export declare function normalizeParallelX<T>(args: TransformArg<T>, basis: NormalizeBasis): ReturnType<typeof sort<T>>;
-export {};