cx 24.4.4 → 24.4.6

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

@@ -1,22 +1,24 @@
-import * as Cx from '../../core';
-import {AxisProps} from './Axis';
+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,
+   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>,
+   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>,
+   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,
+   minSize?: Cx.NumberProp;
 
    /** Base CSS class to be applied to the element. Defaults to `categoryaxis`. */
-   baseClass?: string
+   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> {}
+export class CategoryAxis extends Cx.Widget<CategoryAxisProps> {}

package/src/charts/axis/CategoryAxis.js

@@ -1,18 +1,18 @@
-import {Axis} from './Axis';
-import {VDOM} from '../../ui/Widget';
-import {isUndefined} from '../../util/isUndefined';
-import {isArray} from '../../util/isArray';
+import { Axis } from "./Axis";
+import { VDOM } from "../../ui/Widget";
+import { isUndefined } from "../../util/isUndefined";
+import { isArray } from "../../util/isArray";
 
 export class CategoryAxis extends Axis {
-
    declareData() {
       super.declareData(...arguments, {
          inverted: undefined,
          uniform: undefined,
          names: undefined,
          values: undefined,
-         minSize: undefined
-      })
+         minSize: undefined,
+         categoryCount: undefined,
+      });
    }
 
    initInstance(context, instance) {
@@ -21,42 +21,44 @@ export class CategoryAxis extends Axis {
 
    explore(context, instance) {
       super.explore(context, instance);
-      var {values, names, inverted, uniform, minSize} = instance.data;
+      var { values, names, inverted, uniform, minSize } = instance.data;
       instance.calculator.reset(inverted, uniform, values, names, minSize);
    }
 
+   reportData(context, instance) {
+      instance.set("categoryCount", instance.calculator.valueList.length);
+   }
+
    render(context, instance, key) {
-      var {data, calculator} = instance;
+      var { data, calculator } = instance;
 
-      if (!data.bounds.valid())
-         return null;
+      if (!data.bounds.valid()) return null;
 
-      var formatter = v => calculator.names[v] || v;
+      var formatter = (v) => calculator.names[v] || v;
 
-      return <g key={key} className={data.classNames} style={data.style}>
-         {this.renderTicksAndLabels(context, instance, formatter)}
-      </g>
+      return (
+         <g key={key} className={data.classNames} style={data.style}>
+            {this.renderTicksAndLabels(context, instance, formatter)}
+         </g>
+      );
    }
-
-
 }
 
-CategoryAxis.prototype.baseClass = 'categoryaxis';
-CategoryAxis.prototype.anchors = '0 1 1 0';
+CategoryAxis.prototype.baseClass = "categoryaxis";
+CategoryAxis.prototype.anchors = "0 1 1 0";
 CategoryAxis.prototype.vertical = false;
 CategoryAxis.prototype.inverted = false;
 CategoryAxis.prototype.uniform = false;
 CategoryAxis.prototype.labelOffset = 10;
 CategoryAxis.prototype.labelRotation = 0;
-CategoryAxis.prototype.labelAnchor = 'auto';
-CategoryAxis.prototype.labelDx = 'auto';
-CategoryAxis.prototype.labelDy = 'auto';
+CategoryAxis.prototype.labelAnchor = "auto";
+CategoryAxis.prototype.labelDx = "auto";
+CategoryAxis.prototype.labelDy = "auto";
 CategoryAxis.prototype.minSize = 1;
 
-Axis.alias('category', CategoryAxis);
+Axis.alias("category", CategoryAxis);
 
 class CategoryScale {
-
    reset(inverted, uniform, values, names, minSize) {
       this.padding = 0.5;
       delete this.min;
@@ -72,9 +74,8 @@ class CategoryScale {
       this.names = {};
 
       if (values) {
-         if (isArray(values))
-            values.forEach(v=>this.acknowledge(v));
-         else if (typeof values == 'object')
+         if (isArray(values)) values.forEach((v) => this.acknowledge(v));
+         else if (typeof values == "object")
             for (var k in values) {
                this.acknowledge(k);
                this.names[k] = values[k];
@@ -87,10 +88,8 @@ class CategoryScale {
             names.forEach((name, index) => {
                var value = values[index];
                this.names[value != null ? value : index] = name;
-            })
-         }
-         else
-            this.names = names;
+            });
+         } else this.names = names;
       }
    }
 
@@ -103,33 +102,27 @@ class CategoryScale {
    }
 
    map(v, offset = 0) {
-
       var index = this.valuesMap[v] || 0;
 
       return this.origin + (index + offset - this.min + this.padding) * this.factor;
    }
 
-
    measure(a, b) {
-
       this.a = a;
       this.b = b;
 
-      if (this.min == null)
-         this.min = this.minValue || 0;
+      if (this.min == null) this.min = this.minValue || 0;
 
-      if (this.max == null)
-         this.max = !isNaN(this.maxValue) ? this.maxValue : 100;
+      if (this.max == null) this.max = !isNaN(this.maxValue) ? this.maxValue : 100;
 
       var sign = this.inverted ? -1 : 1;
 
       if (this.max - this.min + 1 < this.minSize) {
-         this.factor = sign * (this.b - this.a) / this.minSize;
-         this.origin = (this.b + this.a) * 0.5 - this.factor * (this.max - this.min + 1) / 2;
-      }
-      else {
-         this.factor = sign * (this.b - this.a) / (this.max - this.min + 2 * this.padding);
-         this.origin = this.a * (1 + sign) / 2 + this.b * (1 - sign) / 2; //a || b
+         this.factor = (sign * (this.b - this.a)) / this.minSize;
+         this.origin = (this.b + this.a) * 0.5 - (this.factor * (this.max - this.min + 1)) / 2;
+      } else {
+         this.factor = (sign * (this.b - this.a)) / (this.max - this.min + 2 * this.padding);
+         this.origin = (this.a * (1 + sign)) / 2 + (this.b * (1 - sign)) / 2; //a || b
       }
    }
 
@@ -140,20 +133,19 @@ class CategoryScale {
          min: this.min,
          minSize: this.minSize,
          padding: this.padding,
-         values: this.valueList.join(':'),
-         names: JSON.stringify(this.names)
-      }
+         values: this.valueList.join(":"),
+         names: JSON.stringify(this.names),
+      };
    }
 
    isSame(x) {
       var h = this.hash();
-      var same = x && !Object.keys(h).some(k=>x[k] !== h[k]);
+      var same = x && !Object.keys(h).some((k) => x[k] !== h[k]);
       this.shouldUpdate = !same;
       return same;
    }
 
    acknowledge(value, width = 0, offset = 0) {
-
       var index = this.valuesMap[value];
       if (isUndefined(index)) {
          index = this.valueList.length;
@@ -165,7 +157,7 @@ class CategoryScale {
          this.minValue = index;
          this.padding = Math.max(this.padding, Math.abs(offset - width / 2));
       }
-      
+
       if (this.maxValue == null || index > this.maxValue) {
          this.maxValue = index;
          this.padding = Math.max(this.padding, Math.abs(offset + width / 2));
@@ -173,36 +165,30 @@ class CategoryScale {
    }
 
    book(value, name) {
-      if (this.uniform)
-         value = 0;
+      if (this.uniform) value = 0;
 
       var stack = this.valueStacks[value];
       if (!stack)
          stack = this.valueStacks[value] = {
             index: {},
-            count: 0
+            count: 0,
          };
-      if (!stack.index.hasOwnProperty(name))
-         stack.index[name] = stack.count++;
+      if (!stack.index.hasOwnProperty(name)) stack.index[name] = stack.count++;
    }
 
    locate(value, name) {
-      if (this.uniform)
-         value = 0;
+      if (this.uniform) value = 0;
 
       var stack = this.valueStacks[value];
-      if (!stack)
-         return [0, 1];
+      if (!stack) return [0, 1];
 
       return [stack.index[name], stack.count];
    }
 
    trackValue(v, offset = 0, constrain = false) {
       let index = Math.round((v - this.origin) / this.factor - offset + this.min - this.padding);
-      if (index < this.min)
-         index = this.min;
-      if (index > this.max)
-         index = this.max;
+      if (index < this.min) index = this.min;
+      if (index > this.max) index = this.max;
       return this.valueList[index];
    }
 
@@ -215,11 +201,12 @@ class CategoryScale {
    }
 
    getTicks(tickSizes) {
-      return tickSizes.map(size => this.valueList);
+      return tickSizes.map((size) => this.valueList);
    }
 
    mapGridlines() {
-      return Array.from({length: this.valueList.length + 1})
-                  .map((_, index) => this.origin + (index - 0.5 - this.min + this.padding) * this.factor);
+      return Array.from({ length: this.valueList.length + 1 }).map(
+         (_, index) => this.origin + (index - 0.5 - this.min + this.padding) * this.factor,
+      );
    }
-}
+}

package/src/charts/axis/CategoryAxis.scss

@@ -1,33 +1,33 @@
-
-@mixin cx-categoryaxis(
-   $name: 'categoryaxis',
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$block}#{$name} {
-      @include cxb-axis();
-   }
-
-   .#{$element}#{$name}-ticks {
-      @include cxe-axis-ticks();
-   }
-
-   .#{$element}#{$name}-line {
-      @include cxe-axis-line();
-   }
-
-   .#{$element}#{$name}-label {
-      @include cxe-axis-label();
-   }
-
-   .#{$element}#{$name}-label-offset {
-      @include cxe-axis-label-offset();
-   }
-}
-
-@if (cx-should-include('cx/charts/CategoryAxis')) {
-   @include cx-categoryaxis();
+
+@mixin cx-categoryaxis(
+   $name: 'categoryaxis',
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$block}#{$name} {
+      @include cxb-axis();
+   }
+
+   .#{$element}#{$name}-ticks {
+      @include cxe-axis-ticks();
+   }
+
+   .#{$element}#{$name}-line {
+      @include cxe-axis-line();
+   }
+
+   .#{$element}#{$name}-label {
+      @include cxe-axis-label();
+   }
+
+   .#{$element}#{$name}-label-offset {
+      @include cxe-axis-label-offset();
+   }
+}
+
+@if (cx-should-include('cx/charts/CategoryAxis')) {
+   @include cx-categoryaxis();
 }

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

@@ -1,46 +1,46 @@
-import * as Cx from "../../core";
-import { AxisProps } from "./Axis";
-
-interface NumericAxisProps extends AxisProps {
-   /** Minimum value. */
-   min?: Cx.NumberProp;
-
-   /** Maximum value. */
-   max?: Cx.NumberProp;
-
-   /** Set to `true` to normalize the input range. */
-   normalized?: Cx.BooleanProp;
-
-   /** Number used to divide values before rendering axis labels. Default value is `1`. */
-   labelDivisor?: Cx.NumberProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `numericaxis`. */
-   baseClass?: string;
-
-   tickDivisions?: Array<number[]>;
-
-   /** A number ranged between `0-2`. `0` means that the range is aligned with the lowest ticks. Default value is `1`, which means that the range is aligned with medium ticks. Use value `2` to align with major ticks. */
-   snapToTicks?: 0 | 1 | 2;
-
-   /** Value format. Default is `n`. */
-   format?: Cx.StringProp;
-
-   /** Size of a zone reserved for labels for both lower and upper end of the axis. */
-   deadZone?: Cx.NumberProp;
-
-   /** Size of a zone reserved for labels near the upper (higher) end of the axis.  */
-   upperDeadZone?: Cx.NumberProp;
-
-   /** Size of a zone reserved for labels near the lower end of the axis.   */
-   lowerDeadZone?: Cx.NumberProp;
-
-   /** Specifies minimum value increment between labels. Useful when formatting is not flexible enough, i.e. set to 1 for integer axes to avoid duplicate labels. */
-   minLabelTickSize?: number;
-}
-
-export class NumericAxis extends Cx.Widget<NumericAxisProps> {
-   static XY(): {
-      x: { type: NumericAxis };
-      y: { type: NumericAxis; vertical: true };
-   };
-}
+import * as Cx from "../../core";
+import { AxisProps } from "./Axis";
+
+interface NumericAxisProps extends AxisProps {
+   /** Minimum value. */
+   min?: Cx.NumberProp;
+
+   /** Maximum value. */
+   max?: Cx.NumberProp;
+
+   /** Set to `true` to normalize the input range. */
+   normalized?: Cx.BooleanProp;
+
+   /** Number used to divide values before rendering axis labels. Default value is `1`. */
+   labelDivisor?: Cx.NumberProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `numericaxis`. */
+   baseClass?: string;
+
+   tickDivisions?: Array<number[]>;
+
+   /** A number ranged between `0-2`. `0` means that the range is aligned with the lowest ticks. Default value is `1`, which means that the range is aligned with medium ticks. Use value `2` to align with major ticks. */
+   snapToTicks?: 0 | 1 | 2;
+
+   /** Value format. Default is `n`. */
+   format?: Cx.StringProp;
+
+   /** Size of a zone reserved for labels for both lower and upper end of the axis. */
+   deadZone?: Cx.NumberProp;
+
+   /** Size of a zone reserved for labels near the upper (higher) end of the axis.  */
+   upperDeadZone?: Cx.NumberProp;
+
+   /** Size of a zone reserved for labels near the lower end of the axis.   */
+   lowerDeadZone?: Cx.NumberProp;
+
+   /** Specifies minimum value increment between labels. Useful when formatting is not flexible enough, i.e. set to 1 for integer axes to avoid duplicate labels. */
+   minLabelTickSize?: number;
+}
+
+export class NumericAxis extends Cx.Widget<NumericAxisProps> {
+   static XY(): {
+      x: { type: NumericAxis };
+      y: { type: NumericAxis; vertical: true };
+   };
+}