cx 25.2.1 → 25.4.0

package/dist/charts.css

@@ -110,6 +110,14 @@
   fill: rgba(128, 128, 128, 0.1);
 }
 
+.cxe-legend-value {
+  order: 3;
+}
+
+.cxe-legend-entry-text {
+  order: 2;
+}
+
 .cxb-legendentry {
   display: inline-flex;
   align-items: center;

package/dist/charts.js

@@ -17,11 +17,11 @@ import {
 	shallowEquals,
 	debug,
 	isDefined,
+	Format,
 	isNonEmptyArray,
 	stopPropagation,
 	closest,
 	getTopLevelBoundingClientRect,
-	Format,
 	parseDateInvariant,
 	zeroTime,
 	Console as Console$1,
@@ -991,6 +991,7 @@ var PieSlice = /*#__PURE__*/ (function (_Container) {
 				hoverChannel: this.hoverChannel,
 				hoverSync: instance.hoverSync,
 				displayText: data.legendDisplayText,
+				value: data.value,
 				onClick: function onClick(e) {
 					_this2.onLegendClick(e, instance);
 				},
@@ -1731,12 +1732,20 @@ var Legend = /*#__PURE__*/ (function (_HtmlElement) {
 					entryClass: {
 						structured: true,
 					},
+					valueStyle: {
+						structured: true,
+					},
+					valueClass: {
+						structured: true,
+					},
+					showValues: undefined,
 				},
 			]),
 		);
 	};
 	_proto.init = function init() {
 		this.entryStyle = parseStyle(this.entryStyle);
+		this.valueStyle = parseStyle(this.valueStyle);
 		_HtmlElement.prototype.init.call(this);
 	};
 	_proto.prepareData = function prepareData(context, instance) {
@@ -1753,6 +1762,10 @@ var Legend = /*#__PURE__*/ (function (_HtmlElement) {
 			case "shape":
 			case "entryStyle":
 			case "entryClass":
+			case "valueStyle":
+			case "valueClass":
+			case "showValues":
+			case "valueFormat":
 				return false;
 			default:
 				return _HtmlElement.prototype.isValidHtmlAttribute.call(this, attrName);
@@ -1787,7 +1800,12 @@ var Legend = /*#__PURE__*/ (function (_HtmlElement) {
 		var _instance$data = instance.data,
 			entryClass = _instance$data.entryClass,
 			entryStyle = _instance$data.entryStyle,
-			shape = _instance$data.shape;
+			shape = _instance$data.shape,
+			valueClass = _instance$data.valueClass,
+			valueStyle = _instance$data.valueStyle;
+		var valueFormatter = Format.parse(this.valueFormat);
+		var valueClasses = this.showValues ? CSS.expand(CSS.element(this.baseClass, "value"), valueClass) : null;
+		var entryTextClass = CSS.element(this.baseClass, "entry-text");
 		if (isNonEmptyArray(entries)) {
 			list = entries.map(function (e, i) {
 				return withHoverSync(i, e.hoverSync, e.hoverChannel, e.hoverId, function (_ref) {
@@ -1813,8 +1831,15 @@ var Legend = /*#__PURE__*/ (function (_HtmlElement) {
 							children: [
 								_this.renderShape(e, shape),
 								/*#__PURE__*/ jsx("div", {
+									className: entryTextClass,
 									children: e.displayText || e.name,
 								}),
+								_this.showValues &&
+									/*#__PURE__*/ jsx("div", {
+										className: valueClasses,
+										style: valueStyle,
+										children: valueFormatter(e.value),
+									}),
 							],
 						},
 						i,
@@ -1861,6 +1886,8 @@ Legend.prototype.memoize = false;
 Legend.prototype.shapeSize = 18;
 Legend.prototype.shape = null;
 Legend.prototype.svgSize = 20;
+Legend.prototype.showValues = false;
+Legend.prototype.valueFormat = "s";
 Widget.alias("legend", Legend);
 Legend.Scope = /*#__PURE__*/ (function (_PureContainer) {
 	function _class() {