svelteplot 0.2.9 → 0.2.10-pr-110.0

package/dist/transforms/sort.d.ts

@@ -1,28 +1,16 @@
 import type { DataRecord, DataRow, TransformArg } from '../types.js';
 export declare const SORT_KEY: unique symbol;
+export declare const IS_SORTED: unique symbol;
 export declare function sort({ data, ...channels }: TransformArg<DataRecord>, options?: {
     reverse?: boolean;
-}): {
-    sort: null;
-    data: {
-        ___orig___?: import("../types.js").RawValue | [import("../types.js").RawValue, import("../types.js").RawValue];
-    }[];
-} | {
-    data: DataRecord[];
-};
+}): any;
 /**
- * reverses the data row order
+ * shuffles the data row order
  */
 export declare function shuffle({ data, ...channels }: TransformArg<DataRow[]>, options?: {
     seed?: number;
-}): {
-    sort: null;
-    data: DataRow[][];
-};
+}): any;
 /**
  * reverses the data row order
  */
-export declare function reverse({ data, ...channels }: TransformArg<DataRow[]>): {
-    sort: null;
-    data: DataRow[][];
-};
+export declare function reverse({ data, ...channels }: TransformArg<DataRow[]>): any;

package/dist/transforms/sort.js

@@ -3,6 +3,7 @@ import { resolveChannel } from '../helpers/resolve.js';
 import { shuffler } from 'd3-array';
 import { randomLcg } from 'd3-random';
 export const SORT_KEY = Symbol('sortKey');
+export const IS_SORTED = Symbol('isSorted');
 export function sort({ data, ...channels }, options = {}) {
     if (!Array.isArray(data))
         return { data, ...channels };
@@ -14,19 +15,26 @@ export function sort({ data, ...channels }, options = {}) {
             sort.channel = sort.channel.substring(1);
             sort.order = 'descending';
         }
+        // if sort is a function that does not take exactly one argument, we treat it
+        // as comparator function, as you would pass to array.sort
+        const isComparator = typeof channels.sort === 'function' && channels.sort.length !== 1;
         // sort data
         return {
-            data: data
-                .map((d) => ({
-                ...d,
-                [SORT_KEY]: resolveChannel('sort', d, { ...channels, sort })
-            }))
-                .toSorted((a, b) => (a[SORT_KEY] > b[SORT_KEY] ? 1 : a[SORT_KEY] < b[SORT_KEY] ? -1 : 0) *
-                (options.reverse || (isDataRecord(sort) && sort?.order === 'descending')
-                    ? -1
-                    : 1))
-                .map(({ [SORT_KEY]: a, ...rest }) => rest),
+            data: isComparator
+                ? data.toSorted(channels.sort)
+                : data
+                    .map((d) => ({
+                    ...d,
+                    [SORT_KEY]: resolveChannel('sort', d, { ...channels, sort })
+                }))
+                    .toSorted((a, b) => (a[SORT_KEY] > b[SORT_KEY] ? 1 : a[SORT_KEY] < b[SORT_KEY] ? -1 : 0) *
+                    (options.reverse ||
+                        (isDataRecord(sort) && sort?.order === 'descending')
+                        ? -1
+                        : 1))
+                    .map(({ [SORT_KEY]: a, ...rest }) => rest),
             ...channels,
+            [IS_SORTED]: sort,
             // set the sort channel to null to disable the implicit alphabetical
             // ordering of ordinal domains, and also to avoid double sorting in case
             // this transform is used "outside" a mark
@@ -39,7 +47,7 @@ export function sort({ data, ...channels }, options = {}) {
     };
 }
 /**
- * reverses the data row order
+ * shuffles the data row order
  */
 export function shuffle({ data, ...channels }, options = {}) {
     const random = randomLcg(options.seed);
@@ -49,7 +57,8 @@ export function shuffle({ data, ...channels }, options = {}) {
         ...channels,
         // set the sort channel to null to disable the implicit
         // alphabetical ordering of ordinal domains
-        sort: null
+        sort: null,
+        [IS_SORTED]: true
     };
 }
 /**
@@ -61,6 +70,7 @@ export function reverse({ data, ...channels }) {
         ...channels,
         // set the sort channel to null to disable the implicit
         // alphabetical ordering of ordinal domains
-        sort: null
+        sort: null,
+        [IS_SORTED]: true
     };
 }

package/dist/transforms/window.d.ts

@@ -7,18 +7,6 @@ type WindowOptions = {
     reduce: ReducerName;
     strict: boolean;
 };
-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];
-    }[];
-};
+export declare function windowX(args: TransformArg<DataRecord>, options: WindowOptions): any;
+export declare function windowY(args: TransformArg<DataRecord>, options: WindowOptions): any;
 export {};

package/dist/types.d.ts

@@ -4,6 +4,34 @@ import type { MouseEventHandler } from 'svelte/elements';
 import type { MarkerShape } from './marks/helpers/Marker.svelte';
 import type { Writable } from 'svelte/store';
 import type * as CSS from 'csstype';
+import type { AreaMarkProps } from './marks/Area.svelte';
+import type { ArrowMarkProps } from './marks/Arrow.svelte';
+import type { AxisXMarkProps } from './marks/AxisX.svelte';
+import type { AxisYMarkProps } from './marks/AxisY.svelte';
+import type { BarXMarkProps } from './marks/BarX.svelte';
+import type { CellMarkProps } from './marks/Cell.svelte';
+import type { DotMarkProps } from './marks/Dot.svelte';
+import type { FrameMarkProps } from './marks/Frame.svelte';
+import type { GeoMarkProps } from './marks/Geo.svelte';
+import type { GraticuleMarkProps } from './marks/Graticule.svelte';
+import type { LineMarkProps } from './marks/Line.svelte';
+import type { LinkMarkProps } from './marks/Link.svelte';
+import type { RectMarkProps } from './marks/Rect.svelte';
+import type { RuleXMarkProps } from './marks/RuleX.svelte';
+import type { SphereMarkProps } from './marks/Sphere.svelte';
+import type { SpikeMarkProps } from './marks/Spike.svelte';
+import type { TextMarkProps } from './marks/Text.svelte';
+import type { TickXMarkProps } from './marks/TickX.svelte';
+import type { VectorMarkProps } from './marks/Vector.svelte';
+import type { BrushMarkProps } from './marks/Brush.svelte';
+import type { BrushXMarkProps } from './marks/BrushX.svelte';
+import type { BrushYMarkProps } from './marks/BrushY.svelte';
+import type { RectXMarkProps } from './marks/RectX.svelte';
+import type { RectYMarkProps } from './marks/RectY.svelte';
+import type { RuleYMarkProps } from './marks/RuleY.svelte';
+import type { TickYMarkProps } from './marks/TickY.svelte';
+import type { GridYMarkProps } from './marks/GridY.svelte';
+import type { GridXMarkProps } from './marks/GridX.svelte';
 export type MarkType = 'area' | 'arrow' | 'axisX' | 'axisY' | 'barX' | 'barY' | 'cell' | 'dot' | 'vector' | 'frame' | 'geo' | 'gridX' | 'gridY' | 'line' | 'rect' | 'regression' | 'ruleX' | 'ruleY' | 'swoopyArrow' | 'text' | 'tickX' | 'tickY';
 export type ScaleName = 'x' | 'y' | 'r' | 'color' | 'opacity' | 'length' | 'symbol' | 'fx' | 'fy' | 'projection';
 export type ScaleType = 'linear' | 'pow' | 'sqrt' | 'log' | 'symlog' | 'time' | 'point' | 'ordinal' | 'sequential' | 'band' | 'categorical' | 'cyclical' | 'threshold' | 'quantile-cont' | 'quantile' | 'quantize' | 'diverging' | 'diverging-log' | 'diverging-pow' | 'diverging-sqrt' | 'diverging-symlog';
@@ -300,52 +328,7 @@ export type PlotOptions = {
      */
     css: (d: string) => string | undefined;
 };
-export type PlotDefaults = {
-    axisXAnchor: AxisXAnchor;
-    axisYAnchor: AxisYAnchor;
-    xTickSpacing: number;
-    yTickSpacing: number;
-    height: number;
-    inset: number;
-    colorScheme: ColorScheme | string[];
-    categoricalColorScheme: ColorScheme | string[];
-    dotRadius: number;
-    /**
-     * for computing the automatic height based on the number of
-     * domain items in a point scale
-     */
-    pointScaleHeight: number;
-    /**
-     * for computing the automatic height based on the number of
-     * domain items in a band scale
-     */
-    bandScaleHeight: number;
-    /**
-     * add frame to plots by default
-     */
-    frame: boolean;
-    grid: boolean;
-    axes: boolean;
-    /**
-     * initial width of the plot before measuring the actual width
-     */
-    initialWidth: number;
-    /**
-     * locale, used for automatic axis ticks
-     */
-    locale: string;
-    /**
-     * default number format for axis ticks
-     */
-    numberFormat: Intl.NumberFormatOptions;
-    markerDotRadius: number;
-    /**
-     * fallback color to be used for null/NA
-     */
-    unknown: string;
-    css: (d: string) => string | undefined;
-};
-export type GenericMarkOptions = Record<string, any>;
+export type GenericMarkOptions = Record<string | symbol, any>;
 export type DataRecord = Record<string | symbol, RawValue> & {
     ___orig___?: RawValue | [RawValue, RawValue];
 };
@@ -490,15 +473,30 @@ export type FacetContext = {
 };
 export type LinkableMarkProps = {
     /**
-     * simple browser tooltip to be displayed on mouseover
+     * if set, the mark element will be wrapped in a <a> link element
+     */
+    href?: ConstantAccessor<string>;
+    /**
+     * the relationship of the target object to the link object (e.g. "noopener")
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#rel
+     */
+    rel?: ConstantAccessor<string>;
+    /**
+     * the link target mime type, e.g. "text/csv"
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#type
      */
-    title: ConstantAccessor<string>;
+    type?: ConstantAccessor<string>;
     /**
-     * if set, the mark element will be wrapped in a <a> link
-     * element
+     * the target of the link, e.g. "_blank" or "_self"
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/a#target
      */
-    href: ConstantAccessor<string>;
-    target: ConstantAccessor<'_self' | '_blank' | string>;
+    target?: ConstantAccessor<'_self' | '_blank' | '_parent' | '_top' | string>;
+    /**
+     * if set to true, the link will be downloaded instead of navigating to it
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download
+     */
+    download?: ConstantAccessor<boolean>;
+    [key: `data-sveltekit-${string}`]: string | boolean;
 };
 export type BaseMarkProps = Partial<{
     /**
@@ -512,6 +510,12 @@ export type BaseMarkProps = Partial<{
     dy: ConstantAccessor<number>;
     fill: ConstantAccessor<string>;
     fillOpacity: ConstantAccessor<number>;
+    sort: string | ConstantAccessor<RawValue> | ((a: RawValue, b: RawValue) => number) | {
+        /** sort data using an already defined channel */
+        channel: string;
+        /** sort order */
+        order?: 'ascending' | 'descending';
+    };
     stroke: ConstantAccessor<string>;
     strokeWidth: ConstantAccessor<number>;
     strokeOpacity: ConstantAccessor<number>;
@@ -577,7 +581,7 @@ export type BaseRectMarkProps = {
     borderRadius?: BorderRadius;
 };
 export type Channels = Record<string, ChannelAccessor | ConstantAccessor<string | number | boolean | symbol>>;
-export type TransformArg<K> = Channels & {
+export type TransformArg<K> = Channels & BaseMarkProps & {
     data: K[];
 };
 export type MapArg<K> = Channels & {
@@ -597,11 +601,12 @@ export type AutoMarginStores = {
     autoMarginRight: Writable<Map<string, number>>;
     autoMarginBottom: Writable<Map<string, number>>;
 };
+type IgnoreDefaults = 'data' | 'facet' | ChannelName | 'title' | 'automatic';
 /**
  * these are the default options for the plot marks that can be set using
  * the 'svelteplot/defaults' context.
  */
-export type DefaultOptions = {
+export type PlotDefaults = {
     /**
      * default plot height
      */
@@ -611,41 +616,32 @@ export type DefaultOptions = {
      */
     inset: number;
     /**
-     * default tick line length
-     */
-    tickSize: number;
-    /**
-     * default padding between tick line and tick label
-     */
-    tickPadding: number;
-    /**
-     * default font size for tick labels
-     */
-    tickFontSize: number;
-    /**
-     * default anchor for x axis
+     * default color scheme
      */
-    axisXAnchor: 'bottom' | 'top';
+    colorScheme: ColorScheme;
+    categoricalColorScheme: ColorScheme | string[];
     /**
-     * default anchor for y axis
+     * fallback color to be used for null/NA
      */
-    axisYAnchor: 'left' | 'right';
+    unknown: string;
     /**
-     * default spacing between ticks in AxisX and GridX
+     * optional @emotion/css function to style the plot
      */
-    xTickSpacing: number;
+    css: (d: string) => string | undefined;
     /**
-     * default spacing between ticks in AxisY and GridY
+     * for computing the automatic height based on the number of
+     * domain items in a point scale
      */
-    yTickSpacing: number;
+    pointScaleHeight: number;
     /**
-     * default color scheme
+     * for computing the automatic height based on the number of
+     * domain items in a band scale
      */
-    colorScheme: ColorScheme;
+    bandScaleHeight: number;
     /**
-     * default step for graticule, in degrees
+     * initial width of the plot before measuring the actual width
      */
-    graticuleStep: number;
+    initialWidth: number;
     /**
      * locale, used for automatic axis ticks
      */
@@ -658,6 +654,164 @@ export type DefaultOptions = {
      * default dot radius for line markers, used in dot, circle, and circle-stroke markers
      */
     markerDotRadius: number;
+    /**
+     * default props for area marks, applied to area, areaX, and areaY marks
+     */
+    area: Partial<Omit<AreaMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for areaX marks
+     */
+    areaX: Partial<Omit<AreaMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for areaY marks
+     */
+    areaY: Partial<Omit<AreaMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for arrow marks
+     */
+    arrow: Partial<Omit<ArrowMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for axis marks, applied to both axisX and axisY marks
+     */
+    axis: Partial<Omit<AxisXMarkProps, 'data' | 'facet' | ChannelName | 'facetAnchor' | 'labelAnchor' | 'anchor'> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for axisX marks
+     */
+    axisX: Partial<Omit<AxisXMarkProps, IgnoreDefaults> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for axisY marks
+     */
+    axisY: Partial<Omit<AxisYMarkProps, IgnoreDefaults> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for bar marks, applied to both barX and barY marks
+     */
+    bar: Partial<Omit<BarXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for barX marks
+     */
+    barX: Partial<Omit<BarXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for barY marks
+     */
+    barY: Partial<Omit<BarXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for brush marks, applied to brush, brushX and brushY marks
+     */
+    brush: Partial<Omit<BrushMarkProps, IgnoreDefaults | 'limitDimension'>>;
+    /**
+     * default props for brushX marks
+     */
+    brushX: Partial<Omit<BrushXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for brushY marks
+     */
+    brushY: Partial<Omit<BrushYMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for cell marks
+     */
+    cell: Partial<Omit<CellMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for dot marks
+     */
+    dot: Partial<Omit<DotMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for frame marks
+     */
+    frame: Partial<FrameMarkProps & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for geo marks
+     */
+    geo: Partial<Omit<GeoMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for graticule marks
+     */
+    graticule: Partial<Omit<GraticuleMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for grid marks, applied to both gridX and gridY marks
+     */
+    grid: Partial<Omit<GridXMarkProps, IgnoreDefaults> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for gridX marks
+     */
+    gridX: Partial<Omit<GridXMarkProps, IgnoreDefaults> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for gridY marks
+     */
+    gridY: Partial<Omit<GridYMarkProps, IgnoreDefaults> & {
+        implicit: boolean;
+    }>;
+    /**
+     * default props for line marks
+     */
+    line: Partial<Omit<LineMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for link marks
+     */
+    link: Partial<Omit<LinkMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rect marks, applied to rect and rectX marks
+     */
+    rect: Partial<Omit<RectMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rectX marks
+     */
+    rectX: Partial<Omit<RectXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rectY marks
+     */
+    rectY: Partial<Omit<RectYMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rule marks
+     */
+    rule: Partial<Omit<RuleXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rule marks
+     */
+    ruleX: Partial<Omit<RuleXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for rule marks
+     */
+    ruleY: Partial<Omit<RuleYMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for sphere marks
+     */
+    sphere: Partial<SphereMarkProps>;
+    /**
+     * default props for spike marks
+     */
+    spike: Partial<Omit<SpikeMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for text marks
+     */
+    text: Partial<Omit<TextMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for tick marks, applied to tickX and tickY marks
+     */
+    tick: Partial<Omit<TickXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for tickX marks
+     */
+    tickX: Partial<Omit<TickXMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for tickY marks
+     */
+    tickY: Partial<Omit<TickYMarkProps, IgnoreDefaults>>;
+    /**
+     * default props for vector marks
+     */
+    vector: Partial<Omit<VectorMarkProps, IgnoreDefaults>>;
 };
 export type MapIndexObject = {
     mapIndex: (I: number[], S: RawValue[], T: RawValue[]) => void;

package/dist/ui/ExamplesGrid.svelte

@@ -36,7 +36,7 @@
             border: 1px solid #88888822;
             border-radius: 2px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
-            padding: 1.5ex;
+            padding: 1.5ex 1.5ex 0.4ex 1.5ex;
         }
 
         &:hover {