svelteplot 0.10.3 → 0.11.0-pr-514.0

package/dist/hooks/usePlot.svelte.js

@@ -1,9 +1,8 @@
 import { getContext } from 'svelte';
 /**
- * Internal state representation of a Plot.
+ * internal state representation of a Plot, using Svelte 5 runes for reactivity
  */
 class PlotState {
-    // Define properties and methods for PlotState as needed
     width = $state(50);
     height = $state(50);
     options = $state({});
@@ -11,8 +10,8 @@ class PlotState {
     facetHeight = $state(0);
     plotWidth = $state(0);
     plotHeight = $state(0);
-    scales = $state();
-    body = $state();
+    scales = $state(undefined);
+    body = $state(undefined);
     /**
      * True if there's a color scale and a symbol scale and both are bound to the same
      * single channel accessor.
@@ -27,16 +26,16 @@ class PlotState {
         // Initialization code here
         Object.assign(this, state);
     }
+    /** merges partial state into the current plot state */
     update(newState) {
         Object.assign(this, newState);
     }
+    /** returns a read-only wrapper exposing only public properties */
     get publicState() {
         return new PublicPlotState(this);
     }
 }
-/**
- * A public-facing wrapper around PlotState that exposes only read-only properties.
- */
+/** read-only wrapper around PlotState that exposes only getter properties */
 class PublicPlotState {
     #plotState;
     constructor(plotState) {
@@ -79,11 +78,13 @@ class PublicPlotState {
         return this.#plotState.css;
     }
 }
+/** creates a new PlotState instance from the given initial state */
 export function setPlot(initialState) {
     return new PlotState({
         ...initialState
     });
 }
+/** returns the current Plot's public state from Svelte context. Must be called within a `<Plot>` component tree. */
 export function usePlot() {
     const { getPlotState } = getContext('svelteplot');
     return getPlotState().publicState;

package/dist/index.d.ts

@@ -2,7 +2,6 @@ export { default as Plot } from './Plot.svelte';
 export { default as PlotCore } from './core/Plot.svelte';
 export * from './marks/index.js';
 export * from './transforms/index.js';
+export * from './hooks/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

@@ -2,9 +2,7 @@ export { default as Plot } from './Plot.svelte';
 export { default as PlotCore } from './core/Plot.svelte';
 export * from './marks/index.js';
 export * from './transforms/index.js';
+export * from './hooks/index.js';
 // helpers
 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

@@ -3,17 +3,29 @@
 -->
 <script lang="ts" generics="Datum extends DataRecord">
     interface AreaMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
-        data: Datum[];
+        /** the input data array; each element becomes one point in the area */
+        data?: Datum[];
+        /** the starting horizontal position channel for the area baseline */
         x1?: ChannelAccessor<Datum>;
+        /** the ending horizontal position channel for the area topline */
         x2?: ChannelAccessor<Datum>;
+        /** the starting vertical position channel for the area baseline */
         y1?: ChannelAccessor<Datum>;
+        /** the ending vertical position channel for the area topline */
         y2?: ChannelAccessor<Datum>;
+        /** the series channel; data is grouped into separate areas by unique z values */
         z?: ChannelAccessor<Datum>;
+        /** the curve interpolation method for connecting data points */
         curve?: CurveName | CurveFactory;
+        /** the tension parameter for cardinal or Catmull-Rom curve interpolation */
         tension?: number;
+        /** controls the order of data points before rendering */
         sort?: ConstantAccessor<RawValue> | { channel: 'stroke' | 'fill' };
+        /** options for stacking area data values */
         stack?: Partial<StackOptions>;
+        /** if true, renders using Canvas instead of SVG */
         canvas?: boolean;
+        /** CSS class name(s) to apply to individual area path elements */
         areaClass?: ConstantAccessor<string, Datum>;
     }
 
@@ -21,7 +33,7 @@
     import GroupMultiple from './helpers/GroupMultiple.svelte';
     import { resolveChannel, resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { groups as d3Groups } from 'd3-array';
-    import { area, type CurveFactory } from 'd3-shape';
+    import { area, type Area, type CurveFactory } from 'd3-shape';
     import callWithProps from '../helpers/callWithProps.js';
     import { maybeCurve } from '../helpers/curves.js';
     import { isValid } from '../helpers/index.js';
@@ -39,7 +51,7 @@
         RawValue
     } from '../types/index.js';
     import type { StackOptions } from '../transforms/stack.js';
-    import { addEventHandlers } from './helpers/events';
+    import { addEventHandlers } from './helpers/events.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
     import { usePlot } from '../hooks/usePlot.svelte.js';
 
@@ -89,7 +101,7 @@
                       y0: (d: ScaledDataRecord) => d.y1,
                       y1: (d: ScaledDataRecord) => d.y2
                   })
-        })
+        }) as unknown as Area<ScaledDataRecord>
     );
 
     function groupAndSort(data: ScaledDataRecord[]) {
@@ -97,12 +109,11 @@
             ? d3Groups(data, (d) => resolveProp(groupByKey, d.datum)).map((d) => d[1])
             : [data];
         if (options.sort) {
-            return groups.toSorted((a, b) =>
-                resolveChannel('sort', a[0].datum, options) >
-                resolveChannel('sort', b[0].datum, options)
-                    ? 1
-                    : -1
-            );
+            return groups.toSorted((a, b) => {
+                const av = resolveChannel('sort', a[0].datum, options) as string | number | null;
+                const bv = resolveChannel('sort', b[0].datum, options) as string | number | null;
+                return av! > bv! ? 1 : -1;
+            });
         }
         return groups;
     }
@@ -113,8 +124,8 @@
     {data}
     channels={['x1', 'x2', 'y1', 'y2', 'fill', 'stroke', 'opacity', 'fillOpacity', 'strokeOpacity']}
     required={['x1', 'y1']}
-    {...markProps}
-    {...options}>
+    {...markProps as any}
+    {...options as any}>
     {#snippet children({ mark, usedScales, scaledData })}
         {@const grouped = groupAndSort(scaledData)}
         {#if canvas}
@@ -124,7 +135,7 @@
                 {#each grouped as areaData, i (i)}
                     {@const datum = areaData[0]}
                     {#if areaData.length > 0}
-                        <Anchor {options} {datum}>
+                        <Anchor options={options as any} {datum}>
                             {@const title = resolveProp(options.title, datum.datum, '')}
                             {@const [style, styleClass] = resolveStyles(
                                 plot,

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

@@ -1,4 +1,4 @@
-import { type CurveFactory } from 'd3-shape';
+import { type Area, type CurveFactory } from 'd3-shape';
 import type { CurveName, DataRecord, ConstantAccessor, ChannelAccessor, LinkableMarkProps, RawValue } from '../types/index.js';
 import type { StackOptions } from '../transforms/stack.js';
 declare function $$render<Datum extends DataRecord>(): {
@@ -9,10 +9,20 @@ declare function $$render<Datum extends DataRecord>(): {
         fy: ChannelAccessor<Datum>;
         dx: ConstantAccessor<number, Datum>;
         dy: ConstantAccessor<number, Datum>;
-        dodgeX: import("../transforms/dodge").DodgeXOptions;
-        dodgeY: import("../transforms/dodge").DodgeYOptions;
+        dodgeX: import("../transforms/dodge.js").DodgeXOptions;
+        dodgeY: import("../transforms/dodge.js").DodgeYOptions;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
+        fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: ConstantAccessor<import("csstype").Property.FontSize<number>, Datum>;
+        fontStyle: ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
         sort: ((a: RawValue, b: RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
@@ -26,59 +36,133 @@ declare function $$render<Datum extends DataRecord>(): {
         opacity: ChannelAccessor<Datum>;
         strokeDasharray: ConstantAccessor<string, Datum>;
         strokeDashoffset: ConstantAccessor<number, Datum>;
+        blend: ConstantAccessor<import("csstype").Property.MixBlendMode, 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>;
-        onclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondblclick: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousedown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmousemove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onmouseover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointercancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerdown: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerup: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointermove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onpointerout: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrag: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondrop: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragenter: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragleave: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragover: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ondragend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchstart: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchmove: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchend: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        ontouchcancel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        oncontextmenu: import("svelte/elements").MouseEventHandler<SVGPathElement>;
-        onwheel: import("svelte/elements").MouseEventHandler<SVGPathElement>;
+        onclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondblclick: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousedown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmousemove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onmouseover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointercancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerdown: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerup: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointermove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onpointerout: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrag: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondrop: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragenter: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragleave: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragover: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ondragend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchstart: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchmove: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchend: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        ontouchcancel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        oncontextmenu: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
+        onwheel: (event: Event & {
+            currentTarget: SVGPathElement;
+        }, datum: Datum, index: number) => void;
         class: string;
         style: string;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
+        title: ConstantAccessor<string, Datum>;
     }> & LinkableMarkProps<Datum> & {
-        data: Datum[];
+        /** the input data array; each element becomes one point in the area */
+        data?: Datum[];
+        /** the starting horizontal position channel for the area baseline */
         x1?: ChannelAccessor<Datum>;
+        /** the ending horizontal position channel for the area topline */
         x2?: ChannelAccessor<Datum>;
+        /** the starting vertical position channel for the area baseline */
         y1?: ChannelAccessor<Datum>;
+        /** the ending vertical position channel for the area topline */
         y2?: ChannelAccessor<Datum>;
+        /** the series channel; data is grouped into separate areas by unique z values */
         z?: ChannelAccessor<Datum>;
+        /** the curve interpolation method for connecting data points */
         curve?: CurveName | CurveFactory;
+        /** the tension parameter for cardinal or Catmull-Rom curve interpolation */
         tension?: number;
+        /** controls the order of data points before rendering */
         sort?: ConstantAccessor<RawValue> | {
             channel: "stroke" | "fill";
         };
+        /** options for stacking area data values */
         stack?: Partial<StackOptions>;
+        /** if true, renders using Canvas instead of SVG */
         canvas?: boolean;
+        /** CSS class name(s) to apply to individual area path elements */
         areaClass?: ConstantAccessor<string, Datum>;
     };
     exports: {};

package/dist/marks/AreaX.svelte

@@ -3,33 +3,67 @@
     stacked horizontally if just the x channel is defined.
 -->
 <script lang="ts" generics="Datum extends DataRow">
-    interface AreaXMarkProps extends Omit<ComponentProps<typeof Area>, 'y1' | 'y2'> {
+    interface AreaXMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
+        /** the input data array; each element becomes one point in the area */
+        data?: Datum[];
+        /** the horizontal position channel, implicit stacking is used to derive x1 and x2 channels */
         x?: ChannelAccessor<Datum>;
+        /** the horizontal position channel of the lower end of bands */
+        x1?: ChannelAccessor<Datum>;
+        /** the horizontal position channel of the upper end of bands */
+        x2?: ChannelAccessor<Datum>;
+        /** the vertical position channel */
         y?: ChannelAccessor<Datum>;
+        /** the series channel; data is grouped into separate areas by unique z values */
+        z?: ChannelAccessor<Datum>;
+        /** the curve interpolation method for connecting data points */
+        curve?: CurveName | CurveFactory;
+        /** the tension parameter for cardinal or Catmull-Rom curve interpolation */
+        tension?: number;
+        /** controls the order of data points before rendering */
+        sort?: ConstantAccessor<RawValue, Datum> | { channel: 'stroke' | 'fill' };
+        /** options for stacking area data values */
+        stack?: Partial<StackOptions>;
+        /** if true, renders using Canvas instead of SVG */
+        canvas?: boolean;
+        /** CSS class name(s) to apply to individual area path elements */
+        areaClass?: ConstantAccessor<string, Datum>;
     }
     import Area from './Area.svelte';
     import { renameChannels } from '../transforms/rename.js';
     import { stackX } from '../transforms/stack.js';
     import { recordizeX } from '../transforms/recordize.js';
-    import type { ChannelAccessor, DataRow } from '../types/index.js';
-    import { type ComponentProps } from 'svelte';
+    import type { CurveFactory } from 'd3-shape';
+    import type { StackOptions } from '../transforms/stack.js';
+    import type {
+        BaseMarkProps,
+        ChannelAccessor,
+        ConstantAccessor,
+        CurveName,
+        DataRow,
+        LinkableMarkProps,
+        RawValue
+    } from '../types/index.js';
     import { getPlotDefaults } from '../hooks/plotDefaults.js';
 
     let markProps: AreaXMarkProps = $props();
 
     const DEFAULTS = getPlotDefaults().areaX;
 
-    const { data, stack, ...options }: AreaXMarkProps = $derived({
+    const {
+        data = [],
+        stack,
+        ...options
+    }: AreaXMarkProps = $derived({
         ...(markProps.x == undefined ? { x1: 0, x2: 0 } : {}),
         ...DEFAULTS,
         ...markProps
     });
 
     const args = $derived(
-        renameChannels<AreaXMarkProps>(
-            stackX(recordizeX({ data, ...options, y1: null, y2: null }), stack),
-            { y: 'y1' }
-        )
+        renameChannels(stackX(recordizeX({ data, ...options, y1: null, y2: null }), stack), {
+            y: 'y1'
+        })
     );
 </script>