cx 24.0.3 → 24.3.0

package/dist/ui.js

@@ -2895,7 +2895,7 @@ var subscribers$1,
 	eventBan = 0;
 function executeKeyboardShortcuts(e) {
 	if (Date.now() < eventBan) return;
-	//Avoid duplicate executions as event.stopPropagation() for React events does not stop native events
+	// Avoid duplicate executions as event.stopPropagation() for React events does not stop native events
 	eventBan = Date.now() + 5;
 	subscribers$1 && subscribers$1.notify(e);
 }

package/dist/widgets.js

@@ -6974,7 +6974,7 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
 				className: CSS.element(baseClass, "left-icon"),
 				onMouseDown: preventDefault,
 				onClick: function onClick(e) {
-					return _this2.onChange(e, "enter");
+					return _this2.onChange(e.target.value, "enter");
 				},
 				children: iconVDOM,
 			});
@@ -7038,10 +7038,10 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
 							onMouseMove: this.onMouseMove.bind(this),
 							onMouseLeave: this.onMouseLeave.bind(this),
 							onInput: function onInput(e) {
-								return _this2.onChange(e, "input");
+								return _this2.onChange(e.target.value, "input");
 							},
 							onChange: function onChange(e) {
-								return _this2.onChange(e, "change");
+								return _this2.onChange(e.target.value, "change");
 							},
 							onKeyDown: this.onKeyDown.bind(this),
 							onFocus: this.onFocus.bind(this),
@@ -7080,7 +7080,7 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
 			});
 			this.props.instance.set("focused", false);
 		}
-		this.onChange(e, "blur");
+		this.onChange(e.target.value, "blur");
 	};
 	_proto2.onClearClick = function onClearClick(e) {
 		this.props.instance.set("value", this.props.instance.widget.emptyValue, {
@@ -7101,6 +7101,7 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
 		autoFocus(this.input, this);
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
+		if (this.input == getActiveElement()) this.onChange(this.input.value, "blur");
 		tooltipParentWillUnmount$1(this.props.instance);
 	};
 	_proto2.onKeyDown = function onKeyDown(e) {
@@ -7108,7 +7109,7 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
 		if (instance.widget.handleKeyDown(e, instance) === false) return;
 		switch (e.keyCode) {
 			case KeyCode.enter:
-				this.onChange(e, "enter");
+				this.onChange(e.target.value, "enter");
 				break;
 			case KeyCode.left:
 			case KeyCode.right:
@@ -7118,12 +7119,12 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
 	};
 	_proto2.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(props) {
 		var data = props.data;
-		//the second check is required for debouncing, sometimes the value in the store lags after the input
-		//and update may be caused by some other property, i.e. visited
+		// The second check is required for debouncing, sometimes the value in the store lags after the input
+		// and update may be caused by some other property, i.e. visited
 		if (data.value != this.input.value && data.value != this.props.data.value) this.input.value = data.value || "";
 		tooltipParentWillReceiveProps$1.apply(void 0, [this.input].concat(getFieldTooltip(props.instance)));
 	};
-	_proto2.onChange = function onChange(e, change) {
+	_proto2.onChange = function onChange(textValue, change) {
 		var _this$props3 = this.props,
 			instance = _this$props3.instance,
 			data = _this$props3.data;
@@ -7135,7 +7136,7 @@ var Input$2 = /*#__PURE__*/ (function (_VDOM$Component) {
 		}
 		var widget = instance.widget;
 		if (widget.reactOn.indexOf(change) != -1) {
-			var text = this.trimmed(e.target.value);
+			var text = this.trimmed(textValue);
 			if (data.maxLength != null && text.length > data.maxLength) {
 				text = text.substring(0, data.maxLength);
 				this.input.value = text;
@@ -10000,6 +10001,16 @@ var Input$1 = /*#__PURE__*/ (function (_VDOM$Component) {
 		autoFocus(this.input, this);
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
+		if (this.input == getActiveElement()) {
+			this.onChange(
+				{
+					target: {
+						value: this.input.value,
+					},
+				},
+				"blur",
+			);
+		}
 		tooltipParentWillUnmount$1(this.props.instance);
 	};
 	_proto2.getPreCursorDigits = function getPreCursorDigits(text, cursor, decimalSeparator) {
@@ -10143,12 +10154,12 @@ var Input$1 = /*#__PURE__*/ (function (_VDOM$Component) {
 			var fmt = data.format;
 			var decimalSeparator = this.getDecimalSeparator(fmt) || Format.value(1.1, "n;1")[1];
 			var formatted = Format.value(value, fmt);
-			//re-parse to avoid differences between formatted value and value in the store
+			// Re-parse to avoid differences between formatted value and value in the store
 
 			value = widget.parseValue(formatted, instance) * data.scale + data.offset;
 
-			//allow users to type numbers like 100.0003 or -0.05 without interruptions
-			//if the last typed in character is zero or dot (decimal separator) skip processing it
+			// Allow users to type numbers like 100.0003 or -0.05 without interruptions
+			// If the last typed character is zero or dot (decimal separator), skip processing it
 			if (
 				change == "change" &&
 				this.input.selectionStart == this.input.selectionEnd &&
@@ -10159,7 +10170,7 @@ var Input$1 = /*#__PURE__*/ (function (_VDOM$Component) {
 			)
 				return;
 			if (change != "blur") {
-				//format, but keep the correct cursor position
+				// Format, but keep the correct cursor position
 				var preCursorText = this.getPreCursorDigits(this.input.value, this.input.selectionStart, decimalSeparator);
 				this.input.value = formatted;
 				this.updateCursorPosition(preCursorText);
@@ -10290,13 +10301,13 @@ var Input = /*#__PURE__*/ (function (_VDOM$Component) {
 						data.inputAttrs,
 						{
 							onInput: function onInput(e) {
-								return _this2.onChange(e, "input");
+								return _this2.onChange(e.target.value, "input");
 							},
 							onChange: function onChange(e) {
-								return _this2.onChange(e, "change");
+								return _this2.onChange(e.target.value, "change");
 							},
 							onBlur: function onBlur(e) {
-								_this2.onChange(e, "blur");
+								_this2.onChange(e.target.value, "blur");
 							},
 							onFocus: function onFocus(e) {
 								return _this2.onFocus();
@@ -10320,6 +10331,9 @@ var Input = /*#__PURE__*/ (function (_VDOM$Component) {
 		});
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
+		if (this.input == getActiveElement()) {
+			this.onChange(this.input.value, "blur");
+		}
 		tooltipParentWillUnmount$1(this.props.instance);
 	};
 	_proto2.componentDidMount = function componentDidMount() {
@@ -10349,7 +10363,7 @@ var Input = /*#__PURE__*/ (function (_VDOM$Component) {
 		}
 		tooltipParentWillReceiveProps$1.apply(void 0, [this.input].concat(getFieldTooltip(instance)));
 	};
-	_proto2.onChange = function onChange(e, change) {
+	_proto2.onChange = function onChange(inputValue, change) {
 		var _this$props2 = this.props,
 			instance = _this$props2.instance,
 			data = _this$props2.data;
@@ -10365,11 +10379,11 @@ var Input = /*#__PURE__*/ (function (_VDOM$Component) {
 		}
 		if (data.required) {
 			instance.setState({
-				empty: !e.target.value,
+				empty: !inputValue,
 			});
 		}
 		if (instance.widget.reactOn.indexOf(change) != -1) {
-			var value = e.target.value || widget.emptyValue;
+			var value = inputValue || widget.emptyValue;
 			instance.set("value", value);
 		}
 	};
@@ -12111,10 +12125,10 @@ var MonthInput = /*#__PURE__*/ (function (_VDOM$Component) {
 					tabIndex: data.tabIndex,
 					placeholder: data.placeholder,
 					onInput: function onInput(e) {
-						return _this3.onChange(e, "input");
+						return _this3.onChange(e.target.value, "input");
 					},
 					onChange: function onChange(e) {
-						return _this3.onChange(e, "change");
+						return _this3.onChange(e.target.value, "change");
 					},
 					onKeyDown: function onKeyDown(e) {
 						return _this3.onKeyDown(e);
@@ -12171,7 +12185,7 @@ var MonthInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		switch (e.keyCode) {
 			case KeyCode.enter:
 				e.stopPropagation();
-				this.onChange(e, "enter");
+				this.onChange(e.target.value, "enter");
 				break;
 			case KeyCode.esc:
 				if (this.state.dropdownOpen) {
@@ -12201,7 +12215,7 @@ var MonthInput = /*#__PURE__*/ (function (_VDOM$Component) {
 			this.setState({
 				focus: false,
 			});
-		this.onChange(e, "blur");
+		this.onChange(e.target.value, "blur");
 	};
 	_proto2.closeDropdown = function closeDropdown(e, callback) {
 		var _this5 = this;
@@ -12257,13 +12271,16 @@ var MonthInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		autoFocus(this.input, this);
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
+		if (this.input == getActiveElement()) {
+			this.onChange(this.input.value, "blur");
+		}
 		tooltipParentWillUnmount$1(this.props.instance);
 	};
-	_proto2.onChange = function onChange(e, eventType) {
+	_proto2.onChange = function onChange(inputValue, eventType) {
 		var instance = this.props.instance;
 		var widget = instance.widget;
 		if (widget.reactOn.indexOf(eventType) == -1) return;
-		var parts = e.target.value.split("-");
+		var parts = inputValue.split("-");
 		var date1 = widget.parseDate(parts[0]);
 		var date2 = widget.parseDate(parts[1]) || date1;
 		if ((date1 != null && isNaN(date1)) || (date2 != null && isNaN(date2))) {
@@ -12503,10 +12520,10 @@ var ColorInput = /*#__PURE__*/ (function (_VDOM$Component) {
 						data.inputAttrs,
 						{
 							onInput: function onInput(e) {
-								return _this3.onChange(e, "input");
+								return _this3.onChange(e.target.value, "input");
 							},
 							onChange: function onChange(e) {
-								return _this3.onChange(e, "change");
+								return _this3.onChange(e.target.value, "change");
 							},
 							onKeyDown: function onKeyDown(e) {
 								return _this3.onKeyDown(e);
@@ -12565,7 +12582,7 @@ var ColorInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		switch (e.keyCode) {
 			case KeyCode.enter:
 				e.stopPropagation();
-				this.onChange(e, "enter");
+				this.onChange(e.target.value, "enter");
 				break;
 			case KeyCode.esc:
 				if (this.state.dropdownOpen) {
@@ -12591,7 +12608,7 @@ var ColorInput = /*#__PURE__*/ (function (_VDOM$Component) {
 			this.setState({
 				focus: false,
 			});
-		this.onChange(e, "blur");
+		this.onChange(e.target.value, "blur");
 	};
 	_proto2.closeDropdown = function closeDropdown(e, callback) {
 		var _this5 = this;
@@ -12639,6 +12656,9 @@ var ColorInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		if (this.props.instance.widget.autoFocus && !isTouchDevice()) this.input.focus();
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
+		if (this.input == getActiveElement()) {
+			this.onChange(this.input.value, "blur");
+		}
 		tooltipParentWillUnmount$1(this.props.instance);
 	};
 	_proto2.onClearClick = function onClearClick(e) {
@@ -12650,25 +12670,25 @@ var ColorInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		e.stopPropagation();
 		e.preventDefault();
 	};
-	_proto2.onChange = function onChange(e, eventType) {
+	_proto2.onChange = function onChange(inputValue, eventType) {
 		var _this$props2 = this.props,
 			instance = _this$props2.instance,
 			data = _this$props2.data;
 		var widget = instance.widget;
-		if (eventType == "blur")
+		if (eventType == "blur") {
 			instance.setState({
 				visited: true,
 			});
-		var text = e.target.value;
+		}
 		var isValid;
 		try {
-			parseColor(text);
+			parseColor(inputValue);
 			isValid = true;
 		} catch (e) {
 			isValid = false;
 		}
 		if (eventType == "blur" || eventType == "enter") {
-			var value = text || widget.emptyValue;
+			var value = inputValue || widget.emptyValue;
 			if (isValid && value !== data.value) instance.set("value", value);
 			instance.setState({
 				inputError: !isValid && "Invalid color entered.",
@@ -14631,10 +14651,10 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
 						data.inputAttrs,
 						{
 							onInput: function onInput(e) {
-								return _this3.onChange(e, "input");
+								return _this3.onChange(e.target.value, "input");
 							},
 							onChange: function onChange(e) {
-								return _this3.onChange(e, "change");
+								return _this3.onChange(e.target.value, "change");
 							},
 							onKeyDown: function onKeyDown(e) {
 								return _this3.onKeyDown(e);
@@ -14696,7 +14716,7 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		if (instance.widget.handleKeyDown(e, instance) === false) return;
 		switch (e.keyCode) {
 			case KeyCode.enter:
-				this.onChange(e, "enter");
+				this.onChange(e.target.value, "enter");
 				break;
 			case KeyCode.esc:
 				if (this.state.dropdownOpen) {
@@ -14727,7 +14747,7 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
 			this.setState({
 				focus: false,
 			});
-		this.onChange(e, "blur");
+		this.onChange(e.target.value, "blur");
 	};
 	_proto2.closeDropdown = function closeDropdown(e, callback) {
 		var _this5 = this;
@@ -14783,9 +14803,12 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
 		autoFocus(this.input, this);
 	};
 	_proto2.componentWillUnmount = function componentWillUnmount() {
+		if (this.input == getActiveElement()) {
+			this.onChange(this.input.value, "blur");
+		}
 		tooltipParentWillUnmount$1(this.props.instance);
 	};
-	_proto2.onChange = function onChange(e, eventType) {
+	_proto2.onChange = function onChange(inputValue, eventType) {
 		var _this$props2 = this.props,
 			instance = _this$props2.instance,
 			data = _this$props2.data;
@@ -14796,7 +14819,7 @@ var DateTimeInput = /*#__PURE__*/ (function (_VDOM$Component) {
 			instance.setState({
 				visited: true,
 			});
-		this.setValue(e.target.value, data.value);
+		this.setValue(inputValue, data.value);
 	};
 	_proto2.setValue = function setValue(text, baseValue) {
 		var _this$props3 = this.props,
@@ -19218,6 +19241,7 @@ export {
 	HighlightedSearchText,
 	HtmlElement,
 	Icon,
+	Label,
 	LabeledContainer,
 	Link,
 	LinkButton,

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.0.3",
+   "version": "24.3.0",
    "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/ColorMap.js

@@ -1,5 +1,5 @@
-import {Widget} from '../ui/Widget';
-import {PureContainer} from '../ui/PureContainer';
+import { Widget } from '../ui/Widget';
+import { PureContainer } from '../ui/PureContainer';
 
 export class ColorMap extends Widget {
    declareData() {
@@ -21,7 +21,7 @@ export class ColorMap extends Widget {
             let cache = this.onGetCache ? instance.invoke("onGetCache") : {};
             map = cache[colorMap];
             if (!map) {
-               let {data} = instance;
+               let { data } = instance;
                map = context.colorMaps[colorMap] = cache[colorMap] = new ColorIndex({
                   offset: data.offset,
                   step: data.step,
@@ -67,7 +67,7 @@ ColorMap.Scope = ColorMapScope;
 Widget.alias('color-map', ColorMap);
 
 export class ColorIndex {
-   constructor({offset, step, size}) {
+   constructor({ offset, step, size }) {
       this.colorMap = {};
       this.dirty = true;
       this.offset = offset;
@@ -83,7 +83,6 @@ export class ColorIndex {
    }
 
    map(name) {
-
       if (this.dirty) {
          this.dirty = false;
          if (!this.step) {
@@ -94,6 +93,5 @@ export class ColorIndex {
 
       let index = this.colorMap[name] || 0;
       return Math.round(this.offset + this.step * index + this.size) % this.size;
-
    }
 }

package/src/charts/PieChart.d.ts

@@ -75,6 +75,9 @@ interface PieSliceProps extends Cx.StyledContainerProps {
 
    /** A value used to uniquely identify the record within the hover sync group. */
    hoverId?: Cx.StringProp;
+
+   /** Border radius of the slice. Default is 0. */
+   borderRadius?: Cx.NumberProp;
 }
 
 export class PieSlice extends Cx.Widget<PieSliceProps> {}

package/src/charts/PieChart.js

@@ -102,50 +102,110 @@ class PieCalculator {
    }
 }
 
-function createSvgArc(x, y, r0, r, startAngle, endAngle) {
-   if (startAngle > endAngle) {
-      var s = startAngle;
-      startAngle = endAngle;
-      endAngle = s;
+function createSvgArc(x, y, r0 = 0, r, startAngleRadian, endAngleRadian, br = 0) {
+   if (startAngleRadian > endAngleRadian) {
+      var s = startAngleRadian;
+      startAngleRadian = endAngleRadian;
+      endAngleRadian = s;
    }
 
-   var largeArc = endAngle - startAngle <= Math.PI ? 0 : 1;
+   let path = [];
+   // limit br size based on r and r0
+   if (br > (r - r0) / 2) br = (r - r0) / 2;
+
+   let largeArc = endAngleRadian - startAngleRadian > Math.PI ? 1 : 0;
+
+   if (br > 0) {
+      if (r0 > 0) {
+         let innerBr = br;
+         let innerSmallArcAngle = Math.asin(br / (r0 + br));
+         if (innerSmallArcAngle > (endAngleRadian - startAngleRadian) / 2) {
+            innerSmallArcAngle = (endAngleRadian - startAngleRadian) / 2;
+            let sin = Math.sin(innerSmallArcAngle);
+            // correct br according to newly calculated border radius angle
+            innerBr = (r0 * sin) / (1 - sin);
+         }
+         let innerHip = Math.cos(innerSmallArcAngle) * (r0 + innerBr);
+
+         let innerSmallArc1XFrom = x + Math.cos(endAngleRadian) * innerHip;
+         let innerSmallArc1YFrom = y - Math.sin(endAngleRadian) * innerHip;
+
+         // move from the first small inner arc
+         path.push(move(innerSmallArc1XFrom, innerSmallArc1YFrom));
+
+         let innerSmallArc1XTo = x + Math.cos(endAngleRadian - innerSmallArcAngle) * r0;
+         let innerSmallArc1YTo = y - Math.sin(endAngleRadian - innerSmallArcAngle) * r0;
 
-   if (endAngle - startAngle >= 2 * Math.PI - 0.0001) endAngle = startAngle + 2 * Math.PI - 0.0001;
+         // add first small inner arc
+         path.push(arc(innerBr, innerBr, 0, 0, 0, innerSmallArc1XTo, innerSmallArc1YTo));
 
-   var result = [];
+         let innerArcXTo = x + Math.cos(startAngleRadian + innerSmallArcAngle) * r0;
+         let innerArcYTo = y - Math.sin(startAngleRadian + innerSmallArcAngle) * r0;
 
-   var startX, startY;
+         // add large inner arc
+         path.push(arc(r0, r0, 0, largeArc, 1, innerArcXTo, innerArcYTo));
 
-   if (r0 > 0) {
-      startX = x + Math.cos(endAngle) * r0;
-      startY = y - Math.sin(endAngle) * r0;
-      result.push("M", startX, startY);
+         let innerSmallArc2XTo = x + Math.cos(startAngleRadian) * innerHip;
+         let innerSmallArc2YTo = y - Math.sin(startAngleRadian) * innerHip;
+         // add second small inner arc
+         path.push(arc(innerBr, innerBr, 0, 0, 0, innerSmallArc2XTo, innerSmallArc2YTo));
+      } else {
+         path.push(move(x, y));
+      }
+
+      let outerBr = br;
+      let outerSmallArcAngle = Math.asin(br / (r - br));
+      if (outerSmallArcAngle > (endAngleRadian - startAngleRadian) / 2) {
+         outerSmallArcAngle = (endAngleRadian - startAngleRadian) / 2;
+         let sin = Math.sin(outerSmallArcAngle);
+         // correct br according to newly calculated border radius angle
+         outerBr = (r * sin) / (1 + sin);
+      }
+      let outerHip = Math.cos(outerSmallArcAngle) * (r - outerBr);
 
-      result.push("A", r0, r0, 0, largeArc, 1, x + Math.cos(startAngle) * r0, y - Math.sin(startAngle) * r0);
+      let outerSmallArc1XFrom = x + Math.cos(startAngleRadian) * outerHip;
+      let outerSmallArc1YFrom = y - Math.sin(startAngleRadian) * outerHip;
+
+      let outerSmallArc1XTo = x + Math.cos(startAngleRadian + outerSmallArcAngle) * r;
+      let outerSmallArc1YTo = y - Math.sin(startAngleRadian + outerSmallArcAngle) * r;
+
+      let outerLargeArcXTo = x + Math.cos(endAngleRadian - outerSmallArcAngle) * r;
+      let outerLargeArcYTo = y - Math.sin(endAngleRadian - outerSmallArcAngle) * r;
+
+      let outerSmallArc2XTo = x + Math.cos(endAngleRadian) * outerHip;
+      let outerSmallArc2YTo = y - Math.sin(endAngleRadian) * outerHip;
+
+      path.push(
+         line(outerSmallArc1XFrom, outerSmallArc1YFrom),
+         arc(outerBr, outerBr, 0, 0, 0, outerSmallArc1XTo, outerSmallArc1YTo),
+         arc(r, r, 0, largeArc, 0, outerLargeArcXTo, outerLargeArcYTo),
+         arc(outerBr, outerBr, 0, 0, 0, outerSmallArc2XTo, outerSmallArc2YTo)
+      );
    } else {
-      startX = x;
-      startY = y;
-      result.push("M", startX, startY);
+      if (r0 > 0) {
+         let startX = x + Math.cos(endAngleRadian) * r0;
+         let startY = y - Math.sin(endAngleRadian) * r0;
+         path.push(move(startX, startY));
+
+         let innerArcToX = x + Math.cos(startAngleRadian) * r0;
+         let innerArcToY = y - Math.sin(startAngleRadian) * r0;
+
+         path.push(arc(r0, r0, 0, largeArc, 1, innerArcToX, innerArcToY));
+      } else {
+         path.push(move(x, y));
+      }
+
+      let lineToX = x + Math.cos(startAngleRadian) * r;
+      let lineToY = y - Math.sin(startAngleRadian) * r;
+      path.push(line(lineToX, lineToY));
+
+      let arcToX = x + Math.cos(endAngleRadian) * r;
+      let arcToY = y - Math.sin(endAngleRadian) * r;
+      path.push(arc(r, r, 0, largeArc, 0, arcToX, arcToY));
    }
 
-   result.push(
-      "L",
-      x + Math.cos(startAngle) * r,
-      y - Math.sin(startAngle) * r,
-      "A",
-      r,
-      r,
-      0,
-      largeArc,
-      0,
-      x + Math.cos(endAngle) * r,
-      y - Math.sin(endAngle) * r,
-      "L",
-      startX,
-      startY
-   );
-   return result.join(" ");
+   path.push(z());
+   return path.join(" ");
 }
 
 PieChart.prototype.anchors = "0 1 1 0";
@@ -155,6 +215,7 @@ Widget.alias("pie-slice");
 export class PieSlice extends Container {
    init() {
       this.selection = Selection.create(this.selection);
+      if (this.borderRadius) this.br = this.borderRadius;
       super.init();
    }
 
@@ -176,6 +237,7 @@ export class PieSlice extends Container {
          stack: undefined,
          legend: undefined,
          hoverId: undefined,
+         br: undefined,
       });
    }
 
@@ -307,13 +369,14 @@ export class PieSlice extends Container {
                hover,
             };
 
-            var d = createSvgArc(
+            let d = createSvgArc(
                segment.ox,
                segment.oy,
                data.r0 * segment.radiusMultiplier,
                data.r * segment.radiusMultiplier,
                segment.startAngle,
-               segment.endAngle
+               segment.endAngle,
+               data.br
             );
 
             return (
@@ -352,6 +415,22 @@ export class PieSlice extends Container {
    }
 }
 
+function move(x, y) {
+   return `M ${x} ${y}`;
+}
+
+function line(x, y) {
+   return `L ${x} ${y}`;
+}
+
+function z() {
+   return "Z";
+}
+
+function arc(rx, ry, xRotation, largeArc, sweep, x, y) {
+   return `A ${rx} ${ry} ${xRotation} ${largeArc} ${sweep} ${x} ${y}`;
+}
+
 PieSlice.prototype.offset = 0;
 PieSlice.prototype.r0 = 0;
 PieSlice.prototype.r = 50;

package/src/ui/Cx.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {View} from "../data/View";
-import {Instance} from "./Instance";
+import { View } from "../data/View";
+import { Instance } from "./Instance";
 
 interface CxProps {
    widget?: Cx.Config,
@@ -15,4 +15,4 @@ interface CxProps {
    onError?: (error: Error, instance: Instance, info: any) => void
 }
 
-export class Cx extends React.Component<CxProps, any> {}
+export class Cx extends React.Component<CxProps, any> { }

package/src/ui/app/startAppLoop.js

@@ -1,6 +1,6 @@
-import {Widget, VDOM} from '../Widget';
-import {Store} from '../../data/Store';
-import {Cx} from '../Cx';
+import { Widget, VDOM } from '../Widget';
+import { Store } from '../../data/Store';
+import { Cx } from '../Cx';
 
 export function startAppLoop(parentDOMElement, storeOrInstance, widget, options = {}) {
 

package/src/ui/keyboardShortcuts.js

@@ -1,12 +1,11 @@
-import {SubscriberList} from "../util/SubscriberList";
-import {isObject} from "../util/isObject";
+import { SubscriberList } from "../util/SubscriberList";
+import { isObject } from "../util/isObject";
 
 let subscribers, eventBan = 0;
 
 export function executeKeyboardShortcuts(e) {
-   if (Date.now() < eventBan)
-      return;
-   //Avoid duplicate executions as event.stopPropagation() for React events does not stop native events
+   if (Date.now() < eventBan) return;
+   // Avoid duplicate executions as event.stopPropagation() for React events does not stop native events
    eventBan = Date.now() + 5;
    subscribers && subscribers.notify(e);
 }

package/src/ui/selection/KeySelection.d.ts

@@ -1,6 +1,6 @@
 import * as Cx from '../../core';
 
-import {Selection} from './Selection'
+import { Selection } from './Selection'
 
 interface KeySelectionConfig {
    bind?: string;

package/src/ui/selection/PropertySelection.d.ts

@@ -1,6 +1,6 @@
 import * as Cx from '../../core';
 
-import {Selection} from './Selection'
+import { Selection } from './Selection'
 
 interface PropertySelectionConfig {
    selectedField?: string