svelteplot 0.7.0 → 0.7.1

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

@@ -1,77 +1,15 @@
-import type { BaseRectMarkProps } from '../../types/mark.js';
+import type { BaseMarkProps, BaseRectMarkProps } from '../../types/mark.js';
 import type { DataRecord, ScaledDataRecord } from '../../types/data.js';
 import type { UsedScales } from '../../types/index.js';
-declare class __sveltets_Render<Datum extends DataRecord> {
-    props(): {
+declare function $$render<Datum extends DataRecord>(): {
+    props: {
         datum: ScaledDataRecord<Datum>;
         class: string | null;
         x: number;
         y: number;
         width: number;
         height: number;
-        options: BaseRectMarkProps<Datum> & Partial<{
-            filter: import("../../types/index.js").ConstantAccessor<boolean, Datum>;
-            facet: "auto" | "include" | "exclude";
-            fx: import("../../types/index.js").ChannelAccessor<Datum>;
-            fy: import("../../types/index.js").ChannelAccessor<Datum>;
-            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: import("../../types/index.js").ChannelAccessor<Datum>;
-            fillOpacity: import("../../types/index.js").ConstantAccessor<number, Datum>;
-            sort: ((a: import("../../types/data.js").RawValue, b: import("../../types/data.js").RawValue) => number) | {
-                channel: string;
-                order?: "ascending" | "descending";
-            } | import("../../types/index.js").ConstantAccessor<import("../../types/data.js").RawValue, Datum>;
-            stroke: import("../../types/index.js").ChannelAccessor<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: import("../../types/index.js").ChannelAccessor<Datum>;
-            strokeDasharray: import("../../types/index.js").ConstantAccessor<string, Datum>;
-            strokeDashoffset: import("../../types/index.js").ConstantAccessor<number, Datum>;
-            mixBlendMode: import("../../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
-            clipPath: string;
-            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: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            ondblclick: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            onmouseup: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            onmousedown: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            onmouseenter: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            onmousemove: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            onmouseleave: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            onmouseout: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            onmouseover: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            onpointercancel: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            onpointerdown: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            onpointerup: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            onpointerenter: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            onpointerleave: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            onpointermove: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            onpointerover: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            onpointerout: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            ondrag: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            ondrop: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            ondragstart: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            ondragenter: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            ondragleave: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            ondragover: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            ondragend: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            ontouchstart: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            ontouchmove: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            ontouchend: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            ontouchcancel: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            oncontextmenu: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            onwheel: import("svelte/elements.js").MouseEventHandler<SVGPathElement>;
-            class: string;
-            style: string;
-            cursor: import("../../types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;
-        }>;
+        options: BaseRectMarkProps<Datum> & BaseMarkProps<Datum>;
         /**
          * By default, the `inset` property is applied to all four insets. Mark components
          * can tweak this behavior for insetTop and insetBottom by setting the
@@ -87,8 +25,15 @@ declare class __sveltets_Render<Datum extends DataRecord> {
         usedScales: UsedScales;
         fallbackStyle?: "fill" | "stroke";
     };
-    events(): {};
-    slots(): {};
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<Datum extends DataRecord> {
+    props(): ReturnType<typeof $$render<Datum>>['props'];
+    events(): ReturnType<typeof $$render<Datum>>['events'];
+    slots(): ReturnType<typeof $$render<Datum>>['slots'];
     bindings(): "";
     exports(): {};
 }

package/dist/marks/helpers/canvas.js

@@ -8,7 +8,7 @@ export function resolveColor(color, canvas) {
     }
     if (CSS_URL.test(color)) {
         // might be a gradient we can parse!
-        const m = color.match(/^url\((#[^\)]+)\)/);
+        const m = color.match(/^url\((#[^)]+)\)/);
         const gradientId = m[1];
         const gradient = canvas.ownerDocument.querySelector(gradientId);
         if (gradient) {

package/dist/marks/helpers/waffle.d.ts

@@ -1,3 +1,9 @@
+/**
+ * This implementation is based on the waffle chart implementation in Observable Plot!
+ * https://github.com/observablehq/plot/blob/main/src/marks/waffle.js
+ *
+ * Kept the comments from the original implementation for clarity.
+ */
 import type { Snippet } from 'svelte';
 import type { StackOptions } from '../../transforms/stack';
 import type { BorderRadius, ConstantAccessor, PlotScales, ScaledDataRecord } from '../../types';

package/dist/marks/helpers/waffle.js

@@ -1,41 +1,9 @@
-// A waffle is approximately a rectangular shape, but may have one or two corner
-// cuts if the starting or ending value is not an even multiple of the number of
-// columns (the width of the waffle in cells). We can represent any waffle by
-// 8 points; below is a waffle of five columns representing the interval 2–11:
-//
-// 1-0
-// |•7-------6
-// |• • • • •|
-// 2---3• • •|
-//     4-----5
-//
-// Note that points 0 and 1 always have the same y-value, points 1 and 2 have
-// the same x-value, and so on, so we don’t need to materialize the x- and y-
-// values of all points. Also note that we can’t use the already-projected y-
-// values because these assume that y-values are distributed linearly along y
-// rather than wrapping around in columns.
-//
-// The corner points may be coincident. If the ending value is an even multiple
-// of the number of columns, say representing the interval 2–10, then points 6,
-// 7, and 0 are the same.
-//
-// 1-----0/7/6
-// |• • • • •|
-// 2---3• • •|
-//     4-----5
-//
-// Likewise if the starting value is an even multiple, say representing the
-// interval 0–10, points 2–4 are coincident.
-//
-// 1-----0/7/6
-// |• • • • •|
-// |• • • • •|
-// 4/3/2-----5
-//
-// Waffles can also represent fractional intervals (e.g., 2.4–10.1). These
-// require additional corner cuts, so the implementation below generates a few
-// more points.
-//
+/**
+ * This implementation is based on the waffle chart implementation in Observable Plot!
+ * https://github.com/observablehq/plot/blob/main/src/marks/waffle.js
+ *
+ * Kept the comments from the original implementation for clarity.
+ */
 import { getPatternId } from '../../helpers/getBaseStyles';
 export function wafflePolygon(y, options, scales) {
     const x = y === 'y' ? 'x' : 'y';

package/dist/transforms/index.d.ts

@@ -3,7 +3,7 @@ export { bollingerX, bollingerY } from './bollinger.js';
 export { geoCentroid } from './centroid.js';
 export { filter } from './filter.js';
 export { map, mapX, mapY } from './map.js';
-export { normalizeX, normalizeY } from './normalize.js';
+export { normalizeX, normalizeY, normalizeParallelX, normalizeParallelY } from './normalize.js';
 export { group, groupX, groupY, groupZ } from './group.js';
 export { intervalX, intervalY } from './interval.js';
 export { jitterX, jitterY } from './jitter.js';

package/dist/transforms/index.js

@@ -3,7 +3,7 @@ export { bollingerX, bollingerY } from './bollinger.js';
 export { geoCentroid } from './centroid.js';
 export { filter } from './filter.js';
 export { map, mapX, mapY } from './map.js';
-export { normalizeX, normalizeY } from './normalize.js';
+export { normalizeX, normalizeY, normalizeParallelX, normalizeParallelY } from './normalize.js';
 export { group, groupX, groupY, groupZ } from './group.js';
 export { intervalX, intervalY } from './interval.js';
 export { jitterX, jitterY } from './jitter.js';

package/dist/transforms/normalize.js

@@ -1,5 +1,6 @@
 import { mapX, mapY } from './map.js';
 import { min, max, mean, median, sum, deviation, extent } from 'd3-array';
+import { sort } from './sort.js';
 export function normalizeX(args, basis) {
     return mapX(args, normalize(basis));
 }
@@ -84,3 +85,47 @@ const normalizeMean = normalizeAccessor(mean);
 const normalizeMedian = normalizeAccessor(median);
 const normalizeMin = normalizeAccessor(min);
 const normalizeSum = normalizeAccessor(sum);
+/**
+ * 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 function normalizeParallelY(args, basis) {
+    return sort({
+        ...normalizeY({
+            ...args,
+            // use x as the grouping variable for normalization to normalize
+            // each axis independently
+            z: args.x
+        }, basis),
+        // restore original grouping by line
+        z: args.z,
+        // sort by original order
+        sort: args.z
+    });
+}
+/**
+ * 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 function normalizeParallelX(args, basis) {
+    return sort({
+        ...normalizeX({
+            ...args,
+            // use x as the grouping variable for normalization to normalize
+            // each axis independently
+            z: args.y
+        }, basis),
+        // restore original grouping by line
+        z: args.z,
+        // sort by original order
+        sort: args.z
+    });
+}

package/dist/ui/ExamplesGrid.svelte

@@ -1,14 +1,30 @@
 <script>
     import { resolve } from '$app/paths';
+    import { useDark } from './isDark.svelte';
     let { examples } = $props();
+
+    const exampleImages = import.meta.glob('../../snapshots/*/*.png', {
+        eager: true,
+        query: {
+            enhanced: true,
+            w: 640
+        }
+    });
+
+    const ds = useDark();
 </script>
 
 <div class="list">
     {#each examples as page, i (i)}
         <a href={resolve(page.url)}>
             <div>
-                {#if page.screenshot}
-                    <img src={page.screenshot} alt={page.title} />{/if}
+                {#if exampleImages[`../../snapshots/${page.key}.png`]}
+                    <enhanced:img
+                        src={ds.isDark
+                            ? exampleImages[`../../snapshots/${page.key}.dark.png`].default.img.src
+                            : exampleImages[`../../snapshots/${page.key}.png`].default.img.src}
+                        alt={page.title} />
+                {/if}
             </div>
             <h4>
                 {page.title}
@@ -49,7 +65,7 @@
         }
     }
 
-    .list img {
+    .list :global(img) {
         width: 100%;
         box-sizing: border-box;
         border-radius: 3px;

package/dist/ui/ExamplesPagePreview.svelte

@@ -0,0 +1,149 @@
+<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)}
+                    <a
+                        animate:slide
+                        href={resolve(page.replace('./', './examples/').replace('.svelte', ''))}
+                        ><div>
+                            <enhanced:img
+                                title={pages[page].title}
+                                src={exampleImages[
+                                    `../../snapshots/${page
+                                        .replace('./', '')
+                                        .replace('.svelte', ds.isDark ? '.dark.png' : '.png')}`
+                                ].default}
+                                alt={pages[page].title} />
+                            <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;
+
+        h3 {
+            break-before: avoid-column;
+            text-transform: capitalize;
+        }
+    }
+
+    .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/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;
+}