cx 24.4.5 → 24.4.7

package/dist/widgets.js

@@ -19323,7 +19323,7 @@ var DropZoneComponent = /*#__PURE__*/ (function (_VDOM$Component) {
 		var nearDistance = widget.nearDistance;
 		var over = rect.left <= clientX && clientX < rect.right && rect.top <= clientY && clientY < rect.bottom;
 		return {
-			over: over && distance,
+			over: over && Math.abs(clientX - (rect.left + rect.right) / 2) + Math.abs(clientY - (rect.top + rect.bottom) / 2),
 			near: nearDistance && (over || distance < nearDistance),
 		};
 	};

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "24.4.5",
+   "version": "24.4.7",
    "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/Chart.js

@@ -1,14 +1,12 @@
-import { Widget, VDOM, getContent } from '../ui/Widget';
-import { BoundedObject } from '../svg/BoundedObject';
-import { Axis } from './axis/Axis';
+import { Widget, VDOM, getContent } from "../ui/Widget";
+import { BoundedObject } from "../svg/BoundedObject";
+import { Axis } from "./axis/Axis";
 
 export class Chart extends BoundedObject {
-
    init() {
       super.init();
 
-      if (!this.axes)
-         this.axes = {};
+      if (!this.axes) this.axes = {};
 
       for (let axis in this.axes) {
          this.axes[axis] = Axis.create(this.axes[axis]);
@@ -16,10 +14,9 @@ export class Chart extends BoundedObject {
    }
 
    explore(context, instance) {
-
       instance.calculators = { ...context.axes };
 
-      context.push('axes', instance.calculators);
+      context.push("axes", instance.calculators);
       instance.axes = {};
 
       //axes need to be registered before children to be processed first
@@ -35,16 +32,20 @@ export class Chart extends BoundedObject {
    }
 
    exploreCleanup(context, instance) {
-      context.pop('axes');
+      context.pop("axes");
+
+      for (let axis in instance.axes) {
+         instance.axes[axis].widget.reportData(context, instance.axes[axis]);
+      }
    }
 
    prepare(context, instance) {
-      context.push('axes', instance.calculators);
+      context.push("axes", instance.calculators);
       super.prepare(context, instance);
    }
 
    prepareCleanup(context, instance) {
-      context.pop('axes');
+      context.pop("axes");
       super.prepareCleanup(context, instance);
    }
 
@@ -56,22 +57,19 @@ export class Chart extends BoundedObject {
 
       let result = [];
 
-      if (!this.axesOnTop)
-         result.push(axes);
+      if (!this.axesOnTop) result.push(axes);
 
       result.push(this.renderChildren(context, instance));
 
-      if (this.axesOnTop)
-         result.push(axes);
+      if (this.axesOnTop) result.push(axes);
 
       return result;
    }
 }
 
-Chart.prototype.anchors = '0 1 1 0';
+Chart.prototype.anchors = "0 1 1 0";
 Chart.prototype.styled = true;
 Chart.prototype.isPureContainer = true;
 Chart.prototype.axesOnTop = false;
 
-Widget.alias('chart', Chart);
-
+Widget.alias("chart", Chart);

package/src/charts/ColumnBarBase.d.ts

@@ -48,8 +48,8 @@ interface ColumnBarBaseProps extends Cx.StyledContainerProps {
     */
    yAxis?: string;
 
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: string;
+   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+   legend?: string | false;
 
    legendAction?: string;
    legendShape?: string;

package/src/charts/ColumnBarGraphBase.d.ts

@@ -60,8 +60,8 @@ interface ColumnBarGraphBaseProps extends Cx.WidgetProps {
 
    colorIndexField?: boolean;
 
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: string;
+   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+   legend?: string | false;
 
    legendAction?: string;
    legendShape?: string;

package/src/charts/Legend.js

@@ -1,148 +1,151 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { HtmlElement } from "../widgets/HtmlElement";
-import { PureContainer } from "../ui/PureContainer";
-import { getShape } from "./shapes";
-import { isUndefined } from "../util/isUndefined";
-import { isArray } from "../util/isArray";
-import { withHoverSync } from "../ui/HoverSync";
-
-export class Legend extends HtmlElement {
-   prepareData(context, instance) {
-      let { data } = instance;
-      data.stateMods = Object.assign(data.stateMods || {}, {
-         vertical: this.vertical,
-      });
-      super.prepareData(context, instance);
-   }
-
-   declareData() {
-      super.declareData(...arguments, {
-         shape: undefined,
-      });
-   }
-
-   isValidHtmlAttribute(attrName) {
-      switch (attrName) {
-         case "shapeSize":
-         case "svgSize":
-            return false;
-
-         default:
-            return super.isValidHtmlAttribute(attrName);
-      }
-   }
-
-   explore(context, instance) {
-      if (!context.legends) context.legends = {};
-
-      instance.legends = context.legends;
-
-      context.addLegendEntry = (legendName, entry) => {
-         //case when all legends are scoped and new entry is added outside the scope
-         if (!context.legends) return;
-
-         let legend = context.legends[legendName];
-         if (!legend)
-            legend = context.legends[legendName] = {
-               entries: [],
-               names: {},
-            };
-
-         if (!legend.names[entry.name]) {
-            legend.entries.push(entry);
-            legend.names[entry.name] = entry;
-         }
-      };
-
-      super.explore(context, instance);
-   }
-
-   renderChildren(context, instance) {
-      const CSS = this.CSS;
-
-      let entries = instance.legends[this.name] && instance.legends[this.name].entries,
-         list;
-
-      if (isArray(entries) && entries.length > 0) {
-         list = (
-            <div key="wrap" className={CSS.element(this.baseClass, "wrap")}>
-               {entries.map((e, i) =>
-                  withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (
-                     <div
-                        key={i}
-                        className={CSS.element(this.baseClass, "entry", {
-                           "color-root": true,
-                           hover,
-                           disabled: e.disabled,
-                           selected: e.selected,
-                        })}
-                        onClick={e.onClick}
-                        onMouseMove={onMouseMove}
-                        onMouseLeave={onMouseLeave}
-                     >
-                        {this.renderShape(e, instance.data.shape)}
-                        {e.name}
-                     </div>
-                  ))
-               )}
-            </div>
-         );
-      }
-
-      return [list, super.renderChildren(context, instance)];
-   }
-
-   renderShape(entry, legendEntriesShape) {
-      const className = this.CSS.element(this.baseClass, "shape", {
-         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
-      });
-      const shape = getShape(legendEntriesShape || entry.shape || "square");
-
-      return (
-         <svg
-            className={this.CSS.element(this.baseClass, "svg")}
-            style={{
-               width: `${this.svgSize}px`,
-               height: `${this.svgSize}px`,
-               marginTop: `${-this.svgSize / 2}px`,
-            }}
-         >
-            {shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
-               style: entry.style,
-               className: className,
-            })}
-         </svg>
-      );
-   }
-}
-
-Legend.prototype.name = "legend";
-Legend.prototype.baseClass = "legend";
-Legend.prototype.vertical = false;
-Legend.prototype.memoize = false;
-Legend.prototype.shapeSize = 18;
-Legend.prototype.shape = null;
-Legend.prototype.svgSize = 20;
-
-Widget.alias("legend", Legend);
-
-Legend.Scope = class extends PureContainer {
-   explore(context, instance) {
-      context.push("legends", (instance.legends = {}));
-      super.explore(context, instance);
-   }
-
-   exploreCleanup(context, instance) {
-      context.pop("legends");
-   }
-
-   prepare(context, instance) {
-      context.push("legends", instance.legends);
-   }
-
-   prepareCleanup(context, instance) {
-      context.pop("legends");
-   }
-};
-
-export const LegendScope = Legend.Scope;
+import { Widget, VDOM } from "../ui/Widget";
+import { HtmlElement } from "../widgets/HtmlElement";
+import { PureContainer } from "../ui/PureContainer";
+import { getShape } from "./shapes";
+import { isUndefined } from "../util/isUndefined";
+import { isArray } from "../util/isArray";
+import { withHoverSync } from "../ui/HoverSync";
+
+export class Legend extends HtmlElement {
+   prepareData(context, instance) {
+      let { data } = instance;
+      data.stateMods = Object.assign(data.stateMods || {}, {
+         vertical: this.vertical,
+      });
+      super.prepareData(context, instance);
+   }
+
+   declareData() {
+      super.declareData(...arguments, {
+         shape: undefined,
+      });
+   }
+
+   isValidHtmlAttribute(attrName) {
+      switch (attrName) {
+         case "shapeSize":
+         case "svgSize":
+         case "shape":
+            return false;
+
+         default:
+            return super.isValidHtmlAttribute(attrName);
+      }
+   }
+
+   explore(context, instance) {
+      if (!context.legends) context.legends = {};
+
+      instance.legends = context.legends;
+
+      context.addLegendEntry = (legendName, entry) => {
+         if (!legendName) return;
+
+         //case when all legends are scoped and new entry is added outside the scope
+         if (!context.legends) return;
+
+         let legend = context.legends[legendName];
+         if (!legend)
+            legend = context.legends[legendName] = {
+               entries: [],
+               names: {},
+            };
+
+         if (!legend.names[entry.name]) {
+            legend.entries.push(entry);
+            legend.names[entry.name] = entry;
+         }
+      };
+
+      super.explore(context, instance);
+   }
+
+   renderChildren(context, instance) {
+      const CSS = this.CSS;
+
+      let entries = instance.legends[this.name] && instance.legends[this.name].entries,
+         list;
+
+      if (isArray(entries) && entries.length > 0) {
+         list = (
+            <div key="wrap" className={CSS.element(this.baseClass, "wrap")}>
+               {entries.map((e, i) =>
+                  withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, ({ onMouseMove, onMouseLeave, hover }) => (
+                     <div
+                        key={i}
+                        className={CSS.element(this.baseClass, "entry", {
+                           "color-root": true,
+                           hover,
+                           disabled: e.disabled,
+                           selected: e.selected,
+                        })}
+                        onClick={e.onClick}
+                        onMouseMove={onMouseMove}
+                        onMouseLeave={onMouseLeave}
+                     >
+                        {this.renderShape(e, instance.data.shape)}
+                        {e.name}
+                     </div>
+                  )),
+               )}
+            </div>
+         );
+      }
+
+      return [list, super.renderChildren(context, instance)];
+   }
+
+   renderShape(entry, legendEntriesShape) {
+      const className = this.CSS.element(this.baseClass, "shape", {
+         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
+      });
+      const shape = getShape(legendEntriesShape || entry.shape || "square");
+
+      return (
+         <svg
+            className={this.CSS.element(this.baseClass, "svg")}
+            style={{
+               width: `${this.svgSize}px`,
+               height: `${this.svgSize}px`,
+               marginTop: `${-this.svgSize / 2}px`,
+            }}
+         >
+            {shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
+               style: entry.style,
+               className: className,
+            })}
+         </svg>
+      );
+   }
+}
+
+Legend.prototype.name = "legend";
+Legend.prototype.baseClass = "legend";
+Legend.prototype.vertical = false;
+Legend.prototype.memoize = false;
+Legend.prototype.shapeSize = 18;
+Legend.prototype.shape = null;
+Legend.prototype.svgSize = 20;
+
+Widget.alias("legend", Legend);
+
+Legend.Scope = class extends PureContainer {
+   explore(context, instance) {
+      context.push("legends", (instance.legends = {}));
+      super.explore(context, instance);
+   }
+
+   exploreCleanup(context, instance) {
+      context.pop("legends");
+   }
+
+   prepare(context, instance) {
+      context.push("legends", instance.legends);
+   }
+
+   prepareCleanup(context, instance) {
+      context.pop("legends");
+   }
+};
+
+export const LegendScope = Legend.Scope;

package/src/charts/LineGraph.d.ts

@@ -79,8 +79,8 @@ interface LineGraphProps extends Cx.WidgetProps {
    /** Name of the property which holds the y0 value. Default value is `false`, which means y0 value is not read from the data array. */
    y0Field?: string | false;
 
-   /** Name of the legend to be used. Default is `legend`. */
-   legend?: string;
+   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+   legend?: string | false;
 
    legendAction?: string;
    legendShape?: string;

package/src/charts/ScatterGraph.d.ts

@@ -52,8 +52,8 @@ interface ScatterGraphProps extends Cx.StyledContainerProps {
    /** Name of the property which holds the size value. Do not set if `size` is used. */
    sizeField?: string | false;
 
-   /** Name of the legend to be used. Default is legend. */
-   legend?: string;
+   /** Name of the legend to be used. Default is `legend`. Set to `false` to hide the legend entry. */
+   legend?: string | false;
 
    legendAction?: string;