svelteplot 0.7.0-pr-276.0 → 0.7.0-pr-277.0

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.d.ts

@@ -2,4 +2,22 @@ import type { TransformArg, MapIndexObject } from '../types/index.js';
 type NormalizeBasis = 'deviation' | 'first' | 'last' | 'min' | 'max' | 'mean' | 'median' | 'sum' | 'extent' | MapIndexObject;
 export declare function normalizeX<T>(args: TransformArg<T>, basis: NormalizeBasis): any;
 export declare function normalizeY<T>(args: TransformArg<T>, basis: NormalizeBasis): 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): 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 normalizeParallelX<T>(args: TransformArg<T>, basis: NormalizeBasis): any;
 export {};

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

@@ -1,7 +1,8 @@
 <script lang="ts">
     import { resolve } from '$app/paths';
+    import { useDark } from './isDark.svelte';
 
-    const exampleImages = import.meta.glob('../../../static/examples/*/*.png', {
+    const exampleImages = import.meta.glob('../../snapshots/*/*.png', {
         eager: true,
         query: {
             enhanced: true,
@@ -11,8 +12,7 @@
 
     let {
         paths,
-        pages,
-        isDark
+        pages
     }: {
         paths: Record<string, string[]>;
         pages: Record<
@@ -24,9 +24,10 @@
                 transforms?: string[];
             }
         >;
-        isDark: boolean;
     } = $props();
 
+    const ds = useDark();
+
     function sortPages(a: string, b: string) {
         const sortA = pages[a].sortKey ?? 10;
         const sortB = pages[b].sortKey ?? 10;
@@ -53,9 +54,9 @@
                             <enhanced:img
                                 title={pages[page].title}
                                 src={exampleImages[
-                                    `../../../static/examples/${page
+                                    `../../snapshots/${page
                                         .replace('./', '')
-                                        .replace('.svelte', isDark ? '.dark.png' : '.png')}`
+                                        .replace('.svelte', ds.isDark ? '.dark.png' : '.png')}`
                                 ].default}
                                 alt={pages[page].title} />
                             <div class="title">{pages[page].title}</div>

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

@@ -6,7 +6,6 @@ type $$ComponentProps = {
         sortKey?: number;
         transforms?: string[];
     }>;
-    isDark: boolean;
 };
 declare const ExamplesPagePreview: import("svelte").Component<$$ComponentProps, {}, "">;
 type ExamplesPagePreview = ReturnType<typeof 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;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.7.0-pr-276.0",
+    "version": "0.7.0-pr-277.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",