cx 24.9.4 → 24.10.1

package/dist/charts.css

@@ -80,27 +80,30 @@
 }
 
 .cxb-legend {
-  text-align: center;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+  flex-wrap: wrap;
+  gap: 5px 10px;
+}
+
+.cxb-legend.cxs-vertical {
+  flex-direction: column;
 }
 
 .cxe-legend-entry {
-  display: inline-block;
-  padding: 5px 5px 5px 30px;
+  display: flex;
+  align-items: center;
+  padding: 5px;
+  gap: 5px;
   font-size: smaller;
   position: relative;
-  margin: 5px;
   box-sizing: border-box;
   cursor: pointer;
 }
-.cxb-legend.cxs-vertical .cxe-legend-entry {
-  display: block;
-  text-align: left;
-}
 
 .cxe-legend-svg {
-  position: absolute;
-  left: 5px;
-  top: 50%;
+  flex-shrink: 0;
 }
 
 .cxe-legend-shape {
@@ -108,17 +111,17 @@
 }
 
 .cxb-legendentry {
-  display: inline-block;
-  padding: 5px 0 5px 30px;
+  display: inline-flex;
+  align-items: center;
+  padding: 5px;
+  gap: 5px;
   position: relative;
   box-sizing: border-box;
   cursor: pointer;
 }
 
 .cxe-legendentry-svg {
-  position: absolute;
-  left: 5px;
-  top: 50%;
+  flex-shrink: 0;
 }
 
 .cxe-legendentry-shape {

package/dist/charts.js

@@ -17,7 +17,7 @@ import {
 	shallowEquals,
 	debug,
 	isDefined,
-	stopPropagation,
+	isNonEmptyArray,
 	closest,
 	getTopLevelBoundingClientRect,
 	Format,
@@ -37,31 +37,34 @@ import {
 } from "cx/widgets";
 
 function _extends() {
-	return (
-		(_extends = Object.assign
-			? Object.assign.bind()
-			: function (n) {
-					for (var e = 1; e < arguments.length; e++) {
-						var t = arguments[e];
-						for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+	_extends = Object.assign
+		? Object.assign.bind()
+		: function (target) {
+				for (var i = 1; i < arguments.length; i++) {
+					var source = arguments[i];
+					for (var key in source) {
+						if (Object.prototype.hasOwnProperty.call(source, key)) {
+							target[key] = source[key];
+						}
 					}
-					return n;
-				}),
-		_extends.apply(null, arguments)
-	);
+				}
+				return target;
+			};
+	return _extends.apply(this, arguments);
 }
-function _inheritsLoose(t, o) {
-	(t.prototype = Object.create(o.prototype)), (t.prototype.constructor = t), _setPrototypeOf(t, o);
+function _inheritsLoose(subClass, superClass) {
+	subClass.prototype = Object.create(superClass.prototype);
+	subClass.prototype.constructor = subClass;
+	_setPrototypeOf(subClass, superClass);
 }
-function _setPrototypeOf(t, e) {
-	return (
-		(_setPrototypeOf = Object.setPrototypeOf
-			? Object.setPrototypeOf.bind()
-			: function (t, e) {
-					return (t.__proto__ = e), t;
-				}),
-		_setPrototypeOf(t, e)
-	);
+function _setPrototypeOf(o, p) {
+	_setPrototypeOf = Object.setPrototypeOf
+		? Object.setPrototypeOf.bind()
+		: function _setPrototypeOf(o, p) {
+				o.__proto__ = p;
+				return o;
+			};
+	return _setPrototypeOf(o, p);
 }
 
 var Rect = /*#__PURE__*/ (function () {
@@ -848,6 +851,7 @@ var PieSlice = /*#__PURE__*/ (function (_Container) {
 					legend: undefined,
 					hoverId: undefined,
 					br: undefined,
+					legendDisplayText: undefined,
 				},
 			]),
 		);
@@ -927,6 +931,7 @@ var PieSlice = /*#__PURE__*/ (function (_Container) {
 				hoverId: data.hoverId,
 				hoverChannel: this.hoverChannel,
 				hoverSync: instance.hoverSync,
+				displayText: data.legendDisplayText,
 				onClick: function onClick(e) {
 					_this2.onLegendClick(e, instance);
 				},
@@ -1654,13 +1659,6 @@ var Legend = /*#__PURE__*/ (function (_HtmlElement) {
 	}
 	_inheritsLoose(Legend, _HtmlElement);
 	var _proto = Legend.prototype;
-	_proto.prepareData = function prepareData(context, instance) {
-		var data = instance.data;
-		data.stateMods = Object.assign(data.stateMods || {}, {
-			vertical: this.vertical,
-		});
-		_HtmlElement.prototype.prepareData.call(this, context, instance);
-	};
 	_proto.declareData = function declareData() {
 		var _HtmlElement$prototyp;
 		(_HtmlElement$prototyp = _HtmlElement.prototype.declareData).call.apply(
@@ -1668,15 +1666,34 @@ var Legend = /*#__PURE__*/ (function (_HtmlElement) {
 			[this].concat(Array.prototype.slice.call(arguments), [
 				{
 					shape: undefined,
+					entryStyle: {
+						structured: true,
+					},
+					entryClass: {
+						structured: true,
+					},
 				},
 			]),
 		);
 	};
+	_proto.init = function init() {
+		this.entryStyle = parseStyle(this.entryStyle);
+		_HtmlElement.prototype.init.call(this);
+	};
+	_proto.prepareData = function prepareData(context, instance) {
+		var data = instance.data;
+		data.stateMods = Object.assign(data.stateMods || {}, {
+			vertical: this.vertical,
+		});
+		_HtmlElement.prototype.prepareData.call(this, context, instance);
+	};
 	_proto.isValidHtmlAttribute = function isValidHtmlAttribute(attrName) {
 		switch (attrName) {
 			case "shapeSize":
 			case "svgSize":
 			case "shape":
+			case "entryStyle":
+			case "entryClass":
 				return false;
 			default:
 				return _HtmlElement.prototype.isValidHtmlAttribute.call(this, attrName);
@@ -1708,42 +1725,48 @@ var Legend = /*#__PURE__*/ (function (_HtmlElement) {
 		var CSS = this.CSS;
 		var entries = instance.legends[this.name] && instance.legends[this.name].entries,
 			list;
-		if (isArray(entries) && entries.length > 0) {
-			list = /*#__PURE__*/ jsx(
-				"div",
-				{
-					className: CSS.element(this.baseClass, "wrap"),
-					children: entries.map(function (e, i) {
-						return withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, function (_ref) {
-							var onMouseMove = _ref.onMouseMove,
-								onMouseLeave = _ref.onMouseLeave,
-								hover = _ref.hover;
-							return /*#__PURE__*/ jsxs(
-								"div",
-								{
-									className: CSS.element(_this.baseClass, "entry", {
-										"color-root": true,
-										hover: hover,
-										disabled: e.disabled,
-										selected: e.selected,
-									}),
-									onClick: e.onClick,
-									onMouseMove: onMouseMove,
-									onMouseLeave: onMouseLeave,
-									children: [_this.renderShape(e, instance.data.shape), e.name],
-								},
-								i,
-							);
-						});
-					}),
-				},
-				"wrap",
-			);
+		var _instance$data = instance.data,
+			entryClass = _instance$data.entryClass,
+			entryStyle = _instance$data.entryStyle,
+			shape = _instance$data.shape;
+		if (isNonEmptyArray(entries)) {
+			list = entries.map(function (e, i) {
+				return withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, function (_ref) {
+					var onMouseMove = _ref.onMouseMove,
+						onMouseLeave = _ref.onMouseLeave,
+						hover = _ref.hover;
+					return /*#__PURE__*/ jsxs(
+						"div",
+						{
+							className: CSS.expand(
+								CSS.element(_this.baseClass, "entry", {
+									"color-root": true,
+									hover: hover,
+									disabled: e.disabled,
+									selected: e.selected,
+								}),
+								entryClass,
+							),
+							style: entryStyle,
+							onClick: e.onClick,
+							onMouseMove: onMouseMove,
+							onMouseLeave: onMouseLeave,
+							children: [
+								_this.renderShape(e, shape),
+								/*#__PURE__*/ jsx("div", {
+									children: e.displayText || e.name,
+								}),
+							],
+						},
+						i,
+					);
+				});
+			});
 		}
 		return [list, _HtmlElement.prototype.renderChildren.call(this, context, instance)];
 	};
 	_proto.renderShape = function renderShape(entry, legendEntriesShape) {
-		var _this$CSS$element;
+		var _this$CSS$element, _style$fill, _style$stroke;
 		var className = this.CSS.element(
 			this.baseClass,
 			"shape",
@@ -1753,15 +1776,19 @@ var Legend = /*#__PURE__*/ (function (_HtmlElement) {
 			_this$CSS$element),
 		);
 		var shape = getShape(legendEntriesShape || entry.shape || "square");
+
+		// if the entry has a custom fill or stroke set, use it for both values
+		var style = _extends({}, entry.style);
+		style.fill = (_style$fill = style.fill) != null ? _style$fill : style.stroke;
+		style.stroke = (_style$stroke = style.stroke) != null ? _style$stroke : style.fill;
 		return /*#__PURE__*/ jsx("svg", {
 			className: this.CSS.element(this.baseClass, "svg"),
 			style: {
 				width: this.svgSize + "px",
 				height: this.svgSize + "px",
-				marginTop: -this.svgSize / 2 + "px",
 			},
 			children: shape(this.svgSize / 2, this.svgSize / 2, entry.shapeSize || this.shapeSize, {
-				style: entry.style,
+				style: style,
 				className: className,
 			}),
 		});
@@ -1799,21 +1826,21 @@ Legend.Scope = /*#__PURE__*/ (function (_PureContainer) {
 })(PureContainer);
 var LegendScope = Legend.Scope;
 
-var LegendEntry = /*#__PURE__*/ (function (_HtmlElement) {
+var LegendEntry = /*#__PURE__*/ (function (_Container) {
 	function LegendEntry() {
-		return _HtmlElement.apply(this, arguments) || this;
+		return _Container.apply(this, arguments) || this;
 	}
-	_inheritsLoose(LegendEntry, _HtmlElement);
+	_inheritsLoose(LegendEntry, _Container);
 	var _proto = LegendEntry.prototype;
 	_proto.init = function init() {
 		this.selection = Selection.create(this.selection);
-		_HtmlElement.prototype.init.call(this);
+		_Container.prototype.init.call(this);
 	};
 	_proto.declareData = function declareData() {
-		var _HtmlElement$prototyp;
+		var _Container$prototype$;
 		var selection = this.selection.configureWidget(this);
-		(_HtmlElement$prototyp = _HtmlElement.prototype.declareData).call.apply(
-			_HtmlElement$prototyp,
+		(_Container$prototype$ = _Container.prototype.declareData).call.apply(
+			_Container$prototype$,
 			[this].concat(Array.prototype.slice.call(arguments), [
 				selection,
 				{
@@ -1827,6 +1854,7 @@ var LegendEntry = /*#__PURE__*/ (function (_HtmlElement) {
 					size: undefined,
 					rx: undefined,
 					ry: undefined,
+					text: undefined,
 				},
 			]),
 		);
@@ -1834,13 +1862,13 @@ var LegendEntry = /*#__PURE__*/ (function (_HtmlElement) {
 	_proto.prepareData = function prepareData(context, instance) {
 		var data = instance.data;
 		if (data.name && !data.colorName) data.colorName = data.name;
-		_HtmlElement.prototype.prepareData.call(this, context, instance);
+		_Container.prototype.prepareData.call(this, context, instance);
 	};
 	_proto.explore = function explore(context, instance) {
 		var data = instance.data;
 		instance.colorMap = data.colorMap && context.getColorMap && context.getColorMap(data.colorMap);
 		if (instance.colorMap && data.colorName) instance.colorMap.acknowledge(data.colorName);
-		_HtmlElement.prototype.explore.call(this, context, instance);
+		_Container.prototype.explore.call(this, context, instance);
 	};
 	_proto.prepare = function prepare(context, instance) {
 		var data = instance.data,
@@ -1850,23 +1878,6 @@ var LegendEntry = /*#__PURE__*/ (function (_HtmlElement) {
 			if (instance.cache("colorIndex", data.colorIndex)) instance.markShouldUpdate(context);
 		}
 	};
-	_proto.attachProps = function attachProps(context, instance, props) {
-		var _this = this;
-		var shape = this.renderShape(instance);
-		props.children = [shape, props.children];
-		props.onMouseDown = stopPropagation;
-		props.onClick = function (e) {
-			_this.handleClick(e, instance);
-		};
-		delete props.active;
-		delete props.selection;
-		delete props.colorMap;
-		delete props.colorIndex;
-		delete props.shape;
-		delete props.name;
-		delete props.selected;
-		delete props.svgSize;
-	};
 	_proto.handleClick = function handleClick(e, instance) {
 		if (this.onClick && instance.invoke("onClick", e, instance) === false) return;
 		e.stopPropagation();
@@ -1874,8 +1885,27 @@ var LegendEntry = /*#__PURE__*/ (function (_HtmlElement) {
 		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);
 	};
+	_proto.render = function render(context, instance, key) {
+		var data = instance.data;
+		var content = !isUndefined(this.text) ? data.text : this.renderChildren(context, instance);
+		return /*#__PURE__*/ jsxs(
+			"div",
+			{
+				className: data.classNames,
+				style: data.style,
+				children: [
+					this.renderShape(instance),
+					content != null &&
+						/*#__PURE__*/ jsx("div", {
+							children: content,
+						}),
+				],
+			},
+			key,
+		);
+	};
 	_proto.renderShape = function renderShape(instance) {
-		var _this$CSS$element;
+		var _this$CSS$element, _style$fill, _style$stroke;
 		var entry = instance.data;
 		var className = this.CSS.element(
 			this.baseClass,
@@ -1889,6 +1919,11 @@ var LegendEntry = /*#__PURE__*/ (function (_HtmlElement) {
 			_this$CSS$element),
 		);
 		var shape = getShape(entry.shape || "square");
+
+		// if the entry has a custom fill or stroke set, use it for both values
+		var style = _extends({}, entry.style);
+		style.fill = (_style$fill = style.fill) != null ? _style$fill : style.stroke;
+		style.stroke = (_style$stroke = style.stroke) != null ? _style$stroke : style.fill;
 		return /*#__PURE__*/ jsx(
 			"svg",
 			{
@@ -1896,10 +1931,9 @@ var LegendEntry = /*#__PURE__*/ (function (_HtmlElement) {
 				style: {
 					width: this.svgSize + "px",
 					height: this.svgSize + "px",
-					marginTop: -this.svgSize / 2 + "px",
 				},
 				children: shape(this.svgSize / 2, this.svgSize / 2, entry.size, {
-					style: entry.style,
+					style: style,
 					className: className,
 					rx: entry.rx,
 					ry: entry.ry,
@@ -1909,12 +1943,13 @@ var LegendEntry = /*#__PURE__*/ (function (_HtmlElement) {
 		);
 	};
 	return LegendEntry;
-})(HtmlElement);
+})(Container);
 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);
 
 var ColorMap = /*#__PURE__*/ (function (_Widget) {

package/dist/data.js

@@ -118,23 +118,6 @@ function _construct(t, e, r) {
 	var p = new (t.bind.apply(t, o))();
 	return p;
 }
-function _extends() {
-	return (
-		(_extends = Object.assign
-			? Object.assign.bind()
-			: function (n) {
-					for (var e = 1; e < arguments.length; e++) {
-						var t = arguments[e];
-						for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
-					}
-					return n;
-				}),
-		_extends.apply(null, arguments)
-	);
-}
-function _inheritsLoose(t, o) {
-	(t.prototype = Object.create(o.prototype)), (t.prototype.constructor = t), _setPrototypeOf(t, o);
-}
 function _isNativeReflectConstruct() {
 	try {
 		var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {}));
@@ -143,15 +126,35 @@ function _isNativeReflectConstruct() {
 		return !!t;
 	})();
 }
-function _setPrototypeOf(t, e) {
-	return (
-		(_setPrototypeOf = Object.setPrototypeOf
-			? Object.setPrototypeOf.bind()
-			: function (t, e) {
-					return (t.__proto__ = e), t;
-				}),
-		_setPrototypeOf(t, e)
-	);
+function _extends() {
+	_extends = Object.assign
+		? Object.assign.bind()
+		: function (target) {
+				for (var i = 1; i < arguments.length; i++) {
+					var source = arguments[i];
+					for (var key in source) {
+						if (Object.prototype.hasOwnProperty.call(source, key)) {
+							target[key] = source[key];
+						}
+					}
+				}
+				return target;
+			};
+	return _extends.apply(this, arguments);
+}
+function _inheritsLoose(subClass, superClass) {
+	subClass.prototype = Object.create(superClass.prototype);
+	subClass.prototype.constructor = subClass;
+	_setPrototypeOf(subClass, superClass);
+}
+function _setPrototypeOf(o, p) {
+	_setPrototypeOf = Object.setPrototypeOf
+		? Object.setPrototypeOf.bind()
+		: function _setPrototypeOf(o, p) {
+				o.__proto__ = p;
+				return o;
+			};
+	return _setPrototypeOf(o, p);
 }
 
 function computable() {