cx 25.10.1 → 26.0.1

package/src/charts/Marker.js

@@ -1,311 +0,0 @@
-import { Widget, 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 {
-   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() {
-      var selection = this.selection.configureWidget(this);
-
-      return super.declareData(...arguments, 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 (
-         <MarkerComponent key={key} instance={instance} data={instance.data} shouldUpdate={instance.shouldUpdate}>
-            {this.renderChildren(context, instance)}
-         </MarkerComponent>
-      );
-   }
-
-   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);
-               },
-               null,
-               { 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;
-   }
-
-   render() {
-      let { instance, children, data } = this.props;
-      let { widget } = instance;
-      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 (
-         <g className={data.classNames}>
-            {!widget.hidden &&
-               shapeRenderer((bounds.l + bounds.r) / 2, (bounds.t + bounds.b) / 2, data.size, shapeProps)}
-            {children}
-         </g>
-      );
-   }
-
-   componentWillUnmount() {
-      tooltipParentWillUnmount(this.props.instance);
-   }
-   UNSAFE_componentWillReceiveProps(props) {
-      tooltipParentWillReceiveProps(this.el, props.instance, props.instance.widget.tooltip);
-   }
-   componentDidMount() {
-      tooltipParentDidMount(this.el, this.props.instance, this.props.instance.widget.tooltip);
-   }
-
-   componentDidUpdate() {
-      tooltipParentDidUpdate(this.el, this.props.instance, this.props.instance.widget.tooltip);
-   }
-}

package/src/charts/MarkerLine.d.ts

@@ -1,56 +0,0 @@
-import * as Cx from "../core";
-import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
-
-interface MarkerLineProps extends BoundedObjectProps {
-   /** The `x1` value binding or expression. */
-   x1?: Cx.Prop<number | string | Date>;
-
-   /** The `y1` value binding or expression. */
-   y1?: Cx.NumberProp;
-
-   /** The `x2` value binding or expression. */
-   x2?: Cx.Prop<number | string | Date>;
-
-   /** The `y2` value binding or expression. */
-   y2?: Cx.NumberProp;
-
-   /** Used to indicate if the data should affect axis span. */
-   affectsAxes?: Cx.BooleanProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp;
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: Cx.StringProp;
-
-   /** Shared `x1` and `x2` value binding or expression. */
-   x?: Cx.Prop<number | string | Date>;
-
-   /** Shared `y1` and `y2` value binding or expression. */
-   y?: Cx.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;
-
-   /** Base CSS class to be applied to the element. Defaults to `markerline`. */
-   baseClass?: string;
-
-   legendAction?: string;
-}
-
-export class MarkerLine extends Cx.Widget<MarkerLineProps> {}

package/src/charts/MarkerLine.js

@@ -1,128 +0,0 @@
-import {BoundedObject} from '../svg/BoundedObject';
-import {VDOM} from '../ui/Widget';
-import {isDefined} from '../util/isDefined';
-import {Rect} from '../svg/util/Rect';
-
-export class MarkerLine extends BoundedObject {
-
-   init() {
-      if (isDefined(this.x))
-         this.x1 = this.x2 = this.x;
-         
-      if (isDefined(this.y))
-         this.y1 = this.y2 = this.y;
-
-      super.init()
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         x1: undefined,
-         y1: undefined,
-         x2: undefined,
-         y2: undefined,
-         colorIndex: undefined,
-         active: true,
-         name: undefined,
-         legend: undefined
-      })
-   }
-
-   explore(context, instance) {
-      let { data } = instance;
-
-      let xAxis = (instance.xAxis = context.axes[this.xAxis]);
-      let yAxis = (instance.yAxis = context.axes[this.yAxis]);
-
-      if (data.active) {
-         if (this.affectsAxes) {
-            if (data.x1 != null) xAxis.acknowledge(data.x1);
-
-            if (data.x2 != null) xAxis.acknowledge(data.x2);
-
-            if (data.y1 != null) yAxis.acknowledge(data.y1);
-
-            if (data.y2 != null) yAxis.acknowledge(data.y2);
-         }
-
-         super.explore(context, instance);
-      }
-   }
-
-   prepare(context, instance) {
-      let {data, xAxis, yAxis} = instance;
-
-      if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate))
-         instance.markShouldUpdate(context);
-
-      super.prepare(context, instance);
-
-      if (data.name && data.legend && context.addLegendEntry)
-         context.addLegendEntry(data.legend, {
-            name: data.name,
-            active: data.active,
-            colorIndex: data.colorIndex,
-            style: data.style,
-            shape: 'line',
-            onClick: e=> { this.onLegendClick(e, instance) }
-         });
-   }
-
-   calculateBounds(context, instance) {
-      let {data, xAxis, yAxis} = instance;
-      let bounds = super.calculateBounds(context, instance);
-
-      let x1 = bounds.l, x2 = bounds.r, y1 = bounds.t, y2 = bounds.b;
-
-      if (data.x1 != null)
-         x1 = xAxis.map(data.x1);
-
-      if (data.x2 != null)
-         x2 = xAxis.map(data.x2);
-
-      if (data.y1 != null)
-         y1 = yAxis.map(data.y1);
-
-      if (data.y2 != null)
-         y2 = yAxis.map(data.y2);
-
-      bounds.l = Math.min(x1, x2);
-      bounds.t = Math.min(y1, y2);
-      bounds.r = Math.max(x1, x2);
-      bounds.b = Math.max(y1, y2);
-
-      instance.x1 = x1;
-      instance.x2 = x2;
-      instance.y1 = y1;
-      instance.y2 = y2;
-
-      return bounds;
-   }
-
-   render(context, instance, key) {
-      let {data, x1, x2, y1, y2} = instance;
-
-      if (!data.active || data.x1 === null || data.x2 === null || data.y1 === null || data.y2 === null)
-         return null;
-
-      let stateMods = {
-         ['color-' + data.colorIndex]: data.colorIndex != null
-      };
-
-      return <g key={key} className={data.classNames}>
-         <line className={this.CSS.element(this.baseClass, 'line', stateMods)} style={data.style} x1={x1} y1={y1} x2={x2} y2={y2} />
-         {this.renderChildren(context, instance)}
-      </g>
-   }
-}
-
-MarkerLine.prototype.xAxis = 'x';
-MarkerLine.prototype.yAxis = 'y';
-MarkerLine.prototype.anchors = '0 1 1 0';
-MarkerLine.prototype.baseClass = 'markerline';
-MarkerLine.prototype.legend = 'legend';
-MarkerLine.prototype.legendAction = 'auto';
-MarkerLine.prototype.affectsAxes = true;
-
-BoundedObject.alias('marker-line', MarkerLine);
-

package/src/charts/MouseTracker.d.ts

@@ -1,17 +0,0 @@
-import * as Cx from '../core';
-import { BoundedObjectProps } from '../svg/BoundedObject';
-
-interface MouseTrackerProps extends BoundedObjectProps {
-   
-   /** The binding that is used to store the mouse x coordinate. */
-   x?: Cx.NumberProp,
-
-   /** The binding that is used to store the mouse y coordinate. */
-   y?: Cx.NumberProp,
-   
-   /** Base CSS class to be applied to the element. Defaults to `mousetracker`. */
-   baseClass?: string
-
-}
-
-export class MouseTracker extends Cx.Widget<MouseTrackerProps> {}

package/src/charts/MouseTracker.js

@@ -1,81 +0,0 @@
-import {BoundedObject} from "../svg/BoundedObject";
-import {VDOM} from '../ui/VDOM';
-import {tooltipMouseMove, tooltipMouseLeave} from '../widgets/overlay/tooltip-ops';
-import {closest} from '../util/DOM';
-import {getTopLevelBoundingClientRect} from "../util/getTopLevelBoundingClientRect";
-
-export class MouseTracker extends BoundedObject {
-   declareData() {
-      return super.declareData(...arguments, {
-         x: undefined,
-         y: undefined
-      });
-   }
-
-   explore(context, instance) {
-      instance.xAxis = context.axes[this.xAxis];
-      instance.yAxis = context.axes[this.yAxis];
-      super.explore(context, instance);
-   }
-
-   render(context, instance, key) {
-      let {data} = instance;
-      let {bounds} = data;
-      if (!bounds.valid())
-         return null;
-
-      return (
-         <g
-            key={key}
-            className={data.classNames}
-            onMouseMove={e => {
-               this.handleMouseMove(e, instance)
-            }}
-            onMouseLeave={e => {
-               this.handleMouseLeave(e, instance)
-            }}
-         >
-            <rect
-               x={bounds.l}
-               y={bounds.t}
-               width={bounds.width()}
-               height={bounds.height()}
-               fill="transparent"
-               strokeWidth="0"
-            />
-            {this.renderChildren(context, instance)}
-         </g>
-      )
-   }
-
-   handleMouseMove(e, instance) {
-      let {xAxis, yAxis} = instance;
-      let svgEl = closest(e.target, el => el.tagName == 'svg');
-      let bounds = getTopLevelBoundingClientRect(svgEl);
-
-      if (xAxis)
-         instance.set('x', xAxis.trackValue(e.clientX - bounds.left));
-
-      if (yAxis)
-         instance.set('y', yAxis.trackValue(e.clientY - bounds.top));
-
-      tooltipMouseMove(e, instance, instance.widget.tooltip);
-   }
-
-   handleMouseLeave(e, instance) {
-      let {xAxis, yAxis} = instance;
-
-      tooltipMouseLeave(e, instance, instance.widget.tooltip);
-
-      if (xAxis)
-         instance.set('x', null);
-
-      if (yAxis)
-         instance.set('y', null);
-   }
-}
-
-MouseTracker.prototype.xAxis = 'x';
-MouseTracker.prototype.yAxis = 'y';
-MouseTracker.prototype.anchors = '0 1 1 0';
-MouseTracker.prototype.baseClass = "mousetracker";

package/src/charts/Pie.js

@@ -1,8 +0,0 @@
-import {PieChart, PieSlice} from './PieChart';
-
-import {debug} from '../util/Debug';
-
-debug('The Pie class is deprecated. Please use PieChart instead.')
-
-export const Pie = PieChart;
-Pie.Slice = PieSlice;

package/src/charts/PieChart.d.ts

@@ -1,92 +0,0 @@
-import * as Cx from "../core";
-import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
-import { PropertySelection, KeySelection } from "../ui/selection";
-
-interface PieChartProps extends BoundedObjectProps {
-   /** Angle in degrees. Default is `360` which represents the full circle. */
-   angle?: Cx.NumberProp;
-
-   /** Start angle in degrees. Indicates the starting point of the first stack. Default is `0`. */
-   startAngle?: Cx.NumberProp;
-
-   /** When set to `true`, stacks are rendered in clock wise direction. */
-   clockwise?: Cx.BooleanProp;
-
-   /** Gap between slices in pixels. Default is `0` which means there is no gap. */
-   gap?: Cx.NumberProp;
-}
-
-export class PieChart extends Cx.Widget<PieChartProps> {}
-
-interface PieSliceProps extends Cx.StyledContainerProps {
-   /** Used to indicate whether an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   /**
-    * Inner pie radius in percents of the maximum available radius.
-    *  If `percentageRadius` flag is set to false, then the value represents the radius in pixels. Default is 0.
-    */
-   r0?: Cx.NumberProp;
-
-   /**
-    * Outer pie radius in percents of the maximum available radius.
-    * If `percentageRadius` flag is set to false, then the value represents the radius in pixels. Default is 50.
-    */
-   r?: Cx.NumberProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp;
-
-   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp;
-
-   /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp;
-
-   /** Value in pixels to be used to explode the pie. */
-   offset?: Cx.NumberProp;
-
-   value?: Cx.NumberProp;
-   disabled?: Cx.BooleanProp;
-   innerPointRadius?: Cx.NumberProp;
-   outerPointRadius?: Cx.NumberProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Multi-level pie charts consist of multiple stacks. Assign a unique name to each level. Default is `stack`. */
-   stack?: Cx.StringProp;
-
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: Cx.StringProp;
-
-   percentageRaidus?: boolean;
-
-   /** Base CSS class to be applied to the element. Defaults to `pieslice`. */
-   baseClass?: string;
-
-   legendAction?: string;
-
-   /** Text to be displayed in the legend. The default is copying the `name` value.  */
-   legendDisplayText?: Cx.StringProp;
-
-   /** Tooltip configuration. For more info see Tooltips. */
-   tooltip?: Cx.StringProp | Cx.StructuredProp;
-
-   /** Selection configuration. */
-   selection?: { type: typeof PropertySelection | typeof KeySelection; [prop: string]: any };
-
-   /** A value used to identify the group of components participating in hover effect synchronization. */
-   hoverChannel?: string;
-
-   /** A value used to uniquely identify the record within the hover sync group. */
-   hoverId?: Cx.StringProp;
-
-   /** Border radius of the slice. Default is 0. */
-   borderRadius?: Cx.NumberProp;
-
-   /** Border radius of the slice. Default is 0. */
-   br?: Cx.NumberProp;
-}
-
-export class PieSlice extends Cx.Widget<PieSliceProps> {}