cx 25.6.0 → 25.6.2

package/dist/charts.js

@@ -3330,6 +3330,8 @@ var LineGraph = /*#__PURE__*/ (function (_Widget) {
 					active: true,
 					stack: undefined,
 					stacked: undefined,
+					smooth: undefined,
+					smoothingRatio: undefined,
 				},
 			]),
 		);
@@ -3337,6 +3339,10 @@ var LineGraph = /*#__PURE__*/ (function (_Widget) {
 	_proto.prepareData = function prepareData(context, instance) {
 		var data = instance.data;
 		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;
+		}
 		_Widget.prototype.prepareData.call(this, context, instance);
 	};
 	_proto.explore = function explore(context, instance) {
@@ -3443,18 +3449,24 @@ var LineGraph = /*#__PURE__*/ (function (_Widget) {
 		return spans;
 	};
 	_proto.render = function render(context, instance, key) {
-		var _stateMods;
+		var _stateMods,
+			_this4 = this;
 		var data = instance.data,
 			lineSpans = instance.lineSpans;
 		if (!lineSpans) return null;
 		var stateMods = ((_stateMods = {}), (_stateMods["color-" + data.colorIndex] = data.colorIndex != null), _stateMods);
 		var line, area;
+		var r = data.smoothingRatio;
+		var linePath = "";
 		if (data.line) {
-			var linePath = "";
 			lineSpans.forEach(function (span) {
 				span.forEach(function (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
+								: _this4.getCurvedPathSegment(p, span, i - 1, i - 2, i - 1, i + 1, r);
 				});
 			});
 			line = /*#__PURE__*/ jsx("path", {
@@ -3468,12 +3480,32 @@ var LineGraph = /*#__PURE__*/ (function (_Widget) {
 			lineSpans.forEach(function (span) {
 				var closePath = "";
 				span.forEach(function (p, i) {
-					areaPath += i == 0 ? " M " : " L ";
-					areaPath += p.x + " " + p.y;
-					if (data.area) closePath = "L " + p.x + " " + p.y0 + " " + closePath;
+					var segment = "";
+					if (i == 0) {
+						segment = "M " + p.x + " " + p.y;
+
+						// closing point
+						closePath =
+							!data.smooth || span.length < 2
+								? "L " + p.x + " " + p.y0
+								: _this4.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 = _this4.getCurvedPathSegment(p, span, i - 1, i - 2, i - 1, i + 1, r, "y");
+
+							// closing point
+							if (i < span.length - 1)
+								closePath = _this4.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 = /*#__PURE__*/ jsx("path", {
 				className: this.CSS.element(this.baseClass, "area", stateMods),
@@ -3490,6 +3522,63 @@ var LineGraph = /*#__PURE__*/ (function (_Widget) {
 			key,
 		);
 	};
+	_proto.getCurvedPathSegment = function getCurvedPathSegment(p, points, i1, i2, j1, j2, r, yField) {
+		if (yField === void 0) {
+			yField = "y";
+		}
+		var _this$getControlPoint = this.getControlPoint({
+				cp: points[i1],
+				pp: points[i2],
+				r: r,
+				np: p,
+				yField: yField,
+			}),
+			sx = _this$getControlPoint[0],
+			sy = _this$getControlPoint[1];
+		var _this$getControlPoint2 = this.getControlPoint({
+				cp: p,
+				pp: points[j1],
+				np: points[j2],
+				r: r,
+				reverse: true,
+				yField: yField,
+			}),
+			ex = _this$getControlPoint2[0],
+			ey = _this$getControlPoint2[1];
+		return "C " + sx + " " + sy + ", " + ex + " " + ey + ", " + p.x + " " + p[yField];
+	};
+	_proto.getControlPoint = function getControlPoint(_ref) {
+		var cp = _ref.cp,
+			pp = _ref.pp,
+			np = _ref.np,
+			r = _ref.r,
+			reverse = _ref.reverse,
+			_ref$yField = _ref.yField,
+			yField = _ref$yField === void 0 ? "y" : _ref$yField;
+		// When 'current' is the first or last point of the array 'previous' or 'next' don't exist. Replace with 'current'.
+		var p = pp || cp;
+		var n = np || cp;
+
+		// Properties of the opposed-line
+		var _this$getLineInfo = this.getLineInfo(p.x, p[yField], n.x, n[yField]),
+			angle = _this$getLineInfo.angle,
+			length = _this$getLineInfo.length;
+		// 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
+		var x = cp.x + Math.cos(angle) * length;
+		var y = cp[yField] + Math.sin(angle) * length;
+		return [x, y];
+	};
+	_proto.getLineInfo = function getLineInfo(p1x, p1y, p2x, p2y) {
+		var lengthX = p2x - p1x;
+		var lengthY = p2y - p1y;
+		return {
+			length: Math.sqrt(Math.pow(lengthX, 2) + Math.pow(lengthY, 2)),
+			angle: Math.atan2(lengthY, lengthX),
+		};
+	};
 	return LineGraph;
 })(Widget);
 LineGraph.prototype.xAxis = "x";
@@ -3507,6 +3596,8 @@ LineGraph.prototype.legendAction = "auto";
 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);
 
 var ColumnBarGraphBase = /*#__PURE__*/ (function (_Widget) {