cx 24.4.8 → 24.4.9

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.4.8",
+   "version": "24.4.9",
    "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/Swimlane.d.ts

@@ -0,0 +1,24 @@
+import * as Cx from "../core";
+import { BoundedObjectProps } from "../svg";
+
+interface SwimlaneProps extends BoundedObjectProps {
+   /** The `x` value binding or expression. */
+   x?: Cx.Prop<string | number>;
+
+   /** The `y` value binding or expression. */
+   y?: Cx.Prop<string | number>;
+
+   /** Represents a swimlane size. */
+   size?: Cx.NumberProp;
+
+   /** Switch to vertical swimlanes. */
+   vertical?: boolean;
+
+   /**The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
+   laneOffset?: Cx.NumberProp;
+
+   /** Style object applied to the swimlanes. */
+   laneStyle?: StyleProp;
+}
+
+export class Swimlane extends Cx.Widget<SwimlaneProps> {}

package/src/charts/Swimlane.js

@@ -0,0 +1,140 @@
+import { BoundedObject } from "../svg/BoundedObject";
+import { parseStyle } from "../util/parseStyle";
+import { VDOM } from "../ui/Widget";
+import { Rect } from "../svg/util/Rect";
+
+export class Swimlane extends BoundedObject {
+   init() {
+      this.laneStyle = parseStyle(this.laneStyle);
+      super.init();
+   }
+
+   declareData(...args) {
+      super.declareData(...args, {
+         size: undefined,
+         laneOffset: undefined,
+         laneStyle: { structured: true },
+         vertical: undefined,
+         x: undefined,
+         y: undefined,
+      });
+   }
+
+   explore(context, instance) {
+      let { data } = instance;
+      super.explore(context, instance);
+      instance.xAxis = context.axes[this.xAxis];
+      instance.yAxis = context.axes[this.yAxis];
+
+      if (data.vertical) {
+         instance.xAxis.acknowledge(data.x, data.size, data.laneOffset);
+      } else {
+         instance.yAxis.acknowledge(data.y, data.size, data.laneOffset);
+      }
+   }
+
+   prepare(context, instance) {
+      super.prepare(context, instance);
+      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);
+   }
+
+   calculateRect(instance) {
+      var { data } = instance;
+      var { size, laneOffset } = data;
+
+      if (data.vertical) {
+         var x1 = instance.xAxis.map(data.x, laneOffset - size / 2);
+         var x2 = instance.xAxis.map(data.x, laneOffset + size / 2);
+         var bounds = new Rect({
+            l: Math.min(x1, x2),
+            r: Math.max(x1, x2),
+            t: data.bounds.t,
+            b: data.bounds.b,
+         });
+      } else {
+         var y1 = instance.yAxis.map(data.y, laneOffset - size / 2);
+         var y2 = instance.yAxis.map(data.y, laneOffset + size / 2);
+         var bounds = new Rect({
+            l: data.bounds.l,
+            r: data.bounds.r,
+            t: Math.min(y1, y2),
+            b: Math.max(y1, y2),
+         });
+      }
+
+      return bounds;
+   }
+
+   render(context, instance, key) {
+      let { data, xAxis, yAxis, bounds } = instance;
+      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 rectClass = CSS.element(baseClass, "lane");
+
+      if (this.vertical) {
+         let c1 = axis.map(...valueFunction(data.x, -data.size / 2 + data.laneOffset));
+         let c2 = axis.map(...valueFunction(data.x, +data.size / 2 + data.laneOffset));
+         return (
+            <g key={key} className={data.classNames}>
+               <rect
+                  key={key}
+                  x={bounds.l}
+                  y={bounds.t}
+                  height={bounds.b - bounds.t}
+                  width={Math.abs(c1 - c2)}
+                  className={rectClass}
+                  style={data.laneStyle}
+               />
+               {this.renderChildren(context, instance)};
+            </g>
+         );
+      } else {
+         let c1 = axis.map(...valueFunction(data.y, -data.size / 2 + data.laneOffset));
+         let c2 = axis.map(...valueFunction(data.y, +data.size / 2 + data.laneOffset));
+         return (
+            <g key={key} className={data.classNames}>
+               <rect
+                  key={key}
+                  x={bounds.l}
+                  y={bounds.t}
+                  width={bounds.r - bounds.l}
+                  height={Math.abs(c1 - c2)}
+                  className={rectClass}
+                  style={data.laneStyle}
+               />
+               {this.renderChildren(context, instance)};
+            </g>
+         );
+      }
+   }
+}
+
+Swimlane.prototype.xAxis = "x";
+Swimlane.prototype.yAxis = "y";
+Swimlane.prototype.anchors = "0 1 1 0";
+Swimlane.prototype.baseClass = "swimlane";
+Swimlane.prototype.size = 0.5;
+Swimlane.prototype.laneOffset = 0;
+Swimlane.prototype.vertical = false;
+
+BoundedObject.alias("swimlane", Swimlane);

package/src/charts/Swimlane.scss

@@ -0,0 +1,14 @@
+@mixin cx-swimlane($name: "swimlane", $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/Swimlane")) {
+   @include cx-swimlane();
+}

package/src/charts/index.d.ts

@@ -21,6 +21,7 @@ export * from "./BubbleGraph";
 export * from "./shapes";
 export * from "./MouseTracker";
 export * from "./RangeMarker";
+export * from "./Swimlane";
 
 export * from "./axis/index";
 export * from "./helpers/index";

package/src/charts/index.js

@@ -17,6 +17,7 @@ export * from "./MarkerLine";
 export * from "./Range";
 export * from "./Gridlines";
 export * from "./Swimlanes";
+export * from "./Swimlane";
 export * from "./RangeMarker";
 
 export * from "./LineGraph";

package/src/charts/index.scss

@@ -16,6 +16,7 @@
 @import "MarkerLine";
 @import "Range";
 @import "RangeMarker";
+@import "Swimlane";
 
 //define last for higher priority
 @import "palette";

package/src/data/Binding.d.ts

@@ -3,6 +3,8 @@ import { Record, AccessorChain, Bind } from "../core";
 export class Binding<V = any> {
    constructor(path: string);
 
+   readonly path: string;
+
    set(state: Record, value: V): Record;
 
    delete(state: Record): Record;

package/src/data/createAccessorModelProxy.d.ts

@@ -3,4 +3,4 @@ import { AccessorChain } from "../core";
 export function isAccessorChain(value: any): boolean;
 export function isAccessorChain<V>(value: any): value is AccessorChain<V>;
 
-export function createAccessorModelProxy<M>(): AccessorChain<M>;
+export function createAccessorModelProxy<M>(basePath: string = ""): AccessorChain<M>;