cx 25.6.1 → 25.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
    "name": "cx",
-   "version": "25.6.1",
+   "version": "25.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/Legend.d.ts

@@ -1,45 +1,45 @@
-import * as Cx from "../core";
-
-interface LegendProps extends Cx.HtmlElementProps {
-   /** Name of the legend. Default is `legend`. */
-   name?: string;
-
-   /** Base CSS class to be applied to the element. Defaults to `legend`. */
-   baseClass?: string;
-
-   /** Switch to vertical mode. */
-   vertical?: boolean;
-
-   /** Size of the svg shape container in pixels. Default value is 20. */
-   svgSize?: number;
-
-   /** Shape size in pixels. Default value is 18. */
-   shapeSize?: number;
-
-   /** Default shape that will be applied to the all legend items. */
-   shape?: Cx.StringProp;
-
-   /** CSS style that will be applied to the legend entry. */
-   entryStyle?: Cx.StyleProp;
-
-   /** CSS class that will be applied to the legend entry. */
-   entryClass?: Cx.ClassProp;
-
-   /** CSS style that will be applied to the legend entry value segment. */
-   valueStyle?: Cx.StyleProp;
-
-   /** CSS class that will be applied to the legend entry value segment. */
-   valueClass?: Cx.ClassProp;
-
-   /** Set to true to show values. Mostly used for PieChart legends. */
-   showValues?: Cx.BooleanProp;
-
-   /** Format used for values, i.e. n;2 or currency. The default value is s.*/
-   valueFormat?: string;
-}
-
-export class Legend extends Cx.Widget<LegendProps> {
-   static Scope(): any;
-}
-
-export class LegendScope extends Cx.Widget<Cx.PureContainerProps> {}
+import * as Cx from "../core";
+
+interface LegendProps extends Cx.HtmlElementProps {
+   /** Name of the legend. Default is `legend`. */
+   name?: string;
+
+   /** Base CSS class to be applied to the element. Defaults to `legend`. */
+   baseClass?: string;
+
+   /** Switch to vertical mode. */
+   vertical?: boolean;
+
+   /** Size of the svg shape container in pixels. Default value is 20. */
+   svgSize?: number;
+
+   /** Shape size in pixels. Default value is 18. */
+   shapeSize?: number;
+
+   /** Default shape that will be applied to the all legend items. */
+   shape?: Cx.StringProp;
+
+   /** CSS style that will be applied to the legend entry. */
+   entryStyle?: Cx.StyleProp;
+
+   /** CSS class that will be applied to the legend entry. */
+   entryClass?: Cx.ClassProp;
+
+   /** CSS style that will be applied to the legend entry value segment. */
+   valueStyle?: Cx.StyleProp;
+
+   /** CSS class that will be applied to the legend entry value segment. */
+   valueClass?: Cx.ClassProp;
+
+   /** Set to true to show values. Mostly used for PieChart legends. */
+   showValues?: Cx.BooleanProp;
+
+   /** Format used for values, i.e. n;2 or currency. The default value is s.*/
+   valueFormat?: string;
+}
+
+export class Legend extends Cx.Widget<LegendProps> {
+   static Scope(): any;
+}
+
+export class LegendScope extends Cx.Widget<Cx.PureContainerProps> {}

package/src/charts/LegendEntry.js

@@ -1,128 +1,128 @@
-import { Widget, VDOM } from "../ui/Widget";
-import { getShape } from "./shapes";
-import { Selection } from "../ui/selection/Selection";
-import { stopPropagation } from "../util/eventCallbacks";
-import { isUndefined } from "../util/isUndefined";
-import { Container } from "../ui/Container";
-
-export class LegendEntry extends Container {
-   init() {
-      this.selection = Selection.create(this.selection);
-      super.init();
-   }
-
-   declareData() {
-      var selection = this.selection.configureWidget(this);
-
-      super.declareData(...arguments, selection, {
-         selected: undefined,
-         shape: undefined,
-         colorIndex: undefined,
-         colorMap: undefined,
-         colorName: undefined,
-         name: undefined,
-         active: true,
-         size: undefined,
-         rx: undefined,
-         ry: undefined,
-         text: undefined,
-      });
-   }
-
-   prepareData(context, instance) {
-      let { data } = instance;
-
-      if (data.name && !data.colorName) data.colorName = data.name;
-
-      super.prepareData(context, instance);
-   }
-
-   explore(context, instance) {
-      var { data } = instance;
-      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
-      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
-      super.explore(context, instance);
-   }
-
-   prepare(context, instance) {
-      var { data, colorMap } = instance;
-
-      if (colorMap && data.colorName) {
-         data.colorIndex = colorMap.map(data.colorName);
-         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
-      }
-   }
-
-   handleClick(e, instance) {
-      if (this.onClick && instance.invoke("onClick", e, instance) === false) return;
-
-      e.stopPropagation();
-
-      var any = this.legendAction == "auto";
-
-      if (any || this.legendAction == "toggle") if (instance.set("active", !instance.data.active)) return;
-
-      if ((any || this.legendAction == "select") && !this.selection.isDummy) this.selection.selectInstance(instance);
-   }
-
-   render(context, instance, key) {
-      let { data } = instance;
-      let content = !isUndefined(this.text) ? data.text : this.renderChildren(context, instance);
-      return (
-         <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>
-      );
-   }
-
-   renderShape(instance) {
-      var entry = instance.data;
-      var className = this.CSS.element(this.baseClass, "shape", {
-         disabled: entry.disabled,
-         selected: entry.selected || this.selection.isInstanceSelected(instance),
-         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
-      });
-      var shape = getShape(entry.shape || "square");
-
-      // if the entry has a custom fill or stroke set, use it for both values
-      let style = { ...entry.style };
-      style.fill = style.fill ?? style.stroke;
-      style.stroke = style.stroke ?? style.fill;
-
-      return (
-         <svg
-            key="svg"
-            className={this.CSS.element(this.baseClass, "svg")}
-            style={{
-               width: `${this.svgSize}px`,
-               height: `${this.svgSize}px`,
-            }}
-         >
-            {shape(this.svgSize / 2, this.svgSize / 2, entry.size, {
-               style,
-               className,
-               rx: entry.rx,
-               ry: entry.ry,
-            })}
-         </svg>
-      );
-   }
-}
-
-LegendEntry.prototype.baseClass = "legendentry";
-LegendEntry.prototype.shape = "square";
-LegendEntry.prototype.legendAction = "auto";
-LegendEntry.prototype.size = 18;
-LegendEntry.prototype.svgSize = 20;
-LegendEntry.prototype.styled = true;
-
-Widget.alias("legend-entry", LegendEntry);
+import { Widget, VDOM } from "../ui/Widget";
+import { getShape } from "./shapes";
+import { Selection } from "../ui/selection/Selection";
+import { stopPropagation } from "../util/eventCallbacks";
+import { isUndefined } from "../util/isUndefined";
+import { Container } from "../ui/Container";
+
+export class LegendEntry extends Container {
+   init() {
+      this.selection = Selection.create(this.selection);
+      super.init();
+   }
+
+   declareData() {
+      var selection = this.selection.configureWidget(this);
+
+      super.declareData(...arguments, selection, {
+         selected: undefined,
+         shape: undefined,
+         colorIndex: undefined,
+         colorMap: undefined,
+         colorName: undefined,
+         name: undefined,
+         active: true,
+         size: undefined,
+         rx: undefined,
+         ry: undefined,
+         text: undefined,
+      });
+   }
+
+   prepareData(context, instance) {
+      let { data } = instance;
+
+      if (data.name && !data.colorName) data.colorName = data.name;
+
+      super.prepareData(context, instance);
+   }
+
+   explore(context, instance) {
+      var { data } = instance;
+      instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
+      if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
+      super.explore(context, instance);
+   }
+
+   prepare(context, instance) {
+      var { data, colorMap } = instance;
+
+      if (colorMap && data.colorName) {
+         data.colorIndex = colorMap.map(data.colorName);
+         if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
+      }
+   }
+
+   handleClick(e, instance) {
+      if (this.onClick && instance.invoke("onClick", e, instance) === false) return;
+
+      e.stopPropagation();
+
+      var any = this.legendAction == "auto";
+
+      if (any || this.legendAction == "toggle") if (instance.set("active", !instance.data.active)) return;
+
+      if ((any || this.legendAction == "select") && !this.selection.isDummy) this.selection.selectInstance(instance);
+   }
+
+   render(context, instance, key) {
+      let { data } = instance;
+      let content = !isUndefined(this.text) ? data.text : this.renderChildren(context, instance);
+      return (
+         <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>
+      );
+   }
+
+   renderShape(instance) {
+      var entry = instance.data;
+      var className = this.CSS.element(this.baseClass, "shape", {
+         disabled: entry.disabled,
+         selected: entry.selected || this.selection.isInstanceSelected(instance),
+         [`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
+      });
+      var shape = getShape(entry.shape || "square");
+
+      // if the entry has a custom fill or stroke set, use it for both values
+      let style = { ...entry.style };
+      style.fill = style.fill ?? style.stroke;
+      style.stroke = style.stroke ?? style.fill;
+
+      return (
+         <svg
+            key="svg"
+            className={this.CSS.element(this.baseClass, "svg")}
+            style={{
+               width: `${this.svgSize}px`,
+               height: `${this.svgSize}px`,
+            }}
+         >
+            {shape(this.svgSize / 2, this.svgSize / 2, entry.size, {
+               style,
+               className,
+               rx: entry.rx,
+               ry: entry.ry,
+            })}
+         </svg>
+      );
+   }
+}
+
+LegendEntry.prototype.baseClass = "legendentry";
+LegendEntry.prototype.shape = "square";
+LegendEntry.prototype.legendAction = "auto";
+LegendEntry.prototype.size = 18;
+LegendEntry.prototype.svgSize = 20;
+LegendEntry.prototype.styled = true;
+
+Widget.alias("legend-entry", LegendEntry);

package/src/charts/LegendEntry.scss

@@ -1,27 +1,27 @@
-@mixin cx-legendentry($name: "legendentry", $besm: $cx-besm) {
-   $block: map-get($besm, block);
-   $element: map-get($besm, element);
-   $state: map-get($besm, state);
-
-   .#{$block}#{$name} {
-      display: inline-flex;
-      align-items: center;
-      padding: 5px;
-      gap: 5px;
-      position: relative;
-      box-sizing: border-box;
-      cursor: pointer;
-   }
-
-   .#{$element}#{$name}-svg {
-      flex-shrink: 0;
-   }
-
-   .#{$element}#{$name}-shape {
-      fill: #eee;
-   }
-}
-
-@if (cx-should-include("cx/charts/LegendEntry")) {
-   @include cx-legendentry();
-}
+@mixin cx-legendentry($name: "legendentry", $besm: $cx-besm) {
+   $block: map-get($besm, block);
+   $element: map-get($besm, element);
+   $state: map-get($besm, state);
+
+   .#{$block}#{$name} {
+      display: inline-flex;
+      align-items: center;
+      padding: 5px;
+      gap: 5px;
+      position: relative;
+      box-sizing: border-box;
+      cursor: pointer;
+   }
+
+   .#{$element}#{$name}-svg {
+      flex-shrink: 0;
+   }
+
+   .#{$element}#{$name}-shape {
+      fill: #eee;
+   }
+}
+
+@if (cx-should-include("cx/charts/LegendEntry")) {
+   @include cx-legendentry();
+}

package/src/charts/LineGraph.d.ts

@@ -87,6 +87,15 @@ interface LineGraphProps extends Cx.WidgetProps {
 
    /** Set to true to avoid forcing the vertical axis to accommodate y0 values. */
    hiddenBase?: boolean;
+
+   /** Set to `true` to draw smoothed lines between data points using cubic Bézier curve.
+    * When enabled, the graph uses control points calculated from neighboring values to create smooth transitions between data points. */
+   smooth?: boolean;
+
+   /** Controls the intensity of the smoothing effect applied to Bézier curves when `smooth` is enabled.
+    * Accepts a number between `0` (straight lines) and `0.4` (maximum smoothing).
+    * Values outside this range are automatically clamped. Default value is `0.05`. */
+   smoothingRatio?: number;
 }
 
 export class LineGraph extends Cx.Widget<LineGraphProps> {}

package/src/charts/LineGraph.js

@@ -27,6 +27,8 @@ export class LineGraph extends Widget {
          active: true,
          stack: undefined,
          stacked: undefined,
+         smooth: undefined,
+         smoothingRatio: undefined,
       });
    }
 
@@ -35,6 +37,11 @@ export class LineGraph extends Widget {
 
       if (data.name && !data.colorName) data.colorName = data.name;
 
+      if (data.smooth && data.smoothingRatio != null) {
+         if (data.smoothingRatio < 0) data.smoothingRatio = 0;
+         if (data.smoothingRatio > 0.4) data.smoothingRatio = 0.4;
+      }
+
       super.prepareData(context, instance);
    }
 
@@ -161,13 +168,18 @@ export class LineGraph extends Widget {
       };
 
       let line, area;
+      const r = data.smoothingRatio;
 
+      let linePath = "";
       if (data.line) {
-         let linePath = "";
          lineSpans.forEach((span) => {
             span.forEach((p, i) => {
-               linePath += i == 0 ? " M " : " L ";
-               linePath += p.x + " " + p.y;
+               linePath +=
+                  i == 0
+                     ? `M ${p.x} ${p.y}`
+                     : !data.smooth || span.length < 2
+                       ? `L ${p.x} ${p.y}`
+                       : this.getCurvedPathSegment(p, span, i - 1, i - 2, i - 1, i + 1, r);
             });
          });
 
@@ -185,13 +197,35 @@ export class LineGraph extends Widget {
          lineSpans.forEach((span) => {
             let closePath = "";
             span.forEach((p, i) => {
-               areaPath += i == 0 ? " M " : " L ";
-               areaPath += p.x + " " + p.y;
-               if (data.area) closePath = `L ${p.x} ${p.y0} ` + closePath;
+               let segment = "";
+               if (i == 0) {
+                  segment = `M ${p.x} ${p.y}`;
+
+                  // closing point
+                  closePath =
+                     !data.smooth || span.length < 2
+                        ? `L ${p.x} ${p.y0}`
+                        : this.getCurvedPathSegment(p, span, i + 1, i + 2, i + 1, i - 1, r, "y0");
+               } else {
+                  if (!data.smooth) {
+                     segment = `L ${p.x} ${p.y}`;
+                     closePath = `L ${p.x} ${p.y0}` + closePath;
+                  } else {
+                     segment = this.getCurvedPathSegment(p, span, i - 1, i - 2, i - 1, i + 1, r, "y");
+
+                     // closing point
+                     if (i < span.length - 1)
+                        closePath = this.getCurvedPathSegment(p, span, i + 1, i + 2, i + 1, i - 1, r, "y0") + closePath;
+                  }
+               }
+               areaPath += segment;
             });
+
+            areaPath += `L ${span[span.length - 1].x} ${span[span.length - 1].y0}`;
             areaPath += closePath;
-            areaPath += `L ${span[0].x} ${span[0].y}`;
+            areaPath += "Z";
          });
+
          area = (
             <path
                className={this.CSS.element(this.baseClass, "area", stateMods)}
@@ -208,6 +242,39 @@ export class LineGraph extends Widget {
          </g>
       );
    }
+
+   getCurvedPathSegment(p, points, i1, i2, j1, j2, r, yField = "y") {
+      const [sx, sy] = this.getControlPoint({ cp: points[i1], pp: points[i2], r, np: p, yField });
+      const [ex, ey] = this.getControlPoint({ cp: p, pp: points[j1], np: points[j2], r, reverse: true, yField });
+
+      return `C ${sx} ${sy}, ${ex} ${ey}, ${p.x} ${p[yField]}`;
+   }
+
+   getControlPoint({ cp, pp, np, r, reverse, yField = "y" }) {
+      // When 'current' is the first or last point of the array 'previous' or 'next' don't exist. Replace with 'current'.
+      const p = pp || cp;
+      const n = np || cp;
+
+      // Properties of the opposed-line
+      let { angle, length } = this.getLineInfo(p.x, p[yField], n.x, n[yField]);
+      // If it is end-control-point, add PI to the angle to go backward
+      angle = angle + (reverse ? Math.PI : 0);
+      length = length * r;
+      // The control point position is relative to the current point
+      const x = cp.x + Math.cos(angle) * length;
+      const y = cp[yField] + Math.sin(angle) * length;
+      return [x, y];
+   }
+
+   getLineInfo(p1x, p1y, p2x, p2y) {
+      const lengthX = p2x - p1x;
+      const lengthY = p2y - p1y;
+
+      return {
+         length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+         angle: Math.atan2(lengthY, lengthX),
+      };
+   }
 }
 
 LineGraph.prototype.xAxis = "x";
@@ -227,4 +294,7 @@ LineGraph.prototype.legendShape = "rect";
 LineGraph.prototype.stack = "stack";
 LineGraph.prototype.hiddenBase = false;
 
+LineGraph.prototype.smooth = false;
+LineGraph.prototype.smoothingRatio = 0.05;
+
 Widget.alias("line-graph", LineGraph);