cx 25.10.1 → 26.0.1

package/src/charts/Range.d.ts

@@ -1,75 +0,0 @@
-import * as Cx from '../core';
-import { BoundedObject, BoundedObjectProps } from '../svg/BoundedObject';
-
-interface RangeProps extends BoundedObjectProps {
-   
-   /** The `x1` value binding or expression. */
-   x1?: Cx.NumberProp,
-
-   /** The `y1` value binding or expression. */
-   y1?: Cx.NumberProp,
-   
-   /** The `x2` value binding or expression. */
-   x2?: Cx.NumberProp,
-
-   /** The `y2` value binding or expression. */
-   y2?: Cx.NumberProp,
-
-   /** 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,
-
-   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,
-   
-   xSize?: number,
-   ySize?: number,
-   xOffset?: number,
-   yOffset?: number,
-
-   /** Base CSS class to be applied to the element. Defaults to `range`. */
-   baseClass?: string,
-
-   /** 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,
-   
-   legendAction?: string,
-   hidden?: boolean
-   
-}
-
-export class Range extends Cx.Widget<RangeProps> {}

package/src/charts/Range.js

@@ -1,206 +0,0 @@
-import {BoundedObject} from '../svg/BoundedObject';
-import {VDOM} from '../ui/Widget';
-import {captureMouseOrTouch, getCursorPos} from '../widgets/overlay/captureMouse';
-import {closest} from '../util/DOM';
-import {getTopLevelBoundingClientRect} from "../util/getTopLevelBoundingClientRect";
-
-export class Range extends BoundedObject {
-   declareData() {
-      super.declareData(...arguments, {
-         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 <g key={key} className={data.classNames}>
-         {
-            !this.hidden && <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)}
-      </g>
-   }
-
-   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);
-            }, null, 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/src/charts/RangeMarker.d.ts

@@ -1,35 +0,0 @@
-import * as Cx from "../core";
-
-interface RangeMarkerProps extends Cx.StyledContainerProps {
-   /** The `x` value binding or expression. */
-   x?: Cx.NumberProp;
-
-   /** The `y` value binding or expression. */
-   y?: Cx.NumberProp;
-
-   /** The shape of marker, Could be `min`, `max`, `line`. Default to `line`. */
-   shape?: Cx.StringProp;
-
-   /** Switch to vertical mode. */
-   vertical?: Cx.BooleanProp;
-
-   /** Size of the range marker. */
-   size?: Cx.NumberProp;
-
-   /** Style object applied to the range marker. */
-   lineStyle?: Cx.StyleProp;
-
-   /** Class object applied to the range marker. */
-   lineClass?: Cx.StyleProp;
-
-   /** Size of vertical or horizontal caps. */
-   capSize?: Cx.NumberProp;
-
-   /** The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
-   laneOffset?: Cx.NumberProp;
-
-   /** Inflate the range marker.*/
-   inflate?: Cx.NumberProp;
-}
-
-export class RangeMarker extends Cx.Widget<RangeMarkerProps> {}

package/src/charts/RangeMarker.js

@@ -1,159 +0,0 @@
-import { BoundedObject } from "../svg/BoundedObject";
-import { Rect } from "../svg/util/Rect";
-import { Widget, VDOM } from "../ui/Widget";
-import { parseStyle } from "../util/parseStyle";
-
-export class RangeMarker extends BoundedObject {
-   declareData() {
-      super.declareData(...arguments, {
-         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 (
-         <g key={key} className={data.classNames} style={data.style}>
-            <path
-               d={path}
-               className={CSS.expand(CSS.element(baseClass, "path"), data.lineClass)}
-               style={data.lineStyle}
-            />
-            {this.renderChildren(context, instance)}
-         </g>
-      );
-   }
-}
-
-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/src/charts/ScatterGraph.d.ts

@@ -1,64 +0,0 @@
-import * as Cx from "../core";
-import { PropertySelection, KeySelection } from "../ui/selection";
-
-interface ScatterGraphProps extends Cx.StyledContainerProps {
-   /**
-    * 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?: Cx.RecordsProp;
-
-   /** Size (width) of the column in axis units. */
-   size?: Cx.NumberProp;
-
-   shape?: Cx.StringProp;
-
-   /** 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;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `scattergraph`. */
-   baseClass?: string;
-
-   /**
-    * 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;
-
-   /** 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. Do not set if `size` is used. */
-   sizeField?: string | false;
-
-   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
-   legend?: string | false;
-
-   legendAction?: string;
-
-   /** Selection configuration. */
-   selection?: { type: typeof PropertySelection | typeof KeySelection; [prop: string]: any };
-}
-
-export class ScatterGraph extends Cx.Widget<ScatterGraphProps> {}

package/src/charts/ScatterGraph.js

@@ -1,164 +0,0 @@
-import { Widget, VDOM } 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 {
-   init() {
-      this.selection = Selection.create(this.selection, {
-         records: this.data,
-      });
-      super.init();
-   }
-
-   declareData() {
-      var selection = this.selection.configureWidget(this);
-
-      super.declareData(
-         ...arguments,
-         {
-            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 (
-         <g key={key} className={data.classNames}>
-            {this.renderData(context, instance)}
-         </g>
-      );
-   }
-
-   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);