svelteplot 0.1.3-next.14 → 0.1.3-next.17

package/README.md

@@ -1,6 +1,7 @@
 # SveltePlot
 
+![Tests](https://github.com/svelteplot/svelteplot/actions/workflows/test.yml/badge.svg)
+
 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" />
-

package/dist/Mark.svelte

@@ -227,7 +227,12 @@
                                   );
                         out[`x${suffix}`] = x;
                         out[`y${suffix}`] = y;
-                        out.valid = out.valid && isValid(row.x) && isValid(row.y);
+                        out.valid =
+                            out.valid &&
+                            isValid(row.x) &&
+                            isValid(row.y) &&
+                            isValid(x) &&
+                            isValid(y);
                     }
                 }
             }

package/dist/marks/Dot.svelte

@@ -9,15 +9,9 @@
         FacetContext,
         PlotDefaults
     } from '../types.js';
-    import {
-        resolveChannel,
-        resolveProp,
-        resolveScaledStyles,
-        resolveStyles
-    } from '../helpers/resolve.js';
+    import { resolveProp, resolveStyles } from '../helpers/resolve.js';
     import { maybeSymbol } from '../helpers/symbols.js';
     import { symbol as d3Symbol } from 'd3-shape';
-    import { projectXY } from '../helpers/scales.js';
     import { sort } from '../index.js';
     import Mark from '../Mark.svelte';
     import DotCanvas from './helpers/DotCanvas.svelte';
@@ -36,14 +30,14 @@
         children?: Snippet;
         dx?: ConstantAccessor<number>;
         dy?: ConstantAccessor<number>;
-        canvas: boolean;
-        dotClass: ConstantAccessor<string>;
-        in: any;
-        inParams: any;
-        out: any;
-        outParams: any;
-        transition: any;
-        wrap: Snippet;
+        canvas?: boolean;
+        dotClass?: ConstantAccessor<string>;
+        in?: any;
+        inParams?: any;
+        out?: any;
+        outParams?: any;
+        transition?: any;
+        wrap?: Snippet;
     };
 
     let {
@@ -132,6 +126,3 @@
         </g>
     {/snippet}
 </Mark>
-
-<style>
-</style>

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

@@ -11,14 +11,14 @@ type DotProps = BaseMarkProps & {
     children?: Snippet;
     dx?: ConstantAccessor<number>;
     dy?: ConstantAccessor<number>;
-    canvas: boolean;
-    dotClass: ConstantAccessor<string>;
-    in: any;
-    inParams: any;
-    out: any;
-    outParams: any;
-    transition: any;
-    wrap: Snippet;
+    canvas?: boolean;
+    dotClass?: ConstantAccessor<string>;
+    in?: any;
+    inParams?: any;
+    out?: any;
+    outParams?: any;
+    transition?: any;
+    wrap?: Snippet;
 };
 declare const Dot: import("svelte").Component<DotProps, {}, "">;
 type Dot = ReturnType<typeof Dot>;

package/dist/marks/GridX.svelte

@@ -2,10 +2,10 @@
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
     import type { PlotContext, BaseMarkProps, RawValue } from '../types.js';
-    import { resolveChannel, resolveScaledStyles } from '../helpers/resolve.js';
+    import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
-    import { getUsedScales } from '../helpers/scales.js';
     import { testFilter } from '../helpers/index.js';
+    import { RAW_VALUE } from '../transforms/recordize.js';
 
     type GrixXMarkProps = BaseMarkProps & {
         data?: RawValue[];
@@ -15,13 +15,13 @@
     let { data = [], automatic = false, ...options }: GrixXMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
-    let autoTickCount = $derived(
+    const autoTickCount = $derived(
         Math.max(3, Math.round(plot.facetWidth / plot.options.x.tickSpacing))
     );
 
-    let ticks: RawValue[] = $derived(
+    const ticks: RawValue[] = $derived(
         data.length > 0
             ? // use custom tick values if user passed any as prop
               data
@@ -54,9 +54,18 @@
                     {@const y2_ = resolveChannel('y2', tick, options)}
                     {@const y1 = options.y1 != null ? plot.scales.y.fn(y1_) : 0}
                     {@const y2 = options.y2 != null ? plot.scales.y.fn(y2_) : plot.facetHeight}
+                    {@const [style, styleClass] = resolveStyles(
+                        plot,
+                        { datum: { [RAW_VALUE]: tick } },
+                        options,
+                        'stroke',
+                        usedScales,
+                        true
+                    )}
                     <line
+                        class={styleClass}
                         transform="translate({x},{plot.options.marginTop})"
-                        style={resolveScaledStyles(tick, options, usedScales, plot, 'stroke')}
+                        {style}
                         {y1}
                         {y2} />
                 {/if}

package/dist/marks/GridY.svelte

@@ -2,23 +2,23 @@
     import { getContext } from 'svelte';
     import Mark from '../Mark.svelte';
     import type { PlotContext, BaseMarkProps, RawValue, DataRecord } from '../types.js';
-    import { resolveChannel, resolveScaledStyles } from '../helpers/resolve.js';
+    import { resolveChannel, resolveStyles } from '../helpers/resolve.js';
     import { autoTicks } from '../helpers/autoTicks.js';
-    import { getUsedScales } from '../helpers/scales.js';
     import { testFilter } from '../helpers/index.js';
+    import { RAW_VALUE } from '../transforms/recordize.js';
 
     type GridYMarkProps = BaseMarkProps & { data?: RawValue[]; automatic?: boolean };
 
     let { data = [], automatic = false, ...options }: GridYMarkProps = $props();
 
     const { getPlotState } = getContext<PlotContext>('svelteplot');
-    let plot = $derived(getPlotState());
+    const plot = $derived(getPlotState());
 
-    let autoTickCount = $derived(
+    const autoTickCount = $derived(
         Math.max(2, Math.round(plot.facetHeight / plot.options.y.tickSpacing))
     );
 
-    let ticks: RawValue[] = $derived(
+    const ticks: RawValue[] = $derived(
         data.length > 0
             ? // use custom tick values if user passed any as prop
               data
@@ -51,9 +51,18 @@
                     {@const x2_ = resolveChannel('x2', tick, options)}
                     {@const x1 = options.x1 != null ? plot.scales.x.fn(x1_) : 0}
                     {@const x2 = options.x2 != null ? plot.scales.x.fn(x2_) : plot.facetWidth}
+                    {@const [style, styleClass] = resolveStyles(
+                        plot,
+                        { datum: { [RAW_VALUE]: tick } },
+                        options,
+                        'stroke',
+                        usedScales,
+                        true
+                    )}
                     <line
+                        {style}
+                        class={styleClass}
                         transform="translate({plot.options.marginLeft},{y})"
-                        style={resolveScaledStyles(tick, options, usedScales, plot, 'stroke')}
                         {x1}
                         {x2} />
                 {/if}

package/dist/marks/Pointer.svelte

@@ -10,12 +10,12 @@
         /**
          * maximum cursor distance to select data points
          */
-        maxDistance: number;
+        maxDistance?: number;
         /**
          * called whenever the selection changes
          * @param data
          */
-        onupdate: (data: DataRow[]) => void;
+        onupdate?: (data: DataRow[]) => void;
     };
 </script>
 

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

@@ -10,12 +10,12 @@ export type PointerMarkProps = {
     /**
      * maximum cursor distance to select data points
      */
-    maxDistance: number;
+    maxDistance?: number;
     /**
      * called whenever the selection changes
      * @param data
      */
-    onupdate: (data: DataRow[]) => void;
+    onupdate?: (data: DataRow[]) => void;
 };
 import { type Snippet } from 'svelte';
 declare const Pointer: import("svelte").Component<PointerMarkProps, {}, "">;

package/dist/marks/Text.svelte

@@ -22,11 +22,11 @@
         dx?: ConstantAccessor<number>;
         dy?: ConstantAccessor<number>;
         text: ConstantAccessor<string>;
-        title: ConstantAccessor<string>;
+        title?: ConstantAccessor<string>;
         /**
          * if you want to apply class names to individual text elements
          */
-        textClass: ConstantAccessor<string>;
+        textClass?: ConstantAccessor<string>;
         /**
          * the line anchor for vertical position; top, bottom, or middle
          */

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

@@ -10,11 +10,11 @@ type TextMarkProps = BaseMarkProps & {
     dx?: ConstantAccessor<number>;
     dy?: ConstantAccessor<number>;
     text: ConstantAccessor<string>;
-    title: ConstantAccessor<string>;
+    title?: ConstantAccessor<string>;
     /**
      * if you want to apply class names to individual text elements
      */
-    textClass: ConstantAccessor<string>;
+    textClass?: ConstantAccessor<string>;
     /**
      * the line anchor for vertical position; top, bottom, or middle
      */

package/dist/transforms/bin.d.ts

@@ -1,7 +1,7 @@
 import type { DataRecord, RawValue } from '../types.js';
 import type { TransformArg } from '../types.js';
 import { type ThresholdCountGenerator } from 'd3-array';
-import { Reducer, type ReducerName } from '../helpers/reduce.js';
+import { type ReducerName } from '../helpers/reduce.js';
 type NamedThresholdsGenerator = 'auto' | 'scott' | 'sturges' | 'freedman-diaconis';
 type BinBaseOptions = {
     domain?: [number, number];
@@ -20,14 +20,14 @@ type AdditionalOutputChannels = Partial<{
     strokeOpacity: ReducerOption;
 }>;
 export type BinXOptions = BinBaseOptions & AdditionalOutputChannels & Partial<{
-    y: typeof Reducer;
-    y1: typeof Reducer;
-    y2: typeof Reducer;
+    y: ReducerOption;
+    y1: ReducerOption;
+    y2: ReducerOption;
 }>;
 export type BinYOptions = BinBaseOptions & AdditionalOutputChannels & Partial<{
-    x: typeof Reducer;
-    x1: typeof Reducer;
-    x2: typeof Reducer;
+    x: ReducerOption;
+    x1: ReducerOption;
+    x2: ReducerOption;
 }>;
 type BinOptions = BinBaseOptions & AdditionalOutputChannels;
 /**

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "svelteplot",
-    "version": "0.1.3-next.14",
+    "version": "0.1.3-next.17",
     "license": "ISC",
     "author": {
         "name": "Gregor Aisch",