svelteplot 0.1.3-next.11 → 0.1.3-next.12

package/README.md

@@ -1,5 +1,6 @@
 # SveltePlot
 
-SveltePlot is a new reactive 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.
+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.
+
+<img src="static/logo.png" alt="SveltePlot logo" width="400" />
 
-<img src="static/logo.png" alt="logo" width="400" />

package/dist/helpers/scales.js

@@ -147,7 +147,9 @@ export function createScale(name, scaleOptions, marks, plotOptions, plotWidth, p
         valueArr.sort(ascending);
     }
     const domain = scaleOptions.domain
-        ? extent(scaleOptions.zero ? [0, ...scaleOptions.domain] : scaleOptions.domain)
+        ? isOrdinal
+            ? scaleOptions.domain
+            : extent(scaleOptions.zero ? [0, ...scaleOptions.domain] : scaleOptions.domain)
         : type === 'band' ||
             type === 'point' ||
             type === 'ordinal' ||

package/dist/marks/BarX.svelte

@@ -46,8 +46,6 @@
             stack
         )
     );
-
-    $inspect({ args });
 </script>
 
 <Mark
@@ -64,16 +62,25 @@
                 {@const insetLeft = resolveProp(args.insetLeft, d.datum, 0)}
                 {@const insetRight = resolveProp(args.insetRight, d.datum, 0)}
                 {@const insetTop = resolveProp(args.insetTop || args.inset, d.datum, 0)}
-                {@const insetBottom = resolveProp(args.insetBottom  || args.inset, d.datum, 0)}
+                {@const insetBottom = resolveProp(args.insetBottom || args.inset, d.datum, 0)}
                 {@const dx = resolveProp(args.dx, d.datum, 0)}
                 {@const dy = resolveProp(args.dy, d.datum, 0)}
                 {#if d.valid}
                     {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
                     <path
-                        d={roundedRect(0, 0, maxx - minx - insetLeft - insetRight, bw - insetTop - insetBottom, options.borderRadius)}
+                        d={roundedRect(
+                            0,
+                            0,
+                            maxx - minx - insetLeft - insetRight,
+                            bw - insetTop - insetBottom,
+                            options.borderRadius
+                        )}
                         class={[styleClass, className]}
                         {style}
-                        transform="translate({[minx + dx + insetLeft, d.y + insetTop + dy - bw * 0.5]})"
+                        transform="translate({[
+                            minx + dx + insetLeft,
+                            d.y + insetTop + dy - bw * 0.5
+                        ]})"
                         use:addEventHandlers={{
                             getPlotState,
                             options: args,

package/dist/marks/BarY.svelte

@@ -11,10 +11,8 @@
     import {
         type PlotContext,
         type BaseMarkProps,
-        type RectMarkProps,
         type ChannelAccessor,
-        type DataRow,
-        type FacetContext
+        type DataRow
     } from '../types.js';
     import type { StackOptions } from '../transforms/stack.js';
     import { maybeData } from '../helpers/index.js';
@@ -41,25 +39,23 @@
                   bottomRight?: number;
                   bottomLeft?: number;
               };
-    } & RectMarkProps;
+    };
 
     let { data = [{}], class: className = null, stack, ...options }: BarYProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
-    let args = $derived(
+    const args = $derived(
         stackY(
             intervalY(
                 // by default, sort by x channel (the ordinal labels)
-                sort(recordizeY({ data: maybeData(data), sort: { channel: 'x' }, ...options })),
+                sort(recordizeY({ data, sort: { channel: 'x' }, ...options })),
                 { plot }
             ),
             stack
         )
     );
-
-    const { getTestFacet } = getContext<FacetContext>('svelteplot/facet');
 </script>
 
 <Mark
@@ -82,10 +78,19 @@
                 {#if d.valid}
                     {@const [style, styleClass] = resolveStyles(plot, d, args, 'fill', usedScales)}
                     <path
-                        d={roundedRect(0, 0, bw - insetLeft - insetRight, maxy - miny - insetTop - insetBottom, options.borderRadius)}
+                        d={roundedRect(
+                            0,
+                            0,
+                            bw - insetLeft - insetRight,
+                            maxy - miny - insetTop - insetBottom,
+                            options.borderRadius
+                        )}
                         class={[styleClass, className]}
                         {style}
-                        transform="translate({[d.x + insetLeft + dx - bw * 0.5, miny + dy + insetTop]})"
+                        transform="translate({[
+                            d.x + insetLeft + dx - bw * 0.5,
+                            miny + dy + insetTop
+                        ]})"
                         use:addEventHandlers={{
                             getPlotState,
                             options: args,

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

@@ -1,4 +1,25 @@
+import { type BaseMarkProps, type ChannelAccessor, type DataRow } from '../types.js';
+import type { StackOptions } from '../transforms/stack.js';
+type BarYProps = BaseMarkProps & {
+    data: DataRow[];
+    x?: ChannelAccessor;
+    y?: ChannelAccessor;
+    y1?: ChannelAccessor;
+    y2?: ChannelAccessor;
+    stack?: StackOptions;
+    /**
+     * Converts y into y1/y2 ranges based on the provided interval. Disables the
+     * implicit stacking
+     */
+    interval?: number | string;
+    borderRadius?: number | {
+        topLeft?: number;
+        topRight?: number;
+        bottomRight?: number;
+        bottomLeft?: number;
+    };
+};
 /** For vertical column charts using a band scale as x axis */
-declare const BarY: import("svelte").Component<any, {}, "">;
+declare const BarY: import("svelte").Component<BarYProps, {}, "">;
 type BarY = ReturnType<typeof BarY>;
 export default BarY;

package/dist/transforms/jitter.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/transforms/recordize.d.ts

@@ -1,4 +1,5 @@
 import type { TransformArgsRow, TransformArgsRecord } from '../types.js';
+export declare const INDEX: unique symbol;
 export declare const RAW_VALUE: unique symbol;
 export declare function recordizeX({ data, ...channels }: TransformArgsRow, { withIndex }?: {
     withIndex: boolean;

package/dist/transforms/recordize.js

@@ -1,5 +1,6 @@
 import isDataRecord from '../helpers/isDataRecord.js';
-export const RAW_VALUE = Symbol();
+export const INDEX = Symbol('index');
+export const RAW_VALUE = Symbol('originalValue');
 /*
  * This transform takes an array of raw values as input and returns data records
  * in which the values are interpreted as x channel and their index as y
@@ -12,7 +13,6 @@ export function recordizeX({ data, ...channels }, { withIndex } = { withIndex: t
                 __value: value,
                 ...(withIndex ? { __index: index } : {}),
                 [RAW_VALUE]: value,
-                // TODO: remove ___orig___ references
                 ___orig___: value
             })),
             ...channels,
@@ -33,14 +33,13 @@ export function recordizeY({ data, ...channels }, { withIndex } = { withIndex: t
     if (dataIsRawValueArray) {
         return {
             data: Array.from(data).map((value, index) => ({
-                __value: value,
                 ...(withIndex ? { __index: index } : {}),
                 [RAW_VALUE]: value,
                 ___orig___: value
             })),
             ...channels,
             ...(withIndex ? { x: '__index' } : {}),
-            y: '__value'
+            y: RAW_VALUE
         };
     }
     return {
@@ -66,7 +65,7 @@ export function recordizeXY({ data, ...channels }) {
         channels.y === undefined) {
         return {
             data: data.map(([x, y, ...rest]) => ({
-                ___orig___: [x, y, ...rest],
+                [RAW_VALUE]: [x, y, ...rest],
                 __x: x,
                 __y: y
             })),

package/dist/transforms/window.d.ts

@@ -10,12 +10,14 @@ type WindowOptions = {
 export declare function windowX(args: TransformArg<DataRecord>, options: WindowOptions): {
     data: {
         [x: string]: import("../types.js").RawValue;
+        [x: symbol]: import("../types.js").RawValue;
         ___orig___?: import("../types.js").RawValue | [import("../types.js").RawValue, import("../types.js").RawValue];
     }[];
 };
 export declare function windowY(args: TransformArg<DataRecord>, options: WindowOptions): {
     data: {
         [x: string]: import("../types.js").RawValue;
+        [x: symbol]: import("../types.js").RawValue;
         ___orig___?: import("../types.js").RawValue | [import("../types.js").RawValue, import("../types.js").RawValue];
     }[];
 };

package/dist/types.d.ts

@@ -331,7 +331,7 @@ export type PlotDefaults = {
     markerDotRadius: number;
 };
 export type GenericMarkOptions = Record<string, any>;
-export type DataRecord = Record<string, RawValue> & {
+export type DataRecord = Record<string | symbol, RawValue> & {
     ___orig___?: RawValue | [RawValue, RawValue];
 };
 export type ResolvedDataRecord = Partial<Record<ScaledChannelName, any>> & {
@@ -544,7 +544,7 @@ export type BaseRectMarkProps = {
     insetRight?: ConstantAccessor<number>;
     insetBottom?: ConstantAccessor<number>;
 };
-export type Channels = Record<string, ChannelAccessor | ConstantAccessor<string | number | boolean>>;
+export type Channels = Record<string, ChannelAccessor | ConstantAccessor<string | number | boolean | symbol>>;
 export type TransformArg<K> = Channels & {
     data: K[];
 };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.1.3-next.11",
+    "version": "0.1.3-next.12",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",
@@ -87,7 +87,7 @@
         "svelte-highlight": "^7.8.3",
         "topojson-client": "^3.1.0",
         "tslib": "^2.8.1",
-        "typedoc": "^0.28.3",
+        "typedoc": "^0.28.4",
         "typedoc-plugin-markdown": "^4.6.3",
         "typescript": "^5.8.3",
         "vite": "^6.3.4",
@@ -109,7 +109,7 @@
         "d3-scale-chromatic": "^3.1.0",
         "d3-shape": "^3.2.0",
         "d3-time": "^3.1.0",
-        "es-toolkit": "^1.37.1",
+        "es-toolkit": "^1.37.2",
         "fast-equals": "^5.2.2",
         "merge-deep": "^3.0.3",
         "svelte": "5.28.2"