cx 24.10.4 → 24.10.6

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.10.4",
+   "version": "24.10.6",
    "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/axis/Axis.d.ts

@@ -1,110 +1,113 @@
-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;
-
-   /** Size of the axis tick line. Defaults to 3. */
-   tickSize?: number;
-
-   /** The smallest distance between two ticks on the axis. Defaults to 25. */
-   minTickDistance?: number;
-
-   /** The smallest distance between two labels on the vertical axis. Defaults to 40. */
-   minLabelDistanceVertical?: number;
-
-   /** The smallest distance between two labels on the horizontal axis. Defaults to 50.  */
-   minLabelDistanceHorizontal?: number;
-
-   /** Distance between labels and the axis. Defaults to 10. */
-   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,
-           { tickIndex, serieIndex }: { tickIndex: number; serieIndex: number },
-        ) => { text: string; style?: any; className?: string }[]);
-
-   /** Distance between the even labels and the axis. */
-   alternateLabelOffset?: number | 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;
+
+   /** Size of the axis tick line. Defaults to 3. */
+   tickSize?: number;
+
+   /** Distance between ticks and the axis. Default is 0. Use negative values for offset to make ticks appear on both sides of the axis. */
+   tickOffset?: number;
+
+   /** The smallest distance between two ticks on the axis. Defaults to 25. */
+   minTickDistance?: number;
+
+   /** The smallest distance between two labels on the vertical axis. Defaults to 40. */
+   minLabelDistanceVertical?: number;
+
+   /** The smallest distance between two labels on the horizontal axis. Defaults to 50.  */
+   minLabelDistanceHorizontal?: number;
+
+   /** Distance between labels and the axis. Defaults to 10. */
+   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,
+           { tickIndex, serieIndex }: { tickIndex: number; serieIndex: number },
+        ) => { text: string; style?: any; className?: string }[]);
+
+   /** Distance between the even labels and the axis. */
+   alternateLabelOffset?: number | string;
+}
+
+export class Axis extends BoundedObject {}

package/src/charts/axis/Axis.js

@@ -56,13 +56,13 @@ export class Axis extends BoundedObject {
 
    reportData(context, instance) {}
 
-   renderTicksAndLabels(context, instance, valueFormatter) {
+   renderTicksAndLabels(context, instance, valueFormatter, minLabelDistance) {
       if (this.hidden) return false;
 
       var { data, calculator, labelFormatter } = instance;
       var { bounds } = data;
       let { CSS, baseClass } = this;
-      var size = calculator.findTickSize(this.minLabelDistance);
+      var size = calculator.findTickSize(minLabelDistance);
 
       var labelClass = CSS.expand(CSS.element(baseClass, "label"), data.labelClass);
       var offsetClass = CSS.element(baseClass, "label-offset");
@@ -71,7 +71,8 @@ export class Axis extends BoundedObject {
          y1,
          x2,
          y2,
-         tickSize = this.tickSize;
+         tickSize = this.tickSize,
+         tickOffset = this.tickOffset;
 
       if (this.vertical) {
          x1 = x2 = this.secondary ? bounds.r : bounds.l;
@@ -100,25 +101,25 @@ export class Axis extends BoundedObject {
       }
 
       var t = [];
-      if (size > 0 && !data.hideLabels) {
+      if (!!size && !data.hideLabels) {
          var ticks = calculator.getTicks([size]);
          ticks.forEach((serie, si) => {
             serie.forEach((v, i) => {
                var s = calculator.map(v);
 
                if (this.secondary) {
-                  x1 = this.vertical ? bounds.r : s;
-                  y1 = this.vertical ? s : bounds.t;
-                  x2 = this.vertical ? bounds.r + tickSize : s;
-                  y2 = this.vertical ? s : bounds.t - tickSize;
+                  x1 = this.vertical ? bounds.r + tickOffset : s;
+                  y1 = this.vertical ? s : bounds.t - tickOffset;
+                  x2 = this.vertical ? bounds.r + tickOffset + tickSize : s;
+                  y2 = this.vertical ? s : bounds.t - tickOffset - tickSize;
                } else {
-                  x1 = this.vertical ? bounds.l : s;
-                  y1 = this.vertical ? s : bounds.b;
-                  x2 = this.vertical ? bounds.l - tickSize : s;
-                  y2 = this.vertical ? s : bounds.b + tickSize;
+                  x1 = this.vertical ? bounds.l - tickOffset : s;
+                  y1 = this.vertical ? s : bounds.b + tickOffset;
+                  x2 = this.vertical ? bounds.l - tickOffset - tickSize : s;
+                  y2 = this.vertical ? s : bounds.b + tickOffset + tickSize;
                }
 
-               t.push(`M ${x1} ${y1} L ${x2} ${y2}`);
+               if (!this.useGridlineTicks) t.push(`M ${x1} ${y1} L ${x2} ${y2}`);
 
                var x, y;
                let labelOffset =
@@ -155,6 +156,24 @@ export class Axis extends BoundedObject {
       }
 
       if (!data.hideTicks) {
+         if (this.useGridlineTicks) {
+            let gridlines = calculator.mapGridlines();
+            gridlines.forEach((s, i) => {
+               if (this.secondary) {
+                  x1 = this.vertical ? bounds.r + tickOffset : s;
+                  y1 = this.vertical ? s : bounds.t - tickOffset;
+                  x2 = this.vertical ? bounds.r + tickOffset + tickSize : s;
+                  y2 = this.vertical ? s : bounds.t - tickOffset - tickSize;
+               } else {
+                  x1 = this.vertical ? bounds.l - tickOffset : s;
+                  y1 = this.vertical ? s : bounds.b + tickOffset;
+                  x2 = this.vertical ? bounds.l - tickOffset - tickSize : s;
+                  y2 = this.vertical ? s : bounds.b + tickOffset + tickSize;
+               }
+               t.push(`M ${x1} ${y1} L ${x2} ${y2}`);
+            });
+         }
+
          res[1] = (
             <path
                key="ticks"
@@ -243,6 +262,7 @@ Axis.prototype.hideTicks = false;
 Axis.prototype.hideLine = false;
 
 Axis.prototype.tickSize = 3;
+Axis.prototype.tickOffset = 0;
 Axis.prototype.minTickDistance = 25;
 Axis.prototype.minLabelDistanceVertical = 40;
 Axis.prototype.minLabelDistanceHorizontal = 50;

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

@@ -1,24 +1,27 @@
-import * as Cx from "../../core";
-import { AxisProps } from "./Axis";
-
-interface CategoryAxisProps extends AxisProps {
-   /** Uniform axes provide exact size and offset for all entries, while non-uniform axes adapt their size and offset to the number of entries under each category. */
-   uniform?: Cx.BooleanProp;
-
-   /** Names corresponding the given `values`. For example, `values` may be 0 .. 11 and `names` could be Jan .. Dec. */
-   names?: Cx.Prop<any[] | Cx.Config>;
-
-   /** Values used to initialize the axis. If an object is provided, keys are used for values and values are used for names. */
-   values?: Cx.Prop<any[] | Cx.Config>;
-
-   /** Sometimes, there is not enough data and each category takes a lot of space. `minSize` can be used to add fake entries up to the specified number, so everything looks normal. */
-   minSize?: Cx.NumberProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `categoryaxis`. */
-   baseClass?: string;
-
-   /** Output value that can be used to calculate chart dimensions based on discovered category values. */
-   categoryCount?: Binding | Cx.AccessorChain<number> | Cx.GetSet<number>;
-}
-
-export class CategoryAxis extends Cx.Widget<CategoryAxisProps> {}
+import * as Cx from "../../core";
+import { AxisProps } from "./Axis";
+
+interface CategoryAxisProps extends AxisProps {
+   /** Uniform axes provide exact size and offset for all entries, while non-uniform axes adapt their size and offset to the number of entries under each category. */
+   uniform?: Cx.BooleanProp;
+
+   /** Names corresponding the given `values`. For example, `values` may be 0 .. 11 and `names` could be Jan .. Dec. */
+   names?: Cx.Prop<any[] | Cx.Config>;
+
+   /** Values used to initialize the axis. If an object is provided, keys are used for values and values are used for names. */
+   values?: Cx.Prop<any[] | Cx.Config>;
+
+   /** Sometimes, there is not enough data and each category takes a lot of space. `minSize` can be used to add fake entries up to the specified number, so everything looks normal. */
+   minSize?: Cx.NumberProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `categoryaxis`. */
+   baseClass?: string;
+
+   /** Output value that can be used to calculate chart dimensions based on discovered category values. */
+   categoryCount?: Binding | Cx.AccessorChain<number> | Cx.GetSet<number>;
+
+   /** Set to true to show ticks aligned with gridlines instead of labels. Default is false. */
+   useGridlineTicks?: boolean;
+}
+
+export class CategoryAxis extends Cx.Widget<CategoryAxisProps> {}