cx 24.10.0 → 24.10.2

package/dist/util.js

@@ -255,6 +255,12 @@ var formatFactory = {
 			return s.padStart(length, "0");
 		};
 	},
+	leftPad: function leftPad(part0, length, _char) {
+		return function (value) {
+			var s = String(value);
+			return s.padStart(length, _char != null ? _char : " ");
+		};
+	},
 	capitalize: function capitalize$1() {
 		return function (value) {
 			var s = String(value);
@@ -279,6 +285,7 @@ formatFactory.d = formatFactory.date;
 formatFactory.t = formatFactory.time;
 formatFactory.dt = formatFactory.datetime;
 formatFactory.zeropad = formatFactory.zeroPad;
+formatFactory.leftpad = formatFactory.leftPad;
 formatFactory.capitalize = formatFactory.capitalize;
 formatFactory.titlecase = formatFactory.titleCase;
 function buildFormatter(format) {

package/dist/widgets.css

@@ -4899,54 +4899,57 @@ th.cxe-calendar-display {
 .cxe-grid-group-caption:not(:first-child) td {
   padding-top: 15px;
 }
+
+.cxe-grid-group-caption.cxs-level-1 {
+  font-weight: bold;
+  font-size: 115%;
+}
+
 .cxe-grid-group-caption.cxs-level-2 {
+  font-weight: bold;
   font-size: 130%;
-}
-.cxe-grid-group-caption.cxs-level-2 td {
   border-bottom: 1px solid grey;
 }
+
 .cxe-grid-group-caption.cxs-level-3 {
+  font-weight: bold;
   font-size: 145%;
-}
-.cxe-grid-group-caption.cxs-level-3 td {
   border-bottom: 1px solid grey;
 }
+
 .cxe-grid-group-caption.cxs-level-4 {
+  font-weight: bold;
   font-size: 160%;
-}
-.cxe-grid-group-caption.cxs-level-4 td {
   border-bottom: 1px solid grey;
 }
 
-.cxe-grid-group-footer {
-  font-weight: bold;
-}
 .cxe-grid-group-footer td {
-  border-top: 1px solid #bfbfbf;
   box-sizing: border-box;
 }
 .cxe-grid-group-footer td.cxs-pad {
   padding: 5px;
 }
+
+.cxe-grid-group-footer.cxs-level-1 {
+  font-weight: bold;
+  border-top: 1px solid #bfbfbf;
+}
+
 .cxe-grid-group-footer.cxs-level-2 {
   font-weight: bold;
   font-size: 110%;
-}
-.cxe-grid-group-footer.cxs-level-2 td {
   border-top: 1px solid grey;
 }
+
 .cxe-grid-group-footer.cxs-level-3 {
   font-weight: bold;
   font-size: 120%;
-}
-.cxe-grid-group-footer.cxs-level-3 td {
   border-top: 1px solid grey;
 }
+
 .cxe-grid-group-footer.cxs-level-4 {
   font-weight: bold;
   font-size: 130%;
-}
-.cxe-grid-group-footer.cxs-level-4 td {
   border-top: 1px solid grey;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.10.0",
+   "version": "24.10.2",
    "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/Legend.js

@@ -98,7 +98,7 @@ export class Legend extends HtmlElement {
                   onMouseLeave={onMouseLeave}
                >
                   {this.renderShape(e, shape)}
-                  <div>{e.name}</div>
+                  <div>{e.displayText || e.name}</div>
                </div>
             )),
          );

package/src/charts/LegendEntry.js

@@ -69,7 +69,15 @@ export class LegendEntry extends Container {
       let { data } = instance;
       let content = !isUndefined(this.text) ? data.text : this.renderChildren(context, instance);
       return (
-         <div key={key} className={data.classNames} style={data.style}>
+         <div
+            key={key}
+            className={data.classNames}
+            style={data.style}
+            onMouseDown={stopPropagation}
+            onClick={(e) => {
+               this.handleClick(e, instance);
+            }}
+         >
             {this.renderShape(instance)}
             {content != null && <div>{content}</div>}
          </div>

package/src/charts/PieChart.d.ts

@@ -1,89 +1,92 @@
-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;
+
+   /** Text to be displayed in the legend. The default is copying the `name` value.  */
+   legendDisplayText?: Cx.StringProp;
+
+   /** 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> {}