cx 26.0.1 → 26.0.2

package/build/charts/LineGraph.js

@@ -0,0 +1,253 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { Widget } from "../ui/Widget";
+import { isArray } from "../util/isArray";
+import { parseStyle } from "../util/parseStyle";
+export class LineGraph extends Widget {
+    constructor(config) {
+        super(config);
+    }
+    declareData(...args) {
+        super.declareData(...args, {
+            data: undefined,
+            colorIndex: undefined,
+            colorMap: undefined,
+            class: {
+                structured: true,
+            },
+            className: {
+                structured: true,
+            },
+            lineStyle: {
+                structured: true,
+            },
+            areaStyle: {
+                structured: true,
+            },
+            area: undefined,
+            line: undefined,
+            y0: undefined,
+            name: undefined,
+            active: true,
+            stack: undefined,
+            stacked: undefined,
+            smooth: undefined,
+            smoothingRatio: undefined,
+        });
+    }
+    prepareData(context, instance) {
+        let { data } = instance;
+        if (data.name && !data.colorName)
+            data.colorName = data.name;
+        if (data.smooth && data.smoothingRatio != null) {
+            if (data.smoothingRatio < 0)
+                data.smoothingRatio = 0;
+            if (data.smoothingRatio > 0.4)
+                data.smoothingRatio = 0.4;
+        }
+        super.prepareData(context, instance);
+    }
+    explore(context, instance) {
+        let { 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) {
+            instance.axes = context.axes;
+            instance.xAxis = instance.axes[this.xAxis];
+            instance.yAxis = instance.axes[this.yAxis];
+            super.explore(context, instance);
+            if (isArray(data.data)) {
+                data.data.forEach((p) => {
+                    let x = p[this.xField];
+                    instance.xAxis.acknowledge(x);
+                    if (data.stacked) {
+                        instance.yAxis.stacknowledge(data.stack, x, this.y0Field ? p[this.y0Field] : data.y0);
+                        instance.yAxis.stacknowledge(data.stack, x, p[this.yField]);
+                    }
+                    else {
+                        instance.yAxis.acknowledge(p[this.yField]);
+                        if (data.area) {
+                            if (!this.hiddenBase)
+                                instance.yAxis.acknowledge(this.y0Field ? p[this.y0Field] : data.y0);
+                        }
+                    }
+                });
+            }
+        }
+    }
+    prepare(context, instance) {
+        let { data, colorMap } = instance;
+        if (colorMap && data.colorName) {
+            data.colorIndex = colorMap.map(data.colorName);
+            if (instance.cache("colorIndex", data.colorIndex))
+                instance.markShouldUpdate(context);
+        }
+        if (data.active) {
+            if (instance.axes[this.xAxis].shouldUpdate || instance.axes[this.yAxis].shouldUpdate)
+                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: {
+                    ...parseStyle(data.style),
+                    ...parseStyle(data.areaStyle),
+                    ...parseStyle(data.lineStyle),
+                },
+                shape: this.legendShape,
+                onClick: (e) => {
+                    this.onLegendClick(e, instance);
+                },
+            });
+        }
+        if (data.active) {
+            if (context.pointReducer && isArray(data.data)) {
+                data.data.forEach((p, index) => {
+                    if (data.area && this.y0Field)
+                        context.pointReducer(p[this.xField], p[this.y0Field], data.name, p, data.data, index);
+                    context.pointReducer(p[this.xField], p[this.yField], data.name, p, data.data, index);
+                });
+            }
+        }
+        instance.lineSpans = this.calculateLineSpans(context, instance);
+    }
+    onLegendClick(e, instance) {
+        let allActions = this.legendAction == "auto";
+        let { data } = instance;
+        if (allActions || this.legendAction == "toggle")
+            instance.set("active", !data.active);
+    }
+    calculateLineSpans(context, instance) {
+        let { data, xAxis, yAxis } = instance;
+        let spans = [];
+        let span = [];
+        if (!data.active)
+            return null;
+        isArray(data.data) &&
+            data.data.forEach((p) => {
+                let ax = p[this.xField], ay = p[this.yField], ay0 = this.y0Field ? p[this.y0Field] : data.y0, x, y, y0;
+                if (ax != null && ay != null && ay0 != null) {
+                    x = xAxis.map(ax);
+                    y0 = data.stacked ? yAxis.stack(data.stack, ax, ay0) : yAxis.map(ay0);
+                    y = data.stacked ? yAxis.stack(data.stack, ax, ay) : yAxis.map(ay);
+                }
+                if (x != null && y != null && y0 != null)
+                    span.push({ x, y, y0 });
+                else if (span.length > 0) {
+                    spans.push(span);
+                    span = [];
+                }
+            });
+        if (span.length > 0)
+            spans.push(span);
+        return spans;
+    }
+    render(context, instance, key) {
+        let { data, lineSpans } = instance;
+        if (!lineSpans)
+            return null;
+        let stateMods = {
+            ["color-" + data.colorIndex]: data.colorIndex != null,
+        };
+        let line, area;
+        const r = data.smoothingRatio;
+        let linePath = "";
+        if (data.line) {
+            lineSpans.forEach((span) => {
+                span.forEach((p, i) => {
+                    linePath +=
+                        i == 0
+                            ? `M ${p.x} ${p.y}`
+                            : !data.smooth || span.length < 2
+                                ? `L ${p.x} ${p.y}`
+                                : this.getCurvedPathSegment(p, span, i - 1, i - 2, i - 1, i + 1, r);
+                });
+            });
+            line = (_jsx("path", { className: this.CSS.element(this.baseClass, "line", stateMods), style: this.CSS.parseStyle(data.lineStyle), d: linePath }));
+        }
+        if (data.area) {
+            let areaPath = "";
+            lineSpans.forEach((span) => {
+                let closePath = "";
+                span.forEach((p, i) => {
+                    let segment = "";
+                    if (i == 0) {
+                        segment = `M ${p.x} ${p.y}`;
+                        // closing point
+                        closePath =
+                            !data.smooth || span.length < 2
+                                ? `L ${p.x} ${p.y0}`
+                                : this.getCurvedPathSegment(p, span, i + 1, i + 2, i + 1, i - 1, r, "y0");
+                    }
+                    else {
+                        if (!data.smooth) {
+                            segment = `L ${p.x} ${p.y}`;
+                            closePath = `L ${p.x} ${p.y0}` + closePath;
+                        }
+                        else {
+                            segment = this.getCurvedPathSegment(p, span, i - 1, i - 2, i - 1, i + 1, r, "y");
+                            // closing point
+                            if (i < span.length - 1)
+                                closePath = this.getCurvedPathSegment(p, span, i + 1, i + 2, i + 1, i - 1, r, "y0") + closePath;
+                        }
+                    }
+                    areaPath += segment;
+                });
+                areaPath += `L ${span[span.length - 1].x} ${span[span.length - 1].y0}`;
+                areaPath += closePath;
+                areaPath += "Z";
+            });
+            area = (_jsx("path", { className: this.CSS.element(this.baseClass, "area", stateMods), style: this.CSS.parseStyle(data.areaStyle), d: areaPath }));
+        }
+        return (_jsxs("g", { className: data.classNames, children: [line, area] }, key));
+    }
+    getCurvedPathSegment(p, points, i1, i2, j1, j2, r, yField = "y") {
+        const [sx, sy] = this.getControlPoint({ cp: points[i1], pp: points[i2], r, np: p, yField });
+        const [ex, ey] = this.getControlPoint({ cp: p, pp: points[j1], np: points[j2], r, reverse: true, yField });
+        return `C ${sx} ${sy}, ${ex} ${ey}, ${p.x} ${p[yField]}`;
+    }
+    getControlPoint({ cp, pp, np, r, reverse, yField = "y", }) {
+        // When 'current' is the first or last point of the array 'previous' or 'next' don't exist. Replace with 'current'.
+        const p = pp || cp;
+        const n = np || cp;
+        // Properties of the opposed-line
+        let { angle, length } = this.getLineInfo(p.x, p[yField], n.x, n[yField]);
+        // If it is end-control-point, add PI to the angle to go backward
+        angle = angle + (reverse ? Math.PI : 0);
+        length = length * r;
+        // The control point position is relative to the current point
+        const x = cp.x + Math.cos(angle) * length;
+        const y = cp[yField] + Math.sin(angle) * length;
+        return [x, y];
+    }
+    getLineInfo(p1x, p1y, p2x, p2y) {
+        const lengthX = p2x - p1x;
+        const lengthY = p2y - p1y;
+        return {
+            length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+            angle: Math.atan2(lengthY, lengthX),
+        };
+    }
+}
+LineGraph.prototype.xAxis = "x";
+LineGraph.prototype.yAxis = "y";
+LineGraph.prototype.area = false;
+LineGraph.prototype.line = true;
+LineGraph.prototype.xField = "x";
+LineGraph.prototype.yField = "y";
+LineGraph.prototype.baseClass = "linegraph";
+LineGraph.prototype.y0 = 0;
+LineGraph.prototype.y0Field = false;
+LineGraph.prototype.active = true;
+LineGraph.prototype.legend = "legend";
+LineGraph.prototype.legendAction = "auto";
+LineGraph.prototype.legendShape = "rect";
+LineGraph.prototype.stack = "stack";
+LineGraph.prototype.hiddenBase = false;
+LineGraph.prototype.smooth = false;
+LineGraph.prototype.smoothingRatio = 0.05;
+Widget.alias("line-graph", LineGraph);

package/build/charts/Marker.d.ts

@@ -0,0 +1,133 @@
+/** @jsxImportSource react */
+import { BoundedObject, BoundedObjectConfig, BoundedObjectInstance } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { TooltipParentInstance, TooltipConfig } from "../widgets/overlay/tooltip-ops";
+import { Selection } from "../ui/selection/Selection";
+import { RenderingContext } from "../ui/RenderingContext";
+import { NumberProp, BooleanProp, StringProp, StructuredProp } from "../ui/Prop";
+import { Instance } from "../ui/Instance";
+export interface MarkerConfig extends BoundedObjectConfig {
+    /** The `x` value binding or expression. */
+    x?: NumberProp | StringProp;
+    /** The `y` value binding or expression. */
+    y?: NumberProp;
+    /** Used to indicate if the data should affect axis span. */
+    affectsAxes?: boolean;
+    /** Shape kind. `circle`, `square`, `triangle`, etc. */
+    shape?: StringProp;
+    /** Disabled state. */
+    disabled?: BooleanProp;
+    /** Index of a color from the standard palette of colors. 0-15. */
+    colorIndex?: NumberProp | StringProp;
+    /** 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;
+    /** Color index to use for the legend entry. */
+    legendColorIndex?: NumberProp;
+    /** 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;
+    /** X offset. */
+    xOffset?: number;
+    /** Y offset. */
+    yOffset?: number;
+    /** Size of the shape in pixels. */
+    size?: NumberProp;
+    /**
+     * 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;
+    /** Set to `true` to make the shape draggable along the X axis. */
+    draggableX?: boolean;
+    /** Set to `true` to make the shape draggable along the Y axis. */
+    draggableY?: boolean;
+    /** Set to `true` to make the shape draggable along the X and Y axis. */
+    draggable?: boolean;
+    /** Constrain the marker position to min/max values of the X axis during drag operations. */
+    constrainX?: boolean;
+    /** Constrain the marker 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;
+    /** Name of the legend to be used. Default is `legend`. */
+    legend?: string;
+    /** Action to perform on legend item click. Default is `auto`. */
+    legendAction?: string;
+    /** Tooltip configuration. For more info see Tooltips. */
+    tooltip?: StringProp | StructuredProp;
+    /** Set to true to hide the marker. The marker will still participate in axis range calculations. */
+    hidden?: boolean;
+    /** Indicate that markers should be stacked horizontally. Default value is `false`. */
+    stackedX?: BooleanProp;
+    /** Indicate that markers should be stacked vertically. Default value is `false`. */
+    stackedY?: BooleanProp;
+    /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
+    stack?: StringProp;
+    /**
+     * Applies to rectangular shapes. The horizontal corner radius of the rect. Defaults to ry if ry is specified.
+     * Value type: <length>|<percentage>;
+     * If unit is not specified, it defaults to `px`.
+     */
+    rx?: StringProp | NumberProp;
+    /**
+     * Applies to rectangular shapes. The vertical corner radius of the rect. Defaults to rx if rx is specified.
+     * Value type: <length>|<percentage>;
+     * If unit is not specified, it defaults to `px`.
+     */
+    ry?: StringProp | NumberProp;
+    /** Selection configuration. */
+    selection?: any;
+    /** Click event handler. */
+    onClick?: (e: React.MouseEvent, instance: Instance) => void;
+}
+export interface MarkerInstance extends BoundedObjectInstance, TooltipParentInstance {
+    axes: Record<string, any>;
+    xAxis: any;
+    yAxis: any;
+    colorMap: any;
+}
+export declare class Marker extends BoundedObject {
+    baseClass: string;
+    xAxis: string;
+    yAxis: string;
+    xOffset: number;
+    yOffset: number;
+    size: number;
+    draggableX: boolean;
+    draggableY: boolean;
+    draggable: boolean;
+    constrainX: boolean;
+    constrainY: boolean;
+    constrain: boolean;
+    legend: string;
+    legendAction: string;
+    shape: string;
+    hidden: boolean;
+    affectsAxes: boolean;
+    stackedY: boolean;
+    stackedX: boolean;
+    stack: string;
+    selection: Selection;
+    tooltip: TooltipConfig;
+    onClick: MarkerConfig["onClick"];
+    constructor(config: MarkerConfig);
+    init(): void;
+    declareData(...args: any[]): void;
+    prepareData(context: RenderingContext, instance: MarkerInstance): void;
+    calculateBounds(context: RenderingContext, instance: MarkerInstance): Rect;
+    explore(context: RenderingContext, instance: MarkerInstance): void;
+    prepare(context: RenderingContext, instance: MarkerInstance): void;
+    onLegendClick(e: MouseEvent, instance: MarkerInstance): void;
+    render(context: RenderingContext, instance: MarkerInstance, key: string): React.ReactNode;
+    handleMouseDown(e: React.MouseEvent | React.TouchEvent, instance: MarkerInstance): void;
+    handleClick(e: React.MouseEvent, instance: MarkerInstance): void;
+    handleDragMove(e: MouseEvent | TouchEvent, instance: MarkerInstance, captureData: any): void;
+}

package/build/charts/Marker.js

@@ -0,0 +1,275 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** @jsxImportSource react */
+import { VDOM } from "../ui/Widget";
+import { BoundedObject } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { tooltipMouseMove, tooltipMouseLeave, tooltipParentWillUnmount, tooltipParentWillReceiveProps, tooltipParentDidMount, tooltipParentDidUpdate, } from "../widgets/overlay/tooltip-ops";
+import { captureMouseOrTouch, getCursorPos } from "../widgets/overlay/captureMouse";
+import { closest } from "../util/DOM";
+import { Selection } from "../ui/selection/Selection";
+import { getShape } from "./shapes";
+import { getTopLevelBoundingClientRect } from "../util/getTopLevelBoundingClientRect";
+export class Marker extends BoundedObject {
+    constructor(config) {
+        super(config);
+    }
+    init() {
+        this.selection = Selection.create(this.selection);
+        if (this.draggable) {
+            this.draggableX = true;
+            this.draggableY = true;
+        }
+        if (this.constrain) {
+            this.constrainX = true;
+            this.constrainY = true;
+        }
+        super.init();
+    }
+    declareData(...args) {
+        var selection = this.selection.configureWidget(this);
+        super.declareData(...args, selection, {
+            x: undefined,
+            y: undefined,
+            size: undefined,
+            shape: undefined,
+            disabled: undefined,
+            colorMap: undefined,
+            colorIndex: undefined,
+            colorName: undefined,
+            legendColorIndex: undefined,
+            name: undefined,
+            active: true,
+            stack: undefined,
+            stackedX: undefined,
+            stackedY: undefined,
+            rx: undefined,
+            ry: undefined,
+        });
+    }
+    prepareData(context, instance) {
+        instance.axes = context.axes;
+        instance.xAxis = context.axes[this.xAxis];
+        instance.yAxis = context.axes[this.yAxis];
+        let { data } = instance;
+        data.selected = this.selection.isInstanceSelected(instance);
+        data.stateMods = {
+            selected: data.selected,
+            disabled: data.disabled,
+            selectable: !this.selection.isDummy,
+            "draggable-x": this.draggableX && !this.draggableY,
+            "draggable-y": this.draggableY && !this.draggableX,
+            "draggable-xy": this.draggableY && this.draggableX,
+        };
+        if (data.name && !data.colorName)
+            data.colorName = data.name;
+        super.prepareData(context, instance);
+    }
+    calculateBounds(context, instance) {
+        let { data, xAxis, yAxis } = instance;
+        let x, y;
+        if (data.x == null || data.y == null) {
+            let bounds = super.calculateBounds(context, instance);
+            x = (bounds.l + bounds.r) / 2;
+            y = (bounds.t + bounds.b) / 2;
+        }
+        if (data.x != null)
+            x = data.stackedX ? xAxis.stack(data.stack, data.y, data.x) : xAxis.map(data.x);
+        if (data.y != null)
+            y = data.stackedY ? yAxis.stack(data.stack, data.x, data.y) : yAxis.map(data.y);
+        return new Rect({
+            l: x - data.size / 2,
+            r: x + data.size / 2,
+            t: y - data.size / 2,
+            b: y + data.size / 2,
+        });
+    }
+    explore(context, instance) {
+        let { data, xAxis, yAxis } = instance;
+        instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+        if (instance.colorMap && data.colorName)
+            instance.colorMap.acknowledge(data.colorName);
+        if (data.active) {
+            if (this.affectsAxes) {
+                if (xAxis && data.x != null) {
+                    if (data.stackedX)
+                        xAxis.stacknowledge(data.stack, data.y, data.x);
+                    else
+                        xAxis.acknowledge(data.x, 0, this.xOffset);
+                }
+                if (yAxis && data.y != null) {
+                    if (data.stackedY)
+                        yAxis.stacknowledge(data.stack, data.x, data.y);
+                    else
+                        yAxis.acknowledge(data.y, 0, this.yOffset);
+                }
+            }
+            super.explore(context, instance);
+        }
+    }
+    prepare(context, instance) {
+        let { data, xAxis, yAxis, colorMap } = instance;
+        if (colorMap && data.colorName) {
+            data.colorIndex = colorMap.map(data.colorName);
+            if (instance.cache("colorIndex", data.colorIndex))
+                instance.markShouldUpdate(context);
+        }
+        if (data.active) {
+            if (xAxis && xAxis.shouldUpdate)
+                instance.markShouldUpdate(context);
+            if (yAxis && yAxis.shouldUpdate)
+                instance.markShouldUpdate(context);
+            if (context.pointReducer)
+                context.pointReducer(data.x, data.y, data.name, data);
+        }
+        super.prepare(context, instance);
+        if (data.name && context.addLegendEntry)
+            context.addLegendEntry(this.legend, {
+                name: data.name,
+                active: data.active,
+                colorIndex: data.legendColorIndex || data.colorIndex,
+                disabled: data.disabled,
+                selected: data.selected,
+                style: data.style,
+                shape: data.shape,
+                onClick: (e) => {
+                    this.onLegendClick(e, instance);
+                },
+            });
+    }
+    onLegendClick(e, instance) {
+        let allActions = this.legendAction == "auto";
+        let { data } = instance;
+        if (allActions || this.legendAction == "toggle")
+            if (instance.set("active", !data.active))
+                return;
+        if (allActions || this.legendAction == "select")
+            this.handleClick(e, instance);
+    }
+    render(context, instance, key) {
+        let { data } = instance;
+        if (!data.active || data.x === null || data.y === null)
+            return null;
+        return (_jsx(MarkerComponent, { instance: instance, data: instance.data, shouldUpdate: instance.shouldUpdate, children: this.renderChildren(context, instance) }, key));
+    }
+    handleMouseDown(e, instance) {
+        if (this.draggableX || this.draggableY) {
+            let svgEl = closest(e.target, (el) => el.tagName == "svg");
+            if (svgEl)
+                captureMouseOrTouch(e, (e, captureData) => {
+                    this.handleDragMove(e, instance, captureData);
+                }, undefined, { svgEl, el: e.target }, e.target.style.cursor);
+        }
+        else {
+            if (!this.selection.isDummy)
+                this.selection.selectInstance(instance);
+        }
+    }
+    handleClick(e, instance) {
+        if (this.onClick)
+            instance.invoke("onClick", e, instance);
+    }
+    handleDragMove(e, instance, captureData) {
+        let cursor = getCursorPos(e);
+        let svgBounds = getTopLevelBoundingClientRect(captureData.svgEl);
+        let { xAxis, yAxis } = instance;
+        if (this.draggableX && xAxis) {
+            let x = xAxis.trackValue(cursor.clientX - svgBounds.left, this.xOffset);
+            if (this.constrainX)
+                x = xAxis.constrainValue(x);
+            instance.set("x", xAxis.encodeValue(x));
+        }
+        if (this.draggableY && yAxis) {
+            let y = yAxis.trackValue(cursor.clientY - svgBounds.top, this.yOffset);
+            if (this.constrainY)
+                y = yAxis.constrainValue(y);
+            instance.set("y", yAxis.encodeValue(y));
+        }
+        tooltipMouseMove(e, instance, this.tooltip, { target: captureData.el });
+    }
+}
+Marker.prototype.xOffset = 0;
+Marker.prototype.yOffset = 0;
+Marker.prototype.size = 5;
+Marker.prototype.anchors = "0.5 0.5 0.5 0.5";
+Marker.prototype.xAxis = "x";
+Marker.prototype.yAxis = "y";
+Marker.prototype.baseClass = "marker";
+Marker.prototype.draggableX = false;
+Marker.prototype.draggableY = false;
+Marker.prototype.draggable = false;
+Marker.prototype.constrainX = false;
+Marker.prototype.constrainY = false;
+Marker.prototype.constrain = false;
+Marker.prototype.legend = "legend";
+Marker.prototype.legendAction = "auto";
+Marker.prototype.shape = "circle";
+Marker.prototype.styled = true;
+Marker.prototype.hidden = false;
+Marker.prototype.affectsAxes = true;
+Marker.prototype.stackedY = false;
+Marker.prototype.stackedX = false;
+Marker.prototype.stack = "stack";
+BoundedObject.alias("marker", Marker);
+class MarkerComponent extends VDOM.Component {
+    shouldComponentUpdate(props) {
+        return props.shouldUpdate ?? true;
+    }
+    render() {
+        let { instance, children, data } = this.props;
+        let widget = instance.widget;
+        let { CSS, baseClass } = widget;
+        let { bounds, shape } = data;
+        let shapeRenderer = getShape(shape);
+        let shapeProps = {
+            className: CSS.element(baseClass, "shape", {
+                ["color-" + data.colorIndex]: data.colorIndex != null,
+                selected: data.selected,
+            }),
+            style: data.style,
+            cx: (bounds.l + bounds.r) / 2,
+            cy: (bounds.t + bounds.b) / 2,
+            r: data.size / 2,
+            onMouseMove: (e) => {
+                tooltipMouseMove(e, instance, widget.tooltip);
+            },
+            onMouseLeave: (e) => {
+                tooltipMouseLeave(e, instance, widget.tooltip);
+            },
+            onMouseDown: (e) => {
+                widget.handleMouseDown(e, instance);
+            },
+            onTouchStart: (e) => {
+                widget.handleMouseDown(e, instance);
+            },
+            onClick: (e) => {
+                widget.handleClick(e, instance);
+            },
+        };
+        if (shape == "rect" || shape == "square" || shape == "bar" || shape == "column") {
+            shapeProps.rx = data.rx;
+            shapeProps.ry = data.ry;
+        }
+        if (widget.tooltip) {
+            shapeProps.ref = (c) => {
+                this.el = c;
+            };
+        }
+        return (_jsxs("g", { className: data.classNames, children: [!widget.hidden &&
+                    shapeRenderer((bounds.l + bounds.r) / 2, (bounds.t + bounds.b) / 2, data.size, shapeProps), children] }));
+    }
+    componentWillUnmount() {
+        tooltipParentWillUnmount(this.props.instance);
+    }
+    UNSAFE_componentWillReceiveProps(props) {
+        let widget = props.instance.widget;
+        tooltipParentWillReceiveProps(this.el, props.instance, widget.tooltip);
+    }
+    componentDidMount() {
+        let widget = this.props.instance.widget;
+        tooltipParentDidMount(this.el, this.props.instance, widget.tooltip);
+    }
+    componentDidUpdate() {
+        let widget = this.props.instance.widget;
+        tooltipParentDidUpdate(this.el, this.props.instance, widget.tooltip);
+    }
+}