cx 24.6.1 → 24.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.6.1",
+   "version": "24.6.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/ColumnGraph.js

@@ -1,112 +1,112 @@
-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;
-
-      if (isArray(data.data)) {
-         data.data.forEach((p, index) => {
-            var y0 = this.y0Field ? p[this.y0Field] : data.y0;
-            var x = p[this.xField];
-            var y = p[this.yField];
-
-            xAxis.acknowledge(x, data.size, data.offset);
-
-            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);
-               yAxis.acknowledge(y);
-            }
-
-            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 isSelected = this.selection.getIsSelectedDelegate(store);
-
-      return data.data.map((p, i) => {
-         var { offset, size } = data;
-
-         var y0 = this.y0Field ? p[this.y0Field] : data.y0;
-         var x = p[this.xField];
-         var y = p[this.yField];
-
-         if (data.autoSize) {
-            var [index, count] = instance.xAxis.locate(x, data.stacked ? data.stack : data.name);
-            offset = (size / count) * (index - count / 2 + 0.5);
-            size = size / count;
-         }
-
-         var x1 = xAxis.map(x, offset - size / 2);
-         var x2 = xAxis.map(x, offset + size / 2);
-         var y1 = data.stacked ? yAxis.stack(data.stack, x, y0) : yAxis.map(y0);
-         var y2 = data.stacked ? yAxis.stack(data.stack, x, y) : yAxis.map(y);
-
-         var color = this.colorIndexField ? p[this.colorIndexField] : data.colorIndex;
-         var state = {
-            selected: isSelected(p, i),
-            selectable: !this.selection.isDummy,
-            [`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,
-                  },
-               });
-         }
-
-         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.y0Field = false;
-ColumnGraph.prototype.y0 = 0;
-ColumnGraph.prototype.legendShape = "column";
-ColumnGraph.prototype.hiddenBase = false;
-
-Widget.alias("columngraph", ColumnGraph);
+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;
+
+      if (isArray(data.data)) {
+         data.data.forEach((p, index) => {
+            var y0 = this.y0Field ? p[this.y0Field] : data.y0;
+            var x = p[this.xField];
+            var y = p[this.yField];
+
+            xAxis.acknowledge(x, data.size, data.offset);
+
+            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);
+               yAxis.acknowledge(y);
+            }
+
+            if (context.pointReducer) context.pointReducer(x, y, data.name, p, data.data, index);
+         });
+      }
+   }
+
+   renderGraph(context, instance) {
+      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 y0 = this.y0Field ? p[this.y0Field] : data.y0;
+         var x = p[this.xField];
+         var y = p[this.yField];
+
+         if (data.autoSize) {
+            var [index, count] = instance.xAxis.locate(x, data.stacked ? data.stack : data.name);
+            offset = (size / count) * (index - count / 2 + 0.5);
+            size = size / count;
+         }
+
+         var x1 = xAxis.map(x, offset - size / 2);
+         var x2 = xAxis.map(x, offset + size / 2);
+         var y1 = data.stacked ? yAxis.stack(data.stack, x, y0) : yAxis.map(y0);
+         var y2 = data.stacked ? yAxis.stack(data.stack, x, y) : yAxis.map(y);
+
+         var color = this.colorIndexField ? p[this.colorIndexField] : data.colorIndex;
+         var state = {
+            selected: isSelected(p, i),
+            selectable: !this.selection.isDummy,
+            [`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,
+                  },
+               });
+         }
+
+         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.y0Field = false;
+ColumnGraph.prototype.y0 = 0;
+ColumnGraph.prototype.legendShape = "column";
+ColumnGraph.prototype.hiddenBase = false;
+
+Widget.alias("columngraph", ColumnGraph);

package/src/charts/LineGraph.js

@@ -65,7 +65,7 @@ export class LineGraph extends Widget {
                         context.pointReducer(x, p[this.y0Field], data.name, p, data, index);
                   }
                }
-               if (context.pointReducer) context.pointReducer(x, p[this.yField], data.name, p, data, index);
+               if (context.pointReducer) context.pointReducer(x, p[this.yField], data.name, p, data.data, index);
             });
          }
       }

package/src/charts/helpers/SnapPointFinder.d.ts

@@ -1,24 +1,30 @@
-import * as Cx from "../../core";
-import { PointReducerProps } from "./PointReducer";
-
-interface SnapPointFinderProps extends PointReducerProps {
-   /* Cursor X value. */
-   cursorX?: Cx.NumberProp;
-
-   /* Cursor Y value */
-   cursorY?: Cx.NumberProp;
-
-   /* A binding used to receive the x value of the nearest point.*/
-   snapX?: Cx.Prop<any>;
-
-   /* A binding used to receive the y value of the nearest point. */
-   snapY?: Cx.Prop<any>;
-
-   /* A binding used to receive the record prop */
-   snapRecord?: Cx.Prop<Cx.Record>;
-
-   /* Maximum distance between cursor and the snap point. */
-   maxDistance?: number;
-}
-
-export class SnapPointFinder extends Cx.Widget<SnapPointFinderProps> {}
+import * as Cx from "../../core";
+import { PointReducerProps } from "./PointReducer";
+
+interface SnapPointFinderProps extends PointReducerProps {
+   /* Cursor X value. */
+   cursorX?: Cx.NumberProp;
+
+   /* Cursor Y value */
+   cursorY?: Cx.NumberProp;
+
+   /* A binding used to receive the x value of the nearest point.*/
+   snapX?: Cx.NumberProp | Cx.StringProp;
+
+   /* A binding used to receive the y value of the nearest point. */
+   snapY?: Cx.NumberProp | Cx.StringProp;
+
+   /* A binding used to receive the record prop */
+   snapRecord?: Cx.Prop<Cx.Record>;
+
+   /* Maximum distance between cursor and the snap point. Default value is 50. Adjust accordingly for large distances, e.g. set to Infinity when using TimeAxis */
+   maxDistance?: number;
+
+   /* A function used to convert x values into numeric format. Commonly used with dates. */
+   convertX?: (value: number | string) => number;
+
+   /* A function used to convert y values into numeric format. Commonly used with dates. */
+   convertY?: (value: number | string) => number;
+}
+
+export class SnapPointFinder extends Cx.Widget<SnapPointFinderProps> {}

package/src/charts/helpers/SnapPointFinder.js

@@ -1,47 +1,49 @@
-import {PointReducer} from "./PointReducer";
-
-export class SnapPointFinder extends PointReducer {
-   declareData() {
-      return super.declareData(...arguments, {
-         cursorX: undefined,
-         cursorY: undefined,
-         snapX: undefined,
-         snapY: undefined,
-         snapRecord: undefined,
-         maxDistance: undefined
-      })
-   }
-
-   onInitAccumulator(acc, {data}) {
-      acc.cursorX = data.cursorX;
-      acc.cursorY = data.cursorY;
-      acc.dist = data.maxDistance > 0 ? Math.pow(data.maxDistance, 2) : Number.POSITIVE_INFINITY;
-      acc.snapX = null;
-      acc.snapY = null;
-   }
-
-   onMap(acc, x, y, name, p) {
-      let d = null;
-
-      if (acc.cursorX != null && x != null)
-         d = (d || 0) + Math.pow(Math.abs(x - acc.cursorX), 2);
-
-      if (acc.cursorY != null && y != null)
-         d = (d || 0) + Math.pow(Math.abs(y - acc.cursorY), 2);
-
-      if (d != null && d < acc.dist) {
-         acc.dist = d;
-         acc.snapX = x;
-         acc.snapY = y;
-         acc.snapRecord = p;
-      }
-   }
-
-   onReduce(acc, instance) {
-      instance.set('snapX', acc.snapX);
-      instance.set('snapY', acc.snapY);
-      instance.set('snapRecord', acc.snapRecord);
-   }
-}
-
-SnapPointFinder.prototype.maxDistance = 50;
+import { PointReducer } from "./PointReducer";
+
+export class SnapPointFinder extends PointReducer {
+   declareData() {
+      return super.declareData(...arguments, {
+         cursorX: undefined,
+         cursorY: undefined,
+         snapX: undefined,
+         snapY: undefined,
+         snapRecord: undefined,
+         maxDistance: undefined,
+      });
+   }
+
+   onInitAccumulator(acc, { data }) {
+      acc.cursorX = data.cursorX;
+      acc.cursorY = data.cursorY;
+      acc.dist = data.maxDistance > 0 ? Math.pow(data.maxDistance, 2) : Number.POSITIVE_INFINITY;
+      acc.snapX = null;
+      acc.snapY = null;
+   }
+
+   onMap(acc, x, y, name, p) {
+      let d = null;
+      let cx = this.convertX(x);
+      let cy = this.convertY(y);
+
+      if (acc.cursorX != null && cx != null) d = (d || 0) + Math.pow(Math.abs(cx - acc.cursorX), 2);
+
+      if (acc.cursorY != null && cy != null) d = (d || 0) + Math.pow(Math.abs(cy - acc.cursorY), 2);
+
+      if (d != null && d < acc.dist) {
+         acc.dist = d;
+         acc.snapX = x;
+         acc.snapY = y;
+         acc.snapRecord = p;
+      }
+   }
+
+   onReduce(acc, instance) {
+      instance.set("snapX", acc.snapX);
+      instance.set("snapY", acc.snapY);
+      instance.set("snapRecord", acc.snapRecord);
+   }
+}
+
+SnapPointFinder.prototype.maxDistance = 50;
+SnapPointFinder.prototype.convertX = (x) => x;
+SnapPointFinder.prototype.convertY = (y) => y;

package/src/charts/helpers/ValueAtFinder.d.ts

@@ -1,17 +1,16 @@
-import * as Cx from '../../core';
-import {PointReducerProps} from './PointReducer';
-
-interface ValueAtFinderProps extends PointReducerProps {
-
-   /* Probe value. */
-   at?: Cx.NumberProp,
-
-   /* A binding used to receive the measured value */
-   value?: Cx.Bind,
-
-   /* A function used to convert x values into numeric format. Commonly used with dates. */
-   convert?: (value: any) => number
-}
-
-/** Calculate value at a given point on the graph */
-export class ValueAtFinder extends Cx.Widget<ValueAtFinderProps> {}
+import * as Cx from "../../core";
+import { PointReducerProps } from "./PointReducer";
+
+interface ValueAtFinderProps extends PointReducerProps {
+   /* X axis probe value. */
+   at?: Cx.NumberProp | Cx.StringProp;
+
+   /* A binding used to receive the measured y axis value */
+   value?: Cx.Bind | Cx.AccessorChain<number>;
+
+   /* A function used to convert x values into numeric format. Commonly used with dates. */
+   convert?: (value: number | string) => number;
+}
+
+/** Calculate value at a given point on the graph */
+export class ValueAtFinder extends Cx.Widget<ValueAtFinderProps> {}