@pie-lib/charting 8.0.5 → 8.0.6-next.20261016071127

package/dist/__tests__/range-axis-labels.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/__tests__/range-axis-room.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/axes.d.ts

@@ -14,6 +14,18 @@ export declare class TickComponent extends React.Component {
     splitText: any;
     render(): React.JSX.Element | null;
 }
+export declare const RangeTickLabel: {
+    ({ x, y, formattedValue }: {
+        x: any;
+        y: any;
+        formattedValue: any;
+    }): React.JSX.Element;
+    propTypes: {
+        x: PropTypes.Requireable<number>;
+        y: PropTypes.Requireable<number>;
+        formattedValue: PropTypes.Requireable<string>;
+    };
+};
 export declare class RawChartAxes extends React.Component {
     static propTypes: {
         bottomScale: PropTypes.Requireable<(...args: any[]) => any>;
@@ -61,15 +73,19 @@ export declare class RawChartAxes extends React.Component {
         }> | null | undefined>>;
         language: PropTypes.Requireable<string>;
         onLabelOverhang: PropTypes.Requireable<(...args: any[]) => any>;
+        onRangeLabelOverhang: PropTypes.Requireable<(...args: any[]) => any>;
     };
     state: {
         height: number;
         width: number;
         labelHeight: number;
+        rangeLabelWidth: number;
     };
     reportedOverhang: number;
+    reportedRangeOverhang: number;
     labelLayout: any;
     reportLabelOverhang: any;
+    reportRangeLabelOverhang: any;
     measureHiddenLabel: any;
     _onDocMutation: any;
     observeHiddenLabel: any;

package/dist/axes.js

@@ -3,60 +3,60 @@ import t from "./node_modules/.bun/@visx_axis@4.0.0_d84c32d47042070f/node_module
 import { TickCorrectnessIndicator as n } from "./common/correctness-indicators.js";
 import { bandKey as r, getRotateAngle as i, getRotatedLabelOverhang as a, getTickValues as o, textOf as s } from "./utils.js";
 import { MarkLabel as c } from "./mark-label.js";
-import l from "react";
-import u from "prop-types";
-import { styled as d } from "@mui/material/styles";
-import { types as f } from "@pie-lib/plot";
-import { AlertDialog as p } from "@pie-lib/config-ui";
-import { color as m } from "@pie-lib/render-ui";
-import { jsx as h, jsxs as g } from "react/jsx-runtime";
-import _ from "@mui/material/Checkbox";
-import { renderMath as v } from "@pie-element/shared-math-rendering-mathjax";
-import y from "@pie-lib/translator";
+import l, { useEffect as u, useRef as d } from "react";
+import f from "prop-types";
+import { styled as p } from "@mui/material/styles";
+import { types as m } from "@pie-lib/plot";
+import { AlertDialog as h } from "@pie-lib/config-ui";
+import { color as g } from "@pie-lib/render-ui";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import y from "@mui/material/Checkbox";
+import { renderMath as b } from "@pie-element/shared-math-rendering-mathjax";
+import x from "@pie-lib/translator";
 //#region src/axes.tsx
-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, {
+var { translator: S } = x, C = 24, w = -110, T = 12, E = /* @__PURE__ */ new Set(), D = null;
+function O(e) {
+	E.add(e), !D && typeof document < "u" && (D = new MutationObserver(() => {
+		E.forEach((e) => e());
+	}), D.observe(document.body, {
 		childList: !0,
 		subtree: !0
 	}));
 }
-function T(e) {
-	S.delete(e), S.size === 0 && C && (C.disconnect(), C = null);
+function k(e) {
+	E.delete(e), E.size === 0 && D && (D.disconnect(), D = null);
 }
-var E = d("text")(({ theme: e }) => ({
+var A = p("text")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	fill: e.palette.error.main
-})), D = d(_)(() => ({ color: `${m.tertiary()} !important` })), O = d("g")(({ theme: e }) => ({
+})), j = p(y)(() => ({ color: `${g.tertiary()} !important` })), M = p("g")(({ theme: e }) => ({
 	"& .vx-axis-line": {
-		stroke: m.visualElementsColors.AXIS_LINE_COLOR,
+		stroke: g.visualElementsColors.AXIS_LINE_COLOR,
 		strokeWidth: 2
 	},
 	"& .vx-axis-tick": {
-		fill: m.visualElementsColors.AXIS_TICK_COLOR,
+		fill: g.visualElementsColors.AXIS_TICK_COLOR,
 		"& line": {
-			stroke: m.visualElementsColors.AXIS_TICK_COLOR,
+			stroke: g.visualElementsColors.AXIS_TICK_COLOR,
 			strokeWidth: 2
 		},
 		fontFamily: e.typography.body1?.fontFamily,
 		fontSize: e.typography.fontSize,
 		textAnchor: "middle"
 	}
-})), k = (e) => ({
+})), N = (e) => ({
 	borderRadius: e.spacing(2),
-	color: m.defaults.WHITE,
+	color: g.defaults.WHITE,
 	fontSize: "16px",
 	width: "16px",
 	height: "16px",
 	padding: "2px",
-	border: `1px solid ${m.defaults.WHITE}`,
+	border: `1px solid ${g.defaults.WHITE}`,
 	boxSizing: "unset"
-}), A = { backgroundColor: m.incorrectWithIcon() }, j = { backgroundColor: m.correct() }, M = class extends l.Component {
+}), P = { backgroundColor: g.incorrectWithIcon() }, F = { backgroundColor: g.correct() }, I = class extends l.Component {
 	static propTypes = {
-		defineChart: u.bool,
-		error: u.any
+		defineChart: f.bool,
+		error: f.any
 	};
 	constructor(e) {
 		super(e), this.state = { dialog: { open: !1 } };
@@ -113,16 +113,16 @@ var E = 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: T, language: O } = this.props;
-		if (!v) return null;
-		let M = {
-			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", {
-				x: i ? H : m - a / 2,
+		let { categories: e, xBand: t, bandWidth: i, barWidth: a, rotate: o, top: l, graphProps: u, defineChart: d, chartingOptions: f, x: p, y: m, formattedValue: g, changeInteractiveEnabled: y, changeEditableEnabled: b, error: x, autoFocus: C, hiddenLabelRef: E, showCorrectness: D, language: O } = this.props;
+		if (!g) return null;
+		let k = {
+			correctnessIcon: N,
+			incorrectIcon: P,
+			correctIcon: F
+		}, { dialog: M } = this.state, { changeEditable: I, changeInteractive: L } = f || {}, R = parseInt(g.split("-")[0], 10), z = e[R], { editable: B, interactive: V, label: H, correctness: U } = z || {}, W = t(r({ label: H }, R)), G = (e || []).reduce((e, t) => (e && e.label ? e.label.length : 0) > (t && t.label ? t.label.length : 0) ? e : t, { label: "" }), K = x ? [...new Set(Object.values(x))].join(" ") : "";
+		return /* @__PURE__ */ v("g", { children: [
+			/* @__PURE__ */ v("foreignObject", {
+				x: i ? W : p - a / 2,
 				y: 18,
 				width: a,
 				height: 4,
@@ -130,53 +130,53 @@ var E = d("text")(({ theme: e }) => ({
 					pointerEvents: "none",
 					overflow: "visible"
 				},
-				children: [I === 0 && /* @__PURE__ */ h(c, {
+				children: [R === 0 && /* @__PURE__ */ _(c, {
 					isHiddenLabel: !0,
-					inputRef: w,
+					inputRef: E,
 					disabled: !0,
-					mark: U,
+					mark: G,
 					graphProps: u,
 					barWidth: a
-				}), /* @__PURE__ */ h(c, {
+				}), /* @__PURE__ */ _(c, {
 					autoFocus: d && C,
 					inputRef: (e) => this.input = e,
-					disabled: !d && !R,
-					mark: L,
+					disabled: !d && !B,
+					mark: z,
 					graphProps: u,
-					onChange: (e) => this.changeCategory(I, e),
+					onChange: (e) => this.changeCategory(R, e),
 					barWidth: a,
 					rotate: o,
-					correctness: V,
-					error: S && S[I],
-					ariaLabel: b.t("charting.categoryLabel", {
+					correctness: U,
+					error: x && x[R],
+					ariaLabel: S.t("charting.categoryLabel", {
 						lng: O,
-						index: I + 1
+						index: R + 1
 					}),
-					mathAriaLabel: b.t("charting.categoryLabelValue", {
+					mathAriaLabel: S.t("charting.categoryLabelValue", {
 						lng: O,
-						index: I + 1,
-						label: s(B),
+						index: R + 1,
+						label: s(H),
 						interpolation: { escapeValue: !1 }
 					}),
 					limitCharacters: !0,
-					correctnessIndicator: T && V && /* @__PURE__ */ h(n, {
-						correctness: V,
-						interactive: z,
-						classes: M
+					correctnessIndicator: D && U && /* @__PURE__ */ _(n, {
+						correctness: U,
+						interactive: V,
+						classes: k
 					})
 				})]
 			}),
-			S && I === 0 && /* @__PURE__ */ h(E, {
-				y: _ + 23,
+			x && R === 0 && /* @__PURE__ */ _(A, {
+				y: m + 23,
 				height: 6,
 				textAnchor: "start",
-				children: W
+				children: K
 			}),
-			d && I === 0 && /* @__PURE__ */ g("svg", {
-				x: -100,
+			d && R === 0 && /* @__PURE__ */ v("svg", {
+				x: w,
 				style: { overflow: "visible" },
-				children: [y && /* @__PURE__ */ h("text", {
-					y: _ + 90 + l,
+				children: [y && /* @__PURE__ */ _("text", {
+					y: m + 90 + l,
 					width: a,
 					height: 4,
 					style: {
@@ -186,13 +186,13 @@ var E = d("text")(({ theme: e }) => ({
 						maxWidth: a,
 						display: "inline-block"
 					},
-					children: this.splitText(F?.authoringLabel, 20).map((e, t) => /* @__PURE__ */ h("tspan", {
+					children: this.splitText(L?.authoringLabel, T).map((e, t) => /* @__PURE__ */ _("tspan", {
 						x: "0",
 						dy: `${t > 0 ? "1.2em" : ".6em"}`,
 						children: e
 					}, t))
-				}), x && /* @__PURE__ */ h("text", {
-					y: _ + 145 + l,
+				}), b && /* @__PURE__ */ _("text", {
+					y: m + 145 + l,
 					width: a,
 					height: 4,
 					style: {
@@ -202,116 +202,151 @@ var E = d("text")(({ theme: e }) => ({
 						maxWidth: a,
 						display: "inline-block"
 					},
-					children: this.splitText(P?.authoringLabel, 20).map((e, t) => /* @__PURE__ */ h("tspan", {
+					children: this.splitText(I?.authoringLabel, T).map((e, t) => /* @__PURE__ */ _("tspan", {
 						x: "0",
 						dy: `${t > 0 ? "1.2em" : ".6em"}`,
 						children: e
 					}, t))
 				})]
 			}),
-			d && y && /* @__PURE__ */ h("foreignObject", {
-				x: m - 24,
-				y: _ + 80 + l,
+			d && y && /* @__PURE__ */ _("foreignObject", {
+				x: p - 24,
+				y: m + 80 + l,
 				width: a,
 				height: 4,
 				style: {
 					pointerEvents: "visible",
 					overflow: "visible"
 				},
-				children: /* @__PURE__ */ h(D, {
+				children: /* @__PURE__ */ _(j, {
 					style: { position: "fixed" },
-					checked: z,
-					onChange: (e) => this.changeInteractive(I, e.target.checked)
+					checked: V,
+					onChange: (e) => this.changeInteractive(R, e.target.checked)
 				})
 			}),
-			d && x && /* @__PURE__ */ h("foreignObject", {
-				x: m - 24,
-				y: _ + 130 + l,
+			d && b && /* @__PURE__ */ _("foreignObject", {
+				x: p - 24,
+				y: m + 130 + l,
 				width: a,
 				height: 4,
 				style: {
 					pointerEvents: "visible",
 					overflow: "visible"
 				},
-				children: /* @__PURE__ */ h(D, {
+				children: /* @__PURE__ */ _(j, {
 					style: { position: "fixed" },
-					checked: R,
-					onChange: (e) => this.changeEditable(I, e.target.checked)
+					checked: B,
+					onChange: (e) => this.changeEditable(R, e.target.checked)
 				})
 			}),
-			/* @__PURE__ */ h("foreignObject", {
-				x: m - 24,
-				y: _ + 100 + l,
+			/* @__PURE__ */ _("foreignObject", {
+				x: p - 24,
+				y: m + 100 + l,
 				width: a,
 				height: 4,
 				style: {
 					pointerEvents: "visible",
 					overflow: "visible"
 				},
-				children: /* @__PURE__ */ h(p, {
-					open: N.open,
-					title: N.title,
-					text: N.text,
-					onClose: N.onClose,
-					onConfirm: N.onConfirm
+				children: /* @__PURE__ */ _(h, {
+					open: M.open,
+					title: M.title,
+					text: M.text,
+					onClose: M.onClose,
+					onConfirm: M.onConfirm
 				})
 			})
 		] });
 	}
 };
-M.propTypes = {
-	categories: u.array,
-	xBand: u.func,
-	bandWidth: u.number,
-	barWidth: u.number,
-	rotate: u.number,
-	top: u.number,
-	x: u.number,
-	y: u.number,
-	graphProps: u.object,
-	formattedValue: u.string,
-	onChangeCategory: u.func,
-	onChange: u.func,
-	error: u.object,
-	defineChart: u.bool,
-	chartingOptions: u.object,
-	changeInteractiveEnabled: u.bool,
-	changeEditableEnabled: u.bool,
-	autoFocus: u.bool,
-	onAutoFocusUsed: u.func,
-	showCorrectness: u.bool,
-	hiddenLabelRef: u.oneOfType([u.func, u.shape({ current: u.instanceOf(Element) })]),
-	language: u.string
+I.propTypes = {
+	categories: f.array,
+	xBand: f.func,
+	bandWidth: f.number,
+	barWidth: f.number,
+	rotate: f.number,
+	top: f.number,
+	x: f.number,
+	y: f.number,
+	graphProps: f.object,
+	formattedValue: f.string,
+	onChangeCategory: f.func,
+	onChange: f.func,
+	error: f.object,
+	defineChart: f.bool,
+	chartingOptions: f.object,
+	changeInteractiveEnabled: f.bool,
+	changeEditableEnabled: f.bool,
+	autoFocus: f.bool,
+	onAutoFocusUsed: f.func,
+	showCorrectness: f.bool,
+	hiddenLabelRef: f.oneOfType([f.func, f.shape({ current: f.instanceOf(Element) })]),
+	language: f.string
 };
-var N = class extends l.Component {
+var L = 80, R = 6, z = 18, B = p("div")(({ theme: e }) => ({
+	textAlign: "right",
+	fontSize: e.typography.fontSize + 2,
+	fontFamily: e.typography.fontFamily,
+	color: g.defaults.TEXT,
+	lineHeight: 1
+})), V = ({ x: e, y: t, formattedValue: n }) => {
+	let r = d(null), i = `\\(${n}\\)`;
+	return u(() => {
+		let e = r.current;
+		e && (e.textContent = i, b(e));
+	}, [i]), /* @__PURE__ */ _("foreignObject", {
+		x: e - R - L,
+		y: t,
+		width: L,
+		height: 1,
+		style: {
+			pointerEvents: "none",
+			overflow: "visible"
+		},
+		children: /* @__PURE__ */ _(B, {
+			ref: r,
+			"data-range-label": !0,
+			style: { transform: "translateY(-50%)" }
+		})
+	});
+};
+V.propTypes = {
+	x: f.number,
+	y: f.number,
+	formattedValue: f.string
+};
+var H = class extends l.Component {
 	static propTypes = {
-		bottomScale: u.func,
-		categories: u.array,
-		defineChart: u.bool,
-		error: u.any,
-		graphProps: f.GraphPropsType.isRequired,
-		xBand: u.func,
-		leftAxis: u.bool,
-		onChange: u.func,
-		onChangeCategory: u.func,
-		top: u.number,
-		theme: u.object,
-		chartingOptions: u.object,
-		changeInteractiveEnabled: u.bool,
-		changeEditableEnabled: u.bool,
-		autoFocus: u.bool,
-		onAutoFocusUsed: u.func,
-		showCorrectness: u.bool,
-		hiddenLabelRef: u.oneOfType([u.func, u.shape({ current: u.instanceOf(Element) })]),
-		language: u.string,
-		onLabelOverhang: u.func
+		bottomScale: f.func,
+		categories: f.array,
+		defineChart: f.bool,
+		error: f.any,
+		graphProps: m.GraphPropsType.isRequired,
+		xBand: f.func,
+		leftAxis: f.bool,
+		onChange: f.func,
+		onChangeCategory: f.func,
+		top: f.number,
+		theme: f.object,
+		chartingOptions: f.object,
+		changeInteractiveEnabled: f.bool,
+		changeEditableEnabled: f.bool,
+		autoFocus: f.bool,
+		onAutoFocusUsed: f.func,
+		showCorrectness: f.bool,
+		hiddenLabelRef: f.oneOfType([f.func, f.shape({ current: f.instanceOf(Element) })]),
+		language: f.string,
+		onLabelOverhang: f.func,
+		onRangeLabelOverhang: f.func
 	};
 	state = {
 		height: 0,
 		width: 0,
-		labelHeight: 0
+		labelHeight: 0,
+		rangeLabelWidth: 0
 	};
 	reportedOverhang = 0;
+	reportedRangeOverhang = 0;
 	labelLayout = () => {
 		let { graphProps: e, xBand: t, categories: n = [], theme: r } = this.props, { scale: a = {}, domain: o = {} } = e || {}, { height: s, width: c } = this.state, l = t && typeof t.bandwidth == "function" && t.bandwidth(), u = l || a.x && a.x(o.max) / n.length;
 		return {
@@ -321,18 +356,25 @@ var N = class extends l.Component {
 		};
 	};
 	reportLabelOverhang = () => {
-		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);
+		let { onLabelOverhang: e } = this.props, { height: t, width: n, labelHeight: r } = this.state, i = a(n, t, this.labelLayout().rotate) + Math.max(0, r - C);
 		e && i !== this.reportedOverhang && (this.reportedOverhang = i, e(i));
 	};
+	reportRangeLabelOverhang = () => {
+		let { onRangeLabelOverhang: e } = this.props, t = Math.max(0, Math.ceil(this.state.rangeLabelWidth - z));
+		e && t !== this.reportedRangeOverhang && (this.reportedRangeOverhang = t, e(t));
+	};
 	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), 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({
+		let o = Math.max(0, ...a.map((e) => e.offsetHeight)), s = this.axesNode ? [...this.axesNode.querySelectorAll("[data-range-label] mjx-container")] : [];
+		s.forEach((e) => this._sizeObserver?.observe(e));
+		let c = Math.max(0, ...s.map((e) => e.getBoundingClientRect().width));
+		(r !== this.state.height || i !== this.state.width || o !== this.state.labelHeight || c !== this.state.rangeLabelWidth) && this.setState({
 			height: r,
 			width: i,
-			labelHeight: o
+			labelHeight: o,
+			rangeLabelWidth: c
 		});
 	};
 	_onDocMutation = () => {
@@ -341,7 +383,7 @@ var N = class extends l.Component {
 	observeHiddenLabel = (e) => {
 		if (!e) return;
 		let t = e.querySelector("[data-latex], [data-raw]");
-		t && v(e), (e.querySelector("mjx-container") || !t) && this.measureHiddenLabel(), w(this._onDocMutation), this.observeHiddenLabelSize(e);
+		t && b(e), (e.querySelector("mjx-container") || !t) && this.measureHiddenLabel(), O(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));
@@ -350,37 +392,34 @@ var N = class extends l.Component {
 		e && e !== this.hiddenLabelRef && (this.hiddenLabelRef = e, this.observeHiddenLabel(e));
 	};
 	componentDidMount() {
-		this.hiddenLabelRef && this.observeHiddenLabel(this.hiddenLabelRef), this.reportLabelOverhang();
+		this.hiddenLabelRef && this.observeHiddenLabel(this.hiddenLabelRef), this.reportLabelOverhang(), this.reportRangeLabelOverhang();
 	}
 	componentWillUnmount() {
-		T(this._onDocMutation), this._sizeObserver?.disconnect(), this._sizedLabel = null, this._updateTimer && clearTimeout(this._updateTimer);
+		k(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();
+		e.categories !== this.props.categories && (this._updateTimer && clearTimeout(this._updateTimer), this._updateTimer = setTimeout(() => this.measureHiddenLabel(), 50)), this.reportLabelOverhang(), this.reportRangeLabelOverhang();
 	}
 	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: D } = 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: h, error: g, 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(), O = o({
 			...S,
 			step: S.labelStep
 		});
-		return /* @__PURE__ */ g(O, {
+		return /* @__PURE__ */ v(M, {
 			ref: (e) => this.axesNode = e,
-			children: [i && /* @__PURE__ */ h(e, {
+			children: [i && /* @__PURE__ */ _(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, {
+				tickFormat: (e) => `${e}`,
+				tickValues: O,
+				tickComponent: V
+			}), /* @__PURE__ */ _(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, {
+				tickComponent: (e) => /* @__PURE__ */ _(I, {
 					hiddenLabelRef: this.setHiddenLabelRef,
 					categories: c,
 					xBand: r,
@@ -391,8 +430,8 @@ var N = class extends l.Component {
 					defineChart: u,
 					chartingOptions: d,
 					autoFocus: m,
-					onAutoFocusUsed: _,
-					error: v,
+					onAutoFocusUsed: h,
+					error: g,
 					onChangeCategory: s,
 					changeInteractiveEnabled: f,
 					changeEditableEnabled: p,
@@ -405,10 +444,10 @@ var N = class extends l.Component {
 					language: b
 				}),
 				autoFocus: m,
-				onAutoFocusUsed: _
+				onAutoFocusUsed: h
 			})]
 		});
 	}
 };
 //#endregion
-export { N as RawChartAxes, N as default, M as TickComponent };
+export { V as RangeTickLabel, H as RawChartAxes, H as default, I as TickComponent };

package/dist/chart.d.ts

@@ -79,6 +79,7 @@ export declare class Chart extends React.Component {
     };
     generateMaskId(): string;
     setLabelOverhang: (labelOverhang: any) => void;
+    setRangeLabelOverhang: (rangeLabelOverhang: any) => void;
     handleAlertDialog: (open: any, callback: any) => void;
     getChart: any;
     changeData: any;

package/dist/chart.js

@@ -41,7 +41,8 @@ var { translator: x } = b, ee = f("pie-lib:charts:chart"), te = d("div")(() => (
 		super(e), this.state = {
 			dialog: { open: !1 },
 			actionsAnchorEl: null,
-			labelOverhang: 0
+			labelOverhang: 0,
+			rangeLabelOverhang: 0
 		}, this.maskUid = this.generateMaskId();
 	}
 	static propTypes = {
@@ -114,6 +115,7 @@ var { translator: x } = b, ee = f("pie-lib:charts:chart"), te = d("div")(() => (
 		return _("chart");
 	}
 	setLabelOverhang = (e) => this.setState({ labelOverhang: e });
+	setRangeLabelOverhang = (e) => this.setState({ rangeLabelOverhang: e });
 	handleAlertDialog = (e, t) => this.setState({ dialog: { open: e } }, t);
 	getChart = () => {
 		let e = this.props.charts || this.state.charts, { chartType: t } = this.props, n = null, r = null;
@@ -209,6 +211,7 @@ var { translator: x } = b, ee = f("pie-lib:charts:chart"), te = d("div")(() => (
 			labelsCharactersLimit: A,
 			ariaLabel: U,
 			ariaDescription: W,
+			leftAxisOverhang: this.state.rangeLabelOverhang,
 			...$,
 			children: [
 				/* @__PURE__ */ v(e, {
@@ -234,7 +237,8 @@ var { translator: x } = b, ee = f("pie-lib:charts:chart"), te = d("div")(() => (
 					error: D,
 					showCorrectness: N === "linePlot" || N === "dotPlot",
 					language: k,
-					onLabelOverhang: this.setLabelOverhang
+					onLabelOverhang: this.setLabelOverhang,
+					onRangeLabelOverhang: this.setRangeLabelOverhang
 				}),
 				C ? /* @__PURE__ */ v("foreignObject", {
 					x: I,

package/dist/mark-label.js

@@ -25,12 +25,17 @@ u("input")(({ theme: e }) => ({
 	"&.disabledMarkLabel": { backgroundColor: "transparent !important" },
 	"&.error": { border: `2px solid ${e.palette.error.main}` }
 }));
-var y = u("div")(({ theme: e }) => ({
+var y = 24, b = u("div")(({ theme: e }) => ({
 	pointerEvents: "auto",
+	display: "flex",
+	justifyContent: "center",
+	alignItems: "center",
+	minHeight: y,
 	textAlign: "center",
+	"& mjx-container": { lineHeight: 0 },
 	fontSize: e.typography.fontSize + 2,
 	fontFamily: e.typography.fontFamily,
-	color: f.defaults.PRIMARY_DARK,
+	color: f.defaults.TEXT,
 	"&.disabledMarkLabel": {
 		...r("color"),
 		color: v,
@@ -43,26 +48,24 @@ var y = u("div")(({ theme: e }) => ({
 		outline: `2px solid ${f.focusOutline()}`,
 		outlineOffset: "2px"
 	}
-}));
-function b(e) {
-	let t = e?.trim() || "";
-	return (/* @__PURE__ */ new RegExp(/^[1-9]*[0-9]*\s?[1-9][0-9]*\/[1-9][0-9]*$/)).test(t);
-}
-function x(e) {
-	let t = e?.trim() || "", n, r = "", i = t.split(" ");
-	n = i[1] && i[1].includes("/") ? i[1].split("/") || "" : t?.split("/") || "";
-	let a;
-	if (b(e)) return i[0] && i[1] && (r = i[0]), a = `\\(${r}\\frac{${n[0]}}{${n[1]}}\\)`, a;
+})), x = /^(-?)(?:(\d+)\s+)?(\d+)\/(\d+)$/, S = /^-?(?:\d+\.?\d*|\.\d+)$/;
+function C(e) {
+	let t = e?.trim() || "", n = x.exec(t);
+	if (n) {
+		let [, e, t = "", r, i] = n;
+		return `\\(${e}${t}\\frac{${r}}{${i}}\\)`;
+	}
+	if (S.test(t)) return `\\(${t}\\)`;
 }
-var S = (n) => {
-	let [r, i] = c(null), l = a((e) => i(e), null), { mark: u = {}, disabled: d, inputRef: b, barWidth: S, rotate: C, correctness: w, autoFocus: T, error: E, isHiddenLabel: D, limitCharacters: O, correctnessIndicator: k, ariaLabel: A, mathAriaLabel: j } = n, [M, N] = c(u.label), [P, F] = c(u.label), [I, L] = c(!1), R = x(P), z = s(null), B = (e) => {
+var w = (n) => {
+	let [r, i] = c(null), l = a((e) => i(e), null), { mark: u = {}, disabled: d, inputRef: y, barWidth: x, rotate: S, correctness: w, autoFocus: T, error: E, isHiddenLabel: D, limitCharacters: O, correctnessIndicator: k, ariaLabel: A, mathAriaLabel: j } = n, [M, N] = c(u.label), [P, F] = c(u.label), [I, L] = c(!1), R = C(P), z = s(null), B = (e) => {
 		O && e.target.value && e.target.value.length > 20 || N(e.target.value);
 	}, V = () => I === !1 && R !== void 0, H = () => L(!0), U = (e) => {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), H());
 	}, W = (e) => {
 		F(e.target.value), L(!1), n.onChange(e.target.value);
 	}, G = {};
-	return C && (G = {
+	return S && (G = {
 		width: "unset",
 		textAlign: "left"
 	}), o(() => {
@@ -70,9 +73,9 @@ var S = (n) => {
 	}, [u.label]), o(() => {
 		let e = z.current;
 		e && R && !I && (e.innerHTML = g(R), h(e));
-	}, [R, I]), /* @__PURE__ */ m(_, { children: [k, V() ? /* @__PURE__ */ p(y, {
+	}, [R, I]), /* @__PURE__ */ m(_, { children: [k, V() ? /* @__PURE__ */ p(b, {
 		ref: (e) => {
-			z.current = e, typeof b == "function" && b(e);
+			z.current = e, typeof y == "function" && y(e);
 		},
 		"data-math-label": !0,
 		className: e({
@@ -89,16 +92,16 @@ var S = (n) => {
 			onKeyDown: U
 		},
 		style: {
-			minWidth: S,
+			minWidth: x,
 			position: "fixed",
 			transformOrigin: "left",
-			transform: `rotate(${C}deg)`,
+			transform: `rotate(${S}deg)`,
 			visibility: D ? "hidden" : "unset",
 			marginTop: k ? "24px" : "0"
 		}
 	}) : /* @__PURE__ */ p(t, {
 		inputRef: (e) => {
-			l(e), typeof b == "function" && b(e);
+			l(e), typeof y == "function" && y(e);
 		},
 		name: "mark-label-input",
 		"aria-label": A,
@@ -106,7 +109,7 @@ var S = (n) => {
 		disabled: d,
 		inputClassName: e(w && u.editable ? w.label : null, d && "disabledMarkLabel", E && "error"),
 		inputStyle: {
-			minWidth: S,
+			minWidth: x,
 			textAlign: "center",
 			background: "transparent",
 			boxSizing: "border-box",
@@ -128,9 +131,9 @@ var S = (n) => {
 			pointerEvents: "auto",
 			top: 0,
 			left: 0,
-			minWidth: S,
+			minWidth: x,
 			transformOrigin: "left",
-			transform: `rotate(${C}deg)`,
+			transform: `rotate(${S}deg)`,
 			visibility: D ? "hidden" : "unset",
 			marginTop: k ? "24px" : "0"
 		},
@@ -138,7 +141,7 @@ var S = (n) => {
 		onBlur: W
 	})] });
 };
-S.propTypes = {
+w.propTypes = {
 	autoFocus: l.bool,
 	disabled: l.bool,
 	error: l.any,
@@ -159,4 +162,4 @@ S.propTypes = {
 	mathAriaLabel: l.string
 };
 //#endregion
-export { S as MarkLabel, S as default };
+export { w as MarkLabel, w as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/charting",
-  "version": "8.0.5",
+  "version": "8.0.6-next.20261016071127",
   "description": "charting",
   "repository": {
     "type": "git",
@@ -13,10 +13,10 @@
     "@mapbox/point-geometry": "^1.1.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-element/shared-utils": "0.1.4",
-    "@pie-lib/plot": "5.0.5",
-    "@pie-lib/render-ui": "8.0.5",
-    "@pie-lib/translator": "5.0.1",
+    "@pie-element/shared-utils": "0.1.5-next.20261012213240",
+    "@pie-lib/plot": "5.0.6-next.20261016071127",
+    "@pie-lib/render-ui": "8.0.6-next.20261015154938",
+    "@pie-lib/translator": "5.0.2-next.20261006160832",
     "@visx/axis": "^4.0.0",
     "@visx/event": "^4.0.0",
     "@visx/grid": "^4.0.0",
@@ -30,9 +30,9 @@
     "invariant": "^2.2.4",
     "react-draggable": "^4.7.1",
     "prop-types": "^15.8.1",
-    "@pie-lib/config-ui": "14.0.5",
-    "@pie-element/shared-math-rendering-mathjax": "0.1.6",
-    "@pie-element/shared-lodash": "0.1.2",
+    "@pie-lib/config-ui": "14.0.6-next.20261015154938",
+    "@pie-element/shared-math-rendering-mathjax": "0.1.7-next.20261015154938",
+    "@pie-element/shared-lodash": "0.1.3-next.20261012213240",
     "clsx": "^2.1.1",
     "d3-time": "^3.1.0",
     "d3-interpolate": "^3.0.1",