svelteplot 0.1.3-next.9 → 0.2.1

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

@@ -18,6 +18,7 @@
         ScaledDataRecord,
         ScaleType
     } from './types.js';
+    import { isEqual } from 'es-toolkit';
     import { getUsedScales, projectXY, projectX, projectY } from './helpers/scales.js';
     import { testFilter, isValid } from './helpers/index.js';
     import { resolveChannel, resolveProp } from './helpers/resolve.js';
@@ -105,6 +106,13 @@
 
     let added = false;
 
+    $effect(() => {
+        const prevOptions = untrack(() => mark.options);
+        if (!isEqual(prevOptions, optionsWithAutoFacet)) {
+            mark.options = optionsWithAutoFacet;
+        }
+    });
+
     $effect(() => {
         if (added) return;
         // without using untrack() here we end up with inexplicable
@@ -118,6 +126,7 @@
         );
         mark.data = untrack(() => data);
         mark.options = untrack(() => optionsWithAutoFacet);
+
         addMark(mark);
         added = true;
     });
@@ -225,9 +234,15 @@
                                       usedScales.y,
                                       suffix
                                   );
+
                         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);
                     }
                 }
             }
@@ -238,7 +253,7 @@
                 ScaleName
             ][]) {
                 // check if the mark has defined an accessor for this channel
-                if (options?.[channel] !== undefined && out[channel] === undefined) {
+                if (options?.[channel] != null && out[channel] === undefined) {
                     // resolve value
                     const value = row[channel];
 
@@ -251,6 +266,7 @@
                         : value;
 
                     out.valid = out.valid && isValid(value);
+
                     // apply dx/dy transform
                     out[channel] =
                         scale === 'x' && Number.isFinite(scaled) ? (scaled as number) + dx : scaled;

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/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;
@@ -16,3 +16,4 @@ export declare const POSITION_CHANNELS: Set<ChannelName>;
 export declare function parseInset(inset: number | string, width: number): number;
 export declare function omit<T extends {}, K extends keyof T>(obj: T, ...keys: K[]): Omit<T, K>;
 export declare function identity<T>(x: T): T;
+export declare const GEOJSON_PREFER_STROKE: Set<string>;

package/dist/helpers/index.js

@@ -53,3 +53,4 @@ export function omit(obj, ...keys) {
 export function identity(x) {
     return x;
 }
+export const GEOJSON_PREFER_STROKE = new Set(['MultiLineString', 'LineString']);

package/dist/helpers/resolve.js

@@ -4,16 +4,17 @@ import isRawValue from './isRawValue.js';
 import { isValid } from './isValid.js';
 import { pick } from 'es-toolkit';
 import { getBaseStylesObject } from './getBaseStyles.js';
+import { RAW_VALUE } from '../transforms/recordize.js';
 export function resolveProp(accessor, datum, _defaultValue = null) {
     if (typeof accessor === 'function') {
-        // datum.___orig___ exists if an array of raw values was used as dataset and got
+        // datum[RAW_VALUE] exists if an array of raw values was used as dataset and got
         // "recordized" by the recordize transform. We want to hide this wrapping to the user
         // so we're passing the original value to accessor functions instead of our wrapped record
         return datum == null
             ? accessor()
-            : accessor(datum.___orig___ != null ? datum.___orig___ : datum);
+            : accessor(datum[RAW_VALUE] != null ? datum[RAW_VALUE] : datum);
     }
-    else if (typeof accessor === 'string' && datum && datum[accessor] !== undefined) {
+    else if ((typeof accessor === 'string' || typeof accessor === 'symbol') && datum && datum[accessor] !== undefined) {
         return datum[accessor];
     }
     return isRawValue(accessor) ? accessor : _defaultValue;
@@ -46,12 +47,12 @@ function resolve(datum, accessor, channel, scale) {
     if (isDataRecord(datum)) {
         // use accessor function
         if (typeof accessor === 'function')
-            // datum.___orig___ exists if an array of raw values was used as dataset and got
+            // datum[RAW_VALUE] exists if an array of raw values was used as dataset and got
             // "recordized" by the recordize transform. We want to hide this wrapping to the user
             // so we're passing the original value to accessor functions instead of our wrapped record
-            return accessor(datum.___orig___ != null ? datum.___orig___ : datum);
+            return accessor(datum[RAW_VALUE] != null ? datum[RAW_VALUE] : 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.d.ts

@@ -1,4 +1,4 @@
-import type { ChannelAccessor, GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, ScaledChannelName } from '../types.js';
+import type { ChannelAccessor, GenericMarkOptions, Mark, MarkType, PlotDefaults, PlotOptions, PlotScales, PlotState, RawValue, ScaleName, ScaleOptions, ScaleType, ScaledChannelName, UsedScales } from '../types.js';
 /**
  * compute the plot scales
  */
@@ -35,7 +35,7 @@ export declare function inferScaleType(name: ScaleName, dataValues: RawValue[],
  * scales, we need to check if the the scale is supposed to be used
  * not. That's what this function is used for.
  */
-export declare function getUsedScales(plot: PlotState, options: GenericMarkOptions, mark: Mark<GenericMarkOptions>): { [k in ScaledChannelName]: boolean; };
+export declare function getUsedScales(plot: PlotState, options: GenericMarkOptions, mark: Mark<GenericMarkOptions>): UsedScales;
 export declare function looksLikeANumber(input: string | number): boolean;
 export declare function projectXY(scales: PlotScales, x: RawValue, y: RawValue, useXScale?: boolean, useYScale?: boolean): [number, number];
 export declare function projectX(channel: 'x' | 'x1' | 'x2', scales: PlotScales, value: RawValue): number;

package/dist/helpers/scales.js

@@ -113,7 +113,7 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
                             for (const datum of mark.data) {
                                 const value = resolveProp(channelOptions.value, datum);
                                 dataValues.add(value);
-                                if (name === 'color' && scaleOptions.type === 'quantile') {
+                                if (name === 'color' && scaleOptions.type === 'quantile' || scaleOptions.type === 'quantile-cont') {
                                     allDataValues.push(value);
                                 }
                             }
@@ -146,8 +146,11 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
     if (isOrdinal && sortOrdinalDomain) {
         valueArr.sort(ascending);
     }
+    const valueArray = type === 'quantile' || type === 'quantile-cont' ? allDataValues.toSorted() : valueArr;
     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' ||
@@ -155,9 +158,9 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
             type === 'quantile' ||
             type === 'quantile-cont'
             ? name === 'y'
-                ? valueArr.toReversed()
-                : valueArr
-            : extent(scaleOptions.zero ? [0, ...valueArr] : valueArr);
+                ? valueArray.toReversed()
+                : valueArray
+            : extent(scaleOptions.zero ? [0, ...valueArray] : valueArray);
     if (!scaleOptions.scale) {
         throw new Error(`No scale function defined for ${name}`);
     }

package/dist/helpers/typeChecks.js

@@ -26,16 +26,20 @@ export function isSymbolOrNull(v) {
     return v == null || ((typeof v === 'string' || typeof v === 'object') && isSymbol(v));
 }
 export function isColorOrNull(v) {
-    return (v == null ||
-        (typeof v === 'string' &&
-            (v === 'currentColor' ||
-                CSS_VAR.test(v) ||
-                CSS_COLOR.test(v) ||
-                CSS_COLOR_MIX.test(v) ||
-                CSS_COLOR_CONTRAST.test(v) ||
-                CSS_RGBA.test(v) ||
-                CSS_URL.test(v) ||
-                color(v) !== null)));
+    if (v == null)
+        return true;
+    if (typeof v === 'string') {
+        v = `${v}`.toLowerCase();
+        return (v === 'currentcolor' ||
+            CSS_VAR.test(v) ||
+            CSS_COLOR.test(v) ||
+            CSS_COLOR_MIX.test(v) ||
+            CSS_COLOR_CONTRAST.test(v) ||
+            CSS_RGBA.test(v) ||
+            CSS_URL.test(v) ||
+            color(v) !== null);
+    }
+    return false;
 }
 export function isOpacityOrNull(v) {
     return v == null || (typeof v === 'number' && Number.isFinite(v) && v >= 0 && v <= 1);

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;