svelteplot 0.10.3-pr-398.3 → 0.10.3-pr-402.1

package/dist/Mark.svelte.d.ts

@@ -13,6 +13,16 @@ declare function $$render<Datum extends DataRecord>(): {
         dodgeY: import("./transforms/dodge.js").DodgeYOptions;
         fill: ChannelAccessor<Datum>;
         fillOpacity: import("./types/index.js").ConstantAccessor<number, Datum>;
+        fontFamily: import("./types/index.js").ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: import("./types/index.js").ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", Datum>;
+        fontStyle: import("./types/index.js").ConstantAccessor<import("csstype").Property.FontStyle, Datum>;
+        fontVariant: import("./types/index.js").ConstantAccessor<import("csstype").Property.FontVariant, Datum>;
+        fontWeight: import("./types/index.js").ConstantAccessor<import("csstype").Property.FontWeight, Datum>;
+        letterSpacing: import("./types/index.js").ConstantAccessor<import("csstype").Property.LetterSpacing<0 | (string & {})>, Datum>;
+        wordSpacing: import("./types/index.js").ConstantAccessor<import("csstype").Property.WordSpacing<0 | (string & {})>, Datum>;
+        textAnchor: import("./types/index.js").ConstantAccessor<import("csstype").Property.TextAnchor, Datum>;
+        textTransform: import("./types/index.js").ConstantAccessor<import("csstype").Property.TextTransform, Datum>;
+        textDecoration: import("./types/index.js").ConstantAccessor<import("csstype").Property.TextDecoration<0 | (string & {})>, Datum>;
         sort: ((a: RawValue, b: RawValue) => number) | {
             channel: string;
             order?: "ascending" | "descending";
@@ -26,6 +36,7 @@ declare function $$render<Datum extends DataRecord>(): {
         opacity: ChannelAccessor<Datum>;
         strokeDasharray: import("./types/index.js").ConstantAccessor<string, Datum>;
         strokeDashoffset: import("./types/index.js").ConstantAccessor<number, Datum>;
+        blend: import("./types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         mixBlendMode: import("./types/index.js").ConstantAccessor<import("csstype").Property.MixBlendMode, Datum>;
         clipPath: string;
         mask: string;
@@ -34,94 +45,94 @@ declare function $$render<Datum extends DataRecord>(): {
         paintOrder: import("./types/index.js").ConstantAccessor<string, Datum>;
         onclick: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ondblclick: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onmouseup: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onmousedown: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onmouseenter: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onmousemove: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onmouseleave: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onmouseout: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onmouseover: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onpointercancel: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onpointerdown: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onpointerup: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onpointerenter: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onpointerleave: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onpointermove: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onpointerover: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onpointerout: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ondrag: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ondrop: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ondragstart: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ondragenter: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ondragleave: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ondragover: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ondragend: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ontouchstart: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ontouchmove: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ontouchend: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ontouchcancel: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         oncontextmenu: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onwheel: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         class: string;
         style: string;
         cursor: import("./types/index.js").ConstantAccessor<import("csstype").Property.Cursor, Datum>;

package/dist/helpers/autoTicks.js

@@ -39,9 +39,7 @@ export function autoTicks(type, ticks, interval, domain, scaleFn, count) {
         const I = maybeInterval(interval);
         if (!I)
             return [];
-        return I
-            .range(lo, I.offset(hi))
-            .filter((d) => d >= lo && d <= hi);
+        return I.range(lo, I.offset(hi)).filter((d) => d >= lo && d <= hi);
     }
     return typeof scaleFn.ticks === 'function' ? scaleFn.ticks(count) : [];
 }

package/dist/helpers/facets.js

@@ -46,4 +46,3 @@ export function getEmptyFacets(marks, fxValues, fyValues) {
     }
     return out;
 }
-// TODO: write unit tests

package/dist/helpers/mergeDeep.d.ts

@@ -1,5 +1,3 @@
-type ObjectType = {
-    [key: string]: any;
-};
+type ObjectType = Record<string, unknown>;
 export default function mergeDeep<T extends ObjectType>(target: Partial<T>, ...sources: Partial<T>[]): T;
 export {};

package/dist/helpers/mergeDeep.js

@@ -1,25 +1,24 @@
 function isObject(item) {
-    return item && typeof item === 'object' && !Array.isArray(item);
+    return item != null && typeof item === 'object' && !Array.isArray(item);
 }
 export default function mergeDeep(target, ...sources) {
-    if (!sources.length)
-        return target;
-    const source = sources.shift();
-    if (isObject(target) && isObject(source)) {
-        for (const key in source) {
-            if (isObject(source[key])) {
-                if (!target[key]) {
-                    Object.assign(target, { [key]: {} });
+    for (const source of sources) {
+        if (isObject(target) && isObject(source)) {
+            for (const key in source) {
+                if (isObject(source[key])) {
+                    if (!target[key]) {
+                        Object.assign(target, { [key]: {} });
+                    }
+                    else {
+                        target[key] = Object.assign({}, target[key]);
+                    }
+                    mergeDeep(target[key], source[key]);
                 }
-                else {
-                    target[key] = Object.assign({}, target[key]);
+                else if (source[key] !== null) {
+                    Object.assign(target, { [key]: source[key] });
                 }
-                mergeDeep(target[key], source[key]);
-            }
-            else if (source[key] !== null) {
-                Object.assign(target, { [key]: source[key] });
             }
         }
     }
-    return mergeDeep(target, ...sources);
+    return target;
 }

package/dist/marks/Area.svelte

@@ -4,7 +4,7 @@
 <script lang="ts" generics="Datum extends DataRecord">
     interface AreaMarkProps extends BaseMarkProps<Datum>, LinkableMarkProps<Datum> {
         /** the input data array; each element becomes one point in the area */
-        data: Datum[];
+        data?: Datum[];
         /** the starting horizontal position channel for the area baseline */
         x1?: ChannelAccessor<Datum>;
         /** the ending horizontal position channel for the area topline */

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

@@ -13,6 +13,16 @@ declare function $$render<Datum extends DataRecord>(): {
         dodgeY: import("../transforms/dodge").DodgeYOptions;
         fill: ChannelAccessor<Datum>;
         fillOpacity: ConstantAccessor<number, Datum>;
+        fontFamily: ConstantAccessor<import("csstype").Property.FontFamily, Datum>;
+        fontSize: ConstantAccessor<number | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "math" | (string & {}) | "large" | "medium" | "small" | "x-large" | "x-small" | "xx-large" | "xx-small" | "xxx-large" | "larger" | "smaller", 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,6 +36,7 @@ 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;
@@ -34,100 +45,100 @@ declare function $$render<Datum extends DataRecord>(): {
         paintOrder: ConstantAccessor<string, Datum>;
         onclick: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ondblclick: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onmouseup: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onmousedown: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onmouseenter: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onmousemove: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onmouseleave: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onmouseout: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onmouseover: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onpointercancel: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onpointerdown: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onpointerup: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onpointerenter: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onpointerleave: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onpointermove: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onpointerover: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onpointerout: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ondrag: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ondrop: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ondragstart: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ondragenter: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ondragleave: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ondragover: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ondragend: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ontouchstart: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ontouchmove: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ontouchend: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         ontouchcancel: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         oncontextmenu: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         onwheel: (event: Event & {
             currentTarget: SVGPathElement;
-        }, datum?: unknown, index?: number) => void;
+        }, datum: Datum, index: number) => void;
         class: string;
         style: string;
         cursor: ConstantAccessor<import("csstype").Property.Cursor, Datum>;
     }> & LinkableMarkProps<Datum> & {
         /** the input data array; each element becomes one point in the area */
-        data: Datum[];
+        data?: Datum[];
         /** the starting horizontal position channel for the area baseline */
         x1?: ChannelAccessor<Datum>;
         /** the ending horizontal position channel for the area topline */

package/dist/marks/AreaX.svelte

@@ -3,35 +3,63 @@
     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 */
         x?: 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>