svelteplot 0.0.1-alpha.9 → 0.1.3-next.3

package/LICENSE.md

@@ -0,0 +1,5 @@
+Copyright 2024, 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.

package/README.md

@@ -1,38 +1,5 @@
-# create-svelte
+# SveltePlot
 
-Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
+SveltePlot is a new reactive visualization framework based on the [layered grammar of graphics](https://vita.had.co.nz/papers/layered-grammar.html) ideas. It's API is heavily inspired by [Observable Plot](https://github.com/observablehq/plot). Created by Gregor Aisch.
 
-## Creating a project
-
-If you're seeing this, you've probably already done this step. Congrats!
-
-```bash
-# create a new project in the current directory
-npm create svelte@latest
-
-# create a new project in my-app
-npm create svelte@latest my-app
-```
-
-## Developing
-
-Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
-
-```bash
-npm run dev
-
-# or start the server and open the app in a new browser tab
-npm run dev -- --open
-```
-
-## Building
-
-To create a production version of your app:
-
-```bash
-npm run build
-```
-
-You can preview the production build with `npm run preview`.
-
-> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
+<img src="static/logo.png" alt="logo" width="400" />

package/dist/Mark.svelte

@@ -0,0 +1,292 @@
+<script lang="ts">
+    import { getContext, untrack, type Snippet } from 'svelte';
+
+    import { CHANNEL_SCALE } from './constants.js';
+    import type {
+        ScaledChannelName,
+        MarkType,
+        DataRecord,
+        PlotContext,
+        ChannelName,
+        GenericMarkOptions,
+        ChannelAccessor,
+        BaseMarkProps,
+        FacetContext,
+        ScaleName,
+        RawValue,
+        ResolvedDataRecord,
+        ScaledDataRecord,
+        ScaleType
+    } from './types.js';
+    import { getUsedScales, projectXY, projectX, projectY } from './helpers/scales.js';
+    import { testFilter, isValid } from './helpers/index.js';
+    import { resolveChannel, resolveProp } from './helpers/resolve.js';
+
+    type MarkProps = {
+        data?: DataRecord[];
+        automatic?: boolean;
+        type: MarkType;
+        channels?: ScaledChannelName[];
+        required?: ScaledChannelName[];
+        requiredScales?: Partial<Record<ScaleName, ScaleType[]>>;
+        children?: Snippet<
+            [
+                {
+                    mark: Mark<GenericMarkOptions>;
+                    usedScales: ReturnType<typeof getUsedScales>;
+                    scaledData: ScaledDataRecord[];
+                }
+            ]
+        >;
+        defaults?: Partial<Record<ScaledChannelName, RawValue>>;
+    } & Partial<Record<ChannelName, ChannelAccessor>> &
+        Partial<BaseMarkProps>;
+
+    let {
+        data = [],
+        children,
+        type,
+        channels = [],
+        required = [],
+        requiredScales = {},
+        defaults = {},
+        ...options
+    }: MarkProps = $props();
+
+    const channelsWithFacets: ScaledChannelName[] = $derived([...channels, 'fx', 'fy']);
+
+    const { addMark, updateMark, updatePlotState, removeMark, getTopLevelFacet, getPlotState } =
+        getContext<PlotContext>('svelteplot');
+
+    const plot = $derived(getPlotState());
+    const facet = $derived(getTopLevelFacet());
+
+    const { getFacetState } = getContext<FacetContext>('svelteplot/facet');
+    const { left, top } = $derived(getFacetState());
+
+    class Mark {
+        id;
+        type;
+        channels: ScaledChannelName[] = $state.raw([]);
+        scales: Set<ScaleName> = $state.raw(new Set());
+        data: DataRecord[] = $state.raw([]);
+        options: GenericMarkOptions = $state.raw({});
+
+        constructor(type: MarkType) {
+            this.id = Symbol();
+            this.type = type;
+        }
+    }
+
+    const mark = new Mark(type);
+
+    $effect(() => {
+        return () => {
+            removeMark(mark);
+            added = false;
+        };
+    });
+
+    // let mark2 = $state(mark);
+    const facetMode = $derived(options.facet || 'auto');
+
+    const optionsWithAutoFacet = $derived({
+        ...options,
+        __firstFacet: left && top,
+        ...(facet &&
+        facet.data &&
+        ((facetMode === 'auto' && facet.data === data) || facetMode === 'include')
+            ? {
+                  fx: facet.x,
+                  fy: facet.y
+              }
+            : {})
+    });
+
+    let added = false;
+
+    $effect(() => {
+        if (added) return;
+        // without using untrack() here we end up with inexplicable
+        // circular dependency updates resulting in a stack overflow
+        const channels = untrack(() => channelsWithFacets);
+        mark.channels = channels;
+        mark.scales = new Set(
+            channels
+                .filter((channel) => options[channel] !== 0)
+                .map((channel) => CHANNEL_SCALE[channel])
+        );
+        mark.data = untrack(() => data);
+        mark.options = untrack(() => optionsWithAutoFacet);
+        addMark(mark);
+        added = true;
+    });
+
+    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
+    const testFacet = $derived(getTestFacet());
+
+    const resolvedData: ResolvedDataRecord[] = $derived(
+        data.flatMap((row) => {
+            const channels = options as Record<ChannelName, ChannelAccessor>;
+            if (!testFacet(row, channels) || !testFilter(row, channels)) return [];
+            const out: ResolvedDataRecord = {
+                datum: row
+            };
+            for (const [channel] of Object.entries(CHANNEL_SCALE) as [
+                ScaledChannelName,
+                ScaleName
+            ][]) {
+                // check if the mark has defined an accessor for this channel
+                if (options?.[channel] !== undefined && out[channel] === undefined) {
+                    // resolve value
+                    out[channel] = resolveChannel(channel, row, options);
+                }
+            }
+            return [out];
+        })
+    );
+
+    let prevResolvedData: ResolvedDataRecord[] = [];
+
+    $effect(() => {
+        if (isDifferent(resolvedData, prevResolvedData)) {
+            prevResolvedData = resolvedData;
+            // data has changed
+            mark.data = data;
+        }
+    });
+
+    function isDifferent(array1: ResolvedDataRecord[], array2: ResolvedDataRecord[]) {
+        if (array1.length !== array2.length) return true;
+        for (let i = 0; i < array1.length; i++) {
+            for (const [channel] of Object.entries(CHANNEL_SCALE) as [
+                ScaledChannelName,
+                ScaleName
+            ][]) {
+                if (array1[i][channel] !== array2[i][channel]) return true;
+            }
+        }
+        return false;
+    }
+
+    const errors = $derived([
+        ...required
+            .filter((name) => options[name] == null)
+            .map((name) => `missing channel value for ${mark.type} mark: ${name}`),
+        ...Object.entries(requiredScales)
+            .filter(([scale, types]) => {
+                return !types.includes(plot.scales[scale].type);
+            })
+            .map(
+                ([scale, types]) => `scale type mismatch for ${scale} (needs ${types.join(' or ')})`
+            )
+    ]);
+
+    $effect(() => {
+        for (const name of required) {
+            if (options[name] == null) throw new Error(`missing channel value: ${name}`);
+        }
+    });
+
+    const usedScales = $derived(getUsedScales(plot, optionsWithAutoFacet, mark));
+    /**
+     * based on the data and the global scales we can now map the data
+     * elements to the scales
+     */
+    const scaledData = $derived(
+        resolvedData.flatMap((row) => {
+            const out: ScaledDataRecord = {
+                datum: row.datum,
+                valid: true
+            };
+            // compute dx/dy
+            const dx = Number(resolveProp<number>(options.dx, out.datum, 0));
+            const dy = Number(resolveProp<number>(options.dy, out.datum, 0));
+
+            // special handling if there's a projection
+            if (plot.scales.projection && mark.type !== 'geo') {
+                for (const suffix of ['', '1', '2']) {
+                    if (
+                        options?.[`x${suffix}`] !== undefined &&
+                        options?.[`y${suffix}`] !== undefined
+                    ) {
+                        // we have two-dimensional accessors
+                        // for the x and y channels
+                        const rx = resolveChannel(`x${suffix}`, row, options);
+                        const ry = resolveChannel(`y${suffix}`, row, options);
+                        const [x, y] =
+                            mark.type === 'line'
+                                ? [rx, ry] // line paths are projected later
+                                : projectXY(
+                                      plot.scales,
+                                      rx,
+                                      ry,
+                                      usedScales.x,
+                                      usedScales.y,
+                                      suffix
+                                  );
+                        out[`x${suffix}`] = x;
+                        out[`y${suffix}`] = y;
+                        out.valid = out.valid && isValid(rx) && isValid(ry);
+                    }
+                }
+            }
+
+            // iterate over all scaled channels
+            for (const [channel, scale] of Object.entries(CHANNEL_SCALE) as [
+                ScaledChannelName,
+                ScaleName
+            ][]) {
+                // check if the mark has defined an accessor for this channel
+                if (options?.[channel] !== undefined && out[channel] === undefined) {
+                    // resolve value
+                    const value = row[channel];
+
+                    const scaled = usedScales[channel]
+                        ? scale === 'x'
+                            ? projectX(channel as 'x' | 'x1' | 'x2', plot.scales, value)
+                            : scale === 'y'
+                              ? projectY(channel as 'y' | 'y1' | 'y1', plot.scales, value)
+                              : plot.scales[scale].fn(value)
+                        : value;
+
+                    out.valid = out.valid && isValid(value);
+                    // apply dx/dy transform
+                    out[channel] =
+                        scale === 'x' && Number.isFinite(scaled) ? (scaled as number) + dx : scaled;
+                    out[channel] =
+                        scale === 'y' && Number.isFinite(scaled) ? (scaled as number) + dy : scaled;
+                } else if (defaults[channel]) {
+                    out[channel] = defaults[channel];
+                }
+            }
+
+            return [out];
+        })
+    );
+</script>
+
+{#if errors.length}
+    <text transform="translate(10,10)">
+        {#each errors as error, i}
+            <tspan x="0" dy={i ? 14 : 0}>{error}</tspan>
+        {/each}
+    </text>
+{:else if children}
+    {@render children({
+        mark,
+        usedScales,
+        scaledData
+    })}
+{/if}
+
+<style>
+    text {
+        stroke: var(--plot-bg);
+        fill: crimson;
+        font-size: 11px;
+        stroke-width: 3px;
+        font-weight: bold;
+        paint-order: stroke fill;
+    }
+</style>

package/dist/Mark.svelte.d.ts

@@ -0,0 +1,22 @@
+import { type Snippet } from 'svelte';
+import type { ScaledChannelName, MarkType, DataRecord, ChannelName, GenericMarkOptions, ChannelAccessor, BaseMarkProps, ScaleName, RawValue, ScaledDataRecord, ScaleType } from './types.js';
+import { getUsedScales } from './helpers/scales.js';
+type MarkProps = {
+    data?: DataRecord[];
+    automatic?: boolean;
+    type: MarkType;
+    channels?: ScaledChannelName[];
+    required?: ScaledChannelName[];
+    requiredScales?: Partial<Record<ScaleName, ScaleType[]>>;
+    children?: Snippet<[
+        {
+            mark: Mark<GenericMarkOptions>;
+            usedScales: ReturnType<typeof getUsedScales>;
+            scaledData: ScaledDataRecord[];
+        }
+    ]>;
+    defaults?: Partial<Record<ScaledChannelName, RawValue>>;
+} & Partial<Record<ChannelName, ChannelAccessor>> & Partial<BaseMarkProps>;
+declare const Mark: import("svelte").Component<MarkProps, {}, "">;
+type Mark = ReturnType<typeof Mark>;
+export default Mark;