cx 24.9.2 → 24.9.3

package/src/charts/Swimlane.js

@@ -1,140 +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);
+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

@@ -1,14 +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();
-}
+@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/Swimlanes.d.ts

@@ -1,41 +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?: Cx.NumberProp;
-
-   /**
-    * 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?: 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 Swimlanes extends Cx.Widget<SwimlanesProps> {}
+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?: Cx.NumberProp;
+
+   /**
+    * 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?: 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 Swimlanes extends Cx.Widget<SwimlanesProps> {}

package/src/charts/Swimlanes.js

@@ -1,114 +1,114 @@
-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;
-
-      if (data.step <= 0 || data.size <= 0) return;
-
-      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);
+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;
+
+      if (data.step <= 0 || data.size <= 0) return;
+
+      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

@@ -1,14 +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();
-}
+@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();
+}