cx 24.3.2 → 24.3.3

package/dist/widgets.js

@@ -15439,7 +15439,7 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 					(c.header3 && c.header3.resizable)
 				)
 					row.hasResizableColumns = true;
-				if (c.aggregate && (c.aggregateField || isDefined(c.aggregateValue))) {
+				if (c.aggregate && c.aggregateAlias && (c.aggregateField || isDefined(c.aggregateValue))) {
 					aggregates[c.aggregateAlias] = {
 						value: isDefined(c.aggregateValue)
 							? c.aggregateValue
@@ -15775,7 +15775,10 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 				var headerTBody = e.target.parentElement.parentElement.parentElement;
 				var uniqueColId = e.currentTarget.dataset.uniqueColId;
 				var headerCell = findFirstChild(headerTBody, function (el) {
-					return el.tagName == "TH" && el.dataset && el.dataset.uniqueColId == uniqueColId;
+					var _el$dataset;
+					return (
+						el.tagName == "TH" && ((_el$dataset = el.dataset) == null ? void 0 : _el$dataset.uniqueColId) == uniqueColId
+					);
 				});
 				var scrollAreaEl = headerTBody.parentElement.parentElement;
 				var gridEl = scrollAreaEl.parentElement;
@@ -15868,14 +15871,13 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 		var headerRows = [];
 		if (!header) return null;
 		var skip = {};
-		var lineIndex = 0;
-		header.children.forEach(function (line) {
+		header.children.forEach(function (line, lineIndex) {
 			var empty = [true, true, true];
 			var result = [[], [], []];
 			line.children.forEach(function (hdinst, colIndex) {
 				var hdwidget = hdinst.widget;
 				var _loop = function _loop(l) {
-						var colKey = lineIndex + l + "-" + colIndex;
+						var colKey = lineIndex + "-" + colIndex + "-" + l;
 						if (skip[colKey]) return 0; // continue
 						if (Boolean(hdinst.data.fixed) != fixedColumns) return 0; // continue
 						var header = hdinst.components["header" + (l + 1)];
@@ -15932,7 +15934,8 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 								colSpan = header.data.colSpan;
 								rowSpan = header.data.rowSpan;
 								for (var r = 0; r < header.data.rowSpan; r++)
-									for (var c = 0; c < header.data.colSpan; c++) skip[lineIndex + l + r + "-" + (colIndex + c)] = true;
+									for (var c = 0; c < header.data.colSpan; c++)
+										skip[lineIndex + "-" + (colIndex + c) + "-" + (l + r)] = true;
 							}
 							if ((hdwidget.resizable || header.data.resizable) && header.data.colSpan < 2) {
 								resizer = _this3.renderResizer(instance, hdinst, header, colIndex);
@@ -16000,7 +16003,6 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 			result = result.filter(function (_, i) {
 				return !empty[i];
 			});
-			lineIndex += result.length;
 			if (result[0]) {
 				if (fixed && !fixedColumns) {
 					result[0].push(
@@ -16157,7 +16159,9 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 					var v,
 						c = ci.widget,
 						colSpan,
-						pad;
+						pad,
+						cls = "",
+						style = null;
 					if (c.caption) {
 						if (c.caption.children)
 							v = /*#__PURE__*/ jsx(Cx, {
@@ -16166,10 +16170,16 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 								parentInstance: instance,
 								subscribe: true,
 							});
-						else v = c.caption.value(data);
+						else {
+							v = c.caption.value(data);
+							var fmt = c.caption.format(data);
+							if (fmt) v = Format.value(v, fmt);
+						}
 						pad = c.caption.pad;
 						colSpan = c.caption.colSpan;
 						empty = false;
+						cls = CSS.expand(c.caption["class"](data)) || "";
+						style = parseStyle$1(c.caption.style(data));
 						if (c.caption.expand) {
 							colSpan = 1;
 							for (
@@ -16182,12 +16192,12 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 								colSpan++;
 						}
 						if (colSpan > 1) skip = colSpan - 1;
-					} else if (c.aggregate && c.aggregateField && c.caption !== false) {
+					} else if (c.aggregate && c.aggregateAlias && c.caption !== false) {
 						empty = false;
-						v = group[c.aggregateField];
+						v = group[c.aggregateAlias];
 						if (isString(ci.data.format)) v = Format.value(v, ci.data.format);
 					}
-					var cls = "";
+					if (cls) cls += " ";
 					if (c.align) cls += CSS.state("aligned-" + c.align);
 					if (pad !== false) cls += (cls ? " " : "") + CSS.state("pad");
 					return /*#__PURE__*/ jsx(
@@ -16195,6 +16205,7 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 						{
 							className: cls,
 							colSpan: colSpan,
+							style: style,
 							children: v,
 						},
 						i,
@@ -16273,9 +16284,9 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 							colSpan++;
 					}
 					if (colSpan > 1) skip = colSpan - 1;
-				} else if (c.aggregate && c.aggregateField && c.footer !== false) {
+				} else if (c.aggregate && c.aggregateAlias && c.footer !== false) {
 					empty = false;
-					v = group[c.aggregateField];
+					v = group[c.aggregateAlias];
 					if (isString(ci.data.format)) v = Format.value(v, ci.data.format);
 				}
 				if (cls) cls += " ";
@@ -16640,7 +16651,6 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			mod["draggable"] = draggable;
 			mod["non-draggable"] = !draggable;
 			var wrap = function wrap(children) {
-				var skipCells = {};
 				return /*#__PURE__*/ jsx(
 					GridRowComponent,
 					{
@@ -16690,20 +16700,6 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 												maxWidth: width + "px",
 											});
 										}
-										if (skipCells[line + "-" + cellIndex]) return null;
-										if (data.colSpan > 1 || data.rowSpan > 1) {
-											for (var r = line; r < line + ((_data$rowSpan = data.rowSpan) != null ? _data$rowSpan : 1); r++) {
-												var _data$rowSpan;
-												for (
-													var c = cellIndex;
-													c < cellIndex + ((_data$colSpan = data.colSpan) != null ? _data$colSpan : 1);
-													c++
-												) {
-													var _data$colSpan;
-													skipCells[r + "-" + c] = true;
-												}
-											}
-										}
 										if (cellWrap) content = cellWrap(content);
 										return /*#__PURE__*/ jsx(
 											"td",
@@ -18389,7 +18385,12 @@ var GridColumnHeader = /*#__PURE__*/ (function (_Widget) {
 			if (children) {
 				delete this.caption.items;
 				this.caption.children = Widget.create(children);
-			} else this.caption.value = getSelector(this.caption.value);
+			} else {
+				this.caption.value = getSelector(this.caption.value);
+				this.caption["class"] = getSelector(this.caption["class"]);
+				this.caption.style = getSelector(this.caption.style);
+				this.caption.format = getSelector(this.caption.format);
+			}
 		}
 		_Widget.prototype.init.call(this);
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.3.2",
+   "version": "24.3.3",
    "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/Swimlanes.d.ts

@@ -0,0 +1,41 @@
+import * as Cx from "../core";
+import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
+
+interface SwimlanesProps extends BoundedObjectProps {
+   /**
+    * 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`.
+    * Set to `false` to hide the grid lines in x direction.
+    */
+   xAxis?: string | boolean;
+
+   /**
+    * 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`.
+    * Set to `false` to hide the grid lines in y direction.
+    */
+   yAxis?: string | boolean;
+
+   /** Base CSS class to be applied to the element. Defaults to `swimlanes`. */
+   baseClass?: string;
+
+   /** Represents a swimlane size. */
+   size?: number;
+
+   /**
+    * Represents a swimlane step. Define a step on which a swimlane will be rendered. (eg. step 2 will render
+    * every second swimlane in the chart.)
+    */
+   step?: number;
+
+   /** Switch to vertical swimlanes. */
+   vertical?: boolean;
+
+   /**The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
+   laneOffset?: number;
+
+   /** Style object applied to the swimlanes. */
+   laneStyle?: StyleProp;
+}
+
+export class Swimlanes extends Cx.Widget<SwimlanesProps> {}

package/src/charts/Swimlanes.js

@@ -0,0 +1,112 @@
+import { BoundedObject } from "../svg/BoundedObject";
+import { parseStyle } from "../util/parseStyle";
+import { VDOM } from "../ui/Widget";
+
+export class Swimlanes extends BoundedObject {
+   init() {
+      this.laneStyle = parseStyle(this.laneStyle);
+      super.init();
+   }
+   declareData(...args) {
+      super.declareData(...args, {
+         size: undefined,
+         step: undefined,
+         laneOffset: undefined,
+         laneStyle: { structured: true },
+      });
+   }
+
+   explore(context, instance) {
+      super.explore(context, instance);
+      instance.xAxis = context.axes[this.xAxis];
+      instance.yAxis = context.axes[this.yAxis];
+   }
+
+   prepare(context, instance) {
+      super.prepare(context, instance);
+      let { xAxis, yAxis } = instance;
+      if ((xAxis && xAxis.shouldUpdate) || (yAxis && yAxis.shouldUpdate)) instance.markShouldUpdate(context);
+   }
+
+   render(context, instance, key) {
+      let { data, xAxis, yAxis } = instance;
+      let { bounds } = data;
+      let { CSS, baseClass } = this;
+
+      let axis = this.vertical ? xAxis : yAxis;
+
+      if (!axis) return null;
+
+      let min, max, valueFunction;
+
+      if (axis.scale) {
+         min = axis.scale.min;
+         max = axis.scale.max;
+         let clamp = (value) => [Math.max(min, Math.min(max, value)), 0];
+         valueFunction = (value, offset) => clamp(value + offset);
+      } else if (axis.valueList) {
+         min = 0;
+         max = axis.valueList.length;
+         valueFunction = (value, offset) => [axis.valueList[value], offset];
+      }
+
+      if (!(min < max)) return null;
+
+      let rects = [];
+
+      let at = Math.ceil(min / data.step) * data.step;
+      let index = 0;
+
+      let rectClass = CSS.element(baseClass, "lane");
+
+      while (at - data.size / 2 < max) {
+         let c1 = axis.map(...valueFunction(at, -data.size / 2 + data.laneOffset));
+         let c2 = axis.map(...valueFunction(at, +data.size / 2 + data.laneOffset));
+         if (this.vertical) {
+            rects.push(
+               <rect
+                  key={index++}
+                  y={bounds.t}
+                  x={Math.min(c1, c2)}
+                  height={bounds.b - bounds.t}
+                  width={Math.abs(c1 - c2)}
+                  className={rectClass}
+                  style={data.laneStyle}
+               />,
+            );
+         } else {
+            rects.push(
+               <rect
+                  key={index++}
+                  x={bounds.l}
+                  y={Math.min(c1, c2)}
+                  width={bounds.r - bounds.l}
+                  height={Math.abs(c1 - c2)}
+                  className={rectClass}
+                  style={data.laneStyle}
+               />,
+            );
+         }
+
+         at += data.step;
+      }
+
+      return (
+         <g key={key} className={data.classNames}>
+            {rects}
+         </g>
+      );
+   }
+}
+
+Swimlanes.prototype.xAxis = "x";
+Swimlanes.prototype.yAxis = "y";
+Swimlanes.prototype.anchors = "0 1 1 0";
+Swimlanes.prototype.baseClass = "swimlanes";
+Swimlanes.prototype.size = 0.5;
+Swimlanes.prototype.laneOffset = 0;
+Swimlanes.prototype.step = 1;
+Swimlanes.prototype.vertical = false;
+Swimlanes.prototype.styled = true;
+
+BoundedObject.alias("swimlanes", Swimlanes);

package/src/charts/Swimlanes.scss

@@ -0,0 +1,14 @@
+@mixin cx-swimlanes($name: "swimlanes", $besm: $cx-besm, $lane-color: $cx-default-swimlanes-lane-background-color) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$element}#{$name}-lane {
+      fill: $lane-color;
+      stroke: none;
+   }
+}
+
+@if (cx-should-include("cx/charts/Swimlanes")) {
+   @include cx-swimlanes();
+}

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

@@ -1,96 +1,96 @@
-import { Instance } from "./../../ui/Instance.d";
-import * as Cx from "../../core";
-import { BoundedObject, BoundedObjectProps } from "../../svg/BoundedObject";
-
-export interface AxisProps extends BoundedObjectProps {
-   /** Set to `true` for vertical axes. */
-   vertical?: boolean;
-
-   /** Used as a secondary axis. Displayed at the top/right. */
-   secondary?: boolean;
-
-   /** When set to `true`, the values are displayed in descending order. */
-   inverted?: Cx.BooleanProp;
-
-   /** When set to `true`, rendering of visual elements of the axis, such as ticks and labels, is skipped, but their function is preserved. */
-   hidden?: boolean;
-
-   tickSize?: number;
-   minTickDistance?: number;
-   minLabelDistanceVertical?: number;
-   minLabelDistanceHorizontal?: number;
-
-   /** Distance between labels and the axis. */
-   labelOffset?: number | string;
-
-   /** Label rotation angle in degrees. */
-   labelRotation?: Cx.Prop<number | string>;
-
-   /** Label text-anchor value. Allowed values are start, end and middle. Default value is set based on the value of vertical and secondary flags. */
-   labelAnchor?: "start" | "end" | "middle" | "auto";
-
-   /** Horizontal text offset. */
-   labelDx?: number | string;
-
-   /** Vertical text offset which can be used for vertical alignment. */
-   labelDy?: number | string;
-
-   /** Set to `true` to break long labels into multiple lines. Default value is `false`. Text is split at space characters. See also `labelMaxLineLength` and `labelLineCountDyFactor`. */
-   labelWrap?: boolean;
-
-   /**
-    * Used for vertical adjustment of multi-line labels. Default value is `auto` which means
-    * that value is initialized based on axis configuration. Value `0` means that label will grow towards
-    * the bottom of the screen. Value `-1` will make labels to grow towards the top of the screen.
-    * `-0.5` will make labels vertically centered.
-    */
-   labelLineCountDyFactor?: number | string;
-
-   /**
-    * Used for vertical adjustment of multi-line labels. Default value is 1 which means
-    * that labels are stacked without any space between them. Value of 1.4 will add 40% of the label height as a space between labels.
-    */
-   labelLineHeight?: number | string;
-
-   /** If `labelWrap` is on, this number is used as a measure to split labels into multiple lines. Default value is `10`. */
-   labelMaxLineLength?: number;
-
-   /** Set to true to hide the axis labels. */
-   hideLabels?: boolean;
-
-   /** Set to true to hide the axis line. */
-   hideLine?: boolean;
-
-   /** Set to true to hide the axis ticks. */
-   hideTicks?: boolean;
-
-   /** Additional CSS style to be applied to the axis line. */
-   lineStyle?: Cx.StyleProp;
-
-   /** Additional CSS style to be applied to the axis ticks. */
-   tickStyle?: Cx.StyleProp;
-
-   /** Additional CSS style to be applied to the axis labels. */
-   labelStyle?: Cx.StyleProp;
-
-   /** Additional CSS class to be applied to the axis line. */
-   lineClass?: Cx.ClassProp;
-
-   /** Additional CSS class to be applied to the axis ticks. */
-   tickClass?: Cx.ClassProp;
-
-   /** Additional CSS class to be applied to the axis labels. */
-   labelClass?: Cx.ClassProp;
-
-   onMeasured?: (info: any, instance: Instance) => void;
-
-   /** A function used to create a formatter function for axis labels. See Complex Labels example in the CxJS documentation for more info. */
-   onCreateLabelFormatter?:
-      | string
-      | ((
-           context: any,
-           instance: Instance
-        ) => (formattedValue: string, value: any) => { text: string; style?: any; className?: string }[]);
-}
-
-export class Axis extends BoundedObject {}
+import { Instance } from "./../../ui/Instance.d";
+import * as Cx from "../../core";
+import { BoundedObject, BoundedObjectProps } from "../../svg/BoundedObject";
+
+export interface AxisProps extends BoundedObjectProps {
+   /** Set to `true` for vertical axes. */
+   vertical?: boolean;
+
+   /** Used as a secondary axis. Displayed at the top/right. */
+   secondary?: boolean;
+
+   /** When set to `true`, the values are displayed in descending order. */
+   inverted?: Cx.BooleanProp;
+
+   /** When set to `true`, rendering of visual elements of the axis, such as ticks and labels, is skipped, but their function is preserved. */
+   hidden?: boolean;
+
+   tickSize?: number;
+   minTickDistance?: number;
+   minLabelDistanceVertical?: number;
+   minLabelDistanceHorizontal?: number;
+
+   /** Distance between labels and the axis. */
+   labelOffset?: number | string;
+
+   /** Label rotation angle in degrees. */
+   labelRotation?: Cx.Prop<number | string>;
+
+   /** Label text-anchor value. Allowed values are start, end and middle. Default value is set based on the value of vertical and secondary flags. */
+   labelAnchor?: "start" | "end" | "middle" | "auto";
+
+   /** Horizontal text offset. */
+   labelDx?: number | string;
+
+   /** Vertical text offset which can be used for vertical alignment. */
+   labelDy?: number | string;
+
+   /** Set to `true` to break long labels into multiple lines. Default value is `false`. Text is split at space characters. See also `labelMaxLineLength` and `labelLineCountDyFactor`. */
+   labelWrap?: boolean;
+
+   /**
+    * Used for vertical adjustment of multi-line labels. Default value is `auto` which means
+    * that value is initialized based on axis configuration. Value `0` means that label will grow towards
+    * the bottom of the screen. Value `-1` will make labels to grow towards the top of the screen.
+    * `-0.5` will make labels vertically centered.
+    */
+   labelLineCountDyFactor?: number | string;
+
+   /**
+    * Used for vertical adjustment of multi-line labels. Default value is 1 which means
+    * that labels are stacked without any space between them. Value of 1.4 will add 40% of the label height as a space between labels.
+    */
+   labelLineHeight?: number | string;
+
+   /** If `labelWrap` is on, this number is used as a measure to split labels into multiple lines. Default value is `10`. */
+   labelMaxLineLength?: number;
+
+   /** Set to true to hide the axis labels. */
+   hideLabels?: boolean;
+
+   /** Set to true to hide the axis line. */
+   hideLine?: boolean;
+
+   /** Set to true to hide the axis ticks. */
+   hideTicks?: boolean;
+
+   /** Additional CSS style to be applied to the axis line. */
+   lineStyle?: Cx.StyleProp;
+
+   /** Additional CSS style to be applied to the axis ticks. */
+   tickStyle?: Cx.StyleProp;
+
+   /** Additional CSS style to be applied to the axis labels. */
+   labelStyle?: Cx.StyleProp;
+
+   /** Additional CSS class to be applied to the axis line. */
+   lineClass?: Cx.ClassProp;
+
+   /** Additional CSS class to be applied to the axis ticks. */
+   tickClass?: Cx.ClassProp;
+
+   /** Additional CSS class to be applied to the axis labels. */
+   labelClass?: Cx.ClassProp;
+
+   onMeasured?: (info: any, instance: Instance) => void;
+
+   /** A function used to create a formatter function for axis labels. See Complex Labels example in the CxJS documentation for more info. */
+   onCreateLabelFormatter?:
+      | string
+      | ((
+           context: any,
+           instance: Instance
+        ) => (formattedValue: string, value: any) => { text: string; style?: any; className?: string }[]);
+}
+
+export class Axis extends BoundedObject {}