svelteplot 0.8.1 → 0.9.0

package/README.md

@@ -1,6 +1,6 @@
 # SveltePlot
 
-![License](https://img.shields.io/npm/l/svelteplot.svg) ![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) [![Netlify Status](https://api.netlify.com/api/v1/badges/81163b24-76c1-4256-833c-919284f211ed/deploy-status)](https://app.netlify.com/projects/svelteplot/deploys)
 
 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

@@ -151,7 +151,7 @@
                     // 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);
+                        out[channel] = resolveChannel(channel, row, options, index);
                         if (options[channel] === INDEX) {
                             const scale = plot.scales[CHANNEL_SCALE[channel]];
                             if (scale.type === 'band' || scale.type === 'point') {

package/dist/Mark.svelte.d.ts

@@ -28,6 +28,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: import("./types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("./types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("./types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("./types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("./types/index.js").ConstantAccessor<string, Datum>;

package/dist/constants.d.ts

@@ -14,3 +14,5 @@ export declare const CSS_COLOR_CONTRAST: RegExp;
 export declare const CSS_RGBA: RegExp;
 export declare const CSS_URL: RegExp;
 export declare const INDEX: unique symbol;
+export declare const PI: number;
+export declare const TAU: number;

package/dist/constants.js

@@ -117,6 +117,8 @@ export const CSS_COLOR_CONTRAST = /^color-contrast\(/; // just check for prefix
 export const CSS_RGBA = /^rgba\(/; // just check for prefix
 export const CSS_URL = /^url\(#/; // just check for prefix
 export const INDEX = Symbol('index');
+export const PI = Math.PI;
+export const TAU = PI * 2;
 // export const CHANNEL_MAP: Record<ScaleName, ValueOf<typeof SCALE_TYPES>> = {
 // 	x: SCALE_TYPES.x,
 // 	y: SCALE_TYPES.y,

package/dist/core/Plot.svelte

@@ -31,6 +31,7 @@
     import { CHANNEL_SCALE, SCALES } from '../constants.js';
     import { getPlotDefaults, setPlotDefaults } from '../hooks/plotDefaults.js';
     import { maybeNumber } from '../helpers/index.js';
+    import { setPlot, usePlot } from '../hooks/usePlot.svelte.js';
 
     // automatic margins can be applied by the marks, registered
     // with their respective unique identifier as keys
@@ -261,11 +262,10 @@
     let facetWidth: number | null = $state(null);
     let facetHeight: number | null = $state(null);
 
-    // eslint-disable-next-line svelte/prefer-writable-derived
-    let plotState: PlotState = $state(computePlotState());
+    let plotState = setPlot(computePlotState());
 
     $effect(() => {
-        plotState = computePlotState();
+        plotState.update(computePlotState());
     });
 
     function computePlotState() {
@@ -337,7 +337,7 @@
             if (facetHeight !== h) facetHeight = h;
         },
         updatePlotState() {
-            plotState = computePlotState();
+            plotState.update(computePlotState());
         }
     });
 

package/dist/helpers/projection.js

@@ -50,7 +50,7 @@ export function createProjection({ projOptions, inset: globalInset = 2, insetTop
     let transform;
     let invertTransform = (d) => d;
     // If a domain is specified, fit the projection to the frame.
-    if (domain != null) {
+    if (domain != null && dx > 0 && dy > 0) {
         const [[x0, y0], [x1, y1]] = geoPath(projInstance).bounds(domain);
         const k = Math.min(dx / (x1 - x0), dy / (y1 - y0));
         aspectRatio = (y1 - y0) / (x1 - x0);
@@ -66,9 +66,14 @@ export function createProjection({ projOptions, inset: globalInset = 2, insetTop
             invertTransform = ([x, y]) => [(x - tx) / k, (y - ty) / k];
         }
         else {
-            throw new Error(`Warning: the projection could not be fit to the specified domain; using the default scale.`);
+            // eslint-disable-next-line no-console
+            console.warn(`Warning: the projection could not be fit to the specified domain; using the default scale.`);
         }
     }
+    else if (domain != null) {
+        // eslint-disable-next-line no-console
+        console.warn(`Warning: the projection could not be fit to the specified domain; using the default scale.`);
+    }
     transform ??=
         tx === 0 && ty === 0
             ? identity()

package/dist/hooks/usePlot.svelte.d.ts

@@ -0,0 +1,51 @@
+import type { PlotOptions } from '../types/plot';
+import type { PlotScales, PlotState as TPlotState } from '../types';
+/**
+ * Internal state representation of a Plot.
+ */
+declare class PlotState implements TPlotState {
+    width: number;
+    height: number;
+    options: PlotOptions;
+    facetWidth: number;
+    facetHeight: number;
+    plotWidth: number;
+    plotHeight: number;
+    scales: PlotScales;
+    body: HTMLDivElement;
+    /**
+     * True if there's a color scale and a symbol scale and both are bound to the same
+     * single channel accessor.
+     */
+    colorSymbolRedundant: boolean;
+    /**
+     * True if the plot is using filled dot marks.
+     */
+    hasFilledDotMarks: boolean;
+    css: ((d: string) => string) | null;
+    constructor(state: PlotState);
+    update(newState: Partial<PlotState>): void;
+    get publicState(): PublicPlotState;
+}
+/**
+ * A public-facing wrapper around PlotState that exposes only read-only properties.
+ */
+declare class PublicPlotState {
+    #private;
+    constructor(plotState: PlotState);
+    get width(): number;
+    get height(): number;
+    get options(): PlotOptions;
+    get scales(): PlotScales;
+    get plotWidth(): number;
+    get plotHeight(): number;
+    get facetWidth(): number;
+    get facetHeight(): number;
+    get body(): HTMLDivElement;
+    get colorSymbolRedundant(): boolean;
+    get hasFilledDotMarks(): boolean;
+    get css(): ((d: string) => string) | null;
+}
+export declare function setPlot(initialState: PlotState): PlotState;
+export declare function usePlot(): Readonly<TPlotState>;
+export {};

package/dist/hooks/usePlot.svelte.js

@@ -0,0 +1,90 @@
+import { getContext } from 'svelte';
+/**
+ * Internal state representation of a Plot.
+ */
+class PlotState {
+    // Define properties and methods for PlotState as needed
+    width = $state(50);
+    height = $state(50);
+    options = $state({});
+    facetWidth = $state(0);
+    facetHeight = $state(0);
+    plotWidth = $state(0);
+    plotHeight = $state(0);
+    scales = $state();
+    body = $state();
+    /**
+     * True if there's a color scale and a symbol scale and both are bound to the same
+     * single channel accessor.
+     */
+    colorSymbolRedundant = $state(false);
+    /**
+     * True if the plot is using filled dot marks.
+     */
+    hasFilledDotMarks = $state(false);
+    css = $state(null);
+    constructor(state) {
+        // Initialization code here
+        Object.assign(this, state);
+    }
+    update(newState) {
+        Object.assign(this, newState);
+    }
+    get publicState() {
+        return new PublicPlotState(this);
+    }
+}
+/**
+ * A public-facing wrapper around PlotState that exposes only read-only properties.
+ */
+class PublicPlotState {
+    #plotState;
+    constructor(plotState) {
+        this.#plotState = plotState;
+    }
+    get width() {
+        return this.#plotState.width;
+    }
+    get height() {
+        return this.#plotState.height;
+    }
+    get options() {
+        return this.#plotState.options;
+    }
+    get scales() {
+        return this.#plotState.scales;
+    }
+    get plotWidth() {
+        return this.#plotState.plotWidth;
+    }
+    get plotHeight() {
+        return this.#plotState.plotHeight;
+    }
+    get facetWidth() {
+        return this.#plotState.facetWidth;
+    }
+    get facetHeight() {
+        return this.#plotState.facetHeight;
+    }
+    get body() {
+        return this.#plotState.body;
+    }
+    get colorSymbolRedundant() {
+        return this.#plotState.colorSymbolRedundant;
+    }
+    get hasFilledDotMarks() {
+        return this.#plotState.hasFilledDotMarks;
+    }
+    get css() {
+        return this.#plotState.css;
+    }
+}
+export function setPlot(initialState) {
+    return new PlotState({
+        ...initialState
+    });
+}
+export function usePlot() {
+    const { getPlotState } = getContext('svelteplot');
+    return getPlotState().publicState;
+}

package/dist/index.d.ts

@@ -5,3 +5,4 @@ export * from './transforms/index.js';
 export { formatMonth } from './helpers/formats.js';
 export { default as wordwrap } from './helpers/wordwrap.js';
 export * from './hooks/plotDefaults.js';
+export { usePlot } from './hooks/usePlot.svelte.js';

package/dist/index.js

@@ -7,3 +7,4 @@ export { formatMonth } from './helpers/formats.js';
 export { default as wordwrap } from './helpers/wordwrap.js';
 // hooks
 export * from './hooks/plotDefaults.js';
+export { usePlot } from './hooks/usePlot.svelte.js';

package/dist/marks/Area.svelte

@@ -19,7 +19,6 @@
 
     import Mark from '../Mark.svelte';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
-    import { getContext } from 'svelte';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { groups as d3Groups } from 'd3-array';
     import { area, type CurveFactory } from 'd3-shape';
@@ -31,7 +30,6 @@
 
     import type {
         CurveName,
-        PlotContext,
         DataRecord,
         BaseMarkProps,
         ConstantAccessor,
@@ -43,6 +41,7 @@
     import type { StackOptions } from '../transforms/stack.js';
     import { addEventHandlers } from './helpers/events';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     let markProps: AreaMarkProps = $props();
 
@@ -64,8 +63,7 @@
         ...options
     }: AreaMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const groupByKey = $derived(options.z || options.fill || options.stroke);
 
@@ -144,7 +142,7 @@
                                 clip-path={options.clipPath}
                                 d={areaPath(areaData)}
                                 {@attach addEventHandlers({
-                                    getPlotState,
+                                    plot,
                                     options,
                                     datum: datum?.datum
                                 })}

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

@@ -28,6 +28,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: ConstantAccessor<number, Datum>;
         mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: ConstantAccessor<string, Datum>;
         shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: ConstantAccessor<string, Datum>;

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

@@ -26,6 +26,7 @@ declare function $$render<Datum extends DataRow>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Record<string | symbol, import("../types/data").RawValue>>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Record<string | symbol, import("../types/data").RawValue>>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Record<string | symbol, import("../types/data").RawValue>>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Record<string | symbol, import("../types/data").RawValue>>;

package/dist/marks/Arrow.svelte

@@ -37,9 +37,7 @@
         inset?: ConstantAccessor<number, Datum>;
         sweep?: SweepOption;
     }
-    import { getContext } from 'svelte';
     import type {
-        PlotContext,
         DataRecord,
         BaseMarkProps,
         ConstantAccessor,
@@ -57,6 +55,7 @@
     import { sort } from '../transforms/sort.js';
     import { indexData } from '../transforms/recordize.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     let markProps: ArrowMarkProps = $props();
 
@@ -76,8 +75,7 @@
         ...markProps
     });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const args: ArrowMarkProps = $derived(
         sort(
@@ -134,7 +132,7 @@
                     <g
                         class={[className]}
                         {@attach addEventHandlers({
-                            getPlotState,
+                            plot,
                             options,
                             datum: d?.datum
                         })}>

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: ConstantAccessor<number, Datum>;
         mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: ConstantAccessor<string, Datum>;
         shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: ConstantAccessor<string, Datum>;

package/dist/marks/AxisX.svelte

@@ -6,7 +6,6 @@
     import Mark from '../Mark.svelte';
     import BaseAxisX from './helpers/BaseAxisX.svelte';
     import type {
-        PlotContext,
         BaseMarkProps,
         RawValue,
         ConstantAccessor,
@@ -19,6 +18,7 @@
     import { resolveScaledStyles } from '../helpers/resolve.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { extent } from 'd3-array';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     interface AxisXMarkProps extends Omit<
         BaseMarkProps<Datum>,
@@ -96,8 +96,7 @@
         ...markProps
     });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const autoTickCount = $derived(
         tickCount != null

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends RawValue>(): {
         strokeDashoffset: ConstantAccessor<number, Datum>;
         mixBlendMode: ConstantAccessor<CSS.Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: ConstantAccessor<string, Datum>;
         shapeRendering: ConstantAccessor<CSS.Property.ShapeRendering, Datum>;
         paintOrder: ConstantAccessor<string, Datum>;

package/dist/marks/AxisY.svelte

@@ -6,7 +6,6 @@
     import BaseAxisY from './helpers/BaseAxisY.svelte';
     import Mark from '../Mark.svelte';
     import type {
-        PlotContext,
         BaseMarkProps,
         RawValue,
         FacetContext,
@@ -18,6 +17,7 @@
     import { resolveScaledStyles } from '../helpers/resolve.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { extent } from 'd3-array';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     interface AxisYMarkProps extends Omit<
         BaseMarkProps<Datum>,
@@ -94,8 +94,7 @@
         ...markProps
     });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const autoTickCount = $derived(
         tickCount != null
@@ -170,7 +169,7 @@
               : optionsLabel !== undefined
                 ? optionsLabel
                 : plot.scales.y.autoTitle
-                  ? `↑ ${plot.scales.y.autoTitle}${plot.options.y.percent ? ' (%)' : ''}`
+                  ? `${!plot.options.y.reverse ? '↑' : '↓'} ${plot.scales.y.autoTitle}${plot.options.y.percent ? ' (%)' : ''}`
                   : ''
     );
 

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

@@ -26,6 +26,7 @@ declare function $$render<Datum extends RawValue>(): {
         strokeDashoffset: ConstantAccessor<number, Datum>;
         mixBlendMode: ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: ConstantAccessor<string, Datum>;
         shapeRendering: ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: ConstantAccessor<string, Datum>;

package/dist/marks/BarX.svelte

@@ -19,7 +19,6 @@
     }
 
     import Mark from '../Mark.svelte';
-    import { getContext } from 'svelte';
     import { stackX, recordizeX, intervalX, sort } from '../index.js';
 
     import type { StackOptions } from '../transforms/stack.js';
@@ -27,13 +26,13 @@
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
     import type {
-        PlotContext,
         BaseMarkProps,
         BaseRectMarkProps,
         ChannelAccessor,
         LinkableMarkProps
     } from '../types/index.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
     const DEFAULTS = {
         fill: 'currentColor',
@@ -50,8 +49,7 @@
         ...options
     }: BarXMarkProps = $derived({ ...DEFAULTS, ...markProps });
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const args = $derived(
         stackX(

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

@@ -28,6 +28,7 @@ declare function $$render<Datum extends DataRow>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;

package/dist/marks/BarY.svelte

@@ -20,14 +20,12 @@
     }
 
     import Mark from '../Mark.svelte';
-    import { getContext } from 'svelte';
     import { intervalY, stackY, recordizeY, sort } from '../index.js';
 
     import type { StackOptions } from '../transforms/stack.js';
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import RectPath from './helpers/RectPath.svelte';
     import type {
-        PlotContext,
         BaseMarkProps,
         BaseRectMarkProps,
         ChannelAccessor,
@@ -35,9 +33,9 @@
         LinkableMarkProps
     } from '../types/index.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
+    import { usePlot } from '../hooks/usePlot.svelte.js';
 
-    const { getPlotState } = getContext<PlotContext>('svelteplot');
-    const plot = $derived(getPlotState());
+    const plot = usePlot();
 
     const DEFAULTS = {
         ...getPlotDefaults().bar,

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

@@ -27,6 +27,7 @@ declare function $$render<Datum extends DataRow>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;

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

@@ -26,6 +26,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;

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

@@ -26,6 +26,7 @@ declare function $$render<Datum extends DataRecord>(): {
         strokeDashoffset: import("../types/index.js").ConstantAccessor<number, Datum>;
         mixBlendMode: import("../types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
+        mask: string;
         imageFilter: import("../types/index.js").ConstantAccessor<string, Datum>;
         shapeRendering: import("../types/index.js").ConstantAccessor<import("csstype").Property.ShapeRendering, Datum>;
         paintOrder: import("../types/index.js").ConstantAccessor<string, Datum>;