svelteplot 0.7.0-pr-269.0 → 0.7.0-pr-274.0

package/LICENSE.md

@@ -1,5 +1,23 @@
-Copyright 2024, Gregor Aisch
+Copyright 2024-2025, Gregor Aisch
 
 Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
 
 THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
+
+---
+
+Portions of this library have been ported from Observable Plot, which is covered by the following license:
+
+Copyright 2020-2025 Observable, Inc.
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.

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/ui/ExamplesPagePreview.svelte

@@ -0,0 +1,148 @@
+<script lang="ts">
+    import { resolve } from '$app/paths';
+
+    const exampleImages = import.meta.glob('../../../static/examples/*/*.png', {
+        eager: true,
+        query: {
+            enhanced: true,
+            w: 440
+        }
+    });
+
+    let {
+        paths,
+        pages,
+        isDark
+    }: {
+        paths: Record<string, string[]>;
+        pages: Record<
+            string,
+            {
+                title: string;
+                description?: string;
+                sortKey?: number;
+                transforms?: string[];
+            }
+        >;
+        isDark: boolean;
+    } = $props();
+
+    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[
+                                    `../../../static/examples/${page
+                                        .replace('./', '')
+                                        .replace('.svelte', 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,13 @@
+type $$ComponentProps = {
+    paths: Record<string, string[]>;
+    pages: Record<string, {
+        title: string;
+        description?: string;
+        sortKey?: number;
+        transforms?: string[];
+    }>;
+    isDark: boolean;
+};
+declare const ExamplesPagePreview: import("svelte").Component<$$ComponentProps, {}, "">;
+type ExamplesPagePreview = ReturnType<typeof ExamplesPagePreview>;
+export default ExamplesPagePreview;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.7.0-pr-269.0",
+    "version": "0.7.0-pr-274.0",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -56,6 +56,7 @@
         "@emotion/css": "^11.13.5",
         "@sveltejs/adapter-auto": "^7.0.0",
         "@sveltejs/adapter-static": "^3.0.10",
+        "@sveltejs/enhanced-img": "^0.6.1",
         "@sveltejs/eslint-config": "^8.3.4",
         "@sveltejs/kit": "^2.48.5",
         "@sveltejs/package": "^2.5.4",