svelteplot 0.10.2 → 0.10.3-pr-370.1

package/dist/types/mark.d.ts

@@ -19,65 +19,120 @@ export type BaseMarkProps<T> = Partial<{
      * Filter the data without modifying the inferred scales
      */
     filter: ConstantAccessor<boolean, T>;
+    /** controls whether this mark participates in faceting; "exclude" to ignore facet filters, "include" to require matching facet values */
     facet: 'auto' | 'include' | 'exclude';
+    /** the horizontal facet channel */
     fx: ChannelAccessor<T>;
+    /** the vertical facet channel */
     fy: ChannelAccessor<T>;
+    /** a horizontal offset in pixels applied after scaling */
     dx: ConstantAccessor<number, T>;
+    /** a vertical offset in pixels applied after scaling */
     dy: ConstantAccessor<number, T>;
+    /** options for horizontal dodge positioning to avoid overlapping marks */
     dodgeX: DodgeXOptions;
+    /** options for vertical dodge positioning to avoid overlapping marks */
     dodgeY: DodgeYOptions;
+    /** the fill color; can be a fixed CSS color string or a channel accessor bound to the color scale */
     fill: ChannelAccessor<T>;
+    /** the fill opacity; a number between 0 and 1 */
     fillOpacity: ConstantAccessor<number, T>;
+    /** how to sort the mark data before rendering; can be a channel name string, an accessor, a comparator, or an object with channel and order */
     sort: string | ConstantAccessor<RawValue, T> | ((a: RawValue, b: RawValue) => number) | {
         /** sort data using an already defined channel */
         channel: string;
         /** sort order */
         order?: 'ascending' | 'descending';
     };
+    /** the stroke color; can be a fixed CSS color string or a channel accessor bound to the color scale */
     stroke: ChannelAccessor<T>;
+    /** the stroke width in pixels */
     strokeWidth: ConstantAccessor<number, T>;
+    /** the stroke opacity; a number between 0 and 1 */
     strokeOpacity: ConstantAccessor<number, T>;
+    /** the SVG stroke line join style (e.g. "round", "bevel") */
     strokeLinejoin: ConstantAccessor<CSS.Property.StrokeLinejoin, T>;
+    /** the SVG stroke line cap style (e.g. "round", "butt") */
     strokeLinecap: ConstantAccessor<CSS.Property.StrokeLinecap, T>;
+    /** the SVG stroke miter limit */
     strokeMiterlimit: ConstantAccessor<number, T>;
+    /** the overall element opacity; can be a fixed number or a channel accessor bound to the opacity scale */
     opacity: ChannelAccessor<T>;
+    /** the SVG stroke dash pattern (e.g. "4 2") */
     strokeDasharray: ConstantAccessor<string, T>;
+    /** the SVG stroke dash offset in pixels */
     strokeDashoffset: ConstantAccessor<number, T>;
+    /** the CSS mix-blend-mode for compositing (e.g. "multiply", "screen") */
     mixBlendMode: ConstantAccessor<CSS.Property.MixBlendMode, T>;
+    /** a CSS clip-path to clip the mark element */
     clipPath: string;
+    /** a CSS mask to apply to the mark element */
     mask: string;
+    /** a CSS filter to apply to the mark element (e.g. "blur(2px)") */
     imageFilter: ConstantAccessor<string, T>;
+    /** the SVG shape-rendering attribute (e.g. "crispEdges", "geometricPrecision") */
     shapeRendering: ConstantAccessor<CSS.Property.ShapeRendering, T>;
+    /** the SVG paint-order attribute (e.g. "stroke" to render stroke behind fill) */
     paintOrder: ConstantAccessor<string, T>;
+    /** fired when the mark element is clicked */
     onclick: MouseEventHandler<SVGPathElement>;
+    /** fired when the mark element is double-clicked */
     ondblclick: MouseEventHandler<SVGPathElement>;
+    /** fired when a mouse button is released over the mark */
     onmouseup: MouseEventHandler<SVGPathElement>;
+    /** fired when a mouse button is pressed over the mark */
     onmousedown: MouseEventHandler<SVGPathElement>;
+    /** fired when the pointer enters the mark element */
     onmouseenter: MouseEventHandler<SVGPathElement>;
+    /** fired when the pointer moves within the mark element */
     onmousemove: MouseEventHandler<SVGPathElement>;
+    /** fired when the pointer leaves the mark element */
     onmouseleave: MouseEventHandler<SVGPathElement>;
+    /** fired when the pointer moves out of the mark element */
     onmouseout: MouseEventHandler<SVGPathElement>;
+    /** fired when the pointer moves onto the mark element */
     onmouseover: MouseEventHandler<SVGPathElement>;
+    /** fired when a pointer event is canceled */
     onpointercancel: MouseEventHandler<SVGPathElement>;
+    /** fired when a pointer becomes active over the mark */
     onpointerdown: MouseEventHandler<SVGPathElement>;
+    /** fired when a pointer is released over the mark */
     onpointerup: MouseEventHandler<SVGPathElement>;
+    /** fired when a pointer enters the mark element */
     onpointerenter: MouseEventHandler<SVGPathElement>;
+    /** fired when a pointer leaves the mark element */
     onpointerleave: MouseEventHandler<SVGPathElement>;
+    /** fired when a pointer moves within the mark element */
     onpointermove: MouseEventHandler<SVGPathElement>;
+    /** fired when a pointer moves onto the mark element */
     onpointerover: MouseEventHandler<SVGPathElement>;
+    /** fired when a pointer moves out of the mark element */
     onpointerout: MouseEventHandler<SVGPathElement>;
+    /** fired continuously while the mark is being dragged */
     ondrag: MouseEventHandler<SVGPathElement>;
+    /** fired when a dragged element is dropped on the mark */
     ondrop: MouseEventHandler<SVGPathElement>;
+    /** fired when a drag operation begins on the mark */
     ondragstart: MouseEventHandler<SVGPathElement>;
+    /** fired when a dragged element enters the mark */
     ondragenter: MouseEventHandler<SVGPathElement>;
+    /** fired when a dragged element leaves the mark */
     ondragleave: MouseEventHandler<SVGPathElement>;
+    /** fired when a dragged element is over the mark */
     ondragover: MouseEventHandler<SVGPathElement>;
+    /** fired when a drag operation ends */
     ondragend: MouseEventHandler<SVGPathElement>;
+    /** fired when a touch point is placed on the mark */
     ontouchstart: MouseEventHandler<SVGPathElement>;
+    /** fired when a touch point moves along the mark */
     ontouchmove: MouseEventHandler<SVGPathElement>;
+    /** fired when a touch point is removed from the mark */
     ontouchend: MouseEventHandler<SVGPathElement>;
+    /** fired when a touch event is canceled */
     ontouchcancel: MouseEventHandler<SVGPathElement>;
+    /** fired when the context menu is triggered on the mark */
     oncontextmenu: MouseEventHandler<SVGPathElement>;
+    /** fired when the mouse wheel is scrolled over the mark */
     onwheel: MouseEventHandler<SVGPathElement>;
     /**
      * if you want to give your mark element an extra CSS class
@@ -87,6 +142,7 @@ export type BaseMarkProps<T> = Partial<{
      * if you want to give your mark element an extra inline style
      */
     style: string;
+    /** the CSS cursor style when hovering over the mark (e.g. "pointer", "crosshair") */
     cursor: ConstantAccessor<CSS.Property.Cursor, T>;
 }>;
 export type LinkableMarkProps<T> = {
@@ -123,10 +179,16 @@ export type BorderRadius = number | {
     bottomLeft?: number;
 };
 export type BaseRectMarkProps<T> = {
+    /** shorthand to inset the rectangle on all sides, in pixels */
     inset?: ConstantAccessor<number, T>;
+    /** inset the rectangle from the left edge, in pixels */
     insetLeft?: ConstantAccessor<number, T>;
+    /** inset the rectangle from the top edge, in pixels */
     insetTop?: ConstantAccessor<number, T>;
+    /** inset the rectangle from the right edge, in pixels */
     insetRight?: ConstantAccessor<number, T>;
+    /** inset the rectangle from the bottom edge, in pixels */
     insetBottom?: ConstantAccessor<number, T>;
+    /** the border radius of the rectangle; can be a number or a per-corner object */
     borderRadius?: ConstantAccessor<BorderRadius, T>;
 };

package/dist/types/plot.d.ts

@@ -439,12 +439,36 @@ export type PlotOptions = {
      * Options for the shared radius scale
      */
     r: Partial<ScaleOptions>;
+    /**
+     * Options for the shared color scale
+     */
     color: Partial<ColorScaleOptions>;
+    /**
+     * Options for the shared opacity scale
+     */
     opacity: Partial<ScaleOptions>;
+    /**
+     * Options for the shared symbol scale
+     */
     symbol: Partial<LegendScaleOptions>;
+    /**
+     * Options for the shared length scale (e.g. for vectors and spikes)
+     */
     length: Partial<ScaleOptions>;
+    /**
+     * Options for the horizontal facet scale, or false to disable, or an
+     * array of domain values
+     */
     fx: Partial<XScaleOptions> | false | RawValue[];
+    /**
+     * Options for the vertical facet scale, or false to disable, or an
+     * array of domain values
+     */
     fy: Partial<YScaleOptions> | false | RawValue[];
+    /**
+     * The plot content as a Svelte snippet. Receives the plot dimensions,
+     * options, and resolved scales as arguments.
+     */
     children: Snippet<[
         {
             width: number;
@@ -458,6 +482,10 @@ export type PlotOptions = {
      * your plot, or place a legend above the visualization.
      */
     header: Snippet;
+    /**
+     * The footer snippet is useful for rendering custom markup below the SVG body
+     * of your plot, e.g. for a caption or legend.
+     */
     footer: Snippet;
     /**
      * The underlay snippet is useful for adding a layer of custom HTML markup
@@ -474,6 +502,9 @@ export type PlotOptions = {
         options: PlotOptions;
         scales: PlotScales;
     }]>;
+    /**
+     * snippet for rendering custom facet axes
+     */
     facetAxes: Snippet;
     /**
      * if you set testid, the plot container will get a data-testid attribute which

package/dist/types/scale.d.ts

@@ -21,8 +21,18 @@ export type ScaleOptions = {
      * Reverse the scale.
      */
     reverse: boolean;
+    /**
+     * the axis label for this scale, or false to disable the automatic label
+     */
     label: string | false;
+    /**
+     * the interval for ordinal/temporal scales, e.g. 'day', 'month', or a numeric step
+     */
     interval: string | number;
+    /**
+     * clamp values outside the domain to the nearest domain boundary
+     * (applicable to quantitative scales only)
+     */
     clamp: boolean;
     /**
      * Extend the domain to nice round numbers (applicable to quantitative scales only)
@@ -32,8 +42,18 @@ export type ScaleOptions = {
      * Include zero in the scale domain (applicable to quantitative scales only)
      */
     zero: boolean;
+    /**
+     * round interpolated values to integers (applicable to quantitative scales only)
+     */
     round: boolean;
+    /**
+     * format values as percentages and append (%) to the axis label
+     * (applicable to quantitative scales only)
+     */
     percent: boolean;
+    /**
+     * custom transformation function applied to values before scaling
+     */
     transform?: (d: RawValue) => RawValue;
     /**
      * set the padding for band scales
@@ -51,22 +71,61 @@ export type ScaleOptions = {
      * set the outer padding for band scales
      */
     paddingOuter: number;
+    /**
+     * reduce the scale range by this many pixels on the left side
+     */
     insetLeft: number;
+    /**
+     * reduce the scale range by this many pixels on the right side
+     */
     insetRight: number;
+    /**
+     * reduce the scale range by this many pixels on the top side
+     */
     insetTop: number;
+    /**
+     * reduce the scale range by this many pixels on the bottom side
+     */
     insetBottom: number;
+    /**
+     * explicit tick values to use instead of automatic tick generation
+     */
     ticks: (number | Date)[];
+    /**
+     * desired pixel distance between ticks for automatic tick generation
+     */
     tickSpacing: number;
+    /**
+     * the logarithm base for log scales (default 10)
+     */
     base: number;
+    /**
+     * controls domain ordering for band and point scales; can be a channel
+     * accessor, a comparator function, or an object with channel and order
+     */
     sort: ChannelAccessor | ((a: RawValue, b: RawValue) => number) | {
         channel: string;
         order: 'ascending' | 'descending';
     };
+    /**
+     * the constant parameter for symlog scales, controlling the transition
+     * between linear and logarithmic behavior near zero (default 1)
+     */
     constant: number;
 };
 export type ColorScaleOptions = ScaleOptions & {
+    /**
+     * if true, show a color legend for this scale
+     */
     legend: boolean;
+    /**
+     * the color scale type; extends the base scale types with color-specific
+     * types like categorical, sequential, diverging, etc.
+     */
     type: ScaleType | 'categorical' | 'sequential' | 'cyclical' | 'threshold' | 'quantile' | 'quantize' | 'diverging' | 'diverging-log' | 'diverging-pow' | 'diverging-sqrt' | 'diverging-symlog';
+    /**
+     * the name of the color scheme to use, e.g. 'blues', 'turbo', 'rdylbu'
+     */
     scheme: string;
     /**
      * fallback color used for null/undefined
@@ -80,6 +139,9 @@ export type ColorScaleOptions = ScaleOptions & {
      * number of colors for quantize and quantile-threshold scales
      */
     n: number;
+    /**
+     * custom interpolation function for the color scale output
+     */
     interpolate: (d: any) => typeof d;
     /**
      * The tick format for the color scale legend.
@@ -104,7 +166,14 @@ export type XScaleOptions = ScaleOptions & {
      * rotate the axis ticks
      */
     tickRotate: number;
+    /**
+     * horizontal position of the axis label
+     */
     labelAnchor: 'auto' | 'left' | 'center' | 'right';
+    /**
+     * custom tick format; false to hide tick labels, an Intl.NumberFormatOptions
+     * object, or a function mapping values to strings
+     */
     tickFormat: false | Intl.NumberFormatOptions | ((d: RawValue) => string);
     /**
      * Enable word wrapping for axis tick labels, default true
@@ -128,20 +197,42 @@ export type YScaleOptions = ScaleOptions & {
      * add an explicit AxisY mark to your plot instead of using the implicit axes.
      */
     axis: AxisYAnchor | false;
+    /**
+     * custom tick format; false to hide tick labels, an Intl.NumberFormatOptions
+     * object, or a function mapping values to strings
+     */
     tickFormat: false | Intl.NumberFormatOptions | ((d: RawValue) => string);
     /**
      * rotate the axis ticks
      */
     tickRotate: number;
+    /**
+     * vertical position of the axis label
+     */
     labelAnchor: 'auto' | 'bottom' | 'middle' | 'top';
 };
 export type LegendScaleOptions = ScaleOptions & {
+    /**
+     * if true, show a legend for this scale
+     */
     legend: boolean;
 };
 export type PlotScale = {
+    /**
+     * the resolved scale type
+     */
     type: ScaleType;
+    /**
+     * the resolved domain of the scale
+     */
     domain: RawValue[];
+    /**
+     * the resolved range of the scale
+     */
     range: RawValue[];
+    /**
+     * automatically computed axis label based on data channel names
+     */
     autoTitle?: string;
     /**
      * The number of marks that are using this scale.
@@ -151,7 +242,14 @@ export type PlotScale = {
      * Set of accessors used in channels that are bound to this scale.
      */
     uniqueScaleProps: Set<ChannelAccessor>;
+    /**
+     * tracks which marks should skip this scale for specific channels,
+     * e.g. when channel values are already in output space
+     */
     skip: Map<ScaledChannelName, Set<symbol>>;
+    /**
+     * the underlying d3 scale function that maps domain values to range values
+     */
     fn: ScaleLinear<RawValue, number> & ScaleBand<RawValue[]> & ScaleOrdinal<string | Date, number> & ScaleOrdinal<string | Date, string>;
 };
 export type PlotScales = Record<ScaleName, PlotScale>;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.10.2",
+    "version": "0.10.3-pr-370.1",
     "description": "A Svelte-native data visualization framework based on the layered grammar of graphics principles.",
     "keywords": [
         "svelte",
@@ -16,6 +16,10 @@
     "bugs": {
         "url": "https://github.com/svelteplot/svelteplot/issues"
     },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/svelteplot/svelteplot.git"
+    },
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -61,7 +65,7 @@
         "docs:api:marks": "node scripts/generate-api.js --marks && prettier --write .",
         "docs:api:plot": "node scripts/generate-api.js --plot && prettier --write .",
         "docs:api:transforms": "node scripts/generate-api.js --transforms && prettier --write .",
-        "format": "prettier --write .",
+        "format": "eslint --fix package.json && prettier --write .",
         "lint": "prettier --check src && eslint src package.json",
         "lint:types": "tsc --noEmit",
         "prepack": "npx svelte-package",
@@ -89,8 +93,7 @@
         "es-toolkit": "^1.44.0",
         "fast-equals": "^6.0.0",
         "interval-tree-1d": "^1.0.4",
-        "merge-deep": "^3.0.3",
-        "svelte": "5"
+        "merge-deep": "^3.0.3"
     },
     "devDependencies": {
         "@aitodotai/json-stringify-pretty-compact": "^1.3.0",
@@ -151,6 +154,7 @@
         "resize-observer-polyfill": "^1.5.1",
         "sass": "^1.97.3",
         "shiki": "^3.21.0",
+        "svelte": "5",
         "svelte-check": "^4.3.5",
         "svelte-eslint-parser": "1.4.1",
         "svelte-highlight": "^7.9.0",
@@ -170,5 +174,9 @@
         "vitest-matchmedia-mock": "^2.0.3",
         "wx-svelte-grid": "^2.5.0",
         "yoctocolors": "^2.1.2"
-    }
+    },
+    "peerDependencies": {
+        "svelte": "^5.43.0"
+    },
+    "packageManager": "pnpm@10.0.0"
 }