svelteplot 0.2.9 → 0.2.10

package/README.md

@@ -1,6 +1,6 @@
 # SveltePlot
 
-![Tests](https://github.com/svelteplot/svelteplot/actions/workflows/test.yml/badge.svg)
+![License](https://img.shields.io/npm/l/svelteplot.svg) ![Tests](https://github.com/svelteplot/svelteplot/actions/workflows/test.yml/badge.svg)
 
 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.
 

package/dist/Mark.svelte

@@ -56,7 +56,7 @@
 
     const channelsWithFacets: ScaledChannelName[] = $derived([...channels, 'fx', 'fy']);
 
-    const { addMark, updateMark, updatePlotState, removeMark, getTopLevelFacet, getPlotState } =
+    const { addMark, removeMark, getTopLevelFacet, getPlotState } =
         getContext<PlotContext>('svelteplot');
 
     const plot = $derived(getPlotState());
@@ -258,16 +258,17 @@
                 if (options?.[channel] != null && 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)
+                              : scale === 'color' && !isValid(value)
+                                ? plot.options.color.unknown
+                                : plot.scales[scale].fn(value)
                         : value;
 
-                    out.valid = out.valid && isValid(value);
+                    out.valid = out.valid && (scale === 'color' || isValid(value));
 
                     // apply dx/dy transform
                     out[channel] =

package/dist/Plot.svelte

@@ -117,7 +117,7 @@
             scales,
             ...restProps
         })}
-            <svelte:boundary onerror={(err) => console.warn(err)}>
+            <svelte:boundary onerror={(err) => console.error(err)}>
                 <!-- implicit axes -->
                 {#if !hasProjection && !hasExplicitAxisX}
                     {#if options.axes && (options.x.axis === 'top' || options.x.axis === 'both')}

package/dist/core/Plot.svelte

@@ -62,7 +62,7 @@
         initialWidth: 500,
         inset: 0,
         colorScheme: 'turbo',
-        unknown: '#cccccc',
+        unknown: '#cccccc99',
         dotRadius: 3,
         frame: false,
         axes: true,
@@ -450,7 +450,7 @@
                 padding: 0,
                 align: 0
             },
-            color: { type: 'auto' },
+            color: { type: 'auto', unknown: DEFAULTS.unknown },
             length: { type: 'linear' },
             symbol: { type: 'ordinal' },
             fx: { type: 'band', axis: 'top' },

package/dist/helpers/scales.js

@@ -6,6 +6,7 @@ import { resolveProp, toChannelOption } from './resolve.js';
 import isDataRecord from './isDataRecord.js';
 import { createProjection } from './projection.js';
 import { maybeInterval } from './autoTicks.js';
+import { IS_SORTED } from '../transforms/sort.js';
 /**
  * compute the plot scales
  */
@@ -54,8 +55,9 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
         // we're deliberately checking for !== undefined and not for != null
         // since the explicit sort transforms like shuffle will set the
         // sort channel to null to we know that there's an explicit order
-        if (mark.channels.sort !== undefined)
+        if ((name === 'x' || name === 'y') && mark.options[IS_SORTED] != undefined) {
             sortOrdinalDomain = false;
+        }
         for (const channel of mark.channels) {
             // channelOptions can be passed as prop, but most often users will just
             // pass the channel accessor or constant value, so we may need to wrap
@@ -135,6 +137,12 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
             }
         }
     }
+    if ((name === 'x' || name === 'y') && scaleOptions.sort) {
+        sortOrdinalDomain = true;
+    }
+    if ((name === 'x' || name === 'y') && scaleOptions.sort === false) {
+        sortOrdinalDomain = false;
+    }
     // construct domain from data values
     const valueArr = [...dataValues.values(), ...(scaleOptions.domain || [])].filter((d) => d != null);
     const type = scaleOptions.type === 'auto'

package/dist/marks/Area.svelte

@@ -29,6 +29,7 @@
     import { maybeCurve } from '../helpers/curves.js';
     import { isValid } from '../helpers/index.js';
     import AreaCanvas from './helpers/AreaCanvas.svelte';
+    import Anchor from './helpers/Anchor.svelte';
 
     import type {
         CurveName,
@@ -37,7 +38,6 @@
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
-        FacetContext,
         ScaledDataRecord,
         LinkableMarkProps
     } from '../types.js';
@@ -113,32 +113,24 @@
         {:else}
             <GroupMultiple length={grouped.length}>
                 {#each grouped as areaData, i (i)}
-                    {#snippet el(datum: ScaledDataRecord)}
-                        {@const title = resolveProp(options.title, datum.datum, '')}
-                        {@const [style, styleClass] = resolveStyles(
-                            plot,
-                            datum,
-                            options,
-                            'fill',
-                            usedScales
-                        )}
-                        <path
-                            class={['svelteplot-area', className, styleClass]}
-                            clip-path={options.clipPath}
-                            d={areaPath(areaData)}
-                            {style}
-                            >{#if title}<title>{title}</title>{/if}</path>
-                    {/snippet}
+                    {@const datum = areaData[0]}
                     {#if areaData.length > 0}
-                        {#if options.href}
-                            <a
-                                href={resolveProp(options.href, areaData[0].datum, '')}
-                                target={resolveProp(options.target, areaData[0].datum, '_self')}>
-                                {@render el(areaData[0])}
-                            </a>
-                        {:else}
-                            {@render el(areaData[0])}
-                        {/if}
+                        <Anchor {options} {datum}>
+                            {@const title = resolveProp(options.title, datum.datum, '')}
+                            {@const [style, styleClass] = resolveStyles(
+                                plot,
+                                datum,
+                                options,
+                                'fill',
+                                usedScales
+                            )}
+                            <path
+                                class={['svelteplot-area', className, styleClass]}
+                                clip-path={options.clipPath}
+                                d={areaPath(areaData)}
+                                {style}
+                                >{#if title}<title>{title}</title>{/if}</path>
+                        </Anchor>
                     {/if}
                 {/each}
             </GroupMultiple>

package/dist/marks/AxisX.svelte

@@ -25,6 +25,8 @@
         tickClass?: ConstantAccessor<string>;
         /** ticks is a shorthand for defining data, tickCount or interval */
         ticks?: number | string | RawValue[];
+        /** set to false or null to disable tick labels */
+        text: boolean | null;
     } & XOR<
             {
                 /** approximate number of ticks to be generated */
@@ -79,6 +81,7 @@
         class: className,
         tickCount = typeof magicTicks === 'number' ? magicTicks : undefined,
         tickSpacing,
+        text = true,
         ...options
     }: AxisXMarkProps = $props();
 
@@ -96,7 +99,7 @@
     const ticks: RawValue[] = $derived(
         data.length > 0
             ? // use custom tick values if user passed any as prop
-              data
+              Array.from(new Set(data))
             : // use custom scale tick values if user passed any as plot scale option
               autoTicks(
                   plot.scales.x.type,
@@ -220,6 +223,7 @@
             {tickPadding}
             {tickFontSize}
             {tickClass}
+            {text}
             {options}
             title={useTitle}
             {plot} />

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

@@ -14,6 +14,8 @@ export type AxisXMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paint
     tickClass?: ConstantAccessor<string>;
     /** ticks is a shorthand for defining data, tickCount or interval */
     ticks?: number | string | RawValue[];
+    /** set to false or null to disable tick labels */
+    text: boolean | null;
 } & XOR<{
     /** approximate number of ticks to be generated */
     tickCount?: number;

package/dist/marks/AxisY.svelte

@@ -26,6 +26,8 @@
         tickClass?: ConstantAccessor<string>;
         /** ticks is a shorthand for defining data, tickCount or interval */
         ticks?: number | string | RawValue[];
+        /** set to false or null to disable tick labels */
+        text: boolean | null;
     } & XOR<
             {
                 /** approximate number of ticks to be generated */
@@ -78,6 +80,7 @@
         tickClass,
         tickCount = typeof magicTicks === 'number' ? magicTicks : undefined,
         tickSpacing,
+        text = true,
         ...options
     }: AxisYMarkProps = $props();
 
@@ -200,6 +203,7 @@
             {tickFontSize}
             {tickClass}
             {options}
+            {text}
             title={useTitle}
             {plot} />
     {/if}

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

@@ -15,6 +15,8 @@ export type AxisYMarkProps = Omit<BaseMarkProps, 'fill' | 'fillOpacity' | 'paint
     tickClass?: ConstantAccessor<string>;
     /** ticks is a shorthand for defining data, tickCount or interval */
     ticks?: number | string | RawValue[];
+    /** set to false or null to disable tick labels */
+    text: boolean | null;
 } & XOR<{
     /** approximate number of ticks to be generated */
     tickCount?: number;

package/dist/marks/BarX.svelte

@@ -7,10 +7,12 @@
         PlotContext,
         BaseMarkProps,
         BaseRectMarkProps,
-        ChannelAccessor
+        ChannelAccessor,
+        LinkableMarkProps
     } from '../types.js';
 
     export type BarXMarkProps = BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps & {
             data: DataRow[];
             x?: ChannelAccessor;

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

@@ -1,5 +1,5 @@
-import type { BaseMarkProps, BaseRectMarkProps, ChannelAccessor } from '../types.js';
-export type BarXMarkProps = BaseMarkProps & BaseRectMarkProps & {
+import type { BaseMarkProps, BaseRectMarkProps, ChannelAccessor, LinkableMarkProps } from '../types.js';
+export type BarXMarkProps = BaseMarkProps & LinkableMarkProps & BaseRectMarkProps & {
     data: DataRow[];
     x?: ChannelAccessor;
     x1?: ChannelAccessor;

package/dist/marks/BarY.svelte

@@ -12,6 +12,7 @@
     } from '../types.js';
 
     export type BarYMarkProps = BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps & {
             data: DataRow[];
             x?: ChannelAccessor;

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

@@ -1,5 +1,5 @@
 import type { BaseMarkProps, BaseRectMarkProps, ChannelAccessor, DataRow } from '../types.js';
-export type BarYMarkProps = BaseMarkProps & BaseRectMarkProps & {
+export type BarYMarkProps = BaseMarkProps & LinkableMarkProps & BaseRectMarkProps & {
     data: DataRow[];
     x?: ChannelAccessor;
     y?: ChannelAccessor;
@@ -14,6 +14,6 @@ export type BarYMarkProps = BaseMarkProps & BaseRectMarkProps & {
 };
 import type { StackOptions } from '../transforms/stack.js';
 /** For vertical column charts using a band scale as x axis */
-declare const BarY: import("svelte").Component<BarYMarkProps, {}, "">;
+declare const BarY: import("svelte").Component<any, {}, "">;
 type BarY = ReturnType<typeof BarY>;
 export default BarY;

package/dist/marks/BrushX.svelte

@@ -1,4 +1,4 @@
-<script module type="ts">
+<script module lang="ts">
     export type BrushXMarkProps = Omit<BrushMarkProps, 'limitDimension'>;
 </script>
 

package/dist/marks/BrushY.svelte

@@ -1,4 +1,4 @@
-<script module type="ts">
+<script module lang="ts">
     export type BrushYMarkProps = Omit<BrushMarkProps, 'limitDimension'>;
 </script>
 

package/dist/marks/Cell.svelte

@@ -12,6 +12,7 @@
     } from '../types.js';
 
     export type CellMarkProps = BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps & {
             data: DataRecord[];
             x?: ChannelAccessor;

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

@@ -1,10 +1,10 @@
 import type { DataRecord, BaseMarkProps, BaseRectMarkProps, ChannelAccessor } from '../types.js';
-export type CellMarkProps = BaseMarkProps & BaseRectMarkProps & {
+export type CellMarkProps = BaseMarkProps & LinkableMarkProps & BaseRectMarkProps & {
     data: DataRecord[];
     x?: ChannelAccessor;
     y?: ChannelAccessor;
 };
 /** For arbitrary rectangles, requires band x and y scales */
-declare const Cell: import("svelte").Component<CellMarkProps, {}, "">;
+declare const Cell: import("svelte").Component<any, {}, "">;
 type Cell = ReturnType<typeof Cell>;
 export default Cell;

package/dist/marks/ColorLegend.svelte

@@ -167,6 +167,7 @@
     .swatch {
         display: inline-flex;
         align-items: center;
+        column-gap: 0.3rem;
     }
     .item-label {
         vertical-align: super;

package/dist/marks/Dot.svelte

@@ -10,7 +10,7 @@
         symbol?: ChannelAccessor | Snippet<[number, string]>;
         canvas?: boolean;
         dotClass?: ConstantAccessor<string>;
-    };
+    } & LinkableMarkProps;
 </script>
 
 <script lang="ts">
@@ -21,8 +21,8 @@
         BaseMarkProps,
         ConstantAccessor,
         ChannelAccessor,
-        FacetContext,
-        PlotDefaults
+        PlotDefaults,
+        LinkableMarkProps
     } from '../types.js';
     import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { maybeSymbol } from '../helpers/symbols.js';
@@ -33,6 +33,7 @@
     import { maybeData, isValid } from '../helpers/index.js';
     import { recordizeXY } from '../transforms/recordize.js';
     import { addEventHandlers } from './helpers/events.js';
+    import Anchor from './helpers/Anchor.svelte';
 
     let {
         data = [{}],
@@ -49,9 +50,7 @@
         return d3Symbol(maybeSymbol(symbolType), size)();
     }
 
-    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
     const { dotRadius } = getContext<PlotDefaults>('svelteplot/_defaults');
-    let testFacet = $derived(getTestFacet());
 
     const args = $derived(
         // todo: move sorting to Mark
@@ -84,7 +83,7 @@
     defaults={{ r: dotRadius, symbol: 'circle' }}
     {...args}>
     {#snippet children({ mark, usedScales, scaledData })}
-        <g class="dots {className || ''}">
+        <g class="dot {className || ''}">
             {#if canvas}
                 <DotCanvas data={scaledData} {mark} />
             {:else}
@@ -97,19 +96,21 @@
                             'stroke',
                             usedScales
                         )}
-                        <path
-                            transform="translate({d.x}, {d.y})"
-                            d={getSymbolPath(d.symbol, d.r ** 2 * Math.PI)}
-                            class={[
-                                dotClass ? resolveProp(dotClass, d.datum, null) : null,
-                                styleClass
-                            ]}
-                            {style}
-                            use:addEventHandlers={{
-                                getPlotState,
-                                options: args,
-                                datum: d.datum
-                            }} />
+                        <Anchor {options} datum={d.datum}>
+                            <path
+                                transform="translate({d.x}, {d.y})"
+                                d={getSymbolPath(d.symbol, d.r ** 2 * Math.PI)}
+                                class={[
+                                    dotClass ? resolveProp(dotClass, d.datum, null) : null,
+                                    styleClass
+                                ]}
+                                {style}
+                                use:addEventHandlers={{
+                                    getPlotState,
+                                    options: args,
+                                    datum: d.datum
+                                }} />
+                        </Anchor>
                     {/if}
                 {/each}
             {/if}

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

@@ -6,9 +6,9 @@ export type DotMarkProps = BaseMarkProps & {
     symbol?: ChannelAccessor | Snippet<[number, string]>;
     canvas?: boolean;
     dotClass?: ConstantAccessor<string>;
-};
+} & LinkableMarkProps;
 import { type Snippet } from 'svelte';
-import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor } from '../types.js';
+import type { DataRecord, BaseMarkProps, ConstantAccessor, ChannelAccessor, LinkableMarkProps } from '../types.js';
 /** Creates dots or symbols at specified positions with customizable size and appearance */
 declare const Dot: import("svelte").Component<DotMarkProps, {}, "">;
 type Dot = ReturnType<typeof Dot>;

package/dist/marks/Frame.svelte

@@ -7,6 +7,7 @@
         BaseMarkProps,
         'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'
     > &
+        LinkableMarkProps &
         Omit<
             BaseRectMarkProps,
             'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'
@@ -27,7 +28,7 @@
 <script lang="ts">
     import Mark from '../Mark.svelte';
     import { getContext } from 'svelte';
-    import type { PlotContext, BaseRectMarkProps } from '../types.js';
+    import type { PlotContext, BaseRectMarkProps, LinkableMarkProps } from '../types.js';
     import type { BaseMarkProps } from '../types.js';
     import RectPath from './helpers/RectPath.svelte';
 

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

@@ -1,4 +1,4 @@
-export type FrameMarkProps = Omit<BaseMarkProps, 'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'> & Omit<BaseRectMarkProps, 'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'> & {
+export type FrameMarkProps = Omit<BaseMarkProps, 'fill' | 'stroke' | 'fillOpacity' | 'strokeOpacity'> & LinkableMarkProps & Omit<BaseRectMarkProps, 'inset' | 'insetLeft' | 'insetRight' | 'insetTop' | 'insetBottom'> & {
     fill: string;
     stroke: string;
     fillOpacity: number;
@@ -10,7 +10,7 @@ export type FrameMarkProps = Omit<BaseMarkProps, 'fill' | 'stroke' | 'fillOpacit
     insetTop?: number;
     insetBottom?: number;
 };
-import type { BaseRectMarkProps } from '../types.js';
+import type { BaseRectMarkProps, LinkableMarkProps } from '../types.js';
 import type { BaseMarkProps } from '../types.js';
 /** Renders a simple frame around the entire plot domain */
 declare const Frame: import("svelte").Component<FrameMarkProps, {}, "">;

package/dist/marks/Geo.svelte

@@ -7,8 +7,10 @@
         geoType?: 'sphere' | 'graticule';
         dragRotate: boolean;
         canvas: boolean;
-        href: ConstantAccessor<string>;
-        target: ConstantAccessor<string>;
+        /**
+         * simple browser tooltip to be displayed on mouseover
+         */
+        title: ConstantAccessor<string>;
     } & BaseMarkProps &
         LinkableMarkProps;
 </script>
@@ -31,6 +33,7 @@
     import GeoCanvas from './helpers/GeoCanvas.svelte';
     import { recordize } from '../transforms/recordize.js';
     import { GEOJSON_PREFER_STROKE } from '../helpers/index.js';
+    import Anchor from './helpers/Anchor.svelte';
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
     const plot = $derived(getPlotState());
@@ -68,28 +71,6 @@
     channels={['fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity', 'r']}
     {...args}>
     {#snippet children({ mark, scaledData, usedScales })}
-        {#snippet el(d)}
-            {@const title = resolveProp(args.title, d.datum, '')}
-            {@const geometry = resolveProp(args.geometry, d.datum, d.datum)}
-            {@const [style, styleClass] = resolveStyles(
-                plot,
-                d,
-                args,
-                GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill',
-                usedScales
-            )}
-            <path
-                d={path(geometry)}
-                {style}
-                class={[styleClass]}
-                use:addEventHandlers={{
-                    getPlotState,
-                    options: args,
-                    datum: d.datum
-                }}>
-                {#if title}<title>{title}</title>{/if}
-            </path>
-        {/snippet}
         <g
             aria-label="geo"
             class={['geo', geoType && `geo-${geoType}`, className]}
@@ -99,15 +80,28 @@
             {:else}
                 {#each scaledData as d, i (i)}
                     {#if d.valid}
-                        {#if options.href}
-                            <a
-                                href={resolveProp(args.href, d.datum, '')}
-                                target={resolveProp(args.target, d.datum, '_self')}>
-                                {@render el(d)}
-                            </a>
-                        {:else}
-                            {@render el(d)}
-                        {/if}
+                        <Anchor {options} datum={d.datum}>
+                            {@const title = resolveProp(args.title, d.datum, '')}
+                            {@const geometry = resolveProp(args.geometry, d.datum, d.datum)}
+                            {@const [style, styleClass] = resolveStyles(
+                                plot,
+                                d,
+                                args,
+                                GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill',
+                                usedScales
+                            )}
+                            <path
+                                d={path(geometry)}
+                                {style}
+                                class={[styleClass]}
+                                use:addEventHandlers={{
+                                    getPlotState,
+                                    options: args,
+                                    datum: d.datum
+                                }}>
+                                {#if title}<title>{title}</title>{/if}
+                            </path>
+                        </Anchor>
                     {/if}
                 {/each}
             {/if}

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

@@ -3,8 +3,10 @@ export type GeoMarkProps = {
     geoType?: 'sphere' | 'graticule';
     dragRotate: boolean;
     canvas: boolean;
-    href: ConstantAccessor<string>;
-    target: ConstantAccessor<string>;
+    /**
+     * simple browser tooltip to be displayed on mouseover
+     */
+    title: ConstantAccessor<string>;
 } & BaseMarkProps & LinkableMarkProps;
 import type { DataRecord, BaseMarkProps, ConstantAccessor, LinkableMarkProps } from '../types.js';
 /** Renders geographical data using projections and GeoJSON geometries */

package/dist/marks/Rect.svelte

@@ -13,6 +13,7 @@
         y2?: ChannelAccessor;
         interval?: number | string;
     } & BaseMarkProps &
+        LinkableMarkProps &
         BaseRectMarkProps;
 </script>
 

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

@@ -7,9 +7,9 @@ export type RectMarkProps = {
     y1?: ChannelAccessor;
     y2?: ChannelAccessor;
     interval?: number | string;
-} & BaseMarkProps & BaseRectMarkProps;
+} & BaseMarkProps & LinkableMarkProps & BaseRectMarkProps;
 import type { DataRecord, BaseMarkProps, BaseRectMarkProps, ChannelAccessor } from '../types.js';
 /** For arbitrary rectangles, requires quantitative x and y scales */
-declare const Rect: import("svelte").Component<RectMarkProps, {}, "">;
+declare const Rect: import("svelte").Component<any, {}, "">;
 type Rect = ReturnType<typeof Rect>;
 export default Rect;

package/dist/marks/Sphere.svelte

@@ -2,8 +2,8 @@
     Geo mark with Sphere geometry object  -->
 
 <script module lang="ts">
-    import { type BaseMarkProps } from '../types.js';
-    export type SphereMarkProps = BaseMarkProps;
+    import { type BaseMarkProps, type LinkableMarkProps } from '../types.js';
+    export type SphereMarkProps = BaseMarkProps & LinkableMarkProps;
 </script>
 
 <script lang="ts">