cx 23.12.0 → 23.12.2

package/package.json

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

package/src/data/AggregateFunction.d.ts

@@ -1,20 +1,20 @@
-interface Aggregator {
-   process(value: number, weight?: number);
-   getResult(): number;
-}
-
-export class AggregateFunction {
-   static sum(): Aggregator;
-
-   static avg(): Aggregator;
-
-   static count(): Aggregator;
-
-   static distinct(): Aggregator;
-
-   static min(): Aggregator;
-
-   static max(): Aggregator;
-
-   static last(): Aggregator;
-}
+interface Aggregator {
+   process(value: number, weight?: number);
+   getResult(): number;
+}
+
+export class AggregateFunction {
+   static sum(): Aggregator;
+
+   static avg(): Aggregator;
+
+   static count(): Aggregator;
+
+   static distinct(): Aggregator;
+
+   static min(): Aggregator;
+
+   static max(): Aggregator;
+
+   static last(): Aggregator;
+}

package/src/data/AggregateFunction.js

@@ -1,145 +1,145 @@
-export class AggregateFunction {
-   static sum() {
-      return new Sum();
-   }
-
-   static avg() {
-      return new Avg();
-   }
-
-   static count() {
-      return new Count();
-   }
-
-   static distinct() {
-      return new Distinct();
-   }
-
-   static min() {
-      return new Min();
-   }
-
-   static max() {
-      return new Max();
-   }
-
-   static last() {
-      return new LastValue();
-   }
-}
-
-class Sum {
-   process(value) {
-      this.empty = false;
-      if (!isNaN(value)) this.result += value;
-      else this.invalid = true;
-   }
-
-   getResult() {
-      if (this.invalid) return null;
-      return this.result;
-   }
-}
-
-Sum.prototype.result = 0;
-Sum.prototype.empty = true;
-
-class Avg {
-   process(value, count = 1) {
-      this.empty = false;
-      if (!isNaN(value) && !isNaN(count)) {
-         this.result += value * count;
-         this.count += count;
-      } else this.invalid = true;
-   }
-
-   getResult() {
-      if (this.empty || this.invalid || this.count == 0) return null;
-      return this.result / this.count;
-   }
-}
-
-Avg.prototype.result = 0;
-Avg.prototype.count = 0;
-Avg.prototype.empty = true;
-
-class Count {
-   process(value) {
-      if (value != null) this.result++;
-   }
-
-   getResult() {
-      return this.result;
-   }
-}
-
-Count.prototype.result = 0;
-
-class Distinct {
-   constructor() {
-      this.values = {};
-   }
-
-   process(value) {
-      if (value == null || this.values[value]) return;
-      this.values[value] = true;
-      this.empty = false;
-      this.result++;
-   }
-
-   getResult() {
-      if (this.empty || this.invalid) return null;
-      return this.result;
-   }
-}
-
-Distinct.prototype.result = 0;
-Distinct.prototype.empty = true;
-
-class Max {
-   process(value) {
-      if (!isNaN(value)) {
-         if (this.empty) this.result = value;
-         else if (value > this.result) this.result = value;
-         this.empty = false;
-      } else if (value != null) this.invalid = true;
-   }
-
-   getResult() {
-      if (this.empty || this.invalid) return null;
-      return this.result;
-   }
-}
-
-Max.prototype.result = 0;
-Max.prototype.empty = true;
-
-class Min {
-   process(value) {
-      if (!isNaN(value)) {
-         if (this.empty) this.result = value;
-         else if (value < this.result) this.result = value;
-         this.empty = false;
-      } else if (value != null) this.invalid = true;
-   }
-
-   getResult() {
-      if (this.empty || this.invalid) return null;
-      return this.result;
-   }
-}
-
-Min.prototype.result = 0;
-Min.prototype.empty = true;
-
-class LastValue {
-   process(value) {
-      this.result = value;
-   }
-
-   getResult() {
-      return this.result;
-   }
-}
-
-LastValue.prototype.result = null;
+export class AggregateFunction {
+   static sum() {
+      return new Sum();
+   }
+
+   static avg() {
+      return new Avg();
+   }
+
+   static count() {
+      return new Count();
+   }
+
+   static distinct() {
+      return new Distinct();
+   }
+
+   static min() {
+      return new Min();
+   }
+
+   static max() {
+      return new Max();
+   }
+
+   static last() {
+      return new LastValue();
+   }
+}
+
+class Sum {
+   process(value) {
+      this.empty = false;
+      if (!isNaN(value)) this.result += value;
+      else this.invalid = true;
+   }
+
+   getResult() {
+      if (this.invalid) return null;
+      return this.result;
+   }
+}
+
+Sum.prototype.result = 0;
+Sum.prototype.empty = true;
+
+class Avg {
+   process(value, count = 1) {
+      this.empty = false;
+      if (!isNaN(value) && !isNaN(count)) {
+         this.result += value * count;
+         this.count += count;
+      } else this.invalid = true;
+   }
+
+   getResult() {
+      if (this.empty || this.invalid || this.count == 0) return null;
+      return this.result / this.count;
+   }
+}
+
+Avg.prototype.result = 0;
+Avg.prototype.count = 0;
+Avg.prototype.empty = true;
+
+class Count {
+   process(value) {
+      if (value != null) this.result++;
+   }
+
+   getResult() {
+      return this.result;
+   }
+}
+
+Count.prototype.result = 0;
+
+class Distinct {
+   constructor() {
+      this.values = {};
+   }
+
+   process(value) {
+      if (value == null || this.values[value]) return;
+      this.values[value] = true;
+      this.empty = false;
+      this.result++;
+   }
+
+   getResult() {
+      if (this.empty || this.invalid) return null;
+      return this.result;
+   }
+}
+
+Distinct.prototype.result = 0;
+Distinct.prototype.empty = true;
+
+class Max {
+   process(value) {
+      if (!isNaN(value)) {
+         if (this.empty) this.result = value;
+         else if (value > this.result) this.result = value;
+         this.empty = false;
+      } else if (value != null) this.invalid = true;
+   }
+
+   getResult() {
+      if (this.empty || this.invalid) return null;
+      return this.result;
+   }
+}
+
+Max.prototype.result = 0;
+Max.prototype.empty = true;
+
+class Min {
+   process(value) {
+      if (!isNaN(value)) {
+         if (this.empty) this.result = value;
+         else if (value < this.result) this.result = value;
+         this.empty = false;
+      } else if (value != null) this.invalid = true;
+   }
+
+   getResult() {
+      if (this.empty || this.invalid) return null;
+      return this.result;
+   }
+}
+
+Min.prototype.result = 0;
+Min.prototype.empty = true;
+
+class LastValue {
+   process(value) {
+      this.result = value;
+   }
+
+   getResult() {
+      return this.result;
+   }
+}
+
+LastValue.prototype.result = null;

package/src/widgets/form/MonthField.d.ts

@@ -82,7 +82,12 @@ interface MonthFieldProps extends FieldProps {
     * Set to `true` to display the clear button even if `required` is set. Default is `false`.
     */
    alwaysShowClear?: boolean,
-
+   
+   /** The function that will be used to convert Date objects before writing data to the store.
+    * Default implementation is Date.toISOString.
+    * See also Culture.setDefaultDateEncoding.
+    */
+   encoding?: (date: Date) => any;
 }
 
 export class MonthField extends Cx.Widget<MonthFieldProps> {}

package/src/widgets/form/MonthField.js

@@ -1,32 +1,32 @@
-import { Widget, VDOM, getContent } from "../../ui/Widget";
-import { Cx } from "../../ui/Cx";
-import { Field, getFieldTooltip } from "./Field";
-import { MonthPicker } from "./MonthPicker";
 import { DateTimeCulture } from "intl-io";
-import { Format } from "../../util/Format";
-import { Dropdown } from "../overlay/Dropdown";
-import { Console } from "../../util/Console";
 import { StringTemplate } from "../../data/StringTemplate";
-import { monthStart } from "../../util/date/monthStart";
+import { Culture } from "../../ui";
+import { Cx } from "../../ui/Cx";
+import { Localization } from "../../ui/Localization";
+import { VDOM, Widget, getContent } from "../../ui/Widget";
+import { Console } from "../../util/Console";
+import { Format } from "../../util/Format";
+import { KeyCode } from "../../util/KeyCode";
 import { dateDiff } from "../../util/date/dateDiff";
+import { monthStart } from "../../util/date/monthStart";
+import { stopPropagation } from "../../util/eventCallbacks";
+import { isDefined } from "../../util/isDefined";
+import { isTouchDevice } from "../../util/isTouchDevice";
+import { isTouchEvent } from "../../util/isTouchEvent";
+import { Icon } from "../Icon";
+import { autoFocus } from "../autoFocus";
+import ClearIcon from "../icons/clear";
+import DropdownIcon from "../icons/drop-down";
+import { Dropdown } from "../overlay/Dropdown";
 import {
-   tooltipParentWillReceiveProps,
-   tooltipParentWillUnmount,
-   tooltipMouseMove,
    tooltipMouseLeave,
+   tooltipMouseMove,
    tooltipParentDidMount,
+   tooltipParentWillReceiveProps,
+   tooltipParentWillUnmount,
 } from "../overlay/tooltip-ops";
-import { stopPropagation } from "../../util/eventCallbacks";
-import { Icon } from "../Icon";
-import CalendarIcon from "../icons/calendar";
-import DropdownIcon from "../icons/drop-down";
-import ClearIcon from "../icons/clear";
-import { KeyCode } from "../../util/KeyCode";
-import { isTouchEvent } from "../../util/isTouchEvent";
-import { isTouchDevice } from "../../util/isTouchDevice";
-import { Localization } from "../../ui/Localization";
-import { isDefined } from "../../util/isDefined";
-import { autoFocus } from "../autoFocus";
+import { Field, getFieldTooltip } from "./Field";
+import { MonthPicker } from "./MonthPicker";
 
 export class MonthField extends Field {
    declareData() {
@@ -179,16 +179,18 @@ export class MonthField extends Field {
    }
 
    handleSelect(instance, date1, date2) {
+      let { widget } = instance;
+      let encode = widget.encoding || Culture.getDefaultDateEncoding();
       instance.setState({
          inputError: false,
       });
       if (this.range) {
-         let d1 = date1 ? date1.toISOString() : this.emptyValue;
-         let d2 = date2 ? date2.toISOString() : this.emptyValue;
+         let d1 = date1 ? encode(date1) : this.emptyValue;
+         let d2 = date2 ? encode(date2) : this.emptyValue;
          instance.set("from", d1);
          instance.set("to", d2);
       } else {
-         let value = date1 ? date1.toISOString() : this.emptyValue;
+         let value = date1 ? encode(date1) : this.emptyValue;
          instance.set("value", value);
       }
    }
@@ -238,6 +240,7 @@ class MonthInput extends VDOM.Component {
          items: {
             type: MonthPicker,
             ...this.props.monthPicker,
+            encoding: widget.encoding,
             autoFocus: true,
             onFocusOut: (e) => {
                this.closeDropdown(e);

package/src/widgets/form/MonthPicker.d.ts

@@ -63,6 +63,12 @@ interface MonthPickerProps extends FieldProps {
    /** Minimum exclusive value error text. */
    minExclusiveErrorText?: string,
 
+   /** The function that will be used to convert Date objects before writing data to the store.
+    * Default implementation is Date.toISOString.
+    * See also Culture.setDefaultDateEncoding.
+    */
+   encoding?: (date: Date) => any;
+
 }
 
 export class MonthPicker extends Cx.Widget<MonthPickerProps> {}

package/src/widgets/form/MonthPicker.js

@@ -124,7 +124,8 @@ export class MonthPicker extends Field {
    }
 
    handleSelect(e, instance, date1, date2) {
-      let { data } = instance;
+      let { data, widget } = instance;
+      let encode = widget.encoding || Culture.getDefaultDateEncoding();
 
       if (data.disabled) return;
 
@@ -133,9 +134,9 @@ export class MonthPicker extends Field {
       if (this.onBeforeSelect && instance.invoke("onBeforeSelect", e, instance, date1, date2) === false) return;
 
       if (this.range) {
-         instance.set("from", date1.toISOString());
-         instance.set("to", date2.toISOString());
-      } else instance.set("value", date1.toISOString());
+         instance.set("from", encode(date1));
+         instance.set("to", encode(date2));
+      } else instance.set("value", encode(date1));
 
       if (this.onSelect) instance.invoke("onSelect", instance, date1, date2);
    }

package/src/widgets/overlay/Overlay.js

@@ -348,13 +348,11 @@ export class OverlayComponent extends VDOM.Component {
                })}
                style={parseStyle(data.shadowStyle)}
             >
-               {widget.backdrop && (
-                  <div
-                     key="backdrop"
-                     className={CSS.element("overlay", "modal-backdrop")}
-                     onClick={this.onBackdropClick.bind(this)}
-                  />
-               )}
+               <div
+                  key="backdrop"
+                  className={CSS.element("overlay", "modal-backdrop")}
+                  onClick={this.onBackdropClick.bind(this)}
+               />
                {content}
             </div>
          );
@@ -459,6 +457,8 @@ export class OverlayComponent extends VDOM.Component {
 
       if (widget.backdrop) {
          if (instance.dismiss) instance.dismiss();
+      } else if (widget.modal) {
+         FocusManager.focus(this.el);
       }
    }
 

package/src/widgets/overlay/Window.js

@@ -168,7 +168,7 @@ class WindowComponent extends OverlayComponent {
       super.onFocusIn();
       if (!this.state.active) {
          if (this.containerEl.contains(document.activeElement)) this.setZIndex(ZIndexManager.next());
-         this.setState({ active: true, });
+         this.setState({ active: true });
       }
    }