cx 22.8.3 → 22.9.0

package/src/charts/Column.scss

@@ -1,27 +1,27 @@
-
-@mixin cx-column(
-   $name: 'column',
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$element}#{$name}-rect {
-      stroke-width: 1px;
-      fill: #eee;
-      stroke: #ccc;
-
-      &.#{$state}selectable {
-         cursor: pointer;
-      }
-
-      &.#{$state}selected {
-         stroke-width: 2px;
-      }
-   }
-}
-
-@if (cx-should-include('cx/charts/Column')) {
-   @include cx-column();
+
+@mixin cx-column(
+   $name: 'column',
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$element}#{$name}-rect {
+      stroke-width: 1px;
+      fill: #eee;
+      stroke: #ccc;
+
+      &.#{$state}selectable {
+         cursor: pointer;
+      }
+
+      &.#{$state}selected {
+         stroke-width: 2px;
+      }
+   }
+}
+
+@if (cx-should-include('cx/charts/Column')) {
+   @include cx-column();
 }

package/src/charts/ColumnBarBase.d.ts

@@ -1,61 +1,61 @@
-import * as Cx from "../core";
-
-interface ColumnBarBaseProps extends Cx.StyledContainerProps {
-   /** The `x` value binding or expression. */
-   x?: Cx.Prop<string | number>;
-
-   /** The `y` value binding or expression. */
-   y?: Cx.Prop<string | number>;
-
-   disabled?: Cx.BooleanProp;
-
-   /** 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;
-
-   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
-   stacked?: Cx.BooleanProp;
-
-   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
-   stack?: Cx.StringProp;
-
-   /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
-   offset?: 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;
-
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: string;
-
-   legendAction?: string;
-   legendShape?: string;
-
-   /** 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;
-}
-
-export class ColumnBarBase extends Cx.Widget<ColumnBarBaseProps> {}
+import * as Cx from "../core";
+
+interface ColumnBarBaseProps extends Cx.StyledContainerProps {
+   /** The `x` value binding or expression. */
+   x?: Cx.Prop<string | number>;
+
+   /** The `y` value binding or expression. */
+   y?: Cx.Prop<string | number>;
+
+   disabled?: Cx.BooleanProp;
+
+   /** 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;
+
+   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
+   stacked?: Cx.BooleanProp;
+
+   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
+   stack?: Cx.StringProp;
+
+   /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
+   offset?: 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;
+
+   /** Name of the legend to be used. Default is `legend`. */
+   legend?: string;
+
+   legendAction?: string;
+   legendShape?: string;
+
+   /** 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;
+}
+
+export class ColumnBarBase extends Cx.Widget<ColumnBarBaseProps> {}

package/src/charts/ColumnBarBase.js

@@ -1,169 +1,169 @@
-import { VDOM } from "../ui/Widget";
-import { PureContainer } from "../ui/PureContainer";
-import { tooltipMouseMove, tooltipMouseLeave } from "../widgets/overlay/tooltip-ops";
-import { Selection } from "../ui/selection/Selection";
-import { withHoverSync } from "../ui/HoverSync";
-
-export class ColumnBarBase extends PureContainer {
-   init() {
-      this.selection = Selection.create(this.selection);
-      super.init();
-   }
-
-   declareData() {
-      var selection = this.selection.configureWidget(this);
-
-      return super.declareData(...arguments, selection, {
-         x: undefined,
-         y: undefined,
-         style: { structured: true },
-         class: { structured: true },
-         className: { structured: true },
-         disabled: undefined,
-         colorIndex: undefined,
-         colorMap: undefined,
-         colorName: undefined,
-         name: undefined,
-         active: true,
-         stacked: undefined,
-         stack: undefined,
-         offset: undefined,
-         hoverId: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      instance.axes = context.axes;
-      instance.xAxis = context.axes[this.xAxis];
-      instance.yAxis = context.axes[this.yAxis];
-      instance.hoverSync = context.hoverSync;
-      var { data } = instance;
-      data.valid = this.checkValid(data);
-      if (!data.colorName && data.name) data.colorName = data.name;
-      super.prepareData(context, instance);
-   }
-
-   checkValid(data) {
-      return true;
-   }
-
-   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.valid) return;
-
-      if (data.active) {
-         instance.bounds = this.calculateRect(instance);
-         instance.cache("bounds", instance.bounds);
-         if (!instance.bounds.isEqual(instance.cached.bounds)) instance.markShouldUpdate(context);
-
-         context.push("parentRect", instance.bounds);
-         if (instance.xAxis.shouldUpdate || instance.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,
-            selected: this.selection.isInstanceSelected(instance),
-            style: data.style,
-            shape: this.legendShape,
-            onClick: (e) => {
-               this.onLegendClick(e, instance);
-            },
-         });
-   }
-
-   prepareCleanup(context, instance) {
-      let { data } = instance;
-      if (data.valid && data.active) context.pop("parentRect");
-   }
-
-   onLegendClick(e, instance) {
-      var allActions = this.legendAction == "auto";
-      var { data } = instance;
-      if (allActions || this.legendAction == "toggle") if (instance.set("active", !data.active)) return;
-
-      if (allActions || this.legendAction == "select") this.handleClick(e, instance);
-   }
-
-   calculateRect(context, instance) {
-      throw new Error("Abstract method.");
-   }
-
-   render(context, instance, key) {
-      let { data, bounds } = instance;
-
-      if (!data.active || !data.valid) return null;
-
-      return withHoverSync(
-         key,
-         instance.hoverSync,
-         this.hoverChannel,
-         data.hoverId,
-         ({ hover, onMouseMove, onMouseLeave, key }) => {
-            var stateMods = {
-               selected: this.selection.isInstanceSelected(instance),
-               disabled: data.disabled,
-               selectable: !this.selection.isDummy,
-               ["color-" + data.colorIndex]: data.colorIndex != null,
-               hover,
-            };
-
-            return (
-               <g className={data.classNames} key={key}>
-                  <rect
-                     className={this.CSS.element(this.baseClass, "rect", stateMods)}
-                     style={data.style}
-                     x={bounds.l}
-                     y={bounds.t}
-                     width={Math.max(0.0001, bounds.width())}
-                     height={Math.max(0.0001, bounds.height())}
-                     onMouseMove={(e) => {
-                        onMouseMove(e, instance);
-                        tooltipMouseMove(e, instance, this.tooltip);
-                     }}
-                     onMouseLeave={(e) => {
-                        onMouseLeave(e, instance);
-                        tooltipMouseLeave(e, instance, this.tooltip);
-                     }}
-                     onClick={(e) => {
-                        this.handleClick(e, instance);
-                     }}
-                  />
-                  {this.renderChildren(context, instance)}
-               </g>
-            );
-         }
-      );
-   }
-
-   handleClick(e, instance) {
-      if (!this.selection.isDummy) {
-         this.selection.selectInstance(instance, {
-            toggle: e.ctrlKey,
-         });
-         e.stopPropagation();
-         e.preventDefault();
-      }
-   }
-}
-
-ColumnBarBase.prototype.xAxis = "x";
-ColumnBarBase.prototype.yAxis = "y";
-ColumnBarBase.prototype.offset = 0;
-ColumnBarBase.prototype.legend = "legend";
-ColumnBarBase.prototype.legendAction = "auto";
-ColumnBarBase.prototype.active = true;
-ColumnBarBase.prototype.stacked = false;
-ColumnBarBase.prototype.stack = "stack";
-ColumnBarBase.prototype.legendShape = "rect";
-ColumnBarBase.prototype.styled = true;
-ColumnBarBase.prototype.hoverChannel = "default";
+import { VDOM } from "../ui/Widget";
+import { PureContainer } from "../ui/PureContainer";
+import { tooltipMouseMove, tooltipMouseLeave } from "../widgets/overlay/tooltip-ops";
+import { Selection } from "../ui/selection/Selection";
+import { withHoverSync } from "../ui/HoverSync";
+
+export class ColumnBarBase extends PureContainer {
+   init() {
+      this.selection = Selection.create(this.selection);
+      super.init();
+   }
+
+   declareData() {
+      var selection = this.selection.configureWidget(this);
+
+      return super.declareData(...arguments, selection, {
+         x: undefined,
+         y: undefined,
+         style: { structured: true },
+         class: { structured: true },
+         className: { structured: true },
+         disabled: undefined,
+         colorIndex: undefined,
+         colorMap: undefined,
+         colorName: undefined,
+         name: undefined,
+         active: true,
+         stacked: undefined,
+         stack: undefined,
+         offset: undefined,
+         hoverId: undefined,
+      });
+   }
+
+   prepareData(context, instance) {
+      instance.axes = context.axes;
+      instance.xAxis = context.axes[this.xAxis];
+      instance.yAxis = context.axes[this.yAxis];
+      instance.hoverSync = context.hoverSync;
+      var { data } = instance;
+      data.valid = this.checkValid(data);
+      if (!data.colorName && data.name) data.colorName = data.name;
+      super.prepareData(context, instance);
+   }
+
+   checkValid(data) {
+      return true;
+   }
+
+   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.valid) return;
+
+      if (data.active) {
+         instance.bounds = this.calculateRect(instance);
+         instance.cache("bounds", instance.bounds);
+         if (!instance.bounds.isEqual(instance.cached.bounds)) instance.markShouldUpdate(context);
+
+         context.push("parentRect", instance.bounds);
+         if (instance.xAxis.shouldUpdate || instance.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,
+            selected: this.selection.isInstanceSelected(instance),
+            style: data.style,
+            shape: this.legendShape,
+            onClick: (e) => {
+               this.onLegendClick(e, instance);
+            },
+         });
+   }
+
+   prepareCleanup(context, instance) {
+      let { data } = instance;
+      if (data.valid && data.active) context.pop("parentRect");
+   }
+
+   onLegendClick(e, instance) {
+      var allActions = this.legendAction == "auto";
+      var { data } = instance;
+      if (allActions || this.legendAction == "toggle") if (instance.set("active", !data.active)) return;
+
+      if (allActions || this.legendAction == "select") this.handleClick(e, instance);
+   }
+
+   calculateRect(context, instance) {
+      throw new Error("Abstract method.");
+   }
+
+   render(context, instance, key) {
+      let { data, bounds } = instance;
+
+      if (!data.active || !data.valid) return null;
+
+      return withHoverSync(
+         key,
+         instance.hoverSync,
+         this.hoverChannel,
+         data.hoverId,
+         ({ hover, onMouseMove, onMouseLeave, key }) => {
+            var stateMods = {
+               selected: this.selection.isInstanceSelected(instance),
+               disabled: data.disabled,
+               selectable: !this.selection.isDummy,
+               ["color-" + data.colorIndex]: data.colorIndex != null,
+               hover,
+            };
+
+            return (
+               <g className={data.classNames} key={key}>
+                  <rect
+                     className={this.CSS.element(this.baseClass, "rect", stateMods)}
+                     style={data.style}
+                     x={bounds.l}
+                     y={bounds.t}
+                     width={Math.max(0.0001, bounds.width())}
+                     height={Math.max(0.0001, bounds.height())}
+                     onMouseMove={(e) => {
+                        onMouseMove(e, instance);
+                        tooltipMouseMove(e, instance, this.tooltip);
+                     }}
+                     onMouseLeave={(e) => {
+                        onMouseLeave(e, instance);
+                        tooltipMouseLeave(e, instance, this.tooltip);
+                     }}
+                     onClick={(e) => {
+                        this.handleClick(e, instance);
+                     }}
+                  />
+                  {this.renderChildren(context, instance)}
+               </g>
+            );
+         }
+      );
+   }
+
+   handleClick(e, instance) {
+      if (!this.selection.isDummy) {
+         this.selection.selectInstance(instance, {
+            toggle: e.ctrlKey,
+         });
+         e.stopPropagation();
+         e.preventDefault();
+      }
+   }
+}
+
+ColumnBarBase.prototype.xAxis = "x";
+ColumnBarBase.prototype.yAxis = "y";
+ColumnBarBase.prototype.offset = 0;
+ColumnBarBase.prototype.legend = "legend";
+ColumnBarBase.prototype.legendAction = "auto";
+ColumnBarBase.prototype.active = true;
+ColumnBarBase.prototype.stacked = false;
+ColumnBarBase.prototype.stack = "stack";
+ColumnBarBase.prototype.legendShape = "rect";
+ColumnBarBase.prototype.styled = true;
+ColumnBarBase.prototype.hoverChannel = "default";

package/src/charts/ColumnBarGraphBase.d.ts

@@ -1,72 +1,72 @@
-import * as Cx from '../core';
-import { KeySelection, PropertySelection } from '../ui/selection';
-
-interface ColumnBarGraphBaseProps extends Cx.WidgetProps {
-   
-   /** 
-    * 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,
-
-   /** 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,
-
-   /** Size (width) of the column in axis units. */
-   size?: Cx.NumberProp,
-
-   /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
-   offset?: Cx.NumberProp,
-
-   /** Set to true to auto-calculate size and offset. Available only if the x axis is a category axis. */
-   autoSize?: Cx.BooleanProp,
-
-   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp,
-
-   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
-   stacked?: Cx.BooleanProp,
-
-   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
-   stack?: Cx.StringProp,
-   
-   /** 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,
-
-   colorIndexField?: boolean,
-
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: string,
-
-   legendAction?: string,
-   legendShape?: string,
-
-   /** Selection configuration. */
-   selection?: { type: typeof PropertySelection | typeof KeySelection, [prop: string]: any }
-
-}
-
+import * as Cx from '../core';
+import { KeySelection, PropertySelection } from '../ui/selection';
+
+interface ColumnBarGraphBaseProps extends Cx.WidgetProps {
+   
+   /** 
+    * 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,
+
+   /** 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,
+
+   /** Size (width) of the column in axis units. */
+   size?: Cx.NumberProp,
+
+   /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
+   offset?: Cx.NumberProp,
+
+   /** Set to true to auto-calculate size and offset. Available only if the x axis is a category axis. */
+   autoSize?: Cx.BooleanProp,
+
+   /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
+   active?: Cx.BooleanProp,
+
+   /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
+   stacked?: Cx.BooleanProp,
+
+   /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
+   stack?: Cx.StringProp,
+   
+   /** 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,
+
+   colorIndexField?: boolean,
+
+   /** Name of the legend to be used. Default is `legend`. */
+   legend?: string,
+
+   legendAction?: string,
+   legendShape?: string,
+
+   /** Selection configuration. */
+   selection?: { type: typeof PropertySelection | typeof KeySelection, [prop: string]: any }
+
+}
+
 export class ColumnBarGraphBase extends Cx.Widget<ColumnBarGraphBaseProps> {}