cx 23.12.3 → 24.0.1

package/dist/ui.js

@@ -847,6 +847,8 @@ var Localization = /*#__PURE__*/ (function () {
 })();
 
 var culture = "en";
+var numberCulture = null;
+var dateTimeCulture = null;
 var cultureCache = {};
 var defaultCurrency = "USD";
 var dateEncoding = function dateEncoding(date) {
@@ -860,6 +862,16 @@ var Culture = /*#__PURE__*/ (function () {
 		Localization.setCulture(cultureCode);
 		this.invalidateCache();
 	};
+	Culture.setNumberCulture = function setNumberCulture(cultureCode) {
+		numberCulture = cultureCode;
+		delete cultureCache.numberCulture;
+		this.invalidateCache();
+	};
+	Culture.setDateTimeCulture = function setDateTimeCulture(cultureCode) {
+		dateTimeCulture = cultureCode;
+		delete cultureCache.dateTimeCulture;
+		this.invalidateCache();
+	};
 	Culture.setDefaultCurrency = function setDefaultCurrency(currencyCode) {
 		defaultCurrency = currencyCode;
 		this.invalidateCache();
@@ -870,12 +882,20 @@ var Culture = /*#__PURE__*/ (function () {
 		invalidateStringTemplateCache();
 	};
 	Culture.getNumberCulture = function getNumberCulture() {
-		if (!cultureCache.numberCulture) cultureCache.numberCulture = new NumberCulture(culture);
+		var _numberCulture;
+		if (!cultureCache.numberCulture)
+			cultureCache.numberCulture = new NumberCulture(
+				(_numberCulture = numberCulture) != null ? _numberCulture : culture
+			);
 		return cultureCache.numberCulture;
 	};
 	Culture.getDateTimeCulture = function getDateTimeCulture() {
-		if (!cultureCache.dateCulture) cultureCache.dateCulture = new DateTimeCulture(culture);
-		return cultureCache.dateCulture;
+		var _dateTimeCulture;
+		if (!cultureCache.dateTimeCulture)
+			cultureCache.dateTimeCulture = new DateTimeCulture(
+				(_dateTimeCulture = dateTimeCulture) != null ? _dateTimeCulture : culture
+			);
+		return cultureCache.dateTimeCulture;
 	};
 	Culture.getDefaultDateEncoding = function getDefaultDateEncoding() {
 		return dateEncoding;
@@ -1465,60 +1485,91 @@ var ZIndexManager = /*#__PURE__*/ (function () {
 
 var Format = Format$1;
 var cultureSensitiveFormatsRegistered = false;
+function resolveNumberFormattingFlags(flags) {
+	if (!flags) return null;
+	var result = {};
+	if (flags.indexOf("+") >= 0) result.signDisplay = "exceptZero";
+	if (flags.indexOf("c") >= 0) result.notation = "compact";
+	if (flags.indexOf("a") >= 0) result.currencySign = "accounting";
+	return result;
+}
 function enableCultureSensitiveFormatting() {
 	if (cultureSensitiveFormatsRegistered) return;
 	cultureSensitiveFormatsRegistered = true;
-	Format$1.registerFactory(["number", "n"], function (format, minimumFractionDigits, maximumFractionDigits) {
+	Format$1.registerFactory(["number", "n"], function (format, minimumFractionDigits, maximumFractionDigits, flags) {
 		var culture = Culture.getNumberCulture();
-		var formatter = culture.getFormatter(resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits));
-		return function (value) {
-			return formatter.format(value);
-		};
-	});
-	Format$1.registerFactory("currency", function (format, currency, minimumFractionDigits, maximumFractionDigits) {
-		var culture = Culture.getNumberCulture();
-		currency = currency || Culture.defaultCurrency;
 		var formatter = culture.getFormatter(
 			_objectSpread2(
-				{
-					style: "currency",
-					currency: currency,
-				},
-				resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits)
+				_objectSpread2({}, resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits)),
+				resolveNumberFormattingFlags(flags)
 			)
 		);
 		return function (value) {
 			return formatter.format(value);
 		};
 	});
-	Format$1.registerFactory(["percentage", "p", "%"], function (format, minimumFractionDigits, maximumFractionDigits) {
-		var culture = Culture.getNumberCulture();
-		var formatter = culture.getFormatter(
-			_objectSpread2(
-				{
-					style: "percent",
-				},
-				resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits)
-			)
-		);
-		return function (value) {
-			return formatter.format(value);
-		};
-	});
-	Format$1.registerFactory(["percentSign", "ps"], function (format, minimumFractionDigits, maximumFractionDigits) {
-		var culture = Culture.getNumberCulture();
-		var formatter = culture.getFormatter(
-			_objectSpread2(
-				{
-					style: "percent",
-				},
-				resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits)
-			)
-		);
-		return function (value) {
-			return formatter.format(value / 100);
-		};
-	});
+	Format$1.registerFactory(
+		"currency",
+		function (format, currency, minimumFractionDigits, maximumFractionDigits, flags) {
+			var culture = Culture.getNumberCulture();
+			currency = currency || Culture.defaultCurrency;
+			var formatter = culture.getFormatter(
+				_objectSpread2(
+					_objectSpread2(
+						{
+							style: "currency",
+							currency: currency,
+						},
+						resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits)
+					),
+					resolveNumberFormattingFlags(flags)
+				)
+			);
+			return function (value) {
+				return formatter.format(value);
+			};
+		}
+	);
+	Format$1.registerFactory(
+		["percentage", "p", "%"],
+		function (format, minimumFractionDigits, maximumFractionDigits, flags) {
+			var culture = Culture.getNumberCulture();
+			var formatter = culture.getFormatter(
+				_objectSpread2(
+					_objectSpread2(
+						{
+							style: "percent",
+						},
+						resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits)
+					),
+					resolveNumberFormattingFlags(flags)
+				)
+			);
+			return function (value) {
+				return formatter.format(value);
+			};
+		}
+	);
+	Format$1.registerFactory(
+		["percentSign", "ps"],
+		function (format, minimumFractionDigits, maximumFractionDigits, flags) {
+			var culture = Culture.getNumberCulture();
+			var formatter = culture.getFormatter(
+				_objectSpread2(
+					_objectSpread2(
+						{
+							style: "percent",
+						},
+						resolveMinMaxFractionDigits(minimumFractionDigits, maximumFractionDigits)
+					),
+					resolveNumberFormattingFlags(flags)
+				)
+			);
+			return function (value) {
+				return formatter.format(value / 100);
+			};
+		}
+	);
 	Format$1.registerFactory(["date", "d"], function (fmt, format) {
 		if (format === void 0) {
 			format = "yyyyMMdd";
@@ -4458,6 +4509,7 @@ export {
 	preventFocus,
 	preventFocusOnTouch,
 	registerKeyboardShortcut,
+	resolveNumberFormattingFlags,
 	startAppLoop,
 	startHotAppLoop,
 	tpl,

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "23.12.3",
+   "version": "24.0.1",
    "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/PieLabel.js

@@ -1,71 +1,71 @@
-import { VDOM } from "../ui/Widget";
-import { BoundedObject } from "../svg/BoundedObject";
-import { Rect } from "../svg/util/Rect";
-import { parseStyle } from "../util/parseStyle";
-
-export class PieLabel extends BoundedObject {
-   init() {
-      this.lineStyle = parseStyle(this.lineStyle);
-      super.init();
-   }
-
-   declareData(...args) {
-      super.declareData(...args, {
-         distance: undefined,
-         lineStyle: { structured: true },
-         lineStroke: undefined,
-         lineClass: { structured: true },
-         lineColorIndex: undefined,
-      });
-   }
-
-   calculateBounds(context, instance) {
-      var { data } = instance;
-      var bounds = Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
-      instance.originalBounds = bounds;
-      instance.actualBounds = context.placePieLabel(bounds, data.distance);
-      return new Rect({ t: 0, r: bounds.width(), b: bounds.height(), l: 0 });
-   }
-
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      if (!context.registerPieLabel)
-         throw new Error("PieLabel components are allowed only within PieLabelsContainer components.");
-      let right = instance.parentRect.r > instance.parentRect.l;
-      context.push("textDirection", right ? "right" : "left");
-      context.registerPieLabel(instance);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("textDirection");
-   }
-
-   render(context, instance, key) {
-      let { originalBounds, actualBounds, data } = instance;
-
-      return (
-         <g key={key} className={data.classNames}>
-            <line
-               className={this.CSS.element(
-                  this.baseClass,
-                  "line",
-                  data.lineColorIndex != null && "color-" + data.lineColorIndex
-               )}
-               x1={actualBounds.l < originalBounds.l ? actualBounds.r : actualBounds.l}
-               y1={(actualBounds.t + actualBounds.b) / 2}
-               x2={(originalBounds.l + originalBounds.r) / 2}
-               y2={(originalBounds.t + originalBounds.b) / 2}
-               stroke={data.lineStroke}
-               style={data.lineStyle}
-            />
-            <g transform={`translate(${instance.actualBounds.l} ${instance.actualBounds.t})`}>
-               {this.renderChildren(context, instance)}
-            </g>
-         </g>
-      );
-   }
-}
-
-PieLabel.prototype.distance = 100;
-PieLabel.prototype.baseClass = "pielabel";
-PieLabel.prototype.styled = true;
+import { VDOM } from "../ui/Widget";
+import { BoundedObject } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+import { parseStyle } from "../util/parseStyle";
+
+export class PieLabel extends BoundedObject {
+   init() {
+      this.lineStyle = parseStyle(this.lineStyle);
+      super.init();
+   }
+
+   declareData(...args) {
+      super.declareData(...args, {
+         distance: undefined,
+         lineStyle: { structured: true },
+         lineStroke: undefined,
+         lineClass: { structured: true },
+         lineColorIndex: undefined,
+      });
+   }
+
+   calculateBounds(context, instance) {
+      var { data } = instance;
+      var bounds = Rect.add(Rect.add(Rect.multiply(instance.parentRect, data.anchors), data.offset), data.margin);
+      instance.originalBounds = bounds;
+      instance.actualBounds = context.placePieLabel(bounds, data.distance);
+      return new Rect({ t: 0, r: bounds.width(), b: bounds.height(), l: 0 });
+   }
+
+   prepare(context, instance) {
+      super.prepare(context, instance);
+      if (!context.registerPieLabel)
+         throw new Error("PieLabel components are allowed only within PieLabelsContainer components.");
+      let right = instance.parentRect.r > instance.parentRect.l;
+      context.push("textDirection", right ? "right" : "left");
+      context.registerPieLabel(instance);
+   }
+
+   prepareCleanup(context, instance) {
+      context.pop("textDirection");
+   }
+
+   render(context, instance, key) {
+      let { originalBounds, actualBounds, data } = instance;
+
+      return (
+         <g key={key} className={data.classNames}>
+            <line
+               className={this.CSS.element(
+                  this.baseClass,
+                  "line",
+                  data.lineColorIndex != null && "color-" + data.lineColorIndex
+               )}
+               x1={actualBounds.l < originalBounds.l ? actualBounds.r : actualBounds.l}
+               y1={(actualBounds.t + actualBounds.b) / 2}
+               x2={(originalBounds.l + originalBounds.r) / 2}
+               y2={(originalBounds.t + originalBounds.b) / 2}
+               stroke={data.lineStroke}
+               style={data.lineStyle}
+            />
+            <g transform={`translate(${instance.actualBounds.l} ${instance.actualBounds.t})`}>
+               {this.renderChildren(context, instance)}
+            </g>
+         </g>
+      );
+   }
+}
+
+PieLabel.prototype.distance = 100;
+PieLabel.prototype.baseClass = "pielabel";
+PieLabel.prototype.styled = true;

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