cx 24.4.4 → 24.4.6

package/src/charts/ScatterGraph.scss

@@ -1,22 +1,22 @@
-
-@mixin cx-scattergraph(
-   $name: 'scattergraph',
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$element}#{$name}-shape {
-      fill: rgb(128, 128, 128);
-      opacity: 0.8;
-
-      &.#{$state}selected {
-         stroke-width: 2px;
-      }
-   }
-}
-
-@if (cx-should-include('cx/charts/ScatterGraph')) {
-   @include cx-scattergraph();
+
+@mixin cx-scattergraph(
+   $name: 'scattergraph',
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$element}#{$name}-shape {
+      fill: rgb(128, 128, 128);
+      opacity: 0.8;
+
+      &.#{$state}selected {
+         stroke-width: 2px;
+      }
+   }
+}
+
+@if (cx-should-include('cx/charts/ScatterGraph')) {
+   @include cx-scattergraph();
 }

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();
+}

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 {}

package/src/charts/axis/Axis.js

@@ -40,7 +40,7 @@ export class Axis extends BoundedObject {
             tickStyle: undefined,
             tickClass: undefined,
          },
-         ...arguments
+         ...arguments,
       );
    }
 
@@ -54,6 +54,8 @@ export class Axis extends BoundedObject {
       return instance.calculator;
    }
 
+   reportData(context, instance) {}
+
    renderTicksAndLabels(context, instance, valueFormatter) {
       if (this.hidden) return false;
 
@@ -141,7 +143,7 @@ export class Axis extends BoundedObject {
                      transform={transform}
                   >
                      {this.renderLabels(lines, x, this.labelDy, this.labelDx, offsetClass)}
-                  </text>
+                  </text>,
                );
             });
          });
@@ -189,7 +191,7 @@ export class Axis extends BoundedObject {
          result.push(
             <tspan key={-2} className={offsetClass} dy={dy}>
                _
-            </tspan>
+            </tspan>,
          );
       }
 
@@ -204,7 +206,7 @@ export class Axis extends BoundedObject {
                dx={dx}
             >
                {p.text}
-            </tspan>
+            </tspan>,
          );
       });
       return result;

package/src/charts/axis/Axis.scss

@@ -1,23 +1,23 @@
-
-@mixin cxb-axis() {
-   shape-rendering: crispEdges;
-}
-
-@mixin cxe-axis-ticks() {
-   stroke: $cx-axis-ticks-stroke;
-   stroke-width: 1px;
-}
-
-@mixin cxe-axis-line() {
-   stroke: $cx-axis-line-stroke;
-   stroke-width: 1px;
-}
-
-@mixin cxe-axis-label() {
-   font-size: smaller;
-   fill: currentColor;
-}
-
-@mixin cxe-axis-label-offset() {
-   visibility: hidden;
+
+@mixin cxb-axis() {
+   shape-rendering: crispEdges;
+}
+
+@mixin cxe-axis-ticks() {
+   stroke: $cx-axis-ticks-stroke;
+   stroke-width: 1px;
+}
+
+@mixin cxe-axis-line() {
+   stroke: $cx-axis-line-stroke;
+   stroke-width: 1px;
+}
+
+@mixin cxe-axis-label() {
+   font-size: smaller;
+   fill: currentColor;
+}
+
+@mixin cxe-axis-label-offset() {
+   visibility: hidden;
 }