cx 26.7.6 → 26.9.0

package/dist/charts.js

@@ -1586,6 +1586,8 @@ class Legend extends HtmlElement {
 	declareData(...args) {
 		super.declareData(...args, {
 			shape: undefined,
+			shapeRole: undefined,
+			shapeAriaLabel: undefined,
 			entryStyle: {
 				structured: true,
 			},
@@ -1618,6 +1620,8 @@ class Legend extends HtmlElement {
 			case "shapeSize":
 			case "svgSize":
 			case "shape":
+			case "shapeRole":
+			case "shapeAriaLabel":
 			case "entryStyle":
 			case "entryClass":
 			case "valueStyle":
@@ -1653,7 +1657,7 @@ class Legend extends HtmlElement {
 		const CSS = this.CSS;
 		let entries = instance.legends[this.name] && instance.legends[this.name].entries,
 			list;
-		let { entryClass, entryStyle, shape, valueClass, valueStyle } = instance.data;
+		let { entryClass, entryStyle, shape, shapeRole, shapeAriaLabel, valueClass, valueStyle } = instance.data;
 		let valueFormatter = Format.parse(this.valueFormat);
 		let valueClasses = this.showValues ? CSS.expand(CSS.element(this.baseClass, "value"), valueClass) : undefined;
 		let entryTextClass = CSS.element(this.baseClass, "entry-text");
@@ -1677,7 +1681,7 @@ class Legend extends HtmlElement {
 							onMouseMove: onMouseMove,
 							onMouseLeave: onMouseLeave,
 							children: [
-								this.renderShape(e, shape),
+								this.renderShape(e, shape, shapeRole, shapeAriaLabel),
 								jsx("div", {
 									className: entryTextClass,
 									children: e.displayText || e.name,
@@ -1697,7 +1701,7 @@ class Legend extends HtmlElement {
 		}
 		return [list, super.renderChildren(context, instance)];
 	}
-	renderShape(entry, legendEntriesShape) {
+	renderShape(entry, legendEntriesShape, role, ariaLabel) {
 		const className = this.CSS.element(this.baseClass, "shape", {
 			[`color-${entry.colorIndex}`]: entry.colorIndex != null && (isUndefined(entry.active) || entry.active),
 		});
@@ -1710,6 +1714,9 @@ class Legend extends HtmlElement {
 		if (hasVisibleValue(style.fill) && !style.stroke) style.stroke = style.fill;
 		return jsx("svg", {
 			className: this.CSS.element(this.baseClass, "svg"),
+			role: role ?? (ariaLabel ? "img" : undefined),
+			"aria-label": ariaLabel,
+			"aria-hidden": role == null && !ariaLabel ? true : undefined,
 			style: {
 				width: `${this.svgSize}px`,
 				height: `${this.svgSize}px`,
@@ -2999,16 +3006,11 @@ class LineGraph extends Widget {
 			stack: undefined,
 			stacked: undefined,
 			smooth: undefined,
-			smoothingRatio: undefined,
 		});
 	}
 	prepareData(context, instance) {
 		let { data } = instance;
 		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);
 	}
 	explore(context, instance) {
@@ -3119,18 +3121,16 @@ class LineGraph extends Widget {
 			["color-" + data.colorIndex]: data.colorIndex != null,
 		};
 		let line, area;
-		const r = data.smoothingRatio;
 		let linePath = "";
 		if (data.line) {
 			lineSpans.forEach((span) => {
-				span.forEach((p, i) => {
-					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);
-				});
+				if (span.length == 0) return;
+				linePath += `M ${span[0].x} ${span[0].y}`;
+				if (data.smooth && span.length >= 2) linePath += this.getMonotoneSpanPath(span, "y");
+				else
+					span.forEach((p, i) => {
+						if (i > 0) linePath += `L ${p.x} ${p.y}`;
+					});
 			});
 			line = jsx("path", {
 				className: this.CSS.element(this.baseClass, "line", stateMods),
@@ -3141,31 +3141,20 @@ class LineGraph extends Widget {
 		if (data.area) {
 			let areaPath = "";
 			lineSpans.forEach((span) => {
-				let closePath = "";
-				span.forEach((p, i) => {
-					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;
+				if (span.length == 0) return;
+				let last = span[span.length - 1];
+				areaPath += `M ${span[0].x} ${span[0].y}`;
+				if (data.smooth && span.length >= 2) {
+					areaPath += this.getMonotoneSpanPath(span, "y");
+					areaPath += `L ${last.x} ${last.y0}`;
+					areaPath += this.getMonotoneSpanPath(span, "y0", true);
+				} else {
+					span.forEach((p, i) => {
+						if (i > 0) areaPath += `L ${p.x} ${p.y}`;
+					});
+					areaPath += `L ${last.x} ${last.y0}`;
+					for (let i = span.length - 2; i >= 0; i--) areaPath += `L ${span[i].x} ${span[i].y0}`;
+				}
 				areaPath += "Z";
 			});
 			area = jsx("path", {
@@ -3183,45 +3172,54 @@ class LineGraph extends Widget {
 			key,
 		);
 	}
-	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),
+	// Fritsch-Carlson monotone cubic interpolation. Tangents are limited so the
+	// curve between two points never leaves their vertical range (no overshoot).
+	getMonotoneTangents(span, yField) {
+		const n = span.length;
+		const m = new Array(n).fill(0);
+		if (n < 2) return m;
+		const secant = (i) => {
+			const h = span[i + 1].x - span[i].x;
+			return h != 0 ? (span[i + 1][yField] - span[i][yField]) / h : 0;
 		};
+		if (n == 2) {
+			m[0] = m[1] = secant(0);
+			return m;
+		}
+		for (let i = 1; i < n - 1; i++) {
+			const h0 = span[i].x - span[i - 1].x;
+			const h1 = span[i + 1].x - span[i].x;
+			const s0 = secant(i - 1);
+			const s1 = secant(i);
+			const p = (s0 * h1 + s1 * h0) / (h0 + h1);
+			m[i] = (Math.sign(s0) + Math.sign(s1)) * Math.min(Math.abs(s0), Math.abs(s1), 0.5 * Math.abs(p)) || 0;
+		}
+		const hFirst = span[1].x - span[0].x;
+		m[0] = hFirst != 0 ? (3 * secant(0) - m[1]) / 2 : m[1];
+		const hLast = span[n - 1].x - span[n - 2].x;
+		m[n - 1] = hLast != 0 ? (3 * secant(n - 2) - m[n - 2]) / 2 : m[n - 2];
+		return m;
+	}
+	// Emits cubic bezier segments for the whole span using monotone tangents.
+	// Assumes the path cursor is at the first (or last, when reversed) span point.
+	getMonotoneSpanPath(span, yField, reverse) {
+		const m = this.getMonotoneTangents(span, yField);
+		let path = "";
+		if (!reverse)
+			for (let i = 1; i < span.length; i++) {
+				const p0 = span[i - 1];
+				const p1 = span[i];
+				const dx = (p1.x - p0.x) / 3;
+				path += `C ${p0.x + dx} ${p0[yField] + dx * m[i - 1]}, ${p1.x - dx} ${p1[yField] - dx * m[i]}, ${p1.x} ${p1[yField]}`;
+			}
+		else
+			for (let i = span.length - 1; i > 0; i--) {
+				const p0 = span[i - 1];
+				const p1 = span[i];
+				const dx = (p1.x - p0.x) / 3;
+				path += `C ${p1.x - dx} ${p1[yField] - dx * m[i]}, ${p0.x + dx} ${p0[yField] + dx * m[i - 1]}, ${p0.x} ${p0[yField]}`;
+			}
+		return path;
 	}
 }
 LineGraph.prototype.xAxis = "x";
@@ -3240,7 +3238,6 @@ LineGraph.prototype.legendShape = "rect";
 LineGraph.prototype.stack = "stack";
 LineGraph.prototype.hiddenBase = false;
 LineGraph.prototype.smooth = false;
-LineGraph.prototype.smoothingRatio = 0.05;
 LineGraph.prototype.styled = true;
 Widget.alias("line-graph", LineGraph);
 
@@ -3904,92 +3901,6 @@ class Stack {
 	}
 }
 
-class NumericAxis extends Axis {
-	constructor(config) {
-		super(config);
-	}
-	init() {
-		if (this.deadZone) {
-			this.lowerDeadZone = this.deadZone;
-			this.upperDeadZone = this.deadZone;
-		}
-		super.init();
-	}
-	declareData(...args) {
-		super.declareData(
-			{
-				min: undefined,
-				max: undefined,
-				normalized: undefined,
-				inverted: undefined,
-				labelDivisor: undefined,
-				format: undefined,
-				lowerDeadZone: undefined,
-				upperDeadZone: undefined,
-			},
-			...args,
-		);
-	}
-	initInstance(context, instance) {
-		instance.calculator = new NumericScale();
-	}
-	explore(context, instance) {
-		super.explore(context, instance);
-		let { min, max, normalized, inverted, lowerDeadZone, upperDeadZone } = instance.data;
-		instance.calculator.reset(
-			min,
-			max,
-			this.snapToTicks,
-			this.tickDivisions,
-			this.minTickDistance,
-			this.minTickStep,
-			this.minLabelDistance,
-			this.minLabelTickSize,
-			normalized,
-			inverted,
-			lowerDeadZone,
-			upperDeadZone,
-		);
-	}
-	render(context, instance, key) {
-		let { data } = instance;
-		if (!data.bounds.valid()) return null;
-		let baseFormatter = Format.parse(data.format);
-		let formatter = data.labelDivisor != 1 ? (v) => baseFormatter(v / data.labelDivisor) : baseFormatter;
-		return jsx(
-			"g",
-			{
-				className: data.classNames,
-				style: data.style,
-				children: this.renderTicksAndLabels(context, instance, formatter, this.minLabelDistance),
-			},
-			key,
-		);
-	}
-	static XY() {
-		return {
-			x: {
-				type: NumericAxis,
-			},
-			y: {
-				type: NumericAxis,
-				vertical: true,
-			},
-		};
-	}
-}
-NumericAxis.prototype.baseClass = "numericaxis";
-NumericAxis.prototype.tickDivisions = [
-	[1, 2, 10, 20, 100],
-	[1, 5, 10, 20, 100],
-];
-NumericAxis.prototype.snapToTicks = 1;
-NumericAxis.prototype.normalized = false;
-NumericAxis.prototype.format = "n";
-NumericAxis.prototype.labelDivisor = 1;
-NumericAxis.prototype.minLabelTickSize = 0;
-NumericAxis.prototype.minTickStep = 0;
-Axis.alias("numeric", NumericAxis);
 class NumericScale {
 	min;
 	max;
@@ -4059,7 +3970,7 @@ class NumericScale {
 	}
 	trackValue(v, offset = 0, constrain = false) {
 		let value = (v - this.origin) / this.scale.factor - offset + this.scale.min - this.scale.minPadding;
-		if (constrain) value = this.constrainValue(v);
+		if (constrain) value = this.constrainValue(value);
 		return value;
 	}
 	hash() {
@@ -4237,6 +4148,93 @@ class NumericScale {
 	}
 }
 
+class NumericAxis extends Axis {
+	constructor(config) {
+		super(config);
+	}
+	init() {
+		if (this.deadZone) {
+			this.lowerDeadZone = this.deadZone;
+			this.upperDeadZone = this.deadZone;
+		}
+		super.init();
+	}
+	declareData(...args) {
+		super.declareData(
+			{
+				min: undefined,
+				max: undefined,
+				normalized: undefined,
+				inverted: undefined,
+				labelDivisor: undefined,
+				format: undefined,
+				lowerDeadZone: undefined,
+				upperDeadZone: undefined,
+			},
+			...args,
+		);
+	}
+	initInstance(context, instance) {
+		instance.calculator = new NumericScale();
+	}
+	explore(context, instance) {
+		super.explore(context, instance);
+		let { min, max, normalized, inverted, lowerDeadZone, upperDeadZone } = instance.data;
+		instance.calculator.reset(
+			min,
+			max,
+			this.snapToTicks,
+			this.tickDivisions,
+			this.minTickDistance,
+			this.minTickStep,
+			this.minLabelDistance,
+			this.minLabelTickSize,
+			normalized,
+			inverted,
+			lowerDeadZone,
+			upperDeadZone,
+		);
+	}
+	render(context, instance, key) {
+		let { data } = instance;
+		if (!data.bounds.valid()) return null;
+		let baseFormatter = Format.parse(data.format);
+		let formatter = data.labelDivisor != 1 ? (v) => baseFormatter(v / data.labelDivisor) : baseFormatter;
+		return jsx(
+			"g",
+			{
+				className: data.classNames,
+				style: data.style,
+				children: this.renderTicksAndLabels(context, instance, formatter, this.minLabelDistance),
+			},
+			key,
+		);
+	}
+	static XY() {
+		return {
+			x: {
+				type: NumericAxis,
+			},
+			y: {
+				type: NumericAxis,
+				vertical: true,
+			},
+		};
+	}
+}
+NumericAxis.prototype.baseClass = "numericaxis";
+NumericAxis.prototype.tickDivisions = [
+	[1, 2, 10, 20, 100],
+	[1, 5, 10, 20, 100],
+];
+NumericAxis.prototype.snapToTicks = 1;
+NumericAxis.prototype.normalized = false;
+NumericAxis.prototype.format = "n";
+NumericAxis.prototype.labelDivisor = 1;
+NumericAxis.prototype.minLabelTickSize = 0;
+NumericAxis.prototype.minTickStep = 0;
+Axis.alias("numeric", NumericAxis);
+
 class CategoryAxis extends Axis {
 	constructor(config) {
 		super(config);