cx 24.5.2 → 24.6.2

package/dist/svg.js

@@ -137,11 +137,7 @@ function _arrayLikeToArray(arr, len) {
 function _createForOfIteratorHelperLoose(o, allowArrayLike) {
 	var it = (typeof Symbol !== "undefined" && o[Symbol.iterator]) || o["@@iterator"];
 	if (it) return (it = it.call(o)).next.bind(it);
-	if (
-		Array.isArray(o) ||
-		(it = _unsupportedIterableToArray(o)) ||
-		(allowArrayLike && o && typeof o.length === "number")
-	) {
+	if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike) {
 		if (it) o = it;
 		var i = 0;
 		return function () {

package/dist/ui.js

@@ -75,11 +75,11 @@ function _toPrimitive(t, r) {
 	if ("object" != typeof t || !t) return t;
 	var e = t[Symbol.toPrimitive];
 	if (void 0 !== e) {
-		var i = e.call(t, r || "default");
+		var i = e.call(t, r);
 		if ("object" != typeof i) return i;
 		throw new TypeError("@@toPrimitive must return a primitive value.");
 	}
-	return ("string" === r ? String : Number)(t);
+	return String(t);
 }
 function _toPropertyKey(t) {
 	var i = _toPrimitive(t, "string");
@@ -95,7 +95,6 @@ function _defineProperties(target, props) {
 	}
 }
 function _createClass(Constructor, protoProps, staticProps) {
-	if (protoProps) _defineProperties(Constructor.prototype, protoProps);
 	if (staticProps) _defineProperties(Constructor, staticProps);
 	Object.defineProperty(Constructor, "prototype", {
 		writable: false,

package/dist/widgets.js

@@ -173,12 +173,11 @@ function _setPrototypeOf(o, p) {
 function _objectWithoutPropertiesLoose(source, excluded) {
 	if (source == null) return {};
 	var target = {};
-	var sourceKeys = Object.keys(source);
-	var key, i;
-	for (i = 0; i < sourceKeys.length; i++) {
-		key = sourceKeys[i];
-		if (excluded.indexOf(key) >= 0) continue;
-		target[key] = source[key];
+	for (var key in source) {
+		if (Object.prototype.hasOwnProperty.call(source, key)) {
+			if (excluded.indexOf(key) >= 0) continue;
+			target[key] = source[key];
+		}
 	}
 	return target;
 }
@@ -6593,6 +6592,7 @@ var Field = /*#__PURE__*/ (function (_PureContainer) {
 		data._readOnly = data.readOnly;
 		data._viewMode = data.mode === "view" || data.viewMode;
 		data._tabOnEnterKey = data.tabOnEnterKey;
+		data.validationValue = this.getValidationValue(data);
 		instance.parentDisabled = context.parentDisabled;
 		instance.parentReadOnly = context.parentReadOnly;
 		instance.parentViewMode = context.parentViewMode;
@@ -6688,6 +6688,9 @@ var Field = /*#__PURE__*/ (function (_PureContainer) {
 		var data = instance.data;
 		if (this.isEmpty(data)) return this.requiredText;
 	};
+	_proto.getValidationValue = function getValidationValue(data) {
+		return data.value;
+	};
 	_proto.validate = function validate(context, instance) {
 		var _this = this;
 		var data = instance.data,
@@ -6699,7 +6702,7 @@ var Field = /*#__PURE__*/ (function (_PureContainer) {
 			else if (state.validating && !empty) data.error = this.validatingText;
 			else if (
 				state.validationError &&
-				data.value === state.lastValidatedValue &&
+				data.validationValue === state.lastValidatedValue &&
 				shallowEquals(data.validationParams, state.lastValidationParams)
 			)
 				data.error = state.validationError;
@@ -6711,15 +6714,15 @@ var Field = /*#__PURE__*/ (function (_PureContainer) {
 			!data.error &&
 			this.onValidate &&
 			(!state.previouslyValidated ||
-				data.value != state.lastValidatedValue ||
+				data.validationValue != state.lastValidatedValue ||
 				data.validationParams != state.lastValidationParams)
 		) {
-			var result = instance.invoke("onValidate", data.value, instance, data.validationParams);
+			var result = instance.invoke("onValidate", data.validationValue, instance, data.validationParams);
 			if (isPromise(result)) {
 				data.error = this.validatingText;
 				instance.setState({
 					validating: true,
-					lastValidatedValue: data.value,
+					lastValidatedValue: data.validationValue,
 					previouslyValidated: true,
 					lastValidationParams: data.validationParams,
 				});
@@ -6728,7 +6731,8 @@ var Field = /*#__PURE__*/ (function (_PureContainer) {
 						var data = instance.data,
 							state = instance.state;
 						var error =
-							data.value == state.lastValidatedValue && shallowEquals(data.validationParams, state.lastValidationParams)
+							data.validationValue == state.lastValidatedValue &&
+							shallowEquals(data.validationParams, state.lastValidationParams)
 								? r
 								: _this.validatingText; //parameters changed, this will be revalidated
 
@@ -8685,6 +8689,11 @@ var LookupField = /*#__PURE__*/ (function (_Field) {
 		if (this.multiple) return !isNonEmptyArray(data.values) && !isNonEmptyArray(data.records);
 		return _Field.prototype.isEmpty.call(this, data);
 	};
+	_proto.getValidationValue = function getValidationValue(data) {
+		var _data$records;
+		if (this.multiple) return (_data$records = data.records) != null ? _data$records : data.values;
+		return _Field.prototype.getValidationValue.call(this, data);
+	};
 	_proto.formatValue = function formatValue(context, instance) {
 		var _this3 = this;
 		if (!this.multiple) return _Field.prototype.formatValue.call(this, context, instance);

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.5.2",
+   "version": "24.6.2",
    "description": "Advanced JavaScript UI framework for admin and dashboard applications with ready to use grid, form and chart components.",
    "main": "index.js",
    "jsnext:main": "src/index.js",

package/src/charts/ColumnGraph.js

@@ -1,112 +1,112 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { ColumnBarGraphBase } from "./ColumnBarGraphBase";
-import { tooltipMouseMove, tooltipMouseLeave } from "../widgets/overlay/tooltip-ops";
-import { isArray } from "../util/isArray";
-
-export class ColumnGraph extends ColumnBarGraphBase {
-   explore(context, instance) {
-      super.explore(context, instance);
-
-      let { data, xAxis, yAxis } = instance;
-
-      if (isArray(data.data)) {
-         data.data.forEach((p, index) => {
-            var y0 = this.y0Field ? p[this.y0Field] : data.y0;
-            var x = p[this.xField];
-            var y = p[this.yField];
-
-            xAxis.acknowledge(x, data.size, data.offset);
-
-            if (data.autoSize) xAxis.book(x, data.stacked ? data.stack : data.name);
-
-            if (data.stacked) {
-               yAxis.stacknowledge(data.stack, x, y0);
-               yAxis.stacknowledge(data.stack, x, y);
-            } else {
-               if (!this.hiddenBase) yAxis.acknowledge(y0);
-               yAxis.acknowledge(y);
-            }
-
-            if (context.pointReducer) context.pointReducer(x, y, data.name, p, data, index);
-         });
-      }
-   }
-
-   renderGraph(context, instance) {
-      var { data, xAxis, yAxis, store } = instance;
-      if (!isArray(data.data)) return false;
-
-      var isSelected = this.selection.getIsSelectedDelegate(store);
-
-      return data.data.map((p, i) => {
-         var { offset, size } = data;
-
-         var y0 = this.y0Field ? p[this.y0Field] : data.y0;
-         var x = p[this.xField];
-         var y = p[this.yField];
-
-         if (data.autoSize) {
-            var [index, count] = instance.xAxis.locate(x, data.stacked ? data.stack : data.name);
-            offset = (size / count) * (index - count / 2 + 0.5);
-            size = size / count;
-         }
-
-         var x1 = xAxis.map(x, offset - size / 2);
-         var x2 = xAxis.map(x, offset + size / 2);
-         var y1 = data.stacked ? yAxis.stack(data.stack, x, y0) : yAxis.map(y0);
-         var y2 = data.stacked ? yAxis.stack(data.stack, x, y) : yAxis.map(y);
-
-         var color = this.colorIndexField ? p[this.colorIndexField] : data.colorIndex;
-         var state = {
-            selected: isSelected(p, i),
-            selectable: !this.selection.isDummy,
-            [`color-${color}`]: color != null,
-         };
-
-         let mmove, mleave;
-
-         if (this.tooltip) {
-            mmove = (e) =>
-               tooltipMouseMove(e, instance, this.tooltip, {
-                  target: e.target.parent,
-                  data: {
-                     $record: p,
-                  },
-               });
-            mleave = (e) =>
-               tooltipMouseLeave(e, instance, this.tooltip, {
-                  target: e.target.parent,
-                  data: {
-                     $record: p,
-                  },
-               });
-         }
-
-         return (
-            <rect
-               key={i}
-               className={this.CSS.element(this.baseClass, "column", state)}
-               onClick={(e) => {
-                  this.handleClick(e, instance, p, i);
-               }}
-               x={Math.min(x1, x2)}
-               y={Math.min(y1, y2)}
-               width={Math.abs(x2 - x1)}
-               height={Math.abs(y2 - y1)}
-               style={data.style}
-               onMouseMove={mmove}
-               onMouseLeave={mleave}
-               rx={data.borderRadius}
-            />
-         );
-      });
-   }
-}
-
-ColumnGraph.prototype.baseClass = "columngraph";
-ColumnGraph.prototype.y0Field = false;
-ColumnGraph.prototype.y0 = 0;
-ColumnGraph.prototype.legendShape = "column";
-ColumnGraph.prototype.hiddenBase = false;
-
-Widget.alias("columngraph", ColumnGraph);
+import { Widget, VDOM } from "../ui/Widget";
+import { ColumnBarGraphBase } from "./ColumnBarGraphBase";
+import { tooltipMouseMove, tooltipMouseLeave } from "../widgets/overlay/tooltip-ops";
+import { isArray } from "../util/isArray";
+
+export class ColumnGraph extends ColumnBarGraphBase {
+   explore(context, instance) {
+      super.explore(context, instance);
+
+      let { data, xAxis, yAxis } = instance;
+
+      if (isArray(data.data)) {
+         data.data.forEach((p, index) => {
+            var y0 = this.y0Field ? p[this.y0Field] : data.y0;
+            var x = p[this.xField];
+            var y = p[this.yField];
+
+            xAxis.acknowledge(x, data.size, data.offset);
+
+            if (data.autoSize) xAxis.book(x, data.stacked ? data.stack : data.name);
+
+            if (data.stacked) {
+               yAxis.stacknowledge(data.stack, x, y0);
+               yAxis.stacknowledge(data.stack, x, y);
+            } else {
+               if (!this.hiddenBase) yAxis.acknowledge(y0);
+               yAxis.acknowledge(y);
+            }
+
+            if (context.pointReducer) context.pointReducer(x, y, data.name, p, data.data, index);
+         });
+      }
+   }
+
+   renderGraph(context, instance) {
+      var { data, xAxis, yAxis, store } = instance;
+      if (!isArray(data.data)) return false;
+
+      var isSelected = this.selection.getIsSelectedDelegate(store);
+
+      return data.data.map((p, i) => {
+         var { offset, size } = data;
+
+         var y0 = this.y0Field ? p[this.y0Field] : data.y0;
+         var x = p[this.xField];
+         var y = p[this.yField];
+
+         if (data.autoSize) {
+            var [index, count] = instance.xAxis.locate(x, data.stacked ? data.stack : data.name);
+            offset = (size / count) * (index - count / 2 + 0.5);
+            size = size / count;
+         }
+
+         var x1 = xAxis.map(x, offset - size / 2);
+         var x2 = xAxis.map(x, offset + size / 2);
+         var y1 = data.stacked ? yAxis.stack(data.stack, x, y0) : yAxis.map(y0);
+         var y2 = data.stacked ? yAxis.stack(data.stack, x, y) : yAxis.map(y);
+
+         var color = this.colorIndexField ? p[this.colorIndexField] : data.colorIndex;
+         var state = {
+            selected: isSelected(p, i),
+            selectable: !this.selection.isDummy,
+            [`color-${color}`]: color != null,
+         };
+
+         let mmove, mleave;
+
+         if (this.tooltip) {
+            mmove = (e) =>
+               tooltipMouseMove(e, instance, this.tooltip, {
+                  target: e.target.parent,
+                  data: {
+                     $record: p,
+                  },
+               });
+            mleave = (e) =>
+               tooltipMouseLeave(e, instance, this.tooltip, {
+                  target: e.target.parent,
+                  data: {
+                     $record: p,
+                  },
+               });
+         }
+
+         return (
+            <rect
+               key={i}
+               className={this.CSS.element(this.baseClass, "column", state)}
+               onClick={(e) => {
+                  this.handleClick(e, instance, p, i);
+               }}
+               x={Math.min(x1, x2)}
+               y={Math.min(y1, y2)}
+               width={Math.abs(x2 - x1)}
+               height={Math.abs(y2 - y1)}
+               style={data.style}
+               onMouseMove={mmove}
+               onMouseLeave={mleave}
+               rx={data.borderRadius}
+            />
+         );
+      });
+   }
+}
+
+ColumnGraph.prototype.baseClass = "columngraph";
+ColumnGraph.prototype.y0Field = false;
+ColumnGraph.prototype.y0 = 0;
+ColumnGraph.prototype.legendShape = "column";
+ColumnGraph.prototype.hiddenBase = false;
+
+Widget.alias("columngraph", ColumnGraph);

package/src/charts/LineGraph.js

@@ -65,7 +65,7 @@ export class LineGraph extends Widget {
                         context.pointReducer(x, p[this.y0Field], data.name, p, data, index);
                   }
                }
-               if (context.pointReducer) context.pointReducer(x, p[this.yField], data.name, p, data, index);
+               if (context.pointReducer) context.pointReducer(x, p[this.yField], data.name, p, data.data, index);
             });
          }
       }

package/src/charts/helpers/SnapPointFinder.d.ts

@@ -1,24 +1,30 @@
-import * as Cx from "../../core";
-import { PointReducerProps } from "./PointReducer";
-
-interface SnapPointFinderProps extends PointReducerProps {
-   /* Cursor X value. */
-   cursorX?: Cx.NumberProp;
-
-   /* Cursor Y value */
-   cursorY?: Cx.NumberProp;
-
-   /* A binding used to receive the x value of the nearest point.*/
-   snapX?: Cx.Prop<any>;
-
-   /* A binding used to receive the y value of the nearest point. */
-   snapY?: Cx.Prop<any>;
-
-   /* A binding used to receive the record prop */
-   snapRecord?: Cx.Prop<Cx.Record>;
-
-   /* Maximum distance between cursor and the snap point. */
-   maxDistance?: number;
-}
-
-export class SnapPointFinder extends Cx.Widget<SnapPointFinderProps> {}
+import * as Cx from "../../core";
+import { PointReducerProps } from "./PointReducer";
+
+interface SnapPointFinderProps extends PointReducerProps {
+   /* Cursor X value. */
+   cursorX?: Cx.NumberProp;
+
+   /* Cursor Y value */
+   cursorY?: Cx.NumberProp;
+
+   /* A binding used to receive the x value of the nearest point.*/
+   snapX?: Cx.NumberProp | Cx.StringProp;
+
+   /* A binding used to receive the y value of the nearest point. */
+   snapY?: Cx.NumberProp | Cx.StringProp;
+
+   /* A binding used to receive the record prop */
+   snapRecord?: Cx.Prop<Cx.Record>;
+
+   /* Maximum distance between cursor and the snap point. Default value is 50. Adjust accordingly for large distances, e.g. set to Infinity when using TimeAxis */
+   maxDistance?: number;
+
+   /* A function used to convert x values into numeric format. Commonly used with dates. */
+   convertX?: (value: number | string) => number;
+
+   /* A function used to convert y values into numeric format. Commonly used with dates. */
+   convertY?: (value: number | string) => number;
+}
+
+export class SnapPointFinder extends Cx.Widget<SnapPointFinderProps> {}

package/src/charts/helpers/SnapPointFinder.js

@@ -1,47 +1,49 @@
-import {PointReducer} from "./PointReducer";
-
-export class SnapPointFinder extends PointReducer {
-   declareData() {
-      return super.declareData(...arguments, {
-         cursorX: undefined,
-         cursorY: undefined,
-         snapX: undefined,
-         snapY: undefined,
-         snapRecord: undefined,
-         maxDistance: undefined
-      })
-   }
-
-   onInitAccumulator(acc, {data}) {
-      acc.cursorX = data.cursorX;
-      acc.cursorY = data.cursorY;
-      acc.dist = data.maxDistance > 0 ? Math.pow(data.maxDistance, 2) : Number.POSITIVE_INFINITY;
-      acc.snapX = null;
-      acc.snapY = null;
-   }
-
-   onMap(acc, x, y, name, p) {
-      let d = null;
-
-      if (acc.cursorX != null && x != null)
-         d = (d || 0) + Math.pow(Math.abs(x - acc.cursorX), 2);
-
-      if (acc.cursorY != null && y != null)
-         d = (d || 0) + Math.pow(Math.abs(y - acc.cursorY), 2);
-
-      if (d != null && d < acc.dist) {
-         acc.dist = d;
-         acc.snapX = x;
-         acc.snapY = y;
-         acc.snapRecord = p;
-      }
-   }
-
-   onReduce(acc, instance) {
-      instance.set('snapX', acc.snapX);
-      instance.set('snapY', acc.snapY);
-      instance.set('snapRecord', acc.snapRecord);
-   }
-}
-
-SnapPointFinder.prototype.maxDistance = 50;
+import { PointReducer } from "./PointReducer";
+
+export class SnapPointFinder extends PointReducer {
+   declareData() {
+      return super.declareData(...arguments, {
+         cursorX: undefined,
+         cursorY: undefined,
+         snapX: undefined,
+         snapY: undefined,
+         snapRecord: undefined,
+         maxDistance: undefined,
+      });
+   }
+
+   onInitAccumulator(acc, { data }) {
+      acc.cursorX = data.cursorX;
+      acc.cursorY = data.cursorY;
+      acc.dist = data.maxDistance > 0 ? Math.pow(data.maxDistance, 2) : Number.POSITIVE_INFINITY;
+      acc.snapX = null;
+      acc.snapY = null;
+   }
+
+   onMap(acc, x, y, name, p) {
+      let d = null;
+      let cx = this.convertX(x);
+      let cy = this.convertY(y);
+
+      if (acc.cursorX != null && cx != null) d = (d || 0) + Math.pow(Math.abs(cx - acc.cursorX), 2);
+
+      if (acc.cursorY != null && cy != null) d = (d || 0) + Math.pow(Math.abs(cy - acc.cursorY), 2);
+
+      if (d != null && d < acc.dist) {
+         acc.dist = d;
+         acc.snapX = x;
+         acc.snapY = y;
+         acc.snapRecord = p;
+      }
+   }
+
+   onReduce(acc, instance) {
+      instance.set("snapX", acc.snapX);
+      instance.set("snapY", acc.snapY);
+      instance.set("snapRecord", acc.snapRecord);
+   }
+}
+
+SnapPointFinder.prototype.maxDistance = 50;
+SnapPointFinder.prototype.convertX = (x) => x;
+SnapPointFinder.prototype.convertY = (y) => y;

package/src/charts/helpers/ValueAtFinder.d.ts

@@ -1,17 +1,16 @@
-import * as Cx from '../../core';
-import {PointReducerProps} from './PointReducer';
-
-interface ValueAtFinderProps extends PointReducerProps {
-
-   /* Probe value. */
-   at?: Cx.NumberProp,
-
-   /* A binding used to receive the measured value */
-   value?: Cx.Bind,
-
-   /* A function used to convert x values into numeric format. Commonly used with dates. */
-   convert?: (value: any) => number
-}
-
-/** Calculate value at a given point on the graph */
-export class ValueAtFinder extends Cx.Widget<ValueAtFinderProps> {}
+import * as Cx from "../../core";
+import { PointReducerProps } from "./PointReducer";
+
+interface ValueAtFinderProps extends PointReducerProps {
+   /* X axis probe value. */
+   at?: Cx.NumberProp | Cx.StringProp;
+
+   /* A binding used to receive the measured y axis value */
+   value?: Cx.Bind | Cx.AccessorChain<number>;
+
+   /* A function used to convert x values into numeric format. Commonly used with dates. */
+   convert?: (value: number | string) => number;
+}
+
+/** Calculate value at a given point on the graph */
+export class ValueAtFinder extends Cx.Widget<ValueAtFinderProps> {}