@pie-lib/charting 8.0.3-next.20261007075859 → 8.0.3-next.20261007181944

package/dist/axes.d.ts

@@ -65,6 +65,7 @@ export declare class RawChartAxes extends React.Component {
     state: {
         height: number;
         width: number;
+        labelHeight: number;
     };
     reportedOverhang: number;
     labelLayout: any;

package/dist/axes.js

@@ -14,22 +14,22 @@ import _ from "@mui/material/Checkbox";
 import { renderMath as v } from "@pie-element/shared-math-rendering-mathjax";
 import y from "@pie-lib/translator";
 //#region src/axes.tsx
-var { translator: b } = y, x = /* @__PURE__ */ new Set(), S = null;
-function C(e) {
-	x.add(e), !S && typeof document < "u" && (S = new MutationObserver(() => {
-		x.forEach((e) => e());
-	}), S.observe(document.body, {
+var { translator: b } = y, x = 24, S = /* @__PURE__ */ new Set(), C = null;
+function w(e) {
+	S.add(e), !C && typeof document < "u" && (C = new MutationObserver(() => {
+		S.forEach((e) => e());
+	}), C.observe(document.body, {
 		childList: !0,
 		subtree: !0
 	}));
 }
-function w(e) {
-	x.delete(e), x.size === 0 && S && (S.disconnect(), S = null);
+function T(e) {
+	S.delete(e), S.size === 0 && C && (C.disconnect(), C = null);
 }
-var T = d("text")(({ theme: e }) => ({
+var E = d("text")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	fill: e.palette.error.main
-})), E = d(_)(() => ({ color: `${m.tertiary()} !important` })), D = d("g")(({ theme: e }) => ({
+})), D = d(_)(() => ({ color: `${m.tertiary()} !important` })), O = d("g")(({ theme: e }) => ({
 	"& .vx-axis-line": {
 		stroke: m.visualElementsColors.AXIS_LINE_COLOR,
 		strokeWidth: 2
@@ -44,7 +44,7 @@ var T = d("text")(({ theme: e }) => ({
 		fontSize: e.typography.fontSize,
 		textAnchor: "middle"
 	}
-})), O = (e) => ({
+})), k = (e) => ({
 	borderRadius: e.spacing(2),
 	color: m.defaults.WHITE,
 	fontSize: "16px",
@@ -53,7 +53,7 @@ var T = d("text")(({ theme: e }) => ({
 	padding: "2px",
 	border: `1px solid ${m.defaults.WHITE}`,
 	boxSizing: "unset"
-}), k = { backgroundColor: m.incorrectWithIcon() }, A = { backgroundColor: m.correct() }, j = class extends l.Component {
+}), A = { backgroundColor: m.incorrectWithIcon() }, j = { backgroundColor: m.correct() }, M = class extends l.Component {
 	static propTypes = {
 		defineChart: u.bool,
 		error: u.any
@@ -113,12 +113,12 @@ var T = d("text")(({ theme: e }) => ({
 		return n;
 	};
 	render() {
-		let { categories: e, xBand: t, bandWidth: i, barWidth: a, rotate: o, top: l, graphProps: u, defineChart: d, chartingOptions: f, x: m, y: _, formattedValue: v, changeInteractiveEnabled: y, changeEditableEnabled: x, error: S, autoFocus: C, hiddenLabelRef: w, showCorrectness: D, language: j } = this.props;
+		let { categories: e, xBand: t, bandWidth: i, barWidth: a, rotate: o, top: l, graphProps: u, defineChart: d, chartingOptions: f, x: m, y: _, formattedValue: v, changeInteractiveEnabled: y, changeEditableEnabled: x, error: S, autoFocus: C, hiddenLabelRef: w, showCorrectness: T, language: O } = this.props;
 		if (!v) return null;
 		let M = {
-			correctnessIcon: O,
-			incorrectIcon: k,
-			correctIcon: A
+			correctnessIcon: k,
+			incorrectIcon: A,
+			correctIcon: j
 		}, { dialog: N } = this.state, { changeEditable: P, changeInteractive: F } = f || {}, I = parseInt(v.split("-")[0], 10), L = e[I], { editable: R, interactive: z, label: B, correctness: V } = L || {}, H = t(r({ label: B }, I)), U = (e || []).reduce((e, t) => (e && e.label ? e.label.length : 0) > (t && t.label ? t.label.length : 0) ? e : t, { label: "" }), W = S ? [...new Set(Object.values(S))].join(" ") : "";
 		return /* @__PURE__ */ g("g", { children: [
 			/* @__PURE__ */ g("foreignObject", {
@@ -149,24 +149,24 @@ var T = d("text")(({ theme: e }) => ({
 					correctness: V,
 					error: S && S[I],
 					ariaLabel: b.t("charting.categoryLabel", {
-						lng: j,
+						lng: O,
 						index: I + 1
 					}),
 					mathAriaLabel: b.t("charting.categoryLabelValue", {
-						lng: j,
+						lng: O,
 						index: I + 1,
 						label: s(B),
 						interpolation: { escapeValue: !1 }
 					}),
 					limitCharacters: !0,
-					correctnessIndicator: D && V && /* @__PURE__ */ h(n, {
+					correctnessIndicator: T && V && /* @__PURE__ */ h(n, {
 						correctness: V,
 						interactive: z,
 						classes: M
 					})
 				})]
 			}),
-			S && I === 0 && /* @__PURE__ */ h(T, {
+			S && I === 0 && /* @__PURE__ */ h(E, {
 				y: _ + 23,
 				height: 6,
 				textAnchor: "start",
@@ -218,7 +218,7 @@ var T = d("text")(({ theme: e }) => ({
 					pointerEvents: "visible",
 					overflow: "visible"
 				},
-				children: /* @__PURE__ */ h(E, {
+				children: /* @__PURE__ */ h(D, {
 					style: { position: "fixed" },
 					checked: z,
 					onChange: (e) => this.changeInteractive(I, e.target.checked)
@@ -233,7 +233,7 @@ var T = d("text")(({ theme: e }) => ({
 					pointerEvents: "visible",
 					overflow: "visible"
 				},
-				children: /* @__PURE__ */ h(E, {
+				children: /* @__PURE__ */ h(D, {
 					style: { position: "fixed" },
 					checked: R,
 					onChange: (e) => this.changeEditable(I, e.target.checked)
@@ -259,7 +259,7 @@ var T = d("text")(({ theme: e }) => ({
 		] });
 	}
 };
-j.propTypes = {
+M.propTypes = {
 	categories: u.array,
 	xBand: u.func,
 	bandWidth: u.number,
@@ -283,7 +283,7 @@ j.propTypes = {
 	hiddenLabelRef: u.oneOfType([u.func, u.shape({ current: u.instanceOf(Element) })]),
 	language: u.string
 };
-var M = class extends l.Component {
+var N = class extends l.Component {
 	static propTypes = {
 		bottomScale: u.func,
 		categories: u.array,
@@ -308,7 +308,8 @@ var M = class extends l.Component {
 	};
 	state = {
 		height: 0,
-		width: 0
+		width: 0,
+		labelHeight: 0
 	};
 	reportedOverhang = 0;
 	labelLayout = () => {
@@ -320,24 +321,27 @@ var M = class extends l.Component {
 		};
 	};
 	reportLabelOverhang = () => {
-		let { onLabelOverhang: e } = this.props, { height: t, width: n } = this.state, r = a(n, t, this.labelLayout().rotate);
-		e && r !== this.reportedOverhang && (this.reportedOverhang = r, e(r));
+		let { onLabelOverhang: e } = this.props, { height: t, width: n, labelHeight: r } = this.state, i = a(n, t, this.labelLayout().rotate) + Math.max(0, r - x);
+		e && i !== this.reportedOverhang && (this.reportedOverhang = i, e(i));
 	};
 	measureHiddenLabel = () => {
 		if (!this.hiddenLabelRef) return;
-		let e = this.hiddenLabelRef.querySelector("mjx-container"), t = this.hiddenLabelRef.querySelector("input"), n = (e || t || this.hiddenLabelRef).getBoundingClientRect(), r = Math.floor(n.height), i = Math.floor(n.width);
-		(r !== this.state.height || i !== this.state.width) && this.setState({
+		let e = this.hiddenLabelRef.querySelector("mjx-container"), t = this.hiddenLabelRef.querySelector("input"), n = (e || t || this.hiddenLabelRef).getBoundingClientRect(), r = Math.floor(n.height), i = Math.floor(n.width), a = this.axesNode ? [...this.axesNode.querySelectorAll("[data-math-label]")] : [];
+		a.forEach((e) => this._sizeObserver?.observe(e));
+		let o = Math.max(0, ...a.map((e) => e.offsetHeight));
+		(r !== this.state.height || i !== this.state.width || o !== this.state.labelHeight) && this.setState({
 			height: r,
-			width: i
+			width: i,
+			labelHeight: o
 		});
 	};
 	_onDocMutation = () => {
-		this.hiddenLabelRef && this.hiddenLabelRef.querySelector("mjx-container") && this.measureHiddenLabel();
+		this.hiddenLabelRef && this.axesNode?.querySelector("mjx-container") && this.measureHiddenLabel();
 	};
 	observeHiddenLabel = (e) => {
 		if (!e) return;
 		let t = e.querySelector("[data-latex], [data-raw]");
-		t && v(e), (e.querySelector("mjx-container") || !t) && this.measureHiddenLabel(), C(this._onDocMutation), this.observeHiddenLabelSize(e);
+		t && v(e), (e.querySelector("mjx-container") || !t) && this.measureHiddenLabel(), w(this._onDocMutation), this.observeHiddenLabelSize(e);
 	};
 	observeHiddenLabelSize = (e) => {
 		e === this._sizedLabel || typeof ResizeObserver > "u" || (this._sizeObserver?.disconnect(), this._sizedLabel = e, this._sizeObserver = new ResizeObserver(() => this.measureHiddenLabel()), this._sizeObserver.observe(e));
@@ -349,59 +353,62 @@ var M = class extends l.Component {
 		this.hiddenLabelRef && this.observeHiddenLabel(this.hiddenLabelRef), this.reportLabelOverhang();
 	}
 	componentWillUnmount() {
-		w(this._onDocMutation), this._sizeObserver?.disconnect(), this._sizedLabel = null, this._updateTimer && clearTimeout(this._updateTimer);
+		T(this._onDocMutation), this._sizeObserver?.disconnect(), this._sizedLabel = null, this._updateTimer && clearTimeout(this._updateTimer);
 	}
 	componentDidUpdate(e) {
 		e.categories !== this.props.categories && (this._updateTimer && clearTimeout(this._updateTimer), this._updateTimer = setTimeout(() => this.measureHiddenLabel(), 50)), this.reportLabelOverhang();
 	}
 	render() {
-		let { graphProps: n, xBand: r, leftAxis: i, onChange: a, onChangeCategory: s, categories: c = [], top: l, defineChart: u, chartingOptions: d, changeInteractiveEnabled: f, changeEditableEnabled: p, autoFocus: m, onAutoFocusUsed: _, error: v, showCorrectness: y, language: b } = this.props, { scale: x = {}, range: S = {}, size: C = {} } = n || {}, w = r && typeof r.rangeRound == "function" && r.rangeRound([0, C.width]), { bandWidth: T, barWidth: E, rotate: O } = this.labelLayout(), k = o({
+		let { graphProps: n, xBand: r, leftAxis: i, onChange: a, onChangeCategory: s, categories: c = [], top: l, defineChart: u, chartingOptions: d, changeInteractiveEnabled: f, changeEditableEnabled: p, autoFocus: m, onAutoFocusUsed: _, error: v, showCorrectness: y, language: b } = this.props, { scale: x = {}, range: S = {}, size: C = {} } = n || {}, w = r && typeof r.rangeRound == "function" && r.rangeRound([0, C.width]), { bandWidth: T, barWidth: E, rotate: D } = this.labelLayout(), k = o({
 			...S,
 			step: S.labelStep
 		});
-		return /* @__PURE__ */ g(D, { children: [i && /* @__PURE__ */ h(e, {
-			scale: x.y,
-			tickLength: 10,
-			tickFormat: (e) => e,
-			tickValues: k,
-			tickLabelProps: (e) => ({
-				dy: 4,
-				dx: -10 - (e.toLocaleString().length || 1) * 5
-			})
-		}), /* @__PURE__ */ h(t, {
-			scale: w,
-			labelProps: { y: 60 + l },
-			top: x.y && x.y(S.min),
-			textLabelProps: () => ({ textAnchor: "middle" }),
-			tickFormat: (e) => e,
-			tickComponent: (e) => /* @__PURE__ */ h(j, {
-				hiddenLabelRef: this.setHiddenLabelRef,
-				categories: c,
-				xBand: r,
-				bandWidth: T,
-				barWidth: E,
-				rotate: O,
-				top: l,
-				defineChart: u,
-				chartingOptions: d,
+		return /* @__PURE__ */ g(O, {
+			ref: (e) => this.axesNode = e,
+			children: [i && /* @__PURE__ */ h(e, {
+				scale: x.y,
+				tickLength: 10,
+				tickFormat: (e) => e,
+				tickValues: k,
+				tickLabelProps: (e) => ({
+					dy: 4,
+					dx: -10 - (e.toLocaleString().length || 1) * 5
+				})
+			}), /* @__PURE__ */ h(t, {
+				scale: w,
+				labelProps: { y: 60 + l },
+				top: x.y && x.y(S.min),
+				textLabelProps: () => ({ textAnchor: "middle" }),
+				tickFormat: (e) => e,
+				tickComponent: (e) => /* @__PURE__ */ h(M, {
+					hiddenLabelRef: this.setHiddenLabelRef,
+					categories: c,
+					xBand: r,
+					bandWidth: T,
+					barWidth: E,
+					rotate: D,
+					top: l,
+					defineChart: u,
+					chartingOptions: d,
+					autoFocus: m,
+					onAutoFocusUsed: _,
+					error: v,
+					onChangeCategory: s,
+					changeInteractiveEnabled: f,
+					changeEditableEnabled: p,
+					onChange: a,
+					graphProps: n,
+					x: e.x,
+					y: e.y,
+					formattedValue: e.formattedValue,
+					showCorrectness: y,
+					language: b
+				}),
 				autoFocus: m,
-				onAutoFocusUsed: _,
-				error: v,
-				onChangeCategory: s,
-				changeInteractiveEnabled: f,
-				changeEditableEnabled: p,
-				onChange: a,
-				graphProps: n,
-				x: e.x,
-				y: e.y,
-				formattedValue: e.formattedValue,
-				showCorrectness: y,
-				language: b
-			}),
-			autoFocus: m,
-			onAutoFocusUsed: _
-		})] });
+				onAutoFocusUsed: _
+			})]
+		});
 	}
 };
 //#endregion
-export { M as RawChartAxes, M as default, j as TickComponent };
+export { N as RawChartAxes, N as default, M as TickComponent };

package/dist/mark-label.js

@@ -75,6 +75,7 @@ var S = (n) => {
 		ref: (e) => {
 			L.current = e, typeof f == "function" && f(e);
 		},
+		"data-math-label": !0,
 		className: e({
 			disabledMarkLabel: d,
 			error: T,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/charting",
-  "version": "8.0.3-next.20261007075859",
+  "version": "8.0.3-next.20261007181944",
   "description": "charting",
   "repository": {
     "type": "git",
@@ -14,8 +14,8 @@
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
     "@pie-element/shared-utils": "0.1.3-next.20261007075859",
-    "@pie-lib/plot": "5.0.3-next.20261007075859",
-    "@pie-lib/render-ui": "8.0.3-next.20261007075859",
+    "@pie-lib/plot": "5.0.3-next.20261007181944",
+    "@pie-lib/render-ui": "8.0.3-next.20261007175429",
     "@pie-lib/translator": "5.0.2-next.20261006160832",
     "@visx/axis": "^4.0.0",
     "@visx/event": "^4.0.0",
@@ -30,8 +30,8 @@
     "invariant": "^2.2.4",
     "react-draggable": "^4.7.1",
     "prop-types": "^15.8.1",
-    "@pie-lib/config-ui": "14.0.3-next.20261007075859",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.4-next.20261007064237",
+    "@pie-lib/config-ui": "14.0.3-next.20261007181944",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.4-next.20261007175429",
     "@pie-element/shared-lodash": "0.1.3-next.20261006160832",
     "clsx": "^2.1.1",
     "d3-time": "^3.1.0",