cx 26.0.1 → 26.0.2

package/build/charts/Range.d.ts

@@ -0,0 +1,94 @@
+/** @jsxImportSource react */
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { RenderingContext } from "../ui/RenderingContext";
+import { Rect } from "../svg/util/Rect";
+import { NumberProp, BooleanProp, StringProp } from "../ui/Prop";
+import { Instance } from "../ui/Instance";
+export interface RangeConfig extends BoundedObjectConfig {
+    /** The `x1` value binding or expression. */
+    x1?: NumberProp;
+    /** The `y1` value binding or expression. */
+    y1?: NumberProp;
+    /** The `x2` value binding or expression. */
+    x2?: NumberProp;
+    /** The `y2` value binding or expression. */
+    y2?: NumberProp;
+    /** Index of a color from the standard palette of colors. 0-15. */
+    colorIndex?: NumberProp;
+    /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+    active?: BooleanProp;
+    /** Name of the item as it will appear in the legend. */
+    name?: StringProp;
+    /** Name of the legend to be used. Default is `legend`. */
+    legend?: StringProp;
+    /** Set to `true` to hide the range rectangle. */
+    invisible?: boolean;
+    /**
+     * Name of the horizontal axis. The value should match one of the horizontal axes set
+     * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
+     */
+    xAxis?: string;
+    /**
+     * Name of the vertical axis. The value should match one of the vertical axes set
+     * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
+     */
+    yAxis?: string;
+    /** X size. */
+    xSize?: number;
+    /** Y size. */
+    ySize?: number;
+    /** X offset. */
+    xOffset?: number;
+    /** Y offset. */
+    yOffset?: number;
+    /** Set to `true` to make the range draggable along the X axis. */
+    draggableX?: boolean;
+    /** Set to `true` to make the range draggable along the Y axis. */
+    draggableY?: boolean;
+    /** Set to `true` to make the range draggable along the X and Y axis. */
+    draggable?: boolean;
+    /** Constrain the range position to min/max values of the X axis during drag operations. */
+    constrainX?: boolean;
+    /** Constrain the range position to min/max values of the Y axis during drag operations. */
+    constrainY?: boolean;
+    /** When set to `true`, it is equivalent to setting `constrainX` and `constrainY` to true. */
+    constrain?: boolean;
+    /** Action to perform on legend item click. Default is `auto`. */
+    legendAction?: string;
+    /** Set to `true` to hide the range. */
+    hidden?: boolean;
+    /** Click event handler. */
+    onClick?: (e: React.MouseEvent, instance: Instance) => void;
+}
+export interface RangeInstance extends BoundedObjectInstance {
+    xAxis: any;
+    yAxis: any;
+}
+export declare class Range extends BoundedObject {
+    baseClass: string;
+    xAxis: string;
+    yAxis: string;
+    xSize: number;
+    ySize: number;
+    xOffset: number;
+    yOffset: number;
+    legend: string;
+    legendAction: string;
+    invisible: boolean;
+    hidden: boolean;
+    draggableX: boolean;
+    draggableY: boolean;
+    constrainX: boolean;
+    constrainY: boolean;
+    onClick: RangeConfig["onClick"];
+    constructor(config: RangeConfig);
+    declareData(...args: any[]): void;
+    explore(context: RenderingContext, instance: RangeInstance): void;
+    prepare(context: RenderingContext, instance: RangeInstance): void;
+    onLegendClick(e: MouseEvent, instance: RangeInstance): void;
+    calculateBounds(context: RenderingContext, instance: RangeInstance): Rect;
+    render(context: RenderingContext, instance: RangeInstance, key: string): React.ReactNode;
+    handleClick(e: React.MouseEvent, instance: RangeInstance): void;
+    handleMouseDown(e: React.MouseEvent | React.TouchEvent, instance: RangeInstance): void;
+    handleDragMove(e: MouseEvent | TouchEvent, instance: RangeInstance, captureData: any): void;
+}

package/build/charts/Range.js

@@ -0,0 +1,160 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { BoundedObject } from "../svg/BoundedObject";
+import { captureMouseOrTouch, getCursorPos } from "../widgets/overlay/captureMouse";
+import { closest } from "../util/DOM";
+import { getTopLevelBoundingClientRect } from "../util/getTopLevelBoundingClientRect";
+export class Range extends BoundedObject {
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        super.declareData(...args, {
+            x1: undefined,
+            y1: undefined,
+            x2: undefined,
+            y2: undefined,
+            colorIndex: undefined,
+            active: true,
+            name: undefined,
+            legend: undefined,
+        });
+    }
+    explore(context, instance) {
+        var { data } = instance;
+        var xAxis = (instance.xAxis = context.axes[this.xAxis]);
+        var yAxis = (instance.yAxis = context.axes[this.yAxis]);
+        if (data.active) {
+            if (xAxis) {
+                if (data.x1 != null)
+                    instance.xAxis.acknowledge(data.x1, this.xSize, this.xOffset);
+                if (data.x2 != null)
+                    instance.xAxis.acknowledge(data.x2, this.xSize, this.xOffset);
+            }
+            if (yAxis) {
+                if (data.y1 != null)
+                    instance.yAxis.acknowledge(data.y1, this.ySize, this.yOffset);
+                if (data.y2 != null)
+                    instance.yAxis.acknowledge(data.y2, this.ySize, this.yOffset);
+            }
+            super.explore(context, instance);
+        }
+    }
+    prepare(context, instance) {
+        super.prepare(context, instance);
+        var { data, xAxis, yAxis } = instance;
+        if (xAxis && xAxis.shouldUpdate)
+            instance.markShouldUpdate(context);
+        if (yAxis && yAxis.shouldUpdate)
+            instance.markShouldUpdate(context);
+        if (data.name && data.legend && context.addLegendEntry)
+            context.addLegendEntry(data.legend, {
+                name: data.name,
+                active: data.active,
+                colorIndex: data.colorIndex,
+                style: data.style,
+                shape: "rect",
+                onClick: (e) => {
+                    this.onLegendClick(e, instance);
+                },
+            });
+    }
+    onLegendClick(e, instance) {
+        var allActions = this.legendAction == "auto";
+        var { data } = instance;
+        if (allActions || this.legendAction == "toggle")
+            instance.set("active", !data.active);
+    }
+    calculateBounds(context, instance) {
+        var bounds = super.calculateBounds(context, instance);
+        var { data, xAxis, yAxis } = instance;
+        if (data.x1 != null)
+            bounds.l = xAxis.map(data.x1, this.xOffset - this.xSize / 2);
+        if (data.x2 != null)
+            bounds.r = xAxis.map(data.x2, this.xOffset + this.xSize / 2);
+        if (data.y1 != null)
+            bounds.t = yAxis.map(data.y1, this.yOffset - this.ySize / 2);
+        if (data.y2 != null)
+            bounds.b = yAxis.map(data.y2, this.yOffset + this.ySize / 2);
+        return bounds;
+    }
+    render(context, instance, key) {
+        var { data } = instance;
+        if (!data.active)
+            return null;
+        var { bounds } = data;
+        var x1 = Math.min(bounds.l, bounds.r), y1 = Math.min(bounds.t, bounds.b), x2 = Math.max(bounds.l, bounds.r), y2 = Math.max(bounds.t, bounds.b);
+        var stateMods = {
+            ["color-" + data.colorIndex]: data.colorIndex != null,
+        };
+        return (_jsxs("g", { className: data.classNames, children: [!this.hidden && (_jsx("rect", { className: this.CSS.element(this.baseClass, "rect", stateMods), style: data.style, x: x1, y: y1, width: x2 - x1, height: y2 - y1, onMouseDown: (e) => this.handleMouseDown(e, instance), onTouchStart: (e) => this.handleMouseDown(e, instance) })), this.renderChildren(context, instance)] }, key));
+    }
+    handleClick(e, instance) {
+        if (this.onClick)
+            instance.invoke("onClick", e, instance);
+    }
+    handleMouseDown(e, instance) {
+        if (this.draggableX || this.draggableY) {
+            var svgEl = closest(e.target, (el) => el.tagName == "svg");
+            var svgBounds = getTopLevelBoundingClientRect(svgEl);
+            var cursor = getCursorPos(e);
+            var { data, xAxis, yAxis } = instance;
+            var captureData = {
+                svgBounds,
+                start: {
+                    x1: data.x1,
+                    x2: data.x2,
+                    y1: data.y1,
+                    y2: data.y2,
+                },
+            };
+            if (this.draggableX && xAxis)
+                captureData.start.x = xAxis.trackValue(cursor.clientX - svgBounds.left, this.xOffset, this.constrainX);
+            if (this.draggableY && yAxis)
+                captureData.start.y = yAxis.trackValue(cursor.clientY - svgBounds.top, this.yOffset, this.constrainY);
+            if (svgEl)
+                captureMouseOrTouch(e, (e, captureData) => {
+                    this.handleDragMove(e, instance, captureData);
+                }, undefined, captureData, e.target.style.cursor);
+        }
+    }
+    handleDragMove(e, instance, captureData) {
+        var cursor = getCursorPos(e);
+        var { xAxis, yAxis } = instance;
+        var { svgBounds, start } = captureData;
+        if (this.draggableX && xAxis) {
+            var dist = xAxis.trackValue(cursor.clientX - svgBounds.left, this.xOffset, this.constrainX) - captureData.start.x;
+            var x1v = xAxis.decodeValue(captureData.start.x1);
+            var x2v = xAxis.decodeValue(captureData.start.x2);
+            if (this.constrainX) {
+                if (dist > 0)
+                    dist = Math.min(xAxis.constrainValue(x2v + dist) - x2v, dist);
+                else
+                    dist = Math.max(xAxis.constrainValue(x1v + dist) - x1v, dist);
+            }
+            instance.set("x1", xAxis.encodeValue(x1v + dist));
+            instance.set("x2", xAxis.encodeValue(x2v + dist));
+        }
+        if (this.draggableY && yAxis) {
+            var dist = yAxis.trackValue(cursor.clientY - svgBounds.left, this.yOffset, this.constrainY) - captureData.start.y;
+            var y1v = yAxis.decodeValue(captureData.start.y1);
+            var y2v = yAxis.decodeValue(captureData.start.y2);
+            if (this.constrainY)
+                dist = Math.max(yAxis.constrainValue(y1v + dist) - y1v, Math.min(yAxis.constrainValue(y2v + dist) - y2v, dist));
+            instance.set("y1", yAxis.encodeValue(y1v + dist));
+            instance.set("y2", yAxis.encodeValue(y2v + dist));
+        }
+    }
+}
+Range.prototype.invisible = false;
+Range.prototype.xAxis = "x";
+Range.prototype.yAxis = "y";
+Range.prototype.xSize = 0;
+Range.prototype.ySize = 0;
+Range.prototype.xOffset = 0;
+Range.prototype.yOffset = 0;
+Range.prototype.anchors = "0 1 1 0";
+Range.prototype.baseClass = "range";
+Range.prototype.legend = "legend";
+Range.prototype.legendAction = "auto";
+BoundedObject.alias("range", Range);

package/build/charts/RangeMarker.d.ts

@@ -0,0 +1,65 @@
+/** @jsxImportSource react */
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp, StringProp, StyleProp } from "../ui/Prop";
+export interface RangeMarkerConfig extends BoundedObjectConfig {
+    /** The `x` value binding or expression. */
+    x?: NumberProp;
+    /** The `y` value binding or expression. */
+    y?: NumberProp;
+    /** The shape of marker, Could be `min`, `max`, `line`. Default to `line`. */
+    shape?: StringProp;
+    /** Switch to vertical mode. */
+    vertical?: BooleanProp;
+    /** Size of the range marker. */
+    size?: NumberProp;
+    /** The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
+    laneOffset?: NumberProp;
+    /** Style object applied to the range marker. */
+    lineStyle?: StyleProp;
+    /** Class object applied to the range marker. */
+    lineClass?: StringProp;
+    /** Size of vertical or horizontal caps. */
+    capSize?: NumberProp;
+    /** Inflate the range marker. */
+    inflate?: NumberProp;
+    /** Set to `true` to allow the range marker to affect axis bounds. */
+    affectsAxes?: boolean;
+    /**
+     * Name of the horizontal axis. The value should match one of the horizontal axes set
+     * in the `axes` configuration of the parent `Chart` component. Default value is `x`.
+     */
+    xAxis?: string;
+    /**
+     * Name of the vertical axis. The value should match one of the vertical axes set
+     * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
+     */
+    yAxis?: string;
+}
+export interface RangeMarkerInstance extends BoundedObjectInstance {
+    axes: Record<string, any>;
+    xAxis: any;
+    yAxis: any;
+}
+export declare class RangeMarker extends BoundedObject {
+    baseClass: string;
+    xAxis: string;
+    yAxis: string;
+    shape: string;
+    vertical: boolean;
+    size: number;
+    laneOffset: number;
+    capSize: number;
+    inflate: number;
+    affectsAxes: boolean;
+    lineStyle: any;
+    constructor(config: RangeMarkerConfig);
+    declareData(...args: any[]): void;
+    init(): void;
+    prepareData(context: RenderingContext, instance: RangeMarkerInstance): void;
+    explore(context: RenderingContext, instance: RangeMarkerInstance): void;
+    calculateBounds(context: RenderingContext, instance: RangeMarkerInstance): Rect;
+    prepare(context: RenderingContext, instance: RangeMarkerInstance): void;
+    render(context: RenderingContext, instance: RangeMarkerInstance, key: string): React.ReactNode;
+}

package/build/charts/RangeMarker.js

@@ -0,0 +1,143 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { BoundedObject } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { Widget } from "../ui/Widget";
+import { parseStyle } from "../util/parseStyle";
+export class RangeMarker extends BoundedObject {
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        super.declareData(...args, {
+            x: undefined,
+            y: undefined,
+            shape: undefined,
+            vertical: undefined,
+            size: undefined,
+            laneOffset: undefined,
+            lineStyle: { structured: true },
+            lineClass: { structured: true },
+            capSize: undefined,
+            inflate: undefined,
+        });
+    }
+    init() {
+        this.lineStyle = parseStyle(this.lineStyle);
+        super.init();
+    }
+    prepareData(context, instance) {
+        instance.axes = context.axes;
+        instance.xAxis = context.axes[this.xAxis];
+        instance.yAxis = context.axes[this.yAxis];
+        super.prepareData(context, instance);
+    }
+    explore(context, instance) {
+        let { data, xAxis, yAxis } = instance;
+        if (this.affectsAxes) {
+            if (xAxis && data.x != null)
+                xAxis.acknowledge(data.x, 0, 0);
+            if (yAxis && data.y != null)
+                yAxis.acknowledge(data.y, 0, 0);
+        }
+        super.explore(context, instance);
+    }
+    calculateBounds(context, instance) {
+        let { data, xAxis, yAxis } = instance;
+        let l, r, t, b;
+        if (data.x == null || data.y == null) {
+            return super.calculateBounds(context, instance);
+        }
+        if (!this.vertical) {
+            l = xAxis.map(data.x, data.laneOffset - data.size / 2) - data.inflate;
+            r = xAxis.map(data.x, data.laneOffset + data.size / 2) + data.inflate;
+            t = b = yAxis.map(data.y);
+            if (data.shape == "max") {
+                b += data.capSize;
+            }
+            else if (data.shape == "min") {
+                t -= data.capSize;
+            }
+        }
+        else {
+            l = r = xAxis.map(data.x);
+            t = yAxis.map(data.y, data.laneOffset - data.size / 2) + data.inflate;
+            b = yAxis.map(data.y, data.laneOffset + data.size / 2) - data.inflate;
+            if (data.shape == "max") {
+                l -= data.capSize;
+            }
+            else if (data.shape == "min") {
+                r += data.capSize;
+            }
+        }
+        return new Rect({
+            l,
+            r,
+            t,
+            b,
+        });
+    }
+    prepare(context, instance) {
+        super.prepare(context, instance);
+    }
+    render(context, instance, key) {
+        var { data } = instance;
+        let { CSS, baseClass } = this;
+        let { bounds, shape } = data;
+        let path = "";
+        if (this.vertical) {
+            switch (shape) {
+                default:
+                case "line":
+                    path += `M ${bounds.r} ${bounds.t} `;
+                    path += `L ${bounds.r} ${bounds.b}`;
+                    break;
+                case "max":
+                    path += `M ${bounds.l} ${bounds.t} `;
+                    path += `L ${bounds.r} ${bounds.t}`;
+                    path += `L ${bounds.r} ${bounds.b}`;
+                    path += `L ${bounds.l} ${bounds.b}`;
+                    break;
+                case "min":
+                    path += `M ${bounds.r} ${bounds.t} `;
+                    path += `L ${bounds.l} ${bounds.t}`;
+                    path += `L ${bounds.l} ${bounds.b}`;
+                    path += `L ${bounds.r} ${bounds.b}`;
+                    break;
+            }
+        }
+        else {
+            switch (shape) {
+                default:
+                case "line":
+                    path += `M ${bounds.r} ${bounds.t} `;
+                    path += `L ${bounds.l} ${bounds.t}`;
+                    break;
+                case "max":
+                    path += `M ${bounds.l} ${bounds.b} `;
+                    path += `L ${bounds.l} ${bounds.t}`;
+                    path += `L ${bounds.r} ${bounds.t}`;
+                    path += `L ${bounds.r} ${bounds.b}`;
+                    break;
+                case "min":
+                    path += `M ${bounds.l} ${bounds.t} `;
+                    path += `L ${bounds.l} ${bounds.b}`;
+                    path += `L ${bounds.r} ${bounds.b}`;
+                    path += `L ${bounds.r} ${bounds.t}`;
+                    break;
+            }
+        }
+        return (_jsxs("g", { className: data.classNames, style: data.style, children: [_jsx("path", { d: path, className: CSS.expand(CSS.element(baseClass, "path"), data.lineClass), style: data.lineStyle }), this.renderChildren(context, instance)] }, key));
+    }
+}
+RangeMarker.prototype.baseClass = "rangemarker";
+RangeMarker.prototype.xAxis = "x";
+RangeMarker.prototype.yAxis = "y";
+RangeMarker.prototype.shape = "line";
+RangeMarker.prototype.vertical = false;
+RangeMarker.prototype.size = 1;
+RangeMarker.prototype.laneOffset = 0;
+RangeMarker.prototype.capSize = 5;
+RangeMarker.prototype.inflate = 0;
+RangeMarker.prototype.affectsAxes = true;
+Widget.alias("range-marker", RangeMarker);

package/build/charts/ScatterGraph.d.ts

@@ -0,0 +1,72 @@
+/** @jsxImportSource react */
+import { Widget, WidgetConfig } from "../ui/Widget";
+import { Selection } from "../ui/selection/Selection";
+import { Instance } from "../ui/Instance";
+import { RenderingContext } from "../ui/RenderingContext";
+import { BooleanProp, NumberProp, StringProp, RecordsProp } from "../ui/Prop";
+import type { ChartRenderingContext } from "./Chart";
+export interface ScatterGraphConfig extends WidgetConfig {
+    /** Data for the graph. Each entry should be an object with at least two properties
+     * whose names should match the `xField` and `yField` values.
+     */
+    data?: RecordsProp;
+    /** Size of the scatter points. */
+    size?: NumberProp;
+    /** Shape of the scatter points. Default is `circle`. */
+    shape?: StringProp;
+    /** Index of a color from the standard palette of colors. 0-15. */
+    colorIndex?: NumberProp;
+    /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
+    colorMap?: StringProp;
+    /** Name used to resolve the color. If not provided, `name` is used instead. */
+    colorName?: StringProp;
+    /** Name of the item as it will appear in the legend. */
+    name?: StringProp;
+    /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+    active?: BooleanProp;
+    /** Name of the horizontal axis. Default value is `x`. */
+    xAxis?: string;
+    /** Name of the vertical axis. Default value is `y`. */
+    yAxis?: string;
+    /** Name of the property which holds the x value. Default value is `x`. */
+    xField?: string;
+    /** Name of the property which holds the y value. Default value is `y`. */
+    yField?: string;
+    /** Name of the property which holds the size value. */
+    sizeField?: string | false;
+    /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+    legend?: string | false;
+    /** Action to perform on legend item click. Default is `auto`. */
+    legendAction?: string;
+    /** Selection configuration. */
+    selection?: any;
+}
+export interface ScatterGraphInstance extends Instance {
+    xAxis: any;
+    yAxis: any;
+    colorMap: any;
+}
+export declare class ScatterGraph extends Widget {
+    baseClass: string;
+    xAxis: string;
+    yAxis: string;
+    xField: string;
+    yField: string;
+    sizeField: string | false;
+    size: number;
+    shape: string;
+    legend: string | false;
+    legendAction: string;
+    selection: Selection;
+    data: any;
+    constructor(config: ScatterGraphConfig);
+    init(): void;
+    declareData(...args: any[]): void;
+    prepareData(context: RenderingContext, instance: ScatterGraphInstance): void;
+    explore(context: ChartRenderingContext, instance: ScatterGraphInstance): void;
+    prepare(context: ChartRenderingContext, instance: ScatterGraphInstance): void;
+    onLegendClick(e: MouseEvent, instance: ScatterGraphInstance): void;
+    render(context: RenderingContext, instance: ScatterGraphInstance, key: string): React.ReactNode;
+    renderData(context: RenderingContext, instance: ScatterGraphInstance): React.ReactNode;
+    handleItemClick(e: React.MouseEvent, { data, store }: ScatterGraphInstance, index: number): void;
+}

package/build/charts/ScatterGraph.js

@@ -0,0 +1,133 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget } from "../ui/Widget";
+import { Selection } from "../ui/selection/Selection";
+import { CSS } from "../ui/CSS";
+import { getShape } from "./shapes";
+import { isArray } from "../util/isArray";
+export class ScatterGraph extends Widget {
+    constructor(config) {
+        super(config);
+    }
+    init() {
+        this.selection = Selection.create(this.selection, {
+            records: this.data,
+        });
+        super.init();
+    }
+    declareData(...args) {
+        var selection = this.selection.configureWidget(this);
+        super.declareData(...args, {
+            data: undefined,
+            size: undefined,
+            shape: undefined,
+            colorIndex: undefined,
+            colorMap: undefined,
+            colorName: undefined,
+            name: undefined,
+            active: true,
+        }, selection);
+    }
+    prepareData(context, instance) {
+        let { data } = instance;
+        if (data.name && !data.colorName)
+            data.colorName = data.name;
+        super.prepareData(context, instance);
+    }
+    explore(context, instance) {
+        super.explore(context, instance);
+        var xAxis = (instance.xAxis = context.axes[this.xAxis]);
+        var yAxis = (instance.yAxis = context.axes[this.yAxis]);
+        var { data } = instance;
+        instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+        if (instance.colorMap && data.colorName)
+            instance.colorMap.acknowledge(data.colorName);
+        if (data.active && isArray(data.data)) {
+            data.data.forEach((p) => {
+                xAxis.acknowledge(p[this.xField]);
+                yAxis.acknowledge(p[this.yField]);
+            });
+        }
+    }
+    prepare(context, instance) {
+        var { data, xAxis, yAxis, colorMap } = instance;
+        if (xAxis.shouldUpdate || yAxis.shouldUpdate)
+            instance.markShouldUpdate(context);
+        if (colorMap && data.name) {
+            data.colorIndex = colorMap.map(data.colorName);
+            if (instance.cache("colorIndex", data.colorIndex))
+                instance.markShouldUpdate(context);
+        }
+        if (data.name && context.addLegendEntry)
+            context.addLegendEntry(this.legend, {
+                name: data.name,
+                active: data.active,
+                colorIndex: data.colorIndex,
+                disabled: data.disabled,
+                style: data.style,
+                shape: data.shape,
+                onClick: (e) => {
+                    this.onLegendClick(e, instance);
+                },
+            });
+        if (data.active) {
+            if (context.pointReducer && isArray(data.data)) {
+                data.data.forEach((p, index) => {
+                    context.pointReducer(p[this.xField], p[this.yField], data.name, p, data.data, index);
+                });
+            }
+        }
+    }
+    onLegendClick(e, instance) {
+        var allActions = this.legendAction == "auto";
+        var { data } = instance;
+        if (allActions || this.legendAction == "toggle")
+            instance.set("active", !data.active);
+    }
+    render(context, instance, key) {
+        var { data } = instance;
+        return (_jsx("g", { className: data.classNames, children: this.renderData(context, instance) }, key));
+    }
+    renderData(context, instance) {
+        var { data, xAxis, yAxis, store } = instance;
+        if (!data.active)
+            return null;
+        var shape = getShape(data.shape);
+        var isSelected = this.selection.getIsSelectedDelegate(store);
+        return (isArray(data.data) &&
+            data.data.map((p, i) => {
+                var classes = CSS.element(this.baseClass, "shape", {
+                    selected: isSelected(p, i),
+                    selectable: !this.selection.isDummy,
+                    [`color-${data.colorIndex}`]: data.colorIndex != null,
+                });
+                var cx = xAxis.map(p[this.xField]), cy = yAxis.map(p[this.yField]), size = this.sizeField ? p[this.sizeField] : data.size;
+                return shape(cx, cy, size, {
+                    key: i,
+                    className: classes,
+                    style: p.style || data.style,
+                    onClick: (e) => {
+                        this.handleItemClick(e, instance, i);
+                    },
+                });
+            }));
+    }
+    handleItemClick(e, { data, store }, index) {
+        var bubble = data.data[index];
+        this.selection.select(store, bubble, index, {
+            toggle: e.ctrlKey,
+        });
+    }
+}
+ScatterGraph.prototype.baseClass = "scattergraph";
+ScatterGraph.prototype.xAxis = "x";
+ScatterGraph.prototype.yAxis = "y";
+ScatterGraph.prototype.xField = "x";
+ScatterGraph.prototype.yField = "y";
+ScatterGraph.prototype.sizeField = false;
+ScatterGraph.prototype.shape = "circle";
+ScatterGraph.prototype.size = 10;
+ScatterGraph.prototype.legend = "legend";
+ScatterGraph.prototype.legendAction = "auto";
+ScatterGraph.prototype.styled = true;
+Widget.alias("scatter-graph", ScatterGraph);