cx 23.12.0 → 23.12.1

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "23.12.0",
+   "version": "23.12.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/BarGraph.js

@@ -1,33 +1,29 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {ColumnBarGraphBase} from './ColumnBarGraphBase';
-import {tooltipMouseMove, tooltipMouseLeave} from '../widgets/overlay/tooltip-ops';
-import {isArray} from '../util/isArray';
+import { Widget, VDOM } from "../ui/Widget";
+import { ColumnBarGraphBase } from "./ColumnBarGraphBase";
+import { tooltipMouseMove, tooltipMouseLeave } from "../widgets/overlay/tooltip-ops";
+import { isArray } from "../util/isArray";
 
 export class BarGraph extends ColumnBarGraphBase {
-
    explore(context, instance) {
       super.explore(context, instance);
 
-      let {data, yAxis, xAxis} = instance;
+      let { data, yAxis, xAxis } = instance;
 
       if (isArray(data.data)) {
-         data.data.forEach(p => {
+         data.data.forEach((p) => {
             var x0 = this.x0Field ? p[this.x0Field] : data.x0;
             var y = p[this.yField];
             var x = p[this.xField];
 
             yAxis.acknowledge(y, data.size, data.offset);
 
-            if (data.autoSize)
-               yAxis.book(y, data.stacked ? data.stack : data.name);
+            if (data.autoSize) yAxis.book(y, data.stacked ? data.stack : data.name);
 
             if (data.stacked) {
                xAxis.stacknowledge(data.stack, y, x0);
                xAxis.stacknowledge(data.stack, y, x);
-            }
-            else {
-               if (!this.hiddenBase)
-                  xAxis.acknowledge(x0);
+            } else {
+               if (!this.hiddenBase) xAxis.acknowledge(x0);
                xAxis.acknowledge(x);
             }
          });
@@ -35,16 +31,14 @@ export class BarGraph extends ColumnBarGraphBase {
    }
 
    renderGraph(context, instance) {
-      var {data, yAxis, xAxis, store} = instance;
+      var { data, yAxis, xAxis, store } = instance;
 
-      if (!isArray(data.data))
-         return false;
+      if (!isArray(data.data)) return false;
 
       var isSelected = this.selection.getIsSelectedDelegate(store);
 
       return data.data.map((p, i) => {
-
-         var {offset, size} = data;
+         var { offset, size } = data;
 
          var x0 = this.x0Field ? p[this.x0Field] : data.x0;
          var y = p[this.yField];
@@ -52,7 +46,7 @@ export class BarGraph extends ColumnBarGraphBase {
 
          if (data.autoSize) {
             var [index, count] = instance.yAxis.locate(y, data.stacked ? data.stack : data.name);
-            offset = size / count * (index - count / 2 + 0.5);
+            offset = (size / count) * (index - count / 2 + 0.5);
             size = size / count;
          }
 
@@ -65,47 +59,54 @@ export class BarGraph extends ColumnBarGraphBase {
          var state = {
             selected: isSelected(p, i),
             selectable: !this.selection.isDummy,
-            [`color-${color}`]: color != null
+            [`color-${color}`]: color != null,
          };
 
          let mmove, mleave;
 
          if (this.tooltip) {
-            mmove = e => tooltipMouseMove(e, instance, this.tooltip, {
-               target: e.target.parent,
-               data: {
-                  $record: p
-               }
-            });
-            mleave = e => tooltipMouseLeave(e, instance, this.tooltip, {
-               target: e.target.parent,
-               data: {
-                  $record: p
-               }
-            });
+            mmove = (e) =>
+               tooltipMouseMove(e, instance, this.tooltip, {
+                  target: e.target.parent,
+                  data: {
+                     $record: p,
+                  },
+               });
+            mleave = (e) =>
+               tooltipMouseLeave(e, instance, this.tooltip, {
+                  target: e.target.parent,
+                  data: {
+                     $record: p,
+                  },
+               });
          }
 
-         return <rect key={i}
-            className={this.CSS.element(this.baseClass, 'bar', state)}
-            onClick={e => {
-               this.handleClick(e, instance, p, i)
-            }}
-            x={Math.min(x1, x2)}
-            y={Math.min(y1, y2)}
-            width={Math.abs(x2 - x1)}
-            height={Math.abs(y2 - y1)}
-            style={data.style}
-            onMouseMove={mmove}
-            onMouseLeave={mleave}
-         />
+         return (
+            <rect
+               key={i}
+               className={this.CSS.element(this.baseClass, "bar", state)}
+               onClick={(e) => {
+                  this.handleClick(e, instance, p, i);
+               }}
+               x={Math.min(x1, x2)}
+               y={Math.min(y1, y2)}
+               width={Math.abs(x2 - x1)}
+               height={Math.abs(y2 - y1)}
+               style={data.style}
+               onMouseMove={mmove}
+               onMouseLeave={mleave}
+               rx={data.borderRadius}
+            />
+         );
       });
    }
 }
 
-BarGraph.prototype.baseClass = 'bargraph';
+BarGraph.prototype.baseClass = "bargraph";
 BarGraph.prototype.x0Field = false;
 BarGraph.prototype.x0 = 0;
-BarGraph.prototype.legendShape = 'bar';
+BarGraph.prototype.legendShape = "bar";
 BarGraph.prototype.hiddenBase = false;
+BarGraph.prototype.borderRadius = 0;
 
-Widget.alias('bargraph', BarGraph);
+Widget.alias("bargraph", BarGraph);

package/src/charts/ColumnBarBase.d.ts

@@ -33,6 +33,9 @@ interface ColumnBarBaseProps extends Cx.StyledContainerProps {
    /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
    offset?: Cx.NumberProp;
 
+   /** Border radius of the column/bar. */
+   borderRadius?: Cx.NumberProp;
+
    /**
     * Name of the horizontal axis. The value should match one of the horizontal axes set
     * in the `axes` configuration of the parent `Chart` component. Default value is `x`.

package/src/charts/ColumnBarBase.js

@@ -29,6 +29,7 @@ export class ColumnBarBase extends PureContainer {
          stack: undefined,
          offset: undefined,
          hoverId: undefined,
+         borderRadius: undefined,
       });
    }
 
@@ -126,6 +127,7 @@ export class ColumnBarBase extends PureContainer {
                      y={bounds.t}
                      width={Math.max(0.0001, bounds.width())}
                      height={Math.max(0.0001, bounds.height())}
+                     rx={data.borderRadius}
                      onMouseMove={(e) => {
                         onMouseMove(e, instance);
                         tooltipMouseMove(e, instance, this.tooltip);
@@ -167,3 +169,4 @@ ColumnBarBase.prototype.stack = "stack";
 ColumnBarBase.prototype.legendShape = "rect";
 ColumnBarBase.prototype.styled = true;
 ColumnBarBase.prototype.hoverChannel = "default";
+ColumnBarBase.prototype.borderRadius = 0;

package/src/charts/ColumnBarGraphBase.d.ts

@@ -1,72 +1,73 @@
-import * as Cx from '../core';
-import { KeySelection, PropertySelection } from '../ui/selection';
+import * as Cx from "../core";
+import { KeySelection, PropertySelection } from "../ui/selection";
 
 interface ColumnBarGraphBaseProps extends Cx.WidgetProps {
-   
-   /** 
+   /**
     * Data for the graph. Each entry should be an object with at least two properties
     *  whose names should match the `xField` and `yField` values.
     */
-   data?: Cx.RecordsProp,
+   data?: Cx.RecordsProp;
 
    /** Index of a color from the standard palette of colors. 0-15. */
-   colorIndex?: Cx.NumberProp,
+   colorIndex?: Cx.NumberProp;
 
    /** Used to automatically assign a color based on the `name` and the contextual `ColorMap` widget. */
-   colorMap?: Cx.StringProp,
+   colorMap?: Cx.StringProp;
 
    /** Name used to resolve the color. If not provided, `name` is used instead. */
-   colorName?: Cx.StringProp,
+   colorName?: Cx.StringProp;
 
    /** Name of the item as it will appear in the legend. */
-   name?: Cx.StringProp,
+   name?: Cx.StringProp;
 
    /** Size (width) of the column in axis units. */
-   size?: Cx.NumberProp,
+   size?: Cx.NumberProp;
 
    /** Of center offset of the column. Use this in combination with `size` to align multiple series on the same chart. */
-   offset?: Cx.NumberProp,
+   offset?: Cx.NumberProp;
 
    /** Set to true to auto-calculate size and offset. Available only if the x axis is a category axis. */
-   autoSize?: Cx.BooleanProp,
+   autoSize?: Cx.BooleanProp;
 
    /** Used to indicate if an item is active or not. Inactive items are shown only in the legend. */
-   active?: Cx.BooleanProp,
+   active?: Cx.BooleanProp;
 
    /** Indicate that columns should be stacked on top of the other columns. Default value is `false`. */
-   stacked?: Cx.BooleanProp,
+   stacked?: Cx.BooleanProp;
+
+   /** Border radius of the column/bar. */
+   borderRadius?: Cx.NumberProp;
 
    /** Name of the stack. If multiple stacks are used, each should have a unique name. Default value is `stack`. */
-   stack?: Cx.StringProp,
-   
+   stack?: Cx.StringProp;
+
    /** Name of the horizontal axis. The value should match one of the horizontal axes set
     *  in the `axes` configuration of the parent `Chart` component. Default value is `x`.
     */
-   xAxis?: string,
+   xAxis?: string;
 
    /**
-    *  Name of the vertical axis. The value should match one of the vertical axes set 
+    *  Name of the vertical axis. The value should match one of the vertical axes set
     * in the `axes` configuration if the parent `Chart` component. Default value is `y`.
     */
-   yAxis?: string,
+   yAxis?: string;
 
    /** Name of the property which holds the x value. Default value is `x`. */
-   xField?: string,
+   xField?: string;
 
    /** Name of the property which holds the y value. Default value is `y`. */
-   yField?: string,
+   yField?: string;
 
-   colorIndexField?: boolean,
+   colorIndexField?: boolean;
 
    /** Name of the legend to be used. Default is `legend`. */
-   legend?: string,
+   legend?: string;
 
-   legendAction?: string,
-   legendShape?: string,
+   legendAction?: string;
+   legendShape?: string;
 
    /** Selection configuration. */
-   selection?: { type: typeof PropertySelection | typeof KeySelection, [prop: string]: any }
-
+   selection?: { type: typeof PropertySelection | typeof KeySelection; [prop: string]: any };
 }
 
-export class ColumnBarGraphBase extends Cx.Widget<ColumnBarGraphBaseProps> {}
+export class ColumnBarGraphBase extends Cx.Widget<ColumnBarGraphBaseProps> {}

package/src/charts/ColumnBarGraphBase.js

@@ -1,17 +1,15 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {Selection} from '../ui/selection/Selection';
+import { Widget, VDOM } from "../ui/Widget";
+import { Selection } from "../ui/selection/Selection";
 
 export class ColumnBarGraphBase extends Widget {
-
    init() {
       this.selection = Selection.create(this.selection, {
-         records: this.data
+         records: this.data,
       });
       super.init();
    }
 
    declareData() {
-
       var selection = this.selection.configureWidget(this);
 
       super.declareData(selection, ...arguments, {
@@ -27,15 +25,15 @@ export class ColumnBarGraphBase extends Widget {
          autoSize: undefined,
          active: true,
          stacked: undefined,
-         stack: undefined
-      })
+         stack: undefined,
+         borderRadius: undefined,
+      });
    }
 
    prepareData(context, instance) {
-      let {data} = instance;
+      let { data } = instance;
 
-      if (data.name && !data.colorName)
-         data.colorName = data.name;
+      if (data.name && !data.colorName) data.colorName = data.name;
 
       super.prepareData(context, instance);
    }
@@ -44,28 +42,23 @@ export class ColumnBarGraphBase extends Widget {
       instance.xAxis = context.axes[this.xAxis];
       instance.yAxis = context.axes[this.yAxis];
 
-      var {data} = instance;
+      var { data } = instance;
 
       instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
-      if (instance.colorMap && data.colorName)
-         instance.colorMap.acknowledge(data.colorName);
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
 
       super.explore(context, instance);
    }
 
    prepare(context, instance) {
-
-
-      let {data, colorMap, xAxis, yAxis} = instance;
+      let { data, colorMap, xAxis, yAxis } = instance;
 
       if (colorMap && data.name) {
          data.colorIndex = colorMap.map(data.colorName);
-         if (instance.cache('colorIndex', data.colorIndex))
-            instance.markShouldUpdate(context);
+         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
       }
 
-      if (xAxis.shouldUpdate || yAxis.shouldUpdate)
-         instance.markShouldUpdate(context);
+      if (xAxis.shouldUpdate || yAxis.shouldUpdate) instance.markShouldUpdate(context);
 
       if (data.name && context.addLegendEntry)
          context.addLegendEntry(this.legend, {
@@ -76,44 +69,46 @@ export class ColumnBarGraphBase extends Widget {
             selected: this.selection.isInstanceSelected(instance),
             style: data.style,
             shape: this.legendShape,
-            onClick: e=> { this.onLegendClick(e, instance) }
+            onClick: (e) => {
+               this.onLegendClick(e, instance);
+            },
          });
    }
 
    onLegendClick(e, instance) {
-      var allActions = this.legendAction == 'auto';
-      var {data} = instance;
-      if (allActions || this.legendAction == 'toggle')
-         instance.set('active', !data.active);
+      var allActions = this.legendAction == "auto";
+      var { data } = instance;
+      if (allActions || this.legendAction == "toggle") instance.set("active", !data.active);
    }
 
    render(context, instance, key) {
-      var {data} = instance;
-      return <g key={key} className={data.classNames}>
-         {data.active && this.renderGraph(context, instance)}
-      </g>;
+      var { data } = instance;
+      return (
+         <g key={key} className={data.classNames}>
+            {data.active && this.renderGraph(context, instance)}
+         </g>
+      );
    }
 
    handleClick(e, instance, point, index) {
-      if (this.onClick && instance.invoke("onClick", e, instance, point, index) === false)
-         return;
+      if (this.onClick && instance.invoke("onClick", e, instance, point, index) === false) return;
 
-      if (!this.selection.isDummy)
-         this.selection.select(instance.store, point, index, { toggle: e.ctrlKey });
+      if (!this.selection.isDummy) this.selection.select(instance.store, point, index, { toggle: e.ctrlKey });
    }
 }
 
-ColumnBarGraphBase.prototype.xAxis = 'x';
-ColumnBarGraphBase.prototype.yAxis = 'y';
-ColumnBarGraphBase.prototype.xField = 'x';
-ColumnBarGraphBase.prototype.yField = 'y';
+ColumnBarGraphBase.prototype.xAxis = "x";
+ColumnBarGraphBase.prototype.yAxis = "y";
+ColumnBarGraphBase.prototype.xField = "x";
+ColumnBarGraphBase.prototype.yField = "y";
 ColumnBarGraphBase.prototype.colorIndexField = false;
 ColumnBarGraphBase.prototype.size = 1;
-ColumnBarGraphBase.prototype.legend = 'legend';
-ColumnBarGraphBase.prototype.legendAction = 'auto';
-ColumnBarGraphBase.prototype.legendShape = 'rect';
-ColumnBarGraphBase.prototype.stack = 'stack';
+ColumnBarGraphBase.prototype.legend = "legend";
+ColumnBarGraphBase.prototype.legendAction = "auto";
+ColumnBarGraphBase.prototype.legendShape = "rect";
+ColumnBarGraphBase.prototype.stack = "stack";
 ColumnBarGraphBase.prototype.stacked = false;
 ColumnBarGraphBase.prototype.autoSize = 0;
 ColumnBarGraphBase.prototype.offset = 0;
 ColumnBarGraphBase.prototype.styled = true;
+ColumnBarGraphBase.prototype.borderRadius = 0;

package/src/charts/ColumnGraph.js

@@ -1,14 +1,13 @@
-import {Widget, VDOM} from '../ui/Widget';
-import {ColumnBarGraphBase} from './ColumnBarGraphBase';
-import {tooltipMouseMove, tooltipMouseLeave} from '../widgets/overlay/tooltip-ops';
-import {isArray} from '../util/isArray';
+import { Widget, VDOM } from "../ui/Widget";
+import { ColumnBarGraphBase } from "./ColumnBarGraphBase";
+import { tooltipMouseMove, tooltipMouseLeave } from "../widgets/overlay/tooltip-ops";
+import { isArray } from "../util/isArray";
 
 export class ColumnGraph extends ColumnBarGraphBase {
-
    explore(context, instance) {
       super.explore(context, instance);
 
-      let {data, xAxis, yAxis} = instance;
+      let { data, xAxis, yAxis } = instance;
 
       if (isArray(data.data)) {
          data.data.forEach((p, index) => {
@@ -18,36 +17,29 @@ export class ColumnGraph extends ColumnBarGraphBase {
 
             xAxis.acknowledge(x, data.size, data.offset);
 
-            if (data.autoSize)
-               xAxis.book(x, data.stacked ? data.stack : data.name);
+            if (data.autoSize) xAxis.book(x, data.stacked ? data.stack : data.name);
 
             if (data.stacked) {
                yAxis.stacknowledge(data.stack, x, y0);
                yAxis.stacknowledge(data.stack, x, y);
-            }
-            else {
-               if (!this.hiddenBase)
-                  yAxis.acknowledge(y0);
+            } else {
+               if (!this.hiddenBase) yAxis.acknowledge(y0);
                yAxis.acknowledge(y);
             }
 
-            if (context.pointReducer)
-               context.pointReducer(x, y, data.name, p, data, index);
+            if (context.pointReducer) context.pointReducer(x, y, data.name, p, data, index);
          });
       }
    }
 
    renderGraph(context, instance) {
-      var {data, xAxis, yAxis, store} = instance;
-
-      if (!isArray(data.data))
-         return false;
+      var { data, xAxis, yAxis, store } = instance;
+      if (!isArray(data.data)) return false;
 
       var isSelected = this.selection.getIsSelectedDelegate(store);
 
       return data.data.map((p, i) => {
-
-         var {offset, size} = data;
+         var { offset, size } = data;
 
          var y0 = this.y0Field ? p[this.y0Field] : data.y0;
          var x = p[this.xField];
@@ -55,7 +47,7 @@ export class ColumnGraph extends ColumnBarGraphBase {
 
          if (data.autoSize) {
             var [index, count] = instance.xAxis.locate(x, data.stacked ? data.stack : data.name);
-            offset = size / count * (index - count / 2 + 0.5);
+            offset = (size / count) * (index - count / 2 + 0.5);
             size = size / count;
          }
 
@@ -68,48 +60,53 @@ export class ColumnGraph extends ColumnBarGraphBase {
          var state = {
             selected: isSelected(p, i),
             selectable: !this.selection.isDummy,
-            [`color-${color}`]: color != null
+            [`color-${color}`]: color != null,
          };
 
          let mmove, mleave;
 
          if (this.tooltip) {
-            mmove = e => tooltipMouseMove(e, instance, this.tooltip, {
-               target: e.target.parent,
-               data: {
-                  $record: p
-               }
-            });
-            mleave = e => tooltipMouseLeave(e, instance, this.tooltip, {
-               target: e.target.parent,
-               data: {
-                  $record: p
-               }
-            });
+            mmove = (e) =>
+               tooltipMouseMove(e, instance, this.tooltip, {
+                  target: e.target.parent,
+                  data: {
+                     $record: p,
+                  },
+               });
+            mleave = (e) =>
+               tooltipMouseLeave(e, instance, this.tooltip, {
+                  target: e.target.parent,
+                  data: {
+                     $record: p,
+                  },
+               });
          }
 
-         return <rect
-            key={i}
-            className={this.CSS.element(this.baseClass, 'column', state)}
-            onClick={e => {
-               this.handleClick(e, instance, p, i)
-            }}
-            x={Math.min(x1, x2)}
-            y={Math.min(y1, y2)}
-            width={Math.abs(x2 - x1)}
-            height={Math.abs(y2 - y1)}
-            style={data.style}
-            onMouseMove={mmove}
-            onMouseLeave={mleave}
-         />
+         return (
+            <rect
+               key={i}
+               className={this.CSS.element(this.baseClass, "column", state)}
+               onClick={(e) => {
+                  this.handleClick(e, instance, p, i);
+               }}
+               x={Math.min(x1, x2)}
+               y={Math.min(y1, y2)}
+               width={Math.abs(x2 - x1)}
+               height={Math.abs(y2 - y1)}
+               style={data.style}
+               onMouseMove={mmove}
+               onMouseLeave={mleave}
+               rx={data.borderRadius}
+            />
+         );
       });
    }
 }
 
-ColumnGraph.prototype.baseClass = 'columngraph';
+ColumnGraph.prototype.baseClass = "columngraph";
 ColumnGraph.prototype.y0Field = false;
 ColumnGraph.prototype.y0 = 0;
-ColumnGraph.prototype.legendShape = 'column';
+ColumnGraph.prototype.legendShape = "column";
 ColumnGraph.prototype.hiddenBase = false;
 
-Widget.alias('columngraph', ColumnGraph);
+Widget.alias("columngraph", ColumnGraph);