cx 25.10.1 → 26.0.1

package/src/charts/axis/Axis.js

@@ -1,288 +0,0 @@
-import { BoundedObject } from "../../svg/BoundedObject";
-import { VDOM } from "../../ui/Widget";
-import { isUndefined } from "../../util/isUndefined";
-import { parseStyle } from "../../util/parseStyle";
-
-export class Axis extends BoundedObject {
-   init() {
-      if (this.labelAnchor == "auto") this.labelAnchor = this.vertical ? (this.secondary ? "start" : "end") : "middle";
-
-      if (this.labelDx == "auto") this.labelDx = 0;
-
-      if (this.labelDy == "auto") this.labelDy = this.vertical ? "0.4em" : this.secondary ? 0 : "0.8em";
-
-      if (isUndefined(this.minLabelDistance))
-         this.minLabelDistance = this.vertical ? this.minLabelDistanceVertical : this.minLabelDistanceHorizontal;
-
-      if (this.labelLineCountDyFactor == "auto")
-         this.labelLineCountDyFactor = this.vertical ? -this.labelLineHeight / 2 : this.secondary ? -1 : 0;
-
-      this.lineStyle = parseStyle(this.lineStyle);
-      this.tickStyle = parseStyle(this.tickStyle);
-      this.labelStyle = parseStyle(this.labelStyle);
-
-      super.init();
-   }
-
-   declareData() {
-      super.declareData(
-         {
-            anchors: undefined,
-            hideLabels: undefined,
-            hideLine: undefined,
-            hideTicks: undefined,
-            labelRotation: undefined,
-            labelAnchor: undefined,
-            lineStyle: undefined,
-            lineClass: undefined,
-            labelStyle: undefined,
-            labelClass: undefined,
-            tickStyle: undefined,
-            tickClass: undefined,
-         },
-         ...arguments,
-      );
-   }
-
-   prepareData(context, instance) {
-      super.prepareData(context, instance);
-      if (this.onCreateLabelFormatter)
-         instance.labelFormatter = instance.invoke("onCreateLabelFormatter", context, instance);
-   }
-
-   report(context, instance) {
-      return instance.calculator;
-   }
-
-   reportData(context, instance) {}
-
-   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(minLabelDistance);
-
-      var labelClass = CSS.expand(CSS.element(baseClass, "label"), data.labelClass);
-      var offsetClass = CSS.element(baseClass, "label-offset");
-
-      var x1,
-         y1,
-         x2,
-         y2,
-         tickSize = this.tickSize,
-         tickOffset = this.tickOffset;
-
-      if (this.vertical) {
-         x1 = x2 = this.secondary ? bounds.r : bounds.l;
-         y1 = bounds.b;
-         y2 = bounds.t;
-      } else {
-         x1 = bounds.l;
-         x2 = bounds.r;
-         y1 = y2 = this.secondary ? bounds.t : bounds.b;
-      }
-
-      var res = [null, null];
-
-      if (!data.hideLine) {
-         res[0] = (
-            <line
-               key="line"
-               className={CSS.expand(CSS.element(baseClass, "line"), data.lineClass)}
-               style={data.lineStyle}
-               x1={x1}
-               y1={y1}
-               x2={x2}
-               y2={y2}
-            />
-         );
-      }
-
-      var t = [];
-      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 + 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;
-               }
-
-               if (!this.useGridlineTicks) t.push(`M ${x1} ${y1} L ${x2} ${y2}`);
-
-               var x, y;
-               let labelOffset =
-                  this.alternateLabelOffset != null && i % 2 == 1 ? this.alternateLabelOffset : this.labelOffset;
-
-               if (this.secondary) {
-                  x = this.vertical ? bounds.r + labelOffset : s;
-                  y = this.vertical ? s : bounds.t - labelOffset;
-               } else {
-                  x = this.vertical ? bounds.l - labelOffset : s;
-                  y = this.vertical ? s : bounds.b + labelOffset;
-               }
-
-               var transform = data.labelRotation ? `rotate(${data.labelRotation} ${x} ${y})` : null;
-               var formattedValue = valueFormatter(v);
-               var lines = labelFormatter
-                  ? labelFormatter(formattedValue, v, { tickIndex: si, serieIndex: i })
-                  : this.wrapLines(formattedValue);
-               res.push(
-                  <text
-                     key={`label-${si}-${i}`}
-                     className={labelClass}
-                     style={data.labelStyle}
-                     x={x}
-                     y={y}
-                     textAnchor={data.labelAnchor}
-                     transform={transform}
-                  >
-                     {this.renderLabels(lines, x, this.labelDy, this.labelDx, offsetClass)}
-                  </text>,
-               );
-            });
-         });
-      }
-
-      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"
-               className={CSS.expand(CSS.element(baseClass, "ticks"), data.tickClass)}
-               style={data.tickStyle}
-               d={t.join(" ")}
-            />
-         );
-      }
-
-      return res;
-   }
-
-   wrapLines(str) {
-      if (!this.labelWrap || typeof str != "string") return [{ text: str }];
-
-      let parts = str.split(" ");
-      if (parts.length == 0) return null;
-
-      let lines = [];
-      let line = null;
-      for (let i = 0; i < parts.length; i++) {
-         if (!line) line = parts[i];
-         else if (parts[i].length + line.length < this.labelMaxLineLength) line += " " + parts[i];
-         else {
-            lines.push({ text: line });
-            line = parts[i];
-         }
-      }
-      lines.push({ text: line });
-      return lines;
-   }
-
-   renderLabels(lines, x, dy, dx, offsetClass) {
-      let offset = this.labelLineCountDyFactor * (lines.length - 1);
-      let result = [];
-
-      if (lines.length > 1 && dy != null) {
-         result.push(
-            <tspan key={-2} className={offsetClass} dy={dy}>
-               _
-            </tspan>,
-         );
-      }
-
-      lines.forEach((p, i) => {
-         let data =
-            p.data != null
-               ? Object.entries(p.data).reduce((acc, [key, val]) => {
-                    acc[`data-${key}`] = val;
-                    return acc;
-                 }, {})
-               : null;
-         result.push(
-            <tspan
-               key={i}
-               dy={lines.length > 1 ? `${i == 0 ? offset : this.labelLineHeight}em` : dy}
-               x={x}
-               style={p.style}
-               className={p.className}
-               dx={dx}
-               {...data}
-            >
-               {p.text}
-            </tspan>,
-         );
-      });
-      return result;
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      var { bounds } = instance.data;
-      var [a, b] = !this.vertical ? [bounds.l, bounds.r] : [bounds.b, bounds.t];
-      instance.calculator.measure(a, b);
-      if (this.onMeasured) instance.invoke("onMeasured", instance.calculator.hash(), instance);
-      if (!instance.calculator.isSame(instance.cached.axis)) instance.markShouldUpdate(context);
-   }
-
-   cleanup(context, instance) {
-      var { cached, calculator } = instance;
-      cached.axis = calculator.hash();
-   }
-}
-
-Axis.prototype.anchors = "0 1 1 0";
-Axis.prototype.styled = true;
-Axis.prototype.vertical = false;
-Axis.prototype.secondary = false;
-Axis.prototype.inverted = false;
-Axis.prototype.hidden = false;
-Axis.prototype.hideLabels = false;
-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;
-Axis.prototype.labelOffset = 10;
-Axis.prototype.alternateLabelOffset = null;
-Axis.prototype.labelRotation = 0;
-Axis.prototype.labelAnchor = "auto";
-Axis.prototype.labelDx = "auto";
-Axis.prototype.labelDy = "auto";
-Axis.prototype.labelWrap = false;
-Axis.prototype.labelLineCountDyFactor = "auto";
-Axis.prototype.labelLineHeight = 1;
-Axis.prototype.labelMaxLineLength = 10;
-
-Axis.namespace = "ui.svg.chart.axis";

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

@@ -1,30 +0,0 @@
-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;
-
-   /** Additional label formatting. No format is set by default, values appear as is. Useful when values are not strings or string values that are too long.*/
-   format?: Cx.StringProp;
-}
-
-export class CategoryAxis extends Cx.Widget<CategoryAxisProps> {}

package/src/charts/axis/CategoryAxis.js

@@ -1,241 +0,0 @@
-import { Axis } from "./Axis";
-import { VDOM } from "../../ui/Widget";
-import { isUndefined } from "../../util/isUndefined";
-import { isArray } from "../../util/isArray";
-import { Format } from "../../util/Format";
-
-export class CategoryAxis extends Axis {
-   declareData() {
-      super.declareData(...arguments, {
-         inverted: undefined,
-         uniform: undefined,
-         names: undefined,
-         values: undefined,
-         minSize: undefined,
-         categoryCount: undefined,
-         format: undefined,
-      });
-   }
-
-   initInstance(context, instance) {
-      instance.calculator = new CategoryScale();
-   }
-
-   explore(context, instance) {
-      super.explore(context, instance);
-      var { values, names, inverted, uniform, minSize } = instance.data;
-      instance.calculator.reset(inverted, uniform, values, names, minSize, this.minTickDistance, this.minLabelDistance);
-   }
-
-   reportData(context, instance) {
-      instance.set("categoryCount", instance.calculator.valueList.length);
-   }
-
-   render(context, instance, key) {
-      var { data, calculator } = instance;
-
-      if (!data.bounds.valid()) return null;
-
-      let labelGetter = (v) => calculator.names[v] ?? v;
-      let labelFormatter = labelGetter;
-      if (data.format) {
-         let formatter = Format.parse(data.format);
-         labelFormatter = (v) => formatter(labelGetter(v));
-      }
-      return (
-         <g key={key} className={data.classNames} style={data.style}>
-            {this.renderTicksAndLabels(context, instance, labelFormatter)}
-         </g>
-      );
-   }
-}
-
-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.minSize = 1;
-CategoryAxis.prototype.minLabelDistanceHorizontal = 0;
-CategoryAxis.prototype.minLabelDistanceVertical = 0;
-CategoryAxis.prototype.minTickDistance = 0;
-
-Axis.alias("category", CategoryAxis);
-
-class CategoryScale {
-   reset(inverted, uniform, values, names, minSize, minTickDistance, minLabelDistance) {
-      this.padding = 0.5;
-      delete this.min;
-      delete this.max;
-      delete this.minValue;
-      delete this.maxValue;
-      this.minSize = minSize;
-      this.valuesMap = {};
-      this.valueList = [];
-      this.inverted = inverted;
-      this.uniform = uniform;
-      this.valueStacks = {};
-      this.names = {};
-      this.minTickDistance = minTickDistance;
-      this.minLabelDistance = minLabelDistance;
-
-      if (values) {
-         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];
-            }
-      }
-
-      if (names) {
-         if (isArray(names)) {
-            values = values || [];
-            names.forEach((name, index) => {
-               var value = values[index];
-               this.names[value != null ? value : index] = name;
-            });
-         } else this.names = names;
-      }
-   }
-
-   decodeValue(n) {
-      return n;
-   }
-
-   encodeValue(v) {
-      return v;
-   }
-
-   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.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.tickSizes = [];
-      let tickMultiplier = [1, 2, 5];
-      let absFactor = Math.abs(this.factor);
-      for (let base = 1; base < 10000 && this.tickSizes.length < 2; base *= 10) {
-         for (let m of tickMultiplier) {
-            if (base * m * absFactor >= this.minTickDistance && this.tickSizes.length == 0)
-               this.tickSizes.push(base * m);
-            if (base * m * absFactor >= this.minLabelDistance) {
-               this.tickSizes.push(base * m);
-               break;
-            }
-         }
-      }
-   }
-
-   hash() {
-      return {
-         origin: this.origin,
-         factor: this.factor,
-         min: this.min,
-         minSize: this.minSize,
-         padding: this.padding,
-         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]);
-      this.shouldUpdate = !same;
-      return same;
-   }
-
-   acknowledge(value, width = 0, offset = 0) {
-      var index = this.valuesMap[value];
-      if (isUndefined(index)) {
-         index = this.valueList.length;
-         this.valueList.push(value);
-         this.valuesMap[value] = index;
-      }
-
-      if (this.minValue == null || index < this.minValue) {
-         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));
-      }
-   }
-
-   book(value, name) {
-      if (this.uniform) value = 0;
-
-      var stack = this.valueStacks[value];
-      if (!stack)
-         stack = this.valueStacks[value] = {
-            index: {},
-            count: 0,
-         };
-      if (!stack.index.hasOwnProperty(name)) stack.index[name] = stack.count++;
-   }
-
-   locate(value, name) {
-      if (this.uniform) value = 0;
-
-      var stack = this.valueStacks[value];
-      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;
-      return this.valueList[index];
-   }
-
-   findTickSize(minPxDist) {
-      for (let tickSize of this.tickSizes) if (tickSize * Math.abs(this.factor) >= minPxDist) return tickSize;
-      return 1;
-   }
-
-   getTickSizes() {
-      return this.tickSizes;
-   }
-
-   getTicks(tickSizes) {
-      return tickSizes.map((size) => this.valueList.filter((_, i) => i % size == 0));
-   }
-
-   mapGridlines() {
-      let result = [];
-      if (this.tickSizes.length == 0) return result;
-      let step = this.tickSizes[0];
-      for (let index = this.min; index <= this.max + 1; index += step)
-         result.push(this.origin + (index - 0.5 - this.min + this.padding) * this.factor);
-      return result;
-   }
-}

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

@@ -1,46 +0,0 @@
-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 };
-   };
-}