cx 24.4.2 → 24.4.3

package/src/charts/PieChart.d.ts

@@ -1,89 +1,89 @@
-import * as Cx from "../core";
-import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
-import { PropertySelection, KeySelection } from "../ui/selection";
-
-interface PieChartProps extends BoundedObjectProps {
-   /** Angle in degrees. Default is `360` which represents the full circle. */
-   angle?: Cx.NumberProp;
-
-   /** Start angle in degrees. Indicates the starting point of the first stack. Default is `0`. */
-   startAngle?: Cx.NumberProp;
-
-   /** 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> {}
-
-interface PieSliceProps extends Cx.StyledContainerProps {
-   /** Used to indicate whether an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp;
-
-   /**
-    * Inner pie radius in percents of the maximum available radius.
-    *  If `percentageRadius` flag is set to false, then the value represents the radius in pixels. Default is 0.
-    */
-   r0?: Cx.NumberProp;
-
-   /**
-    * Outer pie radius in percents of the maximum available radius.
-    * If `percentageRadius` flag is set to false, then the value represents the radius in pixels. Default is 50.
-    */
-   r?: Cx.NumberProp;
-
-   /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp;
-
-   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp;
-
-   /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp;
-
-   /** Value in pixels to be used to explode the pie. */
-   offset?: Cx.NumberProp;
-
-   value?: Cx.NumberProp;
-   disabled?: Cx.BooleanProp;
-   innerPointRadius?: Cx.NumberProp;
-   outerPointRadius?: Cx.NumberProp;
-
-   /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp;
-
-   /** Multi-level pie charts consist of multiple stacks. Assign a unique name to each level. Default is `stack`. */
-   stack?: Cx.StringProp;
-
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: Cx.StringProp;
-
-   percentageRaidus?: boolean;
-
-   /** Base CSS class to be applied to the element. Defaults to `pieslice`. */
-   baseClass?: string;
-
-   legendAction?: string;
-
-   /** Tooltip configuration. For more info see Tooltips. */
-   tooltip?: Cx.StringProp | Cx.StructuredProp;
-
-   /** Selection configuration. */
-   selection?: { type: typeof PropertySelection | typeof KeySelection; [prop: string]: any };
-
-   /** A value used to identify the group of components participating in hover effect synchronization. */
-   hoverChannel?: string;
-
-   /** 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;
-
-   /** Border radius of the slice. Default is 0. */
-   br?: Cx.NumberProp;
-}
-
-export class PieSlice extends Cx.Widget<PieSliceProps> {}
+import * as Cx from "../core";
+import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
+import { PropertySelection, KeySelection } from "../ui/selection";
+
+interface PieChartProps extends BoundedObjectProps {
+   /** Angle in degrees. Default is `360` which represents the full circle. */
+   angle?: Cx.NumberProp;
+
+   /** Start angle in degrees. Indicates the starting point of the first stack. Default is `0`. */
+   startAngle?: Cx.NumberProp;
+
+   /** 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> {}
+
+interface PieSliceProps extends Cx.StyledContainerProps {
+   /** Used to indicate whether an item is active or not. Inactive items are shown only in the legend. */
+   active?: Cx.BooleanProp;
+
+   /**
+    * Inner pie radius in percents of the maximum available radius.
+    *  If `percentageRadius` flag is set to false, then the value represents the radius in pixels. Default is 0.
+    */
+   r0?: Cx.NumberProp;
+
+   /**
+    * Outer pie radius in percents of the maximum available radius.
+    * If `percentageRadius` flag is set to false, then the value represents the radius in pixels. Default is 50.
+    */
+   r?: Cx.NumberProp;
+
+   /** Index of a color from the standard palette of colors. 0-15. */
+   colorIndex?: Cx.NumberProp;
+
+   /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
+   colorMap?: Cx.StringProp;
+
+   /** Name used to resolve the color. If not provided, `name` is used instead. */
+   colorName?: Cx.StringProp;
+
+   /** Value in pixels to be used to explode the pie. */
+   offset?: Cx.NumberProp;
+
+   value?: Cx.NumberProp;
+   disabled?: Cx.BooleanProp;
+   innerPointRadius?: Cx.NumberProp;
+   outerPointRadius?: Cx.NumberProp;
+
+   /** Name of the item as it will appear in the legend. */
+   name?: Cx.StringProp;
+
+   /** Multi-level pie charts consist of multiple stacks. Assign a unique name to each level. Default is `stack`. */
+   stack?: Cx.StringProp;
+
+   /** Name of the legend to be used. Default is `legend`. */
+   legend?: Cx.StringProp;
+
+   percentageRaidus?: boolean;
+
+   /** Base CSS class to be applied to the element. Defaults to `pieslice`. */
+   baseClass?: string;
+
+   legendAction?: string;
+
+   /** Tooltip configuration. For more info see Tooltips. */
+   tooltip?: Cx.StringProp | Cx.StructuredProp;
+
+   /** Selection configuration. */
+   selection?: { type: typeof PropertySelection | typeof KeySelection; [prop: string]: any };
+
+   /** A value used to identify the group of components participating in hover effect synchronization. */
+   hoverChannel?: string;
+
+   /** 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;
+
+   /** Border radius of the slice. Default is 0. */
+   br?: Cx.NumberProp;
+}
+
+export class PieSlice extends Cx.Widget<PieSliceProps> {}

package/src/charts/PieChart.js

@@ -98,13 +98,13 @@ class PieCalculator {
          }
          while (stack.gap > 0) {
             for (let index = 0; index < stack.r0s.length; index++)
-               gapAngleTotal += Math.asin(stack.gap / stack.r0s[index] / 2);
+               gapAngleTotal += 2 * 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);
+               gapAngleTotal += 2 * Math.asin(stack.gap / ((stack.r0ps[index] * this.R) / 100) / 2);
 
             if (gapAngleTotal < 0.25 * this.angleTotal) break;
-            stack.gap = stack.gap * 0.9;
+            stack.gap = stack.gap * 0.95;
             gapAngleTotal = 0;
          }
          if (gapAngleTotal == 0) stack.gap = 0;
@@ -124,7 +124,7 @@ class PieCalculator {
       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;
+      let gapAngle = r0 > 0 && s.gap > 0 ? 2 * Math.asin(s.gap / r0 / 2) : 0;
       s.lastAngle += clockFactor * (angle + gapAngle);
       let endAngle = startAngle + clockFactor * angle + gapAngle;
 
@@ -163,7 +163,7 @@ function createSvgArc(cx, cy, r0 = 0, r, startAngle, endAngle, br = 0, gap = 0)
          if (innerSmallArcAngle > (endAngle - startAngle) / 2) {
             innerSmallArcAngle = (endAngle - startAngle) / 2;
             let sin = Math.sin(innerSmallArcAngle);
-            innerBr = (r0 * sin - gap2) / (1 - sin);
+            innerBr = Math.max((r0 * sin - gap2) / (1 - sin), 0);
          }
 
          let innerHipDiagonal = (r0 + innerBr) * Math.cos(innerSmallArcAngle);
@@ -214,7 +214,7 @@ function createSvgArc(cx, cy, r0 = 0, r, startAngle, endAngle, br = 0, gap = 0)
       if (outerSmallArcAngle > (endAngle - startAngle) / 2) {
          outerSmallArcAngle = (endAngle - startAngle) / 2;
          let sin = Math.sin(outerSmallArcAngle);
-         outerBr = (r * sin - gap2) / (1 + sin);
+         outerBr = Math.max((r * sin - gap2) / (1 + sin), 0);
       }
 
       let outerHipDiagonal = Math.cos(outerSmallArcAngle) * (r - outerBr);

package/src/charts/PieChart.scss

@@ -1,27 +1,27 @@
-
-@mixin cx-pieslice(
-   $name: 'pieslice',
-   $besm: $cx-besm
-) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$element}#{$name}-slice {
-      stroke-width: 0;
-      fill: #eee;
-      stroke: #ccc;
-
-      &.#{$state}selectable {
-         cursor: pointer;
-      }
-
-      &.#{$state}selected {
-         stroke-width: 2px;
-      }
-   }
-}
-
-@if (cx-should-include('cx/charts/PieSlice')) {
-   @include cx-pieslice();
+
+@mixin cx-pieslice(
+   $name: 'pieslice',
+   $besm: $cx-besm
+) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$element}#{$name}-slice {
+      stroke-width: 0;
+      fill: #eee;
+      stroke: #ccc;
+
+      &.#{$state}selectable {
+         cursor: pointer;
+      }
+
+      &.#{$state}selected {
+         stroke-width: 2px;
+      }
+   }
+}
+
+@if (cx-should-include('cx/charts/PieSlice')) {
+   @include cx-pieslice();
 }

package/src/charts/PieLabel.d.ts

@@ -1,26 +1,26 @@
-import * as Cx from "../core";
-import { BoundedObjectProps } from "../svg/BoundedObject";
-
-interface PieLabelProps extends BoundedObjectProps {
-   /** Distance in pixels, for which the labels will be separated from the pie chart. Default value is 100px. */
-   distance: Cx.NumberProp;
-
-   /**
-    * Index of the color in the default color palette.
-    */
-   lineColorIndex?: Cx.NumberProp;
-
-   /** A color used to paint the guideline. */
-   lineStroke?: Cx.StringProp;
-
-   /** CSS class applied to the line element. */
-   lineClass?: Cx.StringProp;
-
-   /** CSS style applied to the line element. */
-   lineStyle?: Cx.StringProp;
-
-   /** Base CSS class to be applied to the element. Defaults to `pielabel`. */
-   baseClass?: string;
-}
-
-export class PieLabel extends Cx.Widget<PieLabelProps> {}
+import * as Cx from "../core";
+import { BoundedObjectProps } from "../svg/BoundedObject";
+
+interface PieLabelProps extends BoundedObjectProps {
+   /** Distance in pixels, for which the labels will be separated from the pie chart. Default value is 100px. */
+   distance: Cx.NumberProp;
+
+   /**
+    * Index of the color in the default color palette.
+    */
+   lineColorIndex?: Cx.NumberProp;
+
+   /** A color used to paint the guideline. */
+   lineStroke?: Cx.StringProp;
+
+   /** CSS class applied to the line element. */
+   lineClass?: Cx.StringProp;
+
+   /** CSS style applied to the line element. */
+   lineStyle?: Cx.StringProp;
+
+   /** Base CSS class to be applied to the element. Defaults to `pielabel`. */
+   baseClass?: string;
+}
+
+export class PieLabel extends Cx.Widget<PieLabelProps> {}

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/PieLabelsContainer.d.ts

@@ -1,6 +1,6 @@
-import { Widget } from "cx/src/core";
-import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
-
-interface PieLabelsContainerProps extends BoundedObjectProps {}
-
-export class PieLabelsContainer extends Widget<PieLabelsContainerProps> {}
+import { Widget } from "cx/src/core";
+import { BoundedObject, BoundedObjectProps } from "../svg/BoundedObject";
+
+interface PieLabelsContainerProps extends BoundedObjectProps {}
+
+export class PieLabelsContainer extends Widget<PieLabelsContainerProps> {}

package/src/charts/PieLabelsContainer.js

@@ -1,55 +1,55 @@
-import { BoundedObject } from "../svg/BoundedObject";
-import { Rect } from "../svg/util/Rect";
-
-export class PieLabelsContainer extends BoundedObject {
-   prepare(context, instance) {
-      super.prepare(context, instance);
-      let { bounds } = instance.data;
-      let cx2 = bounds.l + bounds.r;
-
-      context.push("placePieLabel", (labelBounds, distance) => {
-         let clone = new Rect(labelBounds);
-         let w = clone.r - clone.l;
-         if (clone.l + clone.r > cx2) {
-            clone.r = Math.min(clone.r + distance, bounds.r);
-            clone.l = clone.r - w;
-         } else {
-            clone.l = Math.max(bounds.l, clone.l - distance);
-            clone.r = clone.l + w;
-         }
-         return clone;
-      });
-
-      instance.leftLabels = [];
-      instance.rightLabels = [];
-
-      context.push("registerPieLabel", (label) => {
-         if (label.actualBounds.l + label.actualBounds.r < cx2) instance.leftLabels.push(label);
-         else instance.rightLabels.push(label);
-      });
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("placePieLabel");
-      context.pop("registerPieLabel");
-      super.prepareCleanup(context, instance);
-      this.distributeLabels(instance.leftLabels, instance);
-      this.distributeLabels(instance.rightLabels, instance);
-   }
-
-   distributeLabels(labels, instance) {
-      labels.sort((a, b) => a.actualBounds.t + a.actualBounds.b - (b.actualBounds.t + b.actualBounds.b));
-      let totalHeight = labels.reduce((h, l) => h + l.actualBounds.height(), 0);
-      let { bounds } = instance.data;
-      let avgHeight = Math.min(totalHeight, bounds.height()) / labels.length;
-      let at = bounds.t;
-      for (let i = 0; i < labels.length; i++) {
-         let ab = labels[i].actualBounds;
-         ab.t = Math.max(at, Math.min(ab.t, bounds.b - (labels.length - i) * avgHeight));
-         ab.b = ab.t + avgHeight;
-         at = ab.b;
-      }
-   }
-}
-
-PieLabelsContainer.prototype.anchors = "0 1 1 0";
+import { BoundedObject } from "../svg/BoundedObject";
+import { Rect } from "../svg/util/Rect";
+
+export class PieLabelsContainer extends BoundedObject {
+   prepare(context, instance) {
+      super.prepare(context, instance);
+      let { bounds } = instance.data;
+      let cx2 = bounds.l + bounds.r;
+
+      context.push("placePieLabel", (labelBounds, distance) => {
+         let clone = new Rect(labelBounds);
+         let w = clone.r - clone.l;
+         if (clone.l + clone.r > cx2) {
+            clone.r = Math.min(clone.r + distance, bounds.r);
+            clone.l = clone.r - w;
+         } else {
+            clone.l = Math.max(bounds.l, clone.l - distance);
+            clone.r = clone.l + w;
+         }
+         return clone;
+      });
+
+      instance.leftLabels = [];
+      instance.rightLabels = [];
+
+      context.push("registerPieLabel", (label) => {
+         if (label.actualBounds.l + label.actualBounds.r < cx2) instance.leftLabels.push(label);
+         else instance.rightLabels.push(label);
+      });
+   }
+
+   prepareCleanup(context, instance) {
+      context.pop("placePieLabel");
+      context.pop("registerPieLabel");
+      super.prepareCleanup(context, instance);
+      this.distributeLabels(instance.leftLabels, instance);
+      this.distributeLabels(instance.rightLabels, instance);
+   }
+
+   distributeLabels(labels, instance) {
+      labels.sort((a, b) => a.actualBounds.t + a.actualBounds.b - (b.actualBounds.t + b.actualBounds.b));
+      let totalHeight = labels.reduce((h, l) => h + l.actualBounds.height(), 0);
+      let { bounds } = instance.data;
+      let avgHeight = Math.min(totalHeight, bounds.height()) / labels.length;
+      let at = bounds.t;
+      for (let i = 0; i < labels.length; i++) {
+         let ab = labels[i].actualBounds;
+         ab.t = Math.max(at, Math.min(ab.t, bounds.b - (labels.length - i) * avgHeight));
+         ab.b = ab.t + avgHeight;
+         at = ab.b;
+      }
+   }
+}
+
+PieLabelsContainer.prototype.anchors = "0 1 1 0";