svelteplot 0.1.3-next.9 → 0.2.1

package/dist/marks/helpers/DotCanvas.svelte

@@ -1,29 +1,30 @@
 <script lang="ts">
-    import type { PlotState, Mark, DataRecord, BaseMarkProps } from '../../types.js';
+    import type {
+        PlotState,
+        Mark,
+        BaseMarkProps,
+        ScaledDataRecord,
+        PlotContext
+    } from '../../types.js';
     import { CSS_VAR } from '../../constants.js';
-    import { isValid, testFilter } from '../../helpers/index.js';
-    import { resolveChannel, resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
-    import { projectXY } from '../../helpers/scales.js';
+    import { resolveProp } from '../../helpers/resolve.js';
     import { maybeSymbol } from '../../helpers/symbols.js';
     import { symbol as d3Symbol } from 'd3-shape';
-    import { untrack } from 'svelte';
-    import { isEqual } from 'es-toolkit';
+    import type { Attachment } from 'svelte/attachments';
+    import CanvasLayer from './CanvasLayer.svelte';
+    import { getContext } from 'svelte';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
 
-    let canvas: HTMLCanvasElement | undefined = $state();
-    let devicePixelRatio = $state(1);
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
 
     let {
         mark,
-        plot,
-        data,
-        testFacet,
-        usedScales
+        data
     }: {
         mark: Mark<BaseMarkProps>;
         plot: PlotState;
-        data: DataRecord[];
-        testFacet: any;
-        usedScales: any;
+        data: ScaledDataRecord[];
     } = $props();
 
     function drawSymbolPath(symbolType: string, size: number, context) {
@@ -31,154 +32,76 @@
         return d3Symbol(maybeSymbol(symbolType), size).context(context)();
     }
 
-    function scaleHash(scale) {
-        return { domain: scale.domain, type: scale.type, range: scale.range };
-    }
-
-    let _plotSize = $state([plot.width, plot.height]);
-    let _usedScales = $state(usedScales);
     let _markOptions = $state(mark.options);
-    const xScale = $derived(scaleHash(plot.scales.x));
-    const yScale = $derived(scaleHash(plot.scales.y));
-    const rScale = $derived(scaleHash(plot.scales.r));
-    let _xScale = $state(xScale);
-    let _yScale = $state(yScale);
-    let _rScale = $state(rScale);
-
-    const filteredData = $derived(
-        data.filter((datum) => testFilter(datum, _markOptions) && testFacet(datum, _markOptions))
-    );
-
-    let _filteredData: DataRecord[] = $state([]);
-
-    $effect(() => {
-        // update _usedScales only if changed
-        if (!isEqual(usedScales, _usedScales)) _usedScales = usedScales;
-        if (!isEqual(mark.options, _markOptions)) _markOptions = mark.options;
-
-        const plotSize = [plot.width, plot.height];
-        if (!isEqual(plotSize, _plotSize)) _plotSize = plotSize;
-
-        if (
-            _markOptions.filter
-                ? !isEqual(filteredData, _filteredData)
-                : filteredData.length !== _filteredData.length
-        ) {
-            _filteredData = filteredData;
-        }
-        if (!isEqual(xScale, _xScale)) _xScale = xScale;
-        if (!isEqual(yScale, _yScale)) _yScale = yScale;
-        if (!isEqual(rScale, _rScale)) _rScale = rScale;
-    });
-
-    $effect(() => {
-        // track plot size, since we're untracking the scales
-        _plotSize;
-        _markOptions;
-        _xScale;
-        _yScale;
-        _rScale;
-        const plotScales = untrack(() => plot.scales);
+
+    const renderDots: Attachment = (canvas: HTMLCanvasElement) => {
         const context = canvas.getContext('2d');
-        if (context === null) return;
-        // this will re-run whenever `color` or `size` change
-        context.resetTransform();
-        context.scale(devicePixelRatio, devicePixelRatio);
-
-        for (const datum of _filteredData) {
-            // untrack the filter test to avoid redrawing when not necessary
-            const x = resolveChannel('x', datum, _markOptions);
-            const y = resolveChannel('y', datum, _markOptions);
-            const r = resolveChannel('r', datum, _markOptions) || 2;
-            const symbol_ = resolveChannel('symbol', datum, {
-                symbol: 'circle',
-                ..._markOptions
-            });
-            const symbol = _usedScales.symbol ? plotScales.symbol.fn(symbol_) : symbol_;
-
-            if (isValid(x) && isValid(y) && isValid(r)) {
-                const [px, py] = projectXY(plotScales, x, y, true, true);
-
-                const r_ = _usedScales.r ? plotScales.r.fn(r) : r;
-                const size = r_ * r_ * Math.PI * devicePixelRatio;
-                let { stroke, strokeOpacity, fillOpacity, fill, opacity } = resolveScaledStyleProps(
-                    datum,
-                    _markOptions,
-                    _usedScales,
-                    untrack(() => plot),
-                    'stroke'
-                );
 
-                if (`${fill}`.toLowerCase() === 'currentcolor')
-                    fill = getComputedStyle(canvas.parentElement.parentElement).getPropertyValue(
-                        'color'
-                    );
-                if (`${stroke}`.toLowerCase() === 'currentcolor')
-                    stroke = getComputedStyle(canvas.parentElement.parentElement).getPropertyValue(
-                        'color'
-                    );
-                if (CSS_VAR.test(fill))
-                    fill = getComputedStyle(canvas).getPropertyValue(fill.slice(4, -1));
-                if (CSS_VAR.test(stroke))
-                    stroke = getComputedStyle(canvas).getPropertyValue(stroke.slice(4, -1));
-
-                if (stroke && stroke !== 'none') {
-                    const strokeWidth = resolveProp(_markOptions.strokeWidth, datum, 1.6);
-                    context.lineWidth = strokeWidth;
+        $effect(() => {
+            if (context) {
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+
+                for (const datum of data) {
+                    if (datum.valid) {
+                        let { fill, stroke } = datum;
+
+                        if (`${fill}`.toLowerCase() === 'currentcolor')
+                            fill = getComputedStyle(
+                                canvas?.parentElement?.parentElement
+                            ).getPropertyValue('color');
+                        if (`${stroke}`.toLowerCase() === 'currentcolor')
+                            stroke = getComputedStyle(
+                                canvas?.parentElement?.parentElement
+                            ).getPropertyValue('color');
+
+                        if (CSS_VAR.test(fill))
+                            fill = getComputedStyle(canvas).getPropertyValue(fill.slice(4, -1));
+                        if (CSS_VAR.test(stroke))
+                            stroke = getComputedStyle(canvas).getPropertyValue(stroke.slice(4, -1));
+
+                        if (stroke && stroke !== 'none') {
+                            const strokeWidth = resolveProp(
+                                _markOptions.strokeWidth,
+                                datum.datum,
+                                1.6
+                            );
+                            context.lineWidth = strokeWidth;
+                        }
+
+                        context.fillStyle = fill ? fill : 'none';
+                        context.strokeStyle = stroke ? stroke : 'none';
+                        context.translate(datum.x, datum.y);
+
+                        const size = datum.r * datum.r * Math.PI;
+
+                        context.beginPath();
+                        drawSymbolPath(datum.symbol, size, context);
+                        context.closePath();
+
+                        const { opacity = 1, fillOpacity = 1, strokeOpacity = 1 } = datum;
+
+                        if (opacity != null) context.globalAlpha = opacity ?? 1;
+                        if (fillOpacity != null) context.globalAlpha = (opacity ?? 1) * fillOpacity;
+                        if (fill && fill !== 'none') context.fill();
+                        if (strokeOpacity != null)
+                            context.globalAlpha = (opacity ?? 1) * strokeOpacity;
+                        if (stroke && stroke !== 'none') context.stroke();
+                        context.translate(-datum.x, -datum.y);
+                    }
                 }
-                context.fillStyle = fill ? fill : 'none';
-                context.strokeStyle = stroke ? stroke : 'none';
-                context.translate(px, py);
-
-                context.beginPath();
-                drawSymbolPath(symbol, size, context);
-                context.closePath();
-
-                if (opacity != null) context.globalAlpha = opacity ?? 1;
-                if (fillOpacity != null) context.globalAlpha = (opacity ?? 1) * fillOpacity;
-                if (fill && fill !== 'none') context.fill();
-                if (strokeOpacity != null) context.globalAlpha = (opacity ?? 1) * strokeOpacity;
-                if (stroke && stroke !== 'none') context.stroke();
-                context.translate(-px, -py);
             }
-        }
-        return () => {
-            canvas?.getContext('2d')?.clearRect(0, 0, canvas?.width, canvas?.height);
-        };
-    });
-
-    // code from https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
-    let remove: null | (() => void) = null;
-
-    function updatePixelRatio() {
-        if (remove != null) {
-            remove();
-        }
-        const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
-        const media = matchMedia(mqString);
-        media.addEventListener('change', updatePixelRatio);
-        remove = () => {
-            media.removeEventListener('change', updatePixelRatio);
-        };
-        devicePixelRatio = window.devicePixelRatio;
-    }
-    $effect(() => {
-        updatePixelRatio();
-    });
+
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
 </script>
 
-<foreignObject x="0" y="0" width={plot.width} height={plot.height}>
-    <canvas
-        xmlns="http://www.w3.org/1999/xhtml"
-        bind:this={canvas}
-        width={plot.width * devicePixelRatio}
-        height={plot.height * devicePixelRatio}
-        style="width: {plot.width}px; height: {plot.height}px;"></canvas>
-</foreignObject>
-
-<style>
-    foreignObject,
-    canvas {
-        color: currentColor;
-    }
-</style>
+<CanvasLayer {@attach renderDots} />

package/dist/marks/helpers/DotCanvas.svelte.d.ts

@@ -1,10 +1,8 @@
-import type { PlotState, Mark, DataRecord, BaseMarkProps } from '../../types.js';
+import type { PlotState, Mark, BaseMarkProps, ScaledDataRecord } from '../../types.js';
 type $$ComponentProps = {
     mark: Mark<BaseMarkProps>;
     plot: PlotState;
-    data: DataRecord[];
-    testFacet: any;
-    usedScales: any;
+    data: ScaledDataRecord[];
 };
 declare const DotCanvas: import("svelte").Component<$$ComponentProps, {}, "">;
 type DotCanvas = ReturnType<typeof DotCanvas>;

package/dist/marks/helpers/GeoCanvas.svelte

@@ -1,165 +1,115 @@
 <script lang="ts">
-    import type { PlotState, Mark, DataRecord, BaseMarkProps } from '../../types.js';
+    import type {
+        Mark,
+        BaseMarkProps,
+        PlotContext,
+        ScaledDataRecord,
+        UsedScales
+    } from '../../types.js';
     import { CSS_VAR } from '../../constants.js';
-    import { testFilter } from '../../helpers/index.js';
     import { resolveProp, resolveScaledStyleProps } from '../../helpers/resolve.js';
-    import { untrack } from 'svelte';
-    import { isEqual } from 'es-toolkit';
+    import { getContext, untrack } from 'svelte';
     import { type GeoPath } from 'd3-geo';
-
-    let canvas: HTMLCanvasElement | undefined = $state();
-    let devicePixelRatio = $state(1);
+    import CanvasLayer from './CanvasLayer.svelte';
+    import type { Attachment } from 'svelte/attachments';
+    import { devicePixelRatio } from 'svelte/reactivity/window';
+    import { GEOJSON_PREFER_STROKE } from '../../helpers/index.js';
 
     let {
         mark,
-        plot,
         data,
-        testFacet,
-        usedScales,
-        path
+        path,
+        usedScales
     }: {
         mark: Mark<BaseMarkProps>;
-        plot: PlotState;
-        data: DataRecord[];
-        testFacet: any;
-        usedScales: any;
+        data: ScaledDataRecord[];
         path: GeoPath;
+        usedScales: UsedScales;
     } = $props();
 
-    function scaleHash(scale) {
-        return { domain: scale.domain, type: scale.type, range: scale.range };
-    }
-
-    let _plotSize = $state([plot.width, plot.height]);
-    let _usedScales = $state(usedScales);
-    let _markOptions = $state(mark.options);
-
-    const filteredData = $derived(
-        data.filter((datum) => testFilter(datum, _markOptions) && testFacet(datum, _markOptions))
-    );
-
-    let _filteredData: DataRecord[] = $state([]);
-
-    $effect(() => {
-        // update _usedScales only if changed
-        if (!isEqual(usedScales, _usedScales)) _usedScales = usedScales;
-        if (!isEqual(mark.options, _markOptions)) _markOptions = mark.options;
+    const { getPlotState } = getContext<PlotContext>('svelteplot');
+    const plot = $derived(getPlotState());
 
-        const plotSize = [plot.width, plot.height];
-        if (!isEqual(plotSize, _plotSize)) _plotSize = plotSize;
-
-        if (
-            _markOptions.filter
-                ? !isEqual(filteredData, _filteredData)
-                : filteredData.length !== _filteredData.length
-        ) {
-            _filteredData = filteredData;
-        }
-    });
-
-    $effect(() => {
-        // track plot size, since we're untracking the scales
-        _plotSize;
-        _markOptions;
+    function maybeOpacity(value) {
+        return value == null ? 1 : +value;
+    }
 
-        const plotScales = untrack(() => plot.scales);
+    const render: Attachment = (canvas: HTMLCanvasElement) => {
         const context = canvas.getContext('2d');
-        if (context === null) return;
-        // this will re-run whenever `color` or `size` change
-        context.resetTransform();
-        context.scale(devicePixelRatio, devicePixelRatio);
-
-        let currentColor;
-
-        path.context(context);
-
-        const plot_ = untrack(() => plot);
 
-        for (const datum of _filteredData) {
-            // untrack the filter test to avoid redrawing when not necessary
-            let { stroke, fill, opacity, ...restStyles } = resolveScaledStyleProps(
-                datum,
-                _markOptions,
-                _usedScales,
-                plot_,
-                'fill'
-            );
-
-            const fillOpacity = restStyles['fill-opacity'];
-            const strokeOpacity = restStyles['stroke-opacity'];
-
-            if (`${fill}`.toLowerCase() === 'currentcolor')
-                fill =
-                    currentColor ||
-                    (currentColor = getComputedStyle(
-                        canvas?.parentElement?.parentElement
-                    ).getPropertyValue('color'));
-            if (`${stroke}`.toLowerCase() === 'currentcolor')
-                stroke =
-                    currentColor ||
-                    (currentColor = getComputedStyle(
-                        canvas?.parentElement?.parentElement
-                    ).getPropertyValue('color'));
-            if (CSS_VAR.test(fill))
-                fill = getComputedStyle(canvas).getPropertyValue(fill.slice(4, -1));
-            if (CSS_VAR.test(stroke))
-                stroke = getComputedStyle(canvas).getPropertyValue(stroke.slice(4, -1));
-
-            if (stroke && stroke !== 'none') {
-                const strokeWidth = resolveProp(_markOptions.strokeWidth, datum, 1.6);
-                context.lineWidth = strokeWidth;
+        $effect(() => {
+            path.context(context);
+            if (context) {
+                context.resetTransform();
+                context.scale(devicePixelRatio.current ?? 1, devicePixelRatio.current ?? 1);
+                let currentColor;
+
+                for (const d of data) {
+                    if (!d.valid) continue;
+                    const geometry = resolveProp(mark.options.geometry, d.datum, d.datum);
+                    // untrack the filter test to avoid redrawing when not necessary
+                    let { stroke, fill, ...restStyles } = resolveScaledStyleProps(
+                        d.datum,
+                        mark.options,
+                        usedScales,
+                        plot,
+                        GEOJSON_PREFER_STROKE.has(geometry.type) ? 'stroke' : 'fill'
+                    );
+
+                    const opacity = maybeOpacity(restStyles['opacity']);
+                    const fillOpacity = maybeOpacity(restStyles['fill-opacity']);
+                    const strokeOpacity = maybeOpacity(restStyles['stroke-opacity']);
+
+                    if (`${fill}`.toLowerCase() === 'currentcolor')
+                        fill =
+                            currentColor ||
+                            (currentColor = getComputedStyle(
+                                canvas?.parentElement?.parentElement
+                            ).getPropertyValue('color'));
+                    if (`${stroke}`.toLowerCase() === 'currentcolor')
+                        stroke =
+                            currentColor ||
+                            (currentColor = getComputedStyle(
+                                canvas?.parentElement?.parentElement
+                            ).getPropertyValue('color'));
+                    if (CSS_VAR.test(fill))
+                        fill = getComputedStyle(canvas).getPropertyValue(fill.slice(4, -1));
+                    if (CSS_VAR.test(stroke))
+                        stroke = getComputedStyle(canvas).getPropertyValue(stroke.slice(4, -1));
+
+                    if (stroke && stroke !== 'none') {
+                        const strokeWidth = resolveProp(mark.options.strokeWidth, d.datum, 1);
+                        context.lineWidth = strokeWidth ?? 1;
+                    }
+
+                    context.fillStyle = fill ? fill : 'none';
+                    context.strokeStyle = stroke ? stroke : 'none';
+                    context.lineJoin = 'round';
+                    context.beginPath();
+
+                    path(geometry);
+                    context.closePath();
+
+                    if (opacity != null) context.globalAlpha = opacity;
+                    if (fillOpacity != null) context.globalAlpha = opacity * fillOpacity;
+
+                    if (fill && fill !== 'none') context.fill();
+                    if (strokeOpacity != null) context.globalAlpha = opacity * strokeOpacity;
+                    if (stroke && stroke !== 'none') context.stroke();
+                }
             }
-            context.fillStyle = fill ? fill : 'none';
-            context.strokeStyle = stroke ? stroke : 'none';
-
-            context.beginPath();
-            path(datum);
-            context.closePath();
-
-            if (opacity != null) context.globalAlpha = opacity ?? 1;
-            if (fillOpacity != null) context.globalAlpha = (opacity ?? 1) * fillOpacity;
-
-            if (fill && fill !== 'none') context.fill();
-            if (strokeOpacity != null) context.globalAlpha = (opacity ?? 1) * strokeOpacity;
-            if (stroke && stroke !== 'none') context.stroke();
-        }
-        return () => {
-            canvas?.getContext('2d')?.clearRect(0, 0, canvas?.width, canvas?.height);
-        };
-    });
-
-    // code from https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
-    let remove: null | (() => void) = null;
-
-    function updatePixelRatio() {
-        if (remove != null) {
-            remove();
-        }
-        const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
-        const media = matchMedia(mqString);
-        media.addEventListener('change', updatePixelRatio);
-        remove = () => {
-            media.removeEventListener('change', updatePixelRatio);
-        };
-        devicePixelRatio = window.devicePixelRatio;
-    }
-    $effect(() => {
-        updatePixelRatio();
-    });
+            // reset path context in case we switch back to SVG
+            path.context(null);
+            return () => {
+                context?.clearRect(
+                    0,
+                    0,
+                    plot.width * (devicePixelRatio.current ?? 1),
+                    plot.height * (devicePixelRatio.current ?? 1)
+                );
+            };
+        });
+    };
 </script>
 
-<foreignObject x="0" y="0" width={plot.width} height={plot.height}>
-    <canvas
-        xmlns="http://www.w3.org/1999/xhtml"
-        bind:this={canvas}
-        width={plot.width * devicePixelRatio}
-        height={plot.height * devicePixelRatio}
-        style="width: {plot.width}px; height: {plot.height}px;"></canvas>
-</foreignObject>
-
-<style>
-    foreignObject,
-    canvas {
-        color: currentColor;
-    }
-</style>
+<CanvasLayer {@attach render} />

package/dist/marks/helpers/GeoCanvas.svelte.d.ts

@@ -1,12 +1,10 @@
-import type { PlotState, Mark, DataRecord, BaseMarkProps } from '../../types.js';
+import type { Mark, BaseMarkProps, ScaledDataRecord, UsedScales } from '../../types.js';
 import { type GeoPath } from 'd3-geo';
 type $$ComponentProps = {
     mark: Mark<BaseMarkProps>;
-    plot: PlotState;
-    data: DataRecord[];
-    testFacet: any;
-    usedScales: any;
+    data: ScaledDataRecord[];
     path: GeoPath;
+    usedScales: UsedScales;
 };
 declare const GeoCanvas: import("svelte").Component<$$ComponentProps, {}, "">;
 type GeoCanvas = ReturnType<typeof GeoCanvas>;

package/dist/marks/helpers/events.d.ts

@@ -1,4 +1,17 @@
 import type { BaseMarkProps, DataRecord, PlotState } from '../../types.js';
+declare global {
+    interface MouseEvent {
+        layerX?: number;
+        layerY?: number;
+        dataX?: number | string | Date;
+        dataY?: number | string | Date;
+    }
+}
+/**
+ * Translates client coordinates (clientX, clientY) to the layer coordinates
+ * of the plot frame, regardless of which element triggered the event
+ */
+export declare function clientToLayerCoordinates(event: MouseEvent, plotBody: HTMLElement | null | undefined): [number, number];
 export declare function addEventHandlers(node: SVGElement, { options, datum, getPlotState }: {
     options: BaseMarkProps;
     datum: DataRecord;

package/dist/marks/helpers/events.js

@@ -1,6 +1,27 @@
 import { invert, pick } from 'es-toolkit';
 import { RAW_VALUE } from '../../transforms/recordize.js';
 import { INDEX } from '../../constants.js';
+/**
+ * Translates client coordinates (clientX, clientY) to the layer coordinates
+ * of the plot frame, regardless of which element triggered the event
+ */
+export function clientToLayerCoordinates(event, plotBody) {
+    // If layerX/Y already exist and the target is the plot frame (rect element), 
+    // we can use them directly
+    // if (event.layerX !== undefined && (event.target as SVGElement).tagName === 'rect') {
+    //     return [event.layerX, event.layerY];
+    // }
+    // Otherwise, transform from client coordinates to layer coordinates
+    // by getting the bounds of the plot body element and calculating the offset
+    if (!plotBody)
+        return [0, 0];
+    const plotBodyRect = plotBody.getBoundingClientRect();
+    // Calculate the coordinates relative to the plot body
+    return [
+        event.clientX - plotBodyRect.left,
+        event.clientY - plotBodyRect.top
+    ];
+}
 export function addEventHandlers(node, { options, datum, getPlotState }) {
     const events = pick(options, [
         'onclick',
@@ -18,11 +39,20 @@ export function addEventHandlers(node, { options, datum, getPlotState }) {
         'onmouseleave',
         'onmousemove',
         'onmouseout',
+        'onmouseover',
         'onmouseup',
-        'onwheel',
+        'onpointercancel',
+        'onpointerdown',
+        'onpointerenter',
+        'onpointerleave',
+        'onpointermove',
+        'onpointerout',
+        'onpointerover',
+        'onpointerup',
         'ontouchcancel',
         'ontouchend',
-        'ontouchmove'
+        'ontouchmove',
+        'onwheel',
     ]);
     const listeners = new Map();
     // attach event handlers
@@ -66,7 +96,6 @@ function invertScale(scale, position) {
     if (scale.type === 'band') {
         // invert band scale since scaleBand doesn't have an invert function
         const eachBand = scale.fn.step();
-        console.log({ eachBand, position });
         const index = Math.floor(position / eachBand);
         return scale.fn.domain()[index];
     }

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;
 /**