cx 25.5.2 → 25.6.0

package/dist/widgets.js

@@ -10884,6 +10884,7 @@ MonthPicker.prototype.range = false;
 MonthPicker.prototype.startYear = 1980;
 MonthPicker.prototype.endYear = 2030;
 MonthPicker.prototype.bufferSize = 15;
+MonthPicker.prototype.hideQuarters = false;
 
 // Localization
 MonthPicker.prototype.maxValueErrorText = "Select {0:d} or before.";
@@ -10916,7 +10917,7 @@ var MonthPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			cursorQuarter: cursor.getMonth() / 3,
 			column: "M",
 			start: widget.startYear,
-			end: widget.startYear + widget.bufferSize,
+			end: Math.min(widget.startYear + widget.bufferSize, widget.endYear),
 		};
 		_this.handleMouseDown = _this.handleMouseDown.bind(_this);
 		_this.handleMouseUp = _this.handleMouseUp.bind(_this);
@@ -11237,13 +11238,14 @@ var MonthPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 	};
 	_proto2.render = function render() {
 		var _this3 = this;
-		var _this$props$instance = this.props.instance,
-			data = _this$props$instance.data,
-			widget = _this$props$instance.widget;
+		var instance = this.props.instance;
+		var data = instance.data,
+			widget = instance.widget;
 		var CSS = widget.CSS,
 			baseClass = widget.baseClass,
 			startYear = widget.startYear,
-			endYear = widget.endYear;
+			endYear = widget.endYear,
+			hideQuarters = widget.hideQuarters;
 		var years = [];
 		var _this$state2 = this.state,
 			start = _this$state2.start,
@@ -11327,23 +11329,27 @@ var MonthPickerComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 						),
 					);
 				}
-				row.push(
-					/*#__PURE__*/ jsx(
-						"th",
-						{
-							className: CSS.state({
-								cursor:
-									showCursor && this.state.column == "Q" && y == this.state.cursorYear && q == this.state.cursorQuarter,
-							}),
-							"data-point": "Y-" + y + "-Q-" + q,
-							onMouseEnter: this.handleMouseEnter,
-							onMouseDown: this.handleMouseDown,
-							onMouseUp: this.handleMouseUp,
-							children: "Q" + (q + 1),
-						},
-						"q" + q,
-					),
-				);
+				if (!hideQuarters)
+					row.push(
+						/*#__PURE__*/ jsx(
+							"th",
+							{
+								className: CSS.state({
+									cursor:
+										showCursor &&
+										this.state.column == "Q" &&
+										y == this.state.cursorYear &&
+										q == this.state.cursorQuarter,
+								}),
+								"data-point": "Y-" + y + "-Q-" + q,
+								onMouseEnter: this.handleMouseEnter,
+								onMouseDown: this.handleMouseDown,
+								onMouseUp: this.handleMouseUp,
+								children: "Q" + (q + 1),
+							},
+							"q" + q,
+						),
+					);
 				rows.push(row);
 			}
 			years.push(rows);
@@ -12159,7 +12165,7 @@ var MonthField = /*#__PURE__*/ (function (_Field) {
 			{
 				data: instance.data,
 				instance: instance,
-				monthPicker: {
+				monthPicker: _extends({}, this.monthPickerOptions, {
 					value: this.value,
 					from: this.from,
 					to: this.to,
@@ -12172,7 +12178,7 @@ var MonthField = /*#__PURE__*/ (function (_Field) {
 					maxExclusiveErrorText: this.maxExclusiveErrorText,
 					minValueErrorText: this.minValueErrorText,
 					minExclusiveErrorText: this.minExclusiveErrorText,
-				},
+				}),
 				label: this.labelPlacement && getContent(this.renderLabel(context, instance, "label")),
 				help: this.helpPlacement && getContent(this.renderHelp(context, instance, "help")),
 				icon: this.renderIcon(context, instance, "icon"),

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "25.5.2",
+   "version": "25.6.0",
    "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/LineGraph.js

@@ -103,7 +103,7 @@ export class LineGraph extends Widget {
          if (context.pointReducer && isArray(data.data)) {
             data.data.forEach((p, index) => {
                if (data.area && this.y0Field)
-                  context.pointReducer(p[this.xField], p[this.y0Field], data.name, p, data, index);
+                  context.pointReducer(p[this.xField], p[this.y0Field], data.name, p, data.data, index);
                context.pointReducer(p[this.xField], p[this.yField], data.name, p, data.data, index);
             });
          }

package/src/charts/axis/NumericAxis.d.ts

@@ -1,46 +1,46 @@
-import * as Cx from "../../core";
-import { AxisProps } from "./Axis";
-
-interface NumericAxisProps extends AxisProps {
-   /** Minimum value. */
-   min?: Cx.NumberProp;
-
-   /** Maximum value. */
-   max?: Cx.NumberProp;
-
-   /** Set to `true` to normalize the input range. */
-   normalized?: Cx.BooleanProp;
-
-   /** Number used to divide values before rendering axis labels. Default value is `1`. */
-   labelDivisor?: Cx.NumberProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `numericaxis`. */
-   baseClass?: string;
-
-   tickDivisions?: Array<number[]>;
-
-   /** A number ranged between `0-2`. `0` means that the range is aligned with the lowest ticks. Default value is `1`, which means that the range is aligned with medium ticks. Use value `2` to align with major ticks. */
-   snapToTicks?: 0 | 1 | 2;
-
-   /** Value format. Default is `n`. */
-   format?: Cx.StringProp;
-
-   /** Size of a zone reserved for labels for both lower and upper end of the axis. */
-   deadZone?: Cx.NumberProp;
-
-   /** Size of a zone reserved for labels near the upper (higher) end of the axis.  */
-   upperDeadZone?: Cx.NumberProp;
-
-   /** Size of a zone reserved for labels near the lower end of the axis.   */
-   lowerDeadZone?: Cx.NumberProp;
-
-   /** Specifies minimum value increment between labels. Useful when formatting is not flexible enough, i.e. set to 1 for integer axes to avoid duplicate labels. */
-   minLabelTickSize?: number;
-}
-
-export class NumericAxis extends Cx.Widget<NumericAxisProps> {
-   static XY(): {
-      x: { type: NumericAxis };
-      y: { type: NumericAxis; vertical: true };
-   };
-}
+import * as Cx from "../../core";
+import { AxisProps } from "./Axis";
+
+interface NumericAxisProps extends AxisProps {
+   /** Minimum value. */
+   min?: Cx.NumberProp;
+
+   /** Maximum value. */
+   max?: Cx.NumberProp;
+
+   /** Set to `true` to normalize the input range. */
+   normalized?: Cx.BooleanProp;
+
+   /** Number used to divide values before rendering axis labels. Default value is `1`. */
+   labelDivisor?: Cx.NumberProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `numericaxis`. */
+   baseClass?: string;
+
+   tickDivisions?: Array<number[]>;
+
+   /** A number ranged between `0-2`. `0` means that the range is aligned with the lowest ticks. Default value is `1`, which means that the range is aligned with medium ticks. Use value `2` to align with major ticks. */
+   snapToTicks?: 0 | 1 | 2;
+
+   /** Value format. Default is `n`. */
+   format?: Cx.StringProp;
+
+   /** Size of a zone reserved for labels for both lower and upper end of the axis. */
+   deadZone?: Cx.NumberProp;
+
+   /** Size of a zone reserved for labels near the upper (higher) end of the axis.  */
+   upperDeadZone?: Cx.NumberProp;
+
+   /** Size of a zone reserved for labels near the lower end of the axis.   */
+   lowerDeadZone?: Cx.NumberProp;
+
+   /** Specifies minimum value increment between labels. Useful when formatting is not flexible enough, i.e. set to 1 for integer axes to avoid duplicate labels. */
+   minLabelTickSize?: number;
+}
+
+export class NumericAxis extends Cx.Widget<NumericAxisProps> {
+   static XY(): {
+      x: { type: NumericAxis };
+      y: { type: NumericAxis; vertical: true };
+   };
+}

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

@@ -10,6 +10,15 @@ export interface PointReducerProps extends Cx.PureContainerProps {
 
    /** A callback function used to process accumulated information and write results. */
    onReduce?: (accumulator: Cx.Record, instance?: Instance) => void;
+
+   /** Parameters that trigger filter predicate re-creation. */
+   filterParams?: StructuredProp;
+
+   /** A callback function used to create a predicate for filtering points. */
+   onCreatePointFilter?: (
+      filterParams: any,
+      instance: Instance,
+   ) => (x: number, y: number, name: string, data: any, array?: any[], index?: number) => boolean;
 }
 
 export class PointReducer extends Cx.Widget<PointReducerProps> {}

package/src/charts/helpers/PointReducer.js

@@ -1,34 +1,48 @@
 import { PureContainer } from "../../ui/PureContainer";
 
 export class PointReducer extends PureContainer {
+   declareData() {
+      super.declareData(...arguments, {
+         filterParams: {
+            structured: true,
+         },
+      });
+   }
+
+   prepareData(context, instance) {
+      super.prepareData(context, instance);
+
+      instance.resetAccumulator = () => {
+         let accumulator = {};
+         if (this.onInitAccumulator) {
+            instance.invoke("onInitAccumulator", accumulator, instance);
+            instance.accumulator = accumulator;
+         }
+      };
+
+      if (this.onCreatePointFilter)
+         instance.pointFilter = instance.invoke("onCreatePointFilter", instance.data.filterParams, instance);
+   }
+
    explore(context, instance) {
+      instance.resetAccumulator();
+
       let parentPointReducer = context.pointReducer;
       instance.parentPointTracker = parentPointReducer;
 
-      if (!instance.pointReducer) {
-         let onMap = this.onMap && instance.getCallback("onMap");
-         let accumulator = {};
-         instance.resetAccumulator = () => {
-            accumulator = {};
-            if (this.onInitAccumulator) instance.invoke("onInitAccumulator", accumulator, instance);
-         };
-
-         let pointFilter = null;
-         if (this.onCreatePointFilter) pointFilter = instance.invoke("onCreatePointFilter", instance);
-
-         instance.pointReducer = (x, y, name, data, array, index) => {
-            if (!pointFilter || pointFilter(x, y, name, data, array, index))
-               onMap(accumulator, x, y, name, data, array, index);
-            if (parentPointReducer) parentPointReducer(x, y, name, data, array, index);
-         };
-         instance.write = () => {
-            if (this.onReduce) instance.invoke("onReduce", accumulator, instance);
-         };
-      }
+      let pointFilter = instance.pointFilter;
+      let accumulator = instance.accumulator;
+      let onMap = this.onMap && instance.getCallback("onMap");
+      instance.pointReducer = (x, y, name, data, array, index) => {
+         if (!pointFilter || pointFilter(x, y, name, data, array, index))
+            onMap(accumulator, x, y, name, data, array, index);
+         if (parentPointReducer) parentPointReducer(x, y, name, data, array, index);
+      };
+      instance.write = () => {
+         if (this.onReduce) instance.invoke("onReduce", accumulator, instance);
+      };
 
-      instance.resetAccumulator();
       context.push("pointReducer", instance.pointReducer);
-
       super.explore(context, instance);
    }
 

package/src/data/Ref.d.ts

@@ -1,24 +1,24 @@
-import { View } from "./View";
-
-interface RefConfig {
-   store: View;
-   path: string;
-}
-
-export class Ref<T = any> {
-   constructor(config: RefConfig);
-
-   init(value: T): boolean;
-
-   set(value: T): boolean;
-
-   delete(): boolean;
-
-   get(): T;
-
-   toggle(): boolean;
-
-   update(updateFn: (currentValue: T, ...args) => T, ...args): boolean;
-
-   ref<ST = any>(path: string): Ref<ST>;
-}
+import { View } from "./View";
+
+interface RefConfig {
+   store: View;
+   path: string;
+}
+
+export class Ref<T = any> {
+   constructor(config: RefConfig);
+
+   init(value: T): boolean;
+
+   set(value: T): boolean;
+
+   delete(): boolean;
+
+   get(): T;
+
+   toggle(): boolean;
+
+   update(updateFn: (currentValue: T, ...args) => T, ...args): boolean;
+
+   ref<ST = any>(path: string): Ref<ST>;
+}

package/src/data/Ref.spec.js

@@ -1,79 +1,79 @@
-import assert from "assert";
-import { Store } from "./Store";
-import { Ref } from "./Ref";
-import { append } from "./ops/append";
-import { StoreRef } from "./StoreRef";
-
-const getStore = () => {
-   return new Store({
-      data: {
-         a: 3,
-         item: {
-            firstName: "Jack",
-         },
-         array: [],
-      },
-   });
-};
-
-describe("Ref", () => {
-   it("can init data", () => {
-      let store = getStore();
-      let b = store.ref("b", 1);
-      assert.equal(store.get("b"), 1);
-   });
-
-   it("can set data", () => {
-      let store = getStore();
-      let b = store.ref("b", 1);
-      b.set(2);
-      assert.equal(store.get("b"), 2);
-   });
-
-   it("can delete data", () => {
-      let store = getStore();
-      let b = store.ref("item");
-      b.delete();
-      assert.equal(store.get("item"), undefined);
-   });
-
-   it("can cast itself to a ref of another type", () => {
-      class ArrayRef extends StoreRef {
-         append(...args) {
-            this.update(append, ...args);
-         }
-      }
-      let store = getStore();
-      let array = store.ref("array").as(ArrayRef);
-      array.append(1, 2, 3);
-      assert.deepEqual(array.get(), [1, 2, 3]);
-   });
-
-   it("can extend itself in a functional way", () => {
-      let store = getStore();
-      let array = store.ref("array").as(({ update, set, path }) => ({
-         append(...args) {
-            update(path, append, ...args);
-         },
-
-         clear() {
-            set(path, []);
-         },
-      }));
-      array.append(1, 2, 3);
-      assert.deepEqual(array.get(), [1, 2, 3]);
-      array.clear();
-      assert.deepEqual(array.get(), []);
-   });
-
-   it("can get subrefs", () => {
-      let store = getStore();
-      let person = new Ref({
-         get: () => store.get("person"),
-         set: (value) => store.set("person", value),
-      });
-      let name = person.ref("name");
-      name.set("John");
-      assert.equal(name.get(), "John");
-   });
-});
+import assert from "assert";
+import { Store } from "./Store";
+import { Ref } from "./Ref";
+import { append } from "./ops/append";
+import { StoreRef } from "./StoreRef";
+
+const getStore = () => {
+   return new Store({
+      data: {
+         a: 3,
+         item: {
+            firstName: "Jack",
+         },
+         array: [],
+      },
+   });
+};
+
+describe("Ref", () => {
+   it("can init data", () => {
+      let store = getStore();
+      let b = store.ref("b", 1);
+      assert.equal(store.get("b"), 1);
+   });
+
+   it("can set data", () => {
+      let store = getStore();
+      let b = store.ref("b", 1);
+      b.set(2);
+      assert.equal(store.get("b"), 2);
+   });
+
+   it("can delete data", () => {
+      let store = getStore();
+      let b = store.ref("item");
+      b.delete();
+      assert.equal(store.get("item"), undefined);
+   });
+
+   it("can cast itself to a ref of another type", () => {
+      class ArrayRef extends StoreRef {
+         append(...args) {
+            this.update(append, ...args);
+         }
+      }
+      let store = getStore();
+      let array = store.ref("array").as(ArrayRef);
+      array.append(1, 2, 3);
+      assert.deepEqual(array.get(), [1, 2, 3]);
+   });
+
+   it("can extend itself in a functional way", () => {
+      let store = getStore();
+      let array = store.ref("array").as(({ update, set, path }) => ({
+         append(...args) {
+            update(path, append, ...args);
+         },
+
+         clear() {
+            set(path, []);
+         },
+      }));
+      array.append(1, 2, 3);
+      assert.deepEqual(array.get(), [1, 2, 3]);
+      array.clear();
+      assert.deepEqual(array.get(), []);
+   });
+
+   it("can get subrefs", () => {
+      let store = getStore();
+      let person = new Ref({
+         get: () => store.get("person"),
+         set: (value) => store.set("person", value),
+      });
+      let name = person.ref("name");
+      name.set("John");
+      assert.equal(name.get(), "John");
+   });
+});

package/src/data/StoreRef.spec.js

@@ -1,24 +1,24 @@
-import assert from "assert";
-import { Store } from "./Store";
-import { StoreRef } from "./StoreRef";
-
-const getStore = () => {
-   return new Store({
-      data: {
-         person: {
-            name: "Jack",
-         },
-      },
-   });
-};
-
-describe("StoreRef", () => {
-   it("can access child refs", () => {
-      let store = getStore();
-      let person = store.ref("person");
-      let name = person.ref("name");
-      assert.equal(name.get("person"), "Jack");
-      name.set("John");
-      assert.equal(name.get("person"), "John");
-   });
-});
+import assert from "assert";
+import { Store } from "./Store";
+import { StoreRef } from "./StoreRef";
+
+const getStore = () => {
+   return new Store({
+      data: {
+         person: {
+            name: "Jack",
+         },
+      },
+   });
+};
+
+describe("StoreRef", () => {
+   it("can access child refs", () => {
+      let store = getStore();
+      let person = store.ref("person");
+      let name = person.ref("name");
+      assert.equal(name.get("person"), "Jack");
+      name.set("John");
+      assert.equal(name.get("person"), "John");
+   });
+});

package/src/data/StructuredDataAccessor.d.ts

@@ -1,7 +1,7 @@
-export interface StructuredDataAccessor {
-   getSelector(): (data: Cx.Record) => Cx.Record;
-   get(): Cx.Record;
-   setItem(key: string, value: any): boolean;
-   containsKey(key): string;
-   getKeys(): string[];
-}
+export interface StructuredDataAccessor {
+   getSelector(): (data: Cx.Record) => Cx.Record;
+   get(): Cx.Record;
+   setItem(key: string, value: any): boolean;
+   containsKey(key): string;
+   getKeys(): string[];
+}