cx 24.3.11 → 24.4.0

package/dist/ui.js

@@ -814,13 +814,6 @@ var Localization = /*#__PURE__*/ (function () {
 	return Localization;
 })();
 
-// let culture = "en";
-// let numberCulture = null;
-// let dateTimeCulture = null;
-// let cache = {};
-// let defaultCurrency = "USD";
-// let dateEncoding = (date) => date.toISOString();
-
 var stack = [
 	{
 		culture: "en",
@@ -862,13 +855,9 @@ function createCulture(cultureSpecs) {
 function popCulture(cultureSpecs) {
 	if (stack.length == 1) throw new Error("Cannot pop the last culture object.");
 	if (cultureSpecs && stack[stack.length - 1] !== cultureSpecs) {
-		console.warn("Popped culture object does not match the current one.");
-	}
-	try {
-		return stack.pop();
-	} finally {
-		console.log(stack);
+		Console.warn("Popped culture object does not match the current one.");
 	}
+	return stack.pop();
 }
 var Culture = /*#__PURE__*/ (function () {
 	function Culture() {}
@@ -3173,67 +3162,6 @@ HoverSyncElement.prototype.baseClass = "hoversyncelement";
 HoverSyncElement.prototype.styled = true;
 HoverSyncElement.prototype.hoverChannel = "default";
 
-var CultureScope = /*#__PURE__*/ (function (_PureContainer) {
-	function CultureScope() {
-		return _PureContainer.apply(this, arguments) || this;
-	}
-	_inheritsLoose(CultureScope, _PureContainer);
-	var _proto = CultureScope.prototype;
-	_proto.init = function init() {
-		var _this$items;
-		this.initialItems = (_this$items = this.items) != null ? _this$items : this.children;
-		delete this.items;
-		delete this.children;
-		_PureContainer.prototype.init.call(this);
-	};
-	_proto.declareData = function declareData() {
-		var _PureContainer$protot;
-		for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-			args[_key] = arguments[_key];
-		}
-		(_PureContainer$protot = _PureContainer.prototype.declareData).call.apply(
-			_PureContainer$protot,
-			[this].concat(args, [
-				{
-					culture: undefined,
-					numberCulture: undefined,
-					dateTimeCulture: undefined,
-					defaultCurrency: undefined,
-				},
-			]),
-		);
-	};
-	_proto.prepareData = function prepareData(context, instance) {
-		_PureContainer.prototype.prepareData.call(this, context, instance);
-		this.clear();
-		var data = instance.data;
-		if (this.onCreateCulture) instance.culture = instance.invoke("onCreateCulture", data, instance);
-		else
-			instance.culture = createCulture({
-				culture: data.culture,
-				numberCulture: data.numberCulture,
-				dateTimeCulture: data.dateTimeCulture,
-				defaultCurrency: data.defaultCurrency,
-				dateEncoding: this.dateEncoding,
-			});
-	};
-	_proto.explore = function explore(context, instance) {
-		var culture = instance.culture;
-		pushCulture(culture);
-		if (this.items.length == 0 && this.initialItems) this.add(this.initialItems);
-		_PureContainer.prototype.explore.call(this, context, instance);
-	};
-	_proto.exploreCleanup = function exploreCleanup(context, instance) {
-		popCulture(instance.culture);
-	};
-	return CultureScope;
-})(PureContainer);
-CultureScope.prototype.culture = null;
-CultureScope.prototype.numberCulture = null;
-CultureScope.prototype.dateTimeCulture = null;
-CultureScope.prototype.defaultCurrency = null;
-CultureScope.prototype.dateEncoding = null;
-
 var flattenProps = function flattenProps(props) {
 	if (!props) return {};
 	if (props.jsxSpread) {
@@ -4534,7 +4462,6 @@ export {
 	ContentResolver,
 	Controller,
 	Culture,
-	CultureScope,
 	Cx,
 	DataAdapter,
 	DataProxy,

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.3.11",
+   "version": "24.4.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/BarGraph.d.ts

@@ -1,17 +1,15 @@
-import * as Cx from '../core';
-import { ColumnBarGraphBaseProps } from './ColumnBarGraphBase';
+import * as Cx from "../core";
+import { ColumnBarGraphBaseProps } from "./ColumnBarGraphBase";
 
 interface BarGraphProps extends ColumnBarGraphBaseProps {
-
    /** Base CSS class to be applied to the element. Defaults to `bargraph`. */
-   baseClass?: string,
+   baseClass?: string;
 
-   /** 
-    * Name of the property which holds the base value. 
+   /**
+    * Name of the property which holds the base value.
     * Default value is `false`, which means x0 value is not read from the data array.
     */
-   x0Field?: string,
-  
+   x0Field?: string | false;
 }
 
-export class BarGraph extends Cx.Widget<BarGraphProps> {}
+export class BarGraph extends Cx.Widget<BarGraphProps> {}

package/src/charts/ColumnGraph.d.ts

@@ -1,20 +1,18 @@
-import * as Cx from '../core';
-import { ColumnBarGraphBaseProps } from './ColumnBarGraphBase';
+import * as Cx from "../core";
+import { ColumnBarGraphBaseProps } from "./ColumnBarGraphBase";
 
 interface ColumnGraphProps extends ColumnBarGraphBaseProps {
-   
    /** Base CSS class to be applied to the element. Defaults to `columngraph`. */
-   baseClass?: string,
-   
-   /** 
-    * Name of the property which holds the base value. 
-    * Default value is `false`, which means y0 value is not read from the data array. 
+   baseClass?: string;
+
+   /**
+    * Name of the property which holds the base value.
+    * Default value is `false`, which means y0 value is not read from the data array.
     */
-   y0Field?: string,
+   y0Field?: string | false;
 
    /** Column base value. Default value is `0`. */
-   y0?: Cx.NumberProp,
-
+   y0?: Cx.NumberProp;
 }
 
-export class ColumnGraph extends Cx.Widget<ColumnGraphProps> {}
+export class ColumnGraph extends Cx.Widget<ColumnGraphProps> {}

package/src/charts/LineGraph.d.ts

@@ -77,7 +77,7 @@ interface LineGraphProps extends Cx.WidgetProps {
    baseClass?: string;
 
    /** Name of the property which holds the y0 value. Default value is `false`, which means y0 value is not read from the data array. */
-   y0Field?: string;
+   y0Field?: string | false;
 
    /** Name of the legend to be used. Default is `legend`. */
    legend?: string;

package/src/charts/PieChart.d.ts

@@ -11,6 +11,9 @@ interface PieChartProps extends BoundedObjectProps {
 
    /** When set to `true`, stacks are rendered in clock wise direction. */
    clockwise?: Cx.BooleanProp;
+
+   /** Gap between slices in pixels. Default is `0` which means there is no gap. */
+   gap?: Cx.NumberProp;
 }
 
 export class PieChart extends Cx.Widget<PieChartProps> {}
@@ -78,6 +81,9 @@ interface PieSliceProps extends Cx.StyledContainerProps {
 
    /** Border radius of the slice. Default is 0. */
    borderRadius?: Cx.NumberProp;
+
+   /** Border radius of the slice. Default is 0. */
+   br?: Cx.NumberProp;
 }
 
 export class PieSlice extends Cx.Widget<PieSliceProps> {}

package/src/charts/PieChart.js

@@ -12,15 +12,16 @@ export class PieChart extends BoundedObject {
    declareData() {
       super.declareData(...arguments, {
          angle: undefined,
-         startAngle: 0,
+         startAngle: undefined,
          clockwise: undefined,
+         gap: undefined,
       });
    }
 
    explore(context, instance) {
       if (!instance.pie) instance.pie = new PieCalculator();
-      var { data } = instance;
-      instance.pie.reset(data.angle, data.startAngle, data.clockwise);
+      let { data } = instance;
+      instance.pie.reset(data.angle, data.startAngle, data.clockwise, data.gap);
 
       context.push("pie", instance.pie);
       super.explore(context, instance);
@@ -32,7 +33,7 @@ export class PieChart extends BoundedObject {
 
    prepare(context, instance) {
       this.prepareBounds(context, instance);
-      var { data, pie } = instance;
+      let { data, pie } = instance;
       pie.measure(data.bounds);
       let hash = pie.hash();
       instance.cache("hash", hash);
@@ -45,17 +46,24 @@ export class PieChart extends BoundedObject {
 PieChart.prototype.anchors = "0 1 1 0";
 
 class PieCalculator {
-   reset(angle, startAngle, clockwise) {
+   reset(angle, startAngle, clockwise, gap) {
+      if (angle == 360) angle = 359.99; // really hacky way to draw full circles
       this.angleTotal = (angle / 180) * Math.PI;
       this.startAngle = (startAngle / 180) * Math.PI;
       this.clockwise = clockwise;
+      this.gap = gap;
       this.stacks = {};
    }
 
-   acknowledge(stack, value) {
-      var s = this.stacks[stack];
-      if (!s) s = this.stacks[stack] = { total: 0 };
-      if (value > 0) s.total += value;
+   acknowledge(stack, value, r, r0, percentageRadius) {
+      let s = this.stacks[stack];
+      if (!s) s = this.stacks[stack] = { total: 0, r0s: this.gap > 0 ? [] : null, r0ps: this.gap > 0 ? [] : null };
+      if (value > 0) {
+         s.total += value;
+         if (this.gap > 0 && r0 > 0)
+            if (percentageRadius) s.r0ps.push(r0);
+            else s.r0s.push(r0);
+      }
    }
 
    hash() {
@@ -69,32 +77,63 @@ class PieCalculator {
          cx: this.cx,
          cy: this.cy,
          R: this.R,
+         gap: this.gap,
       };
    }
 
    measure(rect) {
-      for (var s in this.stacks) {
-         var stack = this.stacks[s];
-         stack.angleFactor = stack.total > 0 ? this.angleTotal / stack.total : 0;
+      this.R = Math.max(0, Math.min(rect.width(), rect.height())) / 2;
+      for (let s in this.stacks) {
+         let stack = this.stacks[s];
+         let gapAngleTotal = 0;
+         stack.gap = this.gap;
+         if (this.gap > 0) {
+            // gap cannot be larger of two times the smallest r0
+            for (let index = 0; index < stack.r0s.length; index++)
+               if (2 * stack.r0s[index] < stack.gap) stack.gap = 2 * stack.r0s[index];
+            for (let index = 0; index < stack.r0ps.length; index++) {
+               let r0 = (stack.r0ps[index] * this.R) / 100;
+               if (2 * r0 < stack.gap) stack.gap = 2 * r0;
+            }
+         }
+         while (stack.gap > 0) {
+            for (let index = 0; index < stack.r0s.length; index++)
+               gapAngleTotal += Math.asin(stack.gap / stack.r0s[index] / 2);
+
+            for (let index = 0; index < stack.r0ps.length; index++)
+               gapAngleTotal += Math.asin(stack.gap / ((stack.r0ps[index] * this.R) / 100) / 2);
+
+            if (gapAngleTotal < 0.25 * this.angleTotal) break;
+            stack.gap = stack.gap * 0.9;
+            gapAngleTotal = 0;
+         }
+         if (gapAngleTotal == 0) stack.gap = 0;
+         stack.angleFactor = stack.total > 0 ? (this.angleTotal - gapAngleTotal) / stack.total : 0;
          stack.lastAngle = this.startAngle;
       }
       this.cx = (rect.l + rect.r) / 2;
       this.cy = (rect.t + rect.b) / 2;
-      this.R = Math.max(0, Math.min(rect.width(), rect.height())) / 2;
    }
 
-   map(stack, value) {
-      var s = this.stacks[stack];
-      var angle = value * s.angleFactor;
-      var startAngle = s.lastAngle;
-
-      if (!this.clockwise) s.lastAngle += angle;
-      else s.lastAngle -= angle;
+   map(stack, value, r, r0, percentageRadius) {
+      if (percentageRadius) {
+         r = (r * this.R) / 100;
+         r0 = (r0 * this.R) / 100;
+      }
+      let s = this.stacks[stack];
+      let angle = value * s.angleFactor;
+      let startAngle = s.lastAngle;
+      let clockFactor = this.clockwise ? -1 : 1;
+      let gapAngle = r0 > 0 && s.gap > 0 ? Math.asin(s.gap / r0 / 2) : 0;
+      s.lastAngle += clockFactor * (angle + gapAngle);
+      let endAngle = startAngle + clockFactor * angle + gapAngle;
 
       return {
          startAngle,
-         endAngle: s.lastAngle,
-         midAngle: (startAngle + s.lastAngle) / 2,
+         endAngle: startAngle + clockFactor * angle + gapAngle,
+         angle,
+         midAngle: (startAngle + endAngle) / 2,
+         gap: s.gap,
          cx: this.cx,
          cy: this.cy,
          R: this.R,
@@ -102,106 +141,139 @@ class PieCalculator {
    }
 }
 
-function createSvgArc(x, y, r0 = 0, r, startAngleRadian, endAngleRadian, br = 0) {
-   if (startAngleRadian > endAngleRadian) {
-      var s = startAngleRadian;
-      startAngleRadian = endAngleRadian;
-      endAngleRadian = s;
+function createSvgArc(cx, cy, r0 = 0, r, startAngle, endAngle, br = 0, gap = 0) {
+   let gap2 = gap / 2;
+
+   if (startAngle > endAngle) {
+      let s = startAngle;
+      startAngle = endAngle;
+      endAngle = s;
    }
 
    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 innerSmallArcAngle = Math.asin((br + gap2) / (r0 + br));
+
+         // adjust br according to the available area
+         if (innerSmallArcAngle > (endAngle - startAngle) / 2) {
+            innerSmallArcAngle = (endAngle - startAngle) / 2;
             let sin = Math.sin(innerSmallArcAngle);
-            // correct br according to newly calculated border radius angle
-            innerBr = (r0 * sin) / (1 - sin);
+            innerBr = (r0 * sin - gap2) / (1 - sin);
          }
-         let innerHip = Math.cos(innerSmallArcAngle) * (r0 + innerBr);
 
-         let innerSmallArc1XFrom = x + Math.cos(endAngleRadian) * innerHip;
-         let innerSmallArc1YFrom = y - Math.sin(endAngleRadian) * innerHip;
+         let innerHipDiagonal = (r0 + innerBr) * Math.cos(innerSmallArcAngle);
+
+         let innerSmallArc1XFrom = cx + Math.cos(endAngle) * innerHipDiagonal + Math.cos(endAngle - Math.PI / 2) * gap2;
+         let innerSmallArc1YFrom = cy - Math.sin(endAngle) * innerHipDiagonal - Math.sin(endAngle - Math.PI / 2) * gap2;
 
          // 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;
+         let innerSmallArc1XTo = cx + Math.cos(endAngle - innerSmallArcAngle) * r0;
+         let innerSmallArc1YTo = cy - Math.sin(endAngle - innerSmallArcAngle) * r0;
 
          // add first small inner arc
          path.push(arc(innerBr, innerBr, 0, 0, 0, innerSmallArc1XTo, innerSmallArc1YTo));
 
-         let innerArcXTo = x + Math.cos(startAngleRadian + innerSmallArcAngle) * r0;
-         let innerArcYTo = y - Math.sin(startAngleRadian + innerSmallArcAngle) * r0;
+         // SECOND ARC
 
+         let innerArcXTo = cx + Math.cos(startAngle + innerSmallArcAngle) * r0;
+         let innerArcYTo = cy - Math.sin(startAngle + innerSmallArcAngle) * r0;
          // add large inner arc
-         path.push(arc(r0, r0, 0, largeArc, 1, innerArcXTo, innerArcYTo));
-
-         let innerSmallArc2XTo = x + Math.cos(startAngleRadian) * innerHip;
-         let innerSmallArc2YTo = y - Math.sin(startAngleRadian) * innerHip;
+         path.push(
+            arc(
+               r0,
+               r0,
+               0,
+               largeArcFlag(endAngle - innerSmallArcAngle - startAngle - innerSmallArcAngle),
+               1,
+               innerArcXTo,
+               innerArcYTo,
+            ),
+         );
+
+         let innerSmallArc2XTo =
+            cx + Math.cos(startAngle) * innerHipDiagonal + Math.cos(startAngle + Math.PI / 2) * gap2;
+         let innerSmallArc2YTo =
+            cy - Math.sin(startAngle) * innerHipDiagonal - Math.sin(startAngle + Math.PI / 2) * gap2;
          // add second small inner arc
          path.push(arc(innerBr, innerBr, 0, 0, 0, innerSmallArc2XTo, innerSmallArc2YTo));
       } else {
-         path.push(move(x, y));
+         path.push(move(cx, cy));
       }
 
       let outerBr = br;
-      let outerSmallArcAngle = Math.asin(br / (r - br));
-      if (outerSmallArcAngle > (endAngleRadian - startAngleRadian) / 2) {
-         outerSmallArcAngle = (endAngleRadian - startAngleRadian) / 2;
+      let outerSmallArcAngle = Math.asin((br + gap2) / (r - br));
+
+      // tweak br according to the available area
+      if (outerSmallArcAngle > (endAngle - startAngle) / 2) {
+         outerSmallArcAngle = (endAngle - startAngle) / 2;
          let sin = Math.sin(outerSmallArcAngle);
-         // correct br according to newly calculated border radius angle
-         outerBr = (r * sin) / (1 + sin);
+         outerBr = (r * sin - gap2) / (1 + sin);
       }
-      let outerHip = Math.cos(outerSmallArcAngle) * (r - outerBr);
 
-      let outerSmallArc1XFrom = x + Math.cos(startAngleRadian) * outerHip;
-      let outerSmallArc1YFrom = y - Math.sin(startAngleRadian) * outerHip;
+      let outerHipDiagonal = Math.cos(outerSmallArcAngle) * (r - outerBr);
 
-      let outerSmallArc1XTo = x + Math.cos(startAngleRadian + outerSmallArcAngle) * r;
-      let outerSmallArc1YTo = y - Math.sin(startAngleRadian + outerSmallArcAngle) * r;
+      let outerSmallArc1XFrom =
+         cx + Math.cos(startAngle) * outerHipDiagonal + Math.cos(startAngle + Math.PI / 2) * gap2;
+      let outerSmallArc1YFrom =
+         cy - Math.sin(startAngle) * outerHipDiagonal - Math.sin(startAngle + Math.PI / 2) * gap2;
 
-      let outerLargeArcXTo = x + Math.cos(endAngleRadian - outerSmallArcAngle) * r;
-      let outerLargeArcYTo = y - Math.sin(endAngleRadian - outerSmallArcAngle) * r;
+      let outerSmallArc1XTo = cx + Math.cos(startAngle + outerSmallArcAngle) * r;
+      let outerSmallArc1YTo = cy - Math.sin(startAngle + outerSmallArcAngle) * r;
 
-      let outerSmallArc2XTo = x + Math.cos(endAngleRadian) * outerHip;
-      let outerSmallArc2YTo = y - Math.sin(endAngleRadian) * outerHip;
+      let outerLargeArcXTo = cx + Math.cos(endAngle - outerSmallArcAngle) * r;
+      let outerLargeArcYTo = cy - Math.sin(endAngle - outerSmallArcAngle) * r;
+
+      let outerSmallArc2XTo = cx + Math.cos(endAngle) * outerHipDiagonal + Math.cos(endAngle - Math.PI / 2) * gap2;
+      let outerSmallArc2YTo = cy - Math.sin(endAngle) * outerHipDiagonal - Math.sin(endAngle - Math.PI / 2) * gap2;
 
       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)
+         arc(
+            r,
+            r,
+            0,
+            largeArcFlag(endAngle - outerSmallArcAngle - startAngle - outerSmallArcAngle),
+            0,
+            outerLargeArcXTo,
+            outerLargeArcYTo,
+         ),
+         arc(outerBr, outerBr, 0, 0, 0, outerSmallArc2XTo, outerSmallArc2YTo),
       );
    } else {
       if (r0 > 0) {
-         let startX = x + Math.cos(endAngleRadian) * r0;
-         let startY = y - Math.sin(endAngleRadian) * r0;
+         let innerGapAngle = r0 > 0 && gap2 > 0 ? Math.asin(gap2 / r0) : 0;
+         let innerStartAngle = startAngle + innerGapAngle;
+         let innerEndAngle = endAngle - innerGapAngle;
+         let startX = cx + Math.cos(innerEndAngle) * r0;
+         let startY = cy - Math.sin(innerEndAngle) * r0;
          path.push(move(startX, startY));
 
-         let innerArcToX = x + Math.cos(startAngleRadian) * r0;
-         let innerArcToY = y - Math.sin(startAngleRadian) * r0;
+         let innerArcToX = cx + Math.cos(innerStartAngle) * r0;
+         let innerArcToY = cy - Math.sin(innerStartAngle) * r0;
 
-         path.push(arc(r0, r0, 0, largeArc, 1, innerArcToX, innerArcToY));
+         path.push(arc(r0, r0, 0, largeArcFlag(innerStartAngle - innerEndAngle), 1, innerArcToX, innerArcToY));
       } else {
-         path.push(move(x, y));
+         path.push(move(cx, cy));
       }
 
-      let lineToX = x + Math.cos(startAngleRadian) * r;
-      let lineToY = y - Math.sin(startAngleRadian) * r;
+      let outerGapAngle = r > 0 && gap2 > 0 ? Math.asin(gap2 / r) : 0;
+      let outerStartAngle = startAngle + outerGapAngle;
+      let outerEndAngle = endAngle - outerGapAngle;
+      let lineToX = cx + Math.cos(outerStartAngle) * r;
+      let lineToY = cy - Math.sin(outerStartAngle) * 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));
+      let arcToX = cx + Math.cos(outerEndAngle) * r;
+      let arcToY = cy - Math.sin(outerEndAngle) * r;
+      path.push(arc(r, r, 0, largeArcFlag(outerEndAngle - outerStartAngle), 0, arcToX, arcToY));
    }
 
    path.push(z());
@@ -210,6 +282,8 @@ function createSvgArc(x, y, r0 = 0, r, startAngleRadian, endAngleRadian, br = 0)
 
 PieChart.prototype.anchors = "0 1 1 0";
 PieChart.prototype.angle = 360;
+PieChart.prototype.startAngle = 0;
+PieChart.prototype.gap = 0;
 
 Widget.alias("pie-slice");
 export class PieSlice extends Container {
@@ -220,7 +294,7 @@ export class PieSlice extends Container {
    }
 
    declareData() {
-      var selection = this.selection.configureWidget(this);
+      let selection = this.selection.configureWidget(this);
       super.declareData(...arguments, selection, {
          active: true,
          r0: undefined,
@@ -263,7 +337,7 @@ export class PieSlice extends Container {
       instance.hoverSync = context.hoverSync;
 
       if (instance.valid && data.active) {
-         instance.pie.acknowledge(data.stack, data.value);
+         instance.pie.acknowledge(data.stack, data.value, data.r, data.r0, this.percentageRadius);
          super.explore(context, instance);
       }
    }
@@ -277,7 +351,7 @@ export class PieSlice extends Container {
       }
 
       if (instance.valid && data.active) {
-         let seg = pie.map(data.stack, data.value);
+         let seg = pie.map(data.stack, data.value, data.r, data.r0, this.percentageRadius);
 
          if (
             !segment ||
@@ -344,15 +418,15 @@ export class PieSlice extends Container {
    }
 
    onLegendClick(e, instance) {
-      var allActions = this.legendAction == "auto";
-      var { data } = instance;
+      let allActions = this.legendAction == "auto";
+      let { data } = instance;
       if (allActions || this.legendAction == "toggle") if (instance.set("active", !data.active)) return;
 
       if (allActions || this.legendAction == "select") this.handleClick(e, instance);
    }
 
    render(context, instance, key) {
-      var { segment, data } = instance;
+      let { segment, data } = instance;
       if (!instance.valid || !data.active) return null;
 
       return withHoverSync(
@@ -361,7 +435,7 @@ export class PieSlice extends Container {
          this.hoverChannel,
          data.hoverId,
          ({ hover, onMouseMove, onMouseLeave }) => {
-            var stateMods = {
+            let stateMods = {
                selected: this.selection.isInstanceSelected(instance),
                disabled: data.disabled,
                selectable: !this.selection.isDummy,
@@ -376,7 +450,8 @@ export class PieSlice extends Container {
                data.r * segment.radiusMultiplier,
                segment.startAngle,
                segment.endAngle,
-               data.br
+               data.br,
+               segment.gap,
             );
 
             return (
@@ -400,7 +475,7 @@ export class PieSlice extends Container {
                   {this.renderChildren(context, instance)}
                </g>
             );
-         }
+         },
       );
    }
 
@@ -431,6 +506,10 @@ function arc(rx, ry, xRotation, largeArc, sweep, x, y) {
    return `A ${rx} ${ry} ${xRotation} ${largeArc} ${sweep} ${x} ${y}`;
 }
 
+function largeArcFlag(angle) {
+   return angle > Math.PI || angle < -Math.PI ? 1 : 0;
+}
+
 PieSlice.prototype.offset = 0;
 PieSlice.prototype.r0 = 0;
 PieSlice.prototype.r = 50;
@@ -443,5 +522,6 @@ PieSlice.prototype.legendAction = "auto";
 PieSlice.prototype.legendShape = "circle";
 PieSlice.prototype.hoverChannel = "default";
 PieSlice.prototype.styled = true;
+PieSlice.prototype.br = 0;
 
 Widget.alias("pie-chart", PieChart);

package/src/charts/RangeMarker.d.ts

@@ -0,0 +1,35 @@
+import * as Cx from "../core";
+
+interface RangeMarkerProps extends Cx.StyledContainerProps {
+   /** The `x` value binding or expression. */
+   x?: Cx.NumberProp;
+
+   /** The `y` value binding or expression. */
+   y?: Cx.NumberProp;
+
+   /** The shape of marker, Could be `min`, `max`, `line`. Default to `line`. */
+   shape?: Cx.StringProp;
+
+   /** Switch to vertical mode. */
+   vertical?: Cx.BooleanProp;
+
+   /** Size of the range marker. */
+   size?: Cx.NumberProp;
+
+   /** Style object applied to the range marker. */
+   lineStyle?: Cx.StyleProp;
+
+   /** Class object applied to the range marker. */
+   lineClass?: Cx.StyleProp;
+
+   /** Size of vertical or horizontal caps. */
+   capSize?: Cx.NumberProp;
+
+   /** The laneOffset property adjusts the positioning of lane elements, enhancing their alignment and readability. */
+   laneOffset?: Cx.NumberProp;
+
+   /** Inflate the range marker.*/
+   inflate?: Cx.NumberProp;
+}
+
+export class RangeMarkerProps extends Cx.Widget<RangeMarkerProps> {}