svelteplot 0.1.3-next.8 → 0.2.0

package/README.md

@@ -1,5 +1,7 @@
 # SveltePlot
 
-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.
+![Tests](https://github.com/svelteplot/svelteplot/actions/workflows/test.yml/badge.svg)
 
-<img src="static/logo.png" alt="logo" width="400" />
+SveltePlot is a 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.
+
+<img src="static/logo.png" alt="SveltePlot logo" width="401" />

package/dist/Mark.svelte

@@ -78,8 +78,6 @@
         }
     }
 
-    
-
     const mark = new Mark(type);
 
     $effect(() => {
@@ -128,24 +126,26 @@
     const testFacet = $derived(getTestFacet());
 
     const resolvedData: ResolvedDataRecord[] = $derived(
-        data.map((d,i) => ({...d, [INDEX]: i})).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);
+        data
+            .map((d, i) => ({ ...d, [INDEX]: i }))
+            .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];
-        })
+                return [out];
+            })
     );
 
     let prevResolvedData: ResolvedDataRecord[] = [];
@@ -158,7 +158,6 @@
         }
     });
 
-     
     function isDifferent(array1: ResolvedDataRecord[], array2: ResolvedDataRecord[]) {
         if (array1.length !== array2.length) return true;
         for (let i = 0; i < array1.length; i++) {
@@ -228,7 +227,12 @@
                                   );
                         out[`x${suffix}`] = x;
                         out[`y${suffix}`] = y;
-                        out.valid = out.valid && isValid(row.x) && isValid(row.y);
+                        out.valid =
+                            out.valid &&
+                            isValid(row.x) &&
+                            isValid(row.y) &&
+                            isValid(x) &&
+                            isValid(y);
                     }
                 }
             }

package/dist/Plot.svelte

@@ -116,39 +116,47 @@
         scales,
         ...restProps
     })}
-        <!-- implicit axes -->
-        {#if !hasProjection && !hasExplicitAxisX}
-            {#if options.axes && (options.x.axis === 'top' || options.x.axis === 'both')}
-                <AxisX anchor="top" automatic />
+        <svelte:boundary onerror={(err) => console.warn(err)}>
+            <!-- implicit axes -->
+            {#if !hasProjection && !hasExplicitAxisX}
+                {#if options.axes && (options.x.axis === 'top' || options.x.axis === 'both')}
+                    <AxisX anchor="top" automatic />
+                {/if}
+                {#if options.axes && (options.x.axis === 'bottom' || options.x.axis === 'both')}
+                    <AxisX anchor="bottom" automatic />
+                {/if}
             {/if}
-            {#if options.axes && (options.x.axis === 'bottom' || options.x.axis === 'both')}
-                <AxisX anchor="bottom" automatic />
+            {#if !hasProjection && !hasExplicitAxisY}
+                {#if options.axes && (options.y.axis === 'left' || options.y.axis === 'both')}
+                    <AxisY anchor="left" automatic />
+                {/if}
+                {#if options.axes && (options.y.axis === 'right' || options.y.axis === 'both')}
+                    <AxisY anchor="right" automatic />
+                {/if}
             {/if}
-        {/if}
-        {#if !hasProjection && !hasExplicitAxisY}
-            {#if options.axes && (options.y.axis === 'left' || options.y.axis === 'both')}
-                <AxisY anchor="left" automatic />
+            <!-- implicit grids -->
+            {#if !hasExplicitGridX && (options.grid || options.x.grid)}
+                <GridX automatic />
             {/if}
-            {#if options.axes && (options.y.axis === 'right' || options.y.axis === 'both')}
-                <AxisY anchor="right" automatic />
+            {#if !hasExplicitGridY && (options.grid || options.y.grid)}
+                <GridY automatic />
             {/if}
-        {/if}
-        <!-- implicit grids -->
-        {#if !hasExplicitGridX && (options.grid || options.x.grid)}
-            <GridX automatic />
-        {/if}
-        {#if !hasExplicitGridY && (options.grid || options.y.grid)}
-            <GridY automatic />
-        {/if}
-        <!-- implicit frame -->
-        {#if options.frame}
-            <Frame automatic />
-        {/if}
-        {@render parentChildren?.({
-            options,
-            scales,
-            ...restProps
-        })}
+            <!-- implicit frame -->
+            {#if options.frame}
+                <Frame automatic />
+            {/if}
+            {@render parentChildren?.({
+                options,
+                scales,
+                ...restProps
+            })}
+            {#snippet failed(error, reset)}
+                <text class="error" transform="translate(10,10)">
+                    {#each error.message.split('\n') as line, i}
+                        <tspan x="0" dy={i ? 14 : 0}>{line}</tspan>
+                    {/each}
+                </text>{/snippet}
+        </svelte:boundary>
     {/snippet}
     {#snippet facetAxes()}
         <FacetAxes />
@@ -160,4 +168,12 @@
         --plot-bg: white;
         --plot-fg: currentColor;
     }
+    text.error {
+        stroke: var(--plot-bg);
+        fill: crimson;
+        font-size: 11px;
+        stroke-width: 3px;
+        font-weight: bold;
+        paint-order: stroke fill;
+    }
 </style>

package/dist/core/Plot.svelte

@@ -156,7 +156,7 @@
             explicitDomains,
             hasProjection: !!initialOpts.projection,
             margins: initialOpts.margins,
-            inset: initialOpts.inset, 
+            inset: initialOpts.inset
         })
     );
 
@@ -175,7 +175,9 @@
 
     const hasProjection = $derived(!!preScales.projection);
 
-    const plotWidth = $derived((fixedWidth || width) - plotOptions.marginLeft - plotOptions.marginRight);
+    const plotWidth = $derived(
+        (fixedWidth || width) - plotOptions.marginLeft - plotOptions.marginRight
+    );
 
     // the facet and y domain counts are used for computing the automatic height
     const xFacetCount = $derived(Math.max(1, preScales.fx.domain.length));

package/dist/helpers/index.d.ts

@@ -4,7 +4,7 @@ import type { Snippet } from 'svelte';
  * Returns first argument that is not null or undefined
  */
 export declare function coalesce(...args: (RawValue | undefined | null)[]): RawValue | null;
-export declare function testFilter(datum: DataRecord, options: Record<ChannelName, ChannelAccessor>): string | number | boolean | Date | null;
+export declare function testFilter(datum: DataRecord, options: Record<ChannelName, ChannelAccessor>): string | number | boolean | symbol | Date | null;
 export declare function randomId(): string;
 export declare function isSnippet(value: unknown): value is Snippet;
 export declare function isValid(value: RawValue | undefined): value is number | Date | string;

package/dist/helpers/resolve.js

@@ -51,7 +51,7 @@ function resolve(datum, accessor, channel, scale) {
             // so we're passing the original value to accessor functions instead of our wrapped record
             return accessor(datum.___orig___ != null ? datum.___orig___ : datum);
         // use accessor string
-        if (typeof accessor === 'string' && datum[accessor] !== undefined)
+        if ((typeof accessor === 'string' || typeof accessor === 'symbol') && datum[accessor] !== undefined)
             return datum[accessor];
         // fallback to channel name as accessor
         if (accessor === null && datum[channel] !== undefined)

package/dist/helpers/scales.js

@@ -147,7 +147,9 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
         valueArr.sort(ascending);
     }
     const domain = scaleOptions.domain
-        ? extent(scaleOptions.zero ? [0, ...scaleOptions.domain] : scaleOptions.domain)
+        ? isOrdinal
+            ? scaleOptions.domain
+            : extent(scaleOptions.zero ? [0, ...scaleOptions.domain] : scaleOptions.domain)
         : type === 'band' ||
             type === 'point' ||
             type === 'ordinal' ||

package/dist/index.d.ts

@@ -10,6 +10,9 @@ export { default as BollingerX } from './marks/BollingerX.svelte';
 export { default as BollingerY } from './marks/BollingerY.svelte';
 export { default as BoxX } from './marks/BoxX.svelte';
 export { default as BoxY } from './marks/BoxY.svelte';
+export { default as Brush } from './marks/Brush.svelte';
+export { default as BrushX } from './marks/BrushX.svelte';
+export { default as BrushY } from './marks/BrushY.svelte';
 export { default as Cell } from './marks/Cell.svelte';
 export { default as CellX } from './marks/CellX.svelte';
 export { default as CellY } from './marks/CellY.svelte';

package/dist/index.js

@@ -11,6 +11,9 @@ export { default as BollingerX } from './marks/BollingerX.svelte';
 export { default as BollingerY } from './marks/BollingerY.svelte';
 export { default as BoxX } from './marks/BoxX.svelte';
 export { default as BoxY } from './marks/BoxY.svelte';
+export { default as Brush } from './marks/Brush.svelte';
+export { default as BrushX } from './marks/BrushX.svelte';
+export { default as BrushY } from './marks/BrushY.svelte';
 export { default as Cell } from './marks/Cell.svelte';
 export { default as CellX } from './marks/CellX.svelte';
 export { default as CellY } from './marks/CellY.svelte';

package/dist/marks/BarX.svelte

@@ -46,8 +46,6 @@
             stack
         )
     );
-
-    $inspect({args})
 </script>
 
 <Mark
@@ -61,16 +59,28 @@
                 {@const bw = plot.scales.y.fn.bandwidth()}
                 {@const minx = Math.min(d.x1, d.x2)}
                 {@const maxx = Math.max(d.x1, d.x2)}
-                {@const inset = resolveProp(args.inset, d.datum, 0)}
+                {@const insetLeft = resolveProp(args.insetLeft, d.datum, 0)}
+                {@const insetRight = resolveProp(args.insetRight, d.datum, 0)}
+                {@const insetTop = resolveProp(args.insetTop || args.inset, d.datum, 0)}
+                {@const insetBottom = resolveProp(args.insetBottom || args.inset, d.datum, 0)}
                 {@const dx = resolveProp(args.dx, d.datum, 0)}
                 {@const dy = resolveProp(args.dy, d.datum, 0)}
                 {#if d.valid}
                     {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
                     <path
-                        d={roundedRect(0, 0, maxx - minx, bw - inset * 2, options.borderRadius)}
+                        d={roundedRect(
+                            0,
+                            0,
+                            maxx - minx - insetLeft - insetRight,
+                            bw - insetTop - insetBottom,
+                            options.borderRadius
+                        )}
                         class={[styleClass, className]}
                         {style}
-                        transform="translate({[minx + dx, d.y + inset + dy - bw * 0.5]})"
+                        transform="translate({[
+                            minx + dx + insetLeft,
+                            d.y + insetTop + dy - bw * 0.5
+                        ]})"
                         use:addEventHandlers={{
                             getPlotState,
                             options: args,

package/dist/marks/BarY.svelte

@@ -11,10 +11,8 @@
     import {
         type PlotContext,
         type BaseMarkProps,
-        type RectMarkProps,
         type ChannelAccessor,
-        type DataRow,
-        type FacetContext
+        type DataRow
     } from '../types.js';
     import type { StackOptions } from '../transforms/stack.js';
     import { maybeData } from '../helpers/index.js';
@@ -41,25 +39,23 @@
                   bottomRight?: number;
                   bottomLeft?: number;
               };
-    } & RectMarkProps;
+    };
 
     let { data = [{}], class: className = null, stack, ...options }: BarYProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
-    let args = $derived(
+    const args = $derived(
         stackY(
             intervalY(
                 // by default, sort by x channel (the ordinal labels)
-                sort(recordizeY({ data: maybeData(data), sort: { channel: 'x' }, ...options })),
+                sort(recordizeY({ data, sort: { channel: 'x' }, ...options })),
                 { plot }
             ),
             stack
         )
     );
-
-    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
 </script>
 
 <Mark
@@ -73,16 +69,28 @@
                 {@const bw = plot.scales.x.fn.bandwidth()}
                 {@const miny = Math.min(d.y1, d.y2)}
                 {@const maxy = Math.max(d.y1, d.y2)}
-                {@const inset = resolveProp(args.inset, d.datum, 0)}
+                {@const insetLeft = resolveProp(args.insetLeft || args.inset, d.datum, 0)}
+                {@const insetRight = resolveProp(args.insetRight || args.inset, d.datum, 0)}
+                {@const insetTop = resolveProp(args.insetTop, d.datum, 0)}
+                {@const insetBottom = resolveProp(args.insetBottom, d.datum, 0)}
                 {@const dx = resolveProp(args.dx, d.datum, 0)}
                 {@const dy = resolveProp(args.dy, d.datum, 0)}
                 {#if d.valid}
                     {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
                     <path
-                        d={roundedRect(0, 0, bw - inset * 2, maxy - miny, options.borderRadius)}
+                        d={roundedRect(
+                            0,
+                            0,
+                            bw - insetLeft - insetRight,
+                            maxy - miny - insetTop - insetBottom,
+                            options.borderRadius
+                        )}
                         class={[styleClass, className]}
                         {style}
-                        transform="translate({[d.x + inset + dx - bw * 0.5, miny + dy]})"
+                        transform="translate({[
+                            d.x + insetLeft + dx - bw * 0.5,
+                            miny + dy + insetTop
+                        ]})"
                         use:addEventHandlers={{
                             getPlotState,
                             options: args,

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

@@ -1,4 +1,25 @@
+import { type BaseMarkProps, type ChannelAccessor, type DataRow } from '../types.js';
+import type { StackOptions } from '../transforms/stack.js';
+type BarYProps = BaseMarkProps & {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
+    stack?: StackOptions;
+    /**
+     * Converts y into y1/y2 ranges based on the provided interval. Disables the
+     * implicit stacking
+     */
+    interval?: number | string;
+    borderRadius?: number | {
+        topLeft?: number;
+        topRight?: number;
+        bottomRight?: number;
+        bottomLeft?: number;
+    };
+};
 /** For vertical column charts using a band scale as x axis */
-declare const BarY: import("svelte").Component<any, {}, "">;
+declare const BarY: import("svelte").Component<BarYProps, {}, "">;
 type BarY = ReturnType<typeof BarY>;
 export default BarY;