cx 24.5.0 → 24.5.2

package/src/charts/Marker.d.ts

@@ -1,88 +1,96 @@
-import * as Cx from '../core';
-import { BoundedObject, BoundedObjectProps } from '../svg/BoundedObject';
+import * as Cx from "../core";
+import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
 
 interface MarkerProps extends BoundedObjectProps {
-
    /** The `x` value binding or expression. */
-   x?: Cx.Prop<string | number>,
-   
+   x?: Cx.Prop<string | number>;
+
    /** The `y` value binding or expression. */
-   y?:  Cx.Prop<string | number>,
+   y?: Cx.Prop<string | number>;
 
    /** Used to indicate if the data should affect axis span. */
-   affectsAxes?: Cx.BooleanProp,
+   affectsAxes?: Cx.BooleanProp;
 
    /** Shape kind. `circle`, `square`, `triangle`, etc. */
-   shape?: Cx.StringProp,
+   shape?: Cx.StringProp;
 
-   disabled?: Cx.BooleanProp,
+   disabled?: Cx.BooleanProp;
 
    /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.Prop<string | number>,
+   colorIndex?: Cx.Prop<string | number>;
 
    /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp,
+   colorMap?: Cx.StringProp;
 
    /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp,
+   colorName?: Cx.StringProp;
 
-   legendColorIndex?: Cx.NumberProp,
+   legendColorIndex?: Cx.NumberProp;
 
    /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp,
+   name?: Cx.StringProp;
 
    /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp,
+   active?: Cx.BooleanProp;
 
-   xOffset?: number,
-   yOffset?: number,
+   xOffset?: number;
+   yOffset?: number;
 
    /** Size of the shape in pixels. */
-   size?: Cx.NumberProp,
+   size?: 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,
+   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,
-   
+   yAxis?: string;
+
    /** Base CSS class to be applied to the element. Defaults to `marker`. */
-   baseClass?: string,
+   baseClass?: string;
 
    /** Set to `true` to make the shape draggable along the X axis. */
-   draggableX?: boolean,
+   draggableX?: boolean;
 
    /** Set to `true` to make the shape draggable along the Y axis. */
-   draggableY?: boolean,
+   draggableY?: boolean;
 
    /** Set to `true` to make the shape draggable along the X and Y axis. */
-   draggable?: boolean,
+   draggable?: boolean;
 
    /** Constrain the marker position to min/max values of the X axis during drag operations. */
-   constrainX?: boolean,
+   constrainX?: boolean;
 
    /** Constrain the marker position to min/max values of the Y axis during drag operations. */
-   constrainY?: boolean,
+   constrainY?: boolean;
 
    /** When set to `true`, it is equivalent to setting `constrainX` and `constrainY` to true. */
-   constrain?: boolean,
+   constrain?: boolean;
 
    /** Name of the legend to be used. Default is `legend`. */
-   legend?: string,
+   legend?: string;
 
-   legendAction?: string,
+   legendAction?: string;
 
    /** Tooltip configuration. For more info see Tooltips. */
-   tooltip?: Cx.StringProp | Cx.StructuredProp
+   tooltip?: Cx.StringProp | Cx.StructuredProp;
 
    /** Set to true to hide the marker. The marker will still participate in axis range calculations. */
-   hidden?: boolean
+   hidden?: boolean;
+
+   /** Indicate that markers should be stacked horizontally. Default value is `false`. */
+   stackedX?: Cx.BooleanProp;
+
+   /** Indicate that markers should be stacked vertically. Default value is `false`. */
+   stackedY?: Cx.BooleanProp;
+
+   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
+   stack?: Cx.StringProp;
 }
 
-export class Marker extends Cx.Widget<MarkerProps> {}
+export class Marker extends Cx.Widget<MarkerProps> {}

package/src/charts/Marker.js

@@ -46,6 +46,9 @@ export class Marker extends BoundedObject {
          legendColorIndex: undefined,
          name: undefined,
          active: true,
+         stack: undefined,
+         stackedX: undefined,
+         stackedY: undefined,
       });
    }
 
@@ -78,9 +81,9 @@ export class Marker extends BoundedObject {
          y = (bounds.t + bounds.b) / 2;
       }
 
-      if (data.x != null) x = xAxis.map(data.x);
+      if (data.x != null) x = data.stackedX ? xAxis.stack(data.stack, data.y, data.x) : xAxis.map(data.x);
 
-      if (data.y != null) y = yAxis.map(data.y);
+      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,
@@ -98,9 +101,15 @@ export class Marker extends BoundedObject {
 
       if (data.active) {
          if (this.affectsAxes) {
-            if (xAxis && data.x != null) xAxis.acknowledge(data.x, 0, this.xOffset);
-
-            if (yAxis && data.y != null) yAxis.acknowledge(data.y, 0, this.yOffset);
+            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);
+            }
          }
 
          if (context.pointReducer) context.pointReducer(data.x, data.y, data.name, data);
@@ -171,7 +180,7 @@ export class Marker extends BoundedObject {
                },
                null,
                { svgEl, el: e.target },
-               e.target.style.cursor
+               e.target.style.cursor,
             );
       } else {
          if (!this.selection.isDummy) this.selection.selectInstance(instance);
@@ -221,6 +230,9 @@ 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);
 

package/src/charts/Marker.scss

@@ -1,42 +1,42 @@
-
-@mixin cx-marker(
-   $name: 'marker',
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$element}#{$name}-shape {
-      fill: rgb(128, 128, 128);
-      stroke: rgb(128, 128, 128);
-      stroke-width: 1px;
-
-      .#{$state}draggable-x > & {
-         cursor: ew-resize;
-         touch-action: none;
-      }
-
-      .#{$state}draggable-y > & {
-         cursor: ns-resize;
-         touch-action: none;
-      }
-
-      .#{$state}draggable-xy > & {
-         cursor: move;
-         touch-action: none;
-      }
-
-      .#{$state}selectable > & {
-         cursor: pointer;
-      }
-
-      &.#{$state}hidden {
-         visibility: hidden;
-      }
-   }
-}
-
-@if (cx-should-include('cx/charts/Marker')) {
-   @include cx-marker();
+
+@mixin cx-marker(
+   $name: 'marker',
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$element}#{$name}-shape {
+      fill: rgb(128, 128, 128);
+      stroke: rgb(128, 128, 128);
+      stroke-width: 1px;
+
+      .#{$state}draggable-x > & {
+         cursor: ew-resize;
+         touch-action: none;
+      }
+
+      .#{$state}draggable-y > & {
+         cursor: ns-resize;
+         touch-action: none;
+      }
+
+      .#{$state}draggable-xy > & {
+         cursor: move;
+         touch-action: none;
+      }
+
+      .#{$state}selectable > & {
+         cursor: pointer;
+      }
+
+      &.#{$state}hidden {
+         visibility: hidden;
+      }
+   }
+}
+
+@if (cx-should-include('cx/charts/Marker')) {
+   @include cx-marker();
 }

package/src/charts/MarkerLine.d.ts

@@ -1,58 +1,58 @@
-import * as Cx from '../core';
-import { BoundedObject, BoundedObjectProps } from '../svg/BoundedObject';
-
-interface MarkerLineProps 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,
-
-   /** 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.NumberProp,
-
-   /** 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
-
-}
-
+import * as Cx from '../core';
+import { BoundedObject, BoundedObjectProps } from '../svg/BoundedObject';
+
+interface MarkerLineProps 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,
+
+   /** 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.NumberProp,
+
+   /** 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 +1,128 @@
-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);
-
+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);
+