cx 24.3.2 → 24.3.4

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
@@ -15868,14 +15868,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 +15931,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 +16000,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 +16156,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 +16167,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 +16189,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 +16202,7 @@ var Grid = /*#__PURE__*/ (function (_Container) {
 						{
 							className: cls,
 							colSpan: colSpan,
+							style: style,
 							children: v,
 						},
 						i,
@@ -16273,9 +16281,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 += " ";
@@ -16524,6 +16532,7 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			cursorCellIndex: 0,
 			focused: widget.focused,
 			dropInsertionIndex: null,
+			dropNextToTheRowAbove: null,
 			start: 0,
 			end: end,
 		};
@@ -16640,7 +16649,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 +16698,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",
@@ -16925,7 +16919,48 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 				},
 				"dropzone",
 			);
-			children.splice(this.state.dropInsertionIndex, 0, dragInsertionRow);
+			var index = 0;
+			while (
+				index < children.length &&
+				((_children$index = children[index]) == null ||
+				(_children$index = _children$index.props) == null ||
+				(_children$index = _children$index.record) == null
+					? void 0
+					: _children$index.type) != "data"
+			) {
+				var _children$index;
+				index++;
+			}
+			var count = 0;
+			while (count < this.state.dropInsertionIndex) {
+				var _children$index2;
+				if (
+					((_children$index2 = children[index]) == null ||
+					(_children$index2 = _children$index2.props) == null ||
+					(_children$index2 = _children$index2.record) == null
+						? void 0
+						: _children$index2.type) == "data"
+				)
+					count++;
+				index++;
+			}
+			var savedIndexPos = index;
+			if (!this.state.dropNextToTheRowAbove)
+				while (
+					index < children.length &&
+					((_children$index3 = children[index]) == null ||
+					(_children$index3 = _children$index3.props) == null ||
+					(_children$index3 = _children$index3.record) == null
+						? void 0
+						: _children$index3.type) != "data"
+				) {
+					var _children$index3;
+					index++;
+				}
+
+			// do not allow insertion after the last group footer
+			if (savedIndexPos < index && index == children.length) index = savedIndexPos;
+			children.splice(index, 0, dragInsertionRow);
 		}
 		var content = [],
 			fixedColumnsContent = [];
@@ -17311,12 +17346,14 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 				start = _this$getBufferStartE2.start;
 			var _this$state2 = this.state,
 				dropInsertionIndex = _this$state2.dropInsertionIndex,
-				dropTarget = _this$state2.dropTarget;
+				dropTarget = _this$state2.dropTarget,
+				dropNextToTheRowAbove = _this$state2.dropNextToTheRowAbove;
 			if (dropTarget == "grid" && widget.onDrop && dropInsertionIndex != null) {
 				e.target = {
 					insertionIndex: start + dropInsertionIndex,
 					recordBefore: this.getRecordAt(start + dropInsertionIndex - 1),
 					recordAfter: this.getRecordAt(start + dropInsertionIndex),
+					dropNextToTheRowAbove: dropNextToTheRowAbove,
 				};
 				instance.invoke("onDrop", e, instance);
 			} else if (dropTarget == "row") {
@@ -17436,6 +17473,7 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		var parentOffset = getParentFrameBoundingClientRect(this.dom.scroller);
 		var cy = ev.cursor.clientY - parentOffset.top;
 		var rowOverIndex = null;
+		var nextToTheRowAbove = false;
 		while (s < e) {
 			m = Math.floor((s + e) / 2);
 			b = nodes[m].getBoundingClientRect();
@@ -17471,8 +17509,10 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 						break;
 					}
 				}
-				if (cy > (b.bottom + b.top) / 2) s = e = m + 1;
-				else s = e = m;
+				if (cy > (b.bottom + b.top) / 2) {
+					s = e = m + 1;
+					nextToTheRowAbove = true;
+				} else s = e = m;
 			}
 		}
 		var cancel = false;
@@ -17487,6 +17527,7 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			else if (rowOverIndex != this.state.dropInsertionIndex || this.state.dropTarget != "row") {
 				this.setState({
 					dropInsertionIndex: rowOverIndex,
+					dropNextToTheRowAbove: false,
 					dropItemHeight: ev.source.height - 1,
 					dropTarget: "row",
 				});
@@ -17504,6 +17545,7 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 			else if (s != this.state.dropInsertionIndex || this.state.dropTarget != "grid") {
 				this.setState({
 					dropInsertionIndex: s,
+					dropNextToTheRowAbove: nextToTheRowAbove,
 					dropItemHeight: ev.source.height - 1,
 					dropTarget: "grid",
 				});
@@ -17512,6 +17554,7 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		if (cancel) {
 			this.setState({
 				dropInsertionIndex: null,
+				dropNextToTheRowAbove: null,
 				dropTarget: null,
 			});
 		}
@@ -17519,6 +17562,7 @@ var GridComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 	_proto2.onDragLeave = function onDragLeave(e) {
 		this.setState({
 			dropInsertionIndex: null,
+			dropNextToTheRowAbove: null,
 			dropTarget: null,
 		});
 	};
@@ -18389,7 +18433,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.4",
    "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/index.d.ts

@@ -1,24 +1,25 @@
-export * from './Chart';
-export * from './PieChart';
-export * from './Pie';
-export * from './PieLabel';
-export * from './PieLabelsContainer';
-export * from './Column';
-export * from './Bar';
-export * from './Legend';
-export * from './LegendEntry';
-export * from './ColorMap';
-export * from './Marker';
-export * from './MarkerLine';
-export * from './Range';
-export * from './Gridlines';
-export * from './LineGraph';
-export * from './ColumnGraph';
-export * from './BarGraph';
-export * from './ScatterGraph';
-export * from './BubbleGraph';
-export * from './shapes';
-export * from './MouseTracker';
+export * from "./Chart";
+export * from "./PieChart";
+export * from "./Pie";
+export * from "./PieLabel";
+export * from "./PieLabelsContainer";
+export * from "./Column";
+export * from "./Bar";
+export * from "./Legend";
+export * from "./LegendEntry";
+export * from "./ColorMap";
+export * from "./Marker";
+export * from "./MarkerLine";
+export * from "./Range";
+export * from "./Gridlines";
+export * from "./Swimlanes";
+export * from "./LineGraph";
+export * from "./ColumnGraph";
+export * from "./BarGraph";
+export * from "./ScatterGraph";
+export * from "./BubbleGraph";
+export * from "./shapes";
+export * from "./MouseTracker";
 
-export * from './axis/index';
-export * from './helpers/index';
+export * from "./axis/index";
+export * from "./helpers/index";

package/src/charts/index.js

@@ -16,6 +16,7 @@ export * from "./Marker";
 export * from "./MarkerLine";
 export * from "./Range";
 export * from "./Gridlines";
+export * from "./Swimlanes";
 
 export * from "./LineGraph";
 export * from "./ColumnGraph";

package/src/charts/index.scss

@@ -1,20 +1,20 @@
+@import "axis/index";
 
-@import 'axis/index';
-
-@import 'PieChart';
-@import 'Legend';
-@import 'LegendEntry';
-@import 'Gridlines';
-@import 'Column';
-@import 'Bar';
-@import 'LineGraph';
-@import 'ColumnGraph';
-@import 'BarGraph';
-@import 'ScatterGraph';
-@import 'BubbleGraph';
-@import 'Marker';
-@import 'MarkerLine';
-@import 'Range';
+@import "PieChart";
+@import "Legend";
+@import "LegendEntry";
+@import "Gridlines";
+@import "Swimlanes";
+@import "Column";
+@import "Bar";
+@import "LineGraph";
+@import "ColumnGraph";
+@import "BarGraph";
+@import "ScatterGraph";
+@import "BubbleGraph";
+@import "Marker";
+@import "MarkerLine";
+@import "Range";
 
 //define last for higher priority
-@import 'palette';
+@import "palette";

package/src/charts/variables.scss

@@ -1,15 +1,21 @@
 @import "axis/variables";
 
-$cx-dependencies: map-merge($cx-dependencies, (
-   'cx/charts/Bar': 'cx/charts/palette',
-   'cx/charts/BarGraph': 'cx/charts/palette',
-   'cx/charts/Column': 'cx/charts/palette',
-   'cx/charts/ColumnGraph': 'cx/charts/palette',
-   'cx/charts/LineGraph': 'cx/charts/palette',
-   'cx/charts/ColorMap': 'cx/charts/palette',
-   'cx/charts/ScatterGraph': 'cx/charts/palette',
-   'cx/charts/BubbleGraph': 'cx/charts/palette',
-   'cx/charts/MarkerLine': 'cx/charts/palette',
-   'cx/charts/Marker': 'cx/charts/palette',
-   'cx/charts/PieChart': 'cx/charts/palette'
-))
+$cx-default-swimlanes-lane-background-color: #f1f1f1;
+
+$cx-dependencies: map-merge(
+   $cx-dependencies,
+   (
+      "cx/charts/Bar": "cx/charts/palette",
+      "cx/charts/BarGraph": "cx/charts/palette",
+      "cx/charts/Column": "cx/charts/palette",
+      "cx/charts/ColumnGraph": "cx/charts/palette",
+      "cx/charts/LineGraph": "cx/charts/palette",
+      "cx/charts/ColorMap": "cx/charts/palette",
+      "cx/charts/ScatterGraph": "cx/charts/palette",
+      "cx/charts/BubbleGraph": "cx/charts/palette",
+      "cx/charts/MarkerLine": "cx/charts/palette",
+      "cx/charts/Marker": "cx/charts/palette",
+      "cx/charts/PieChart": "cx/charts/palette",
+      "cx/charts/Swimlanes": "cx/charts/Swimlanes",
+   )
+);