@pie-lib/charting 8.0.1-next.20261004200555 → 8.0.1-next.20261004212815

package/dist/__tests__/label-rotation.test.d.ts

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

package/dist/__tests__/page-unique-ids.test.d.ts

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

package/dist/actions-button.js

@@ -1,8 +1,8 @@
 import e from "react";
 import t from "prop-types";
 import { styled as n } from "@mui/material/styles";
-import { jsx as r, jsxs as i } from "react/jsx-runtime";
-import { color as a } from "@pie-lib/render-ui";
+import { color as r } from "@pie-lib/render-ui";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
 import o from "@pie-lib/translator";
 import s from "@mui/material/Button";
 import c from "@mui/material/Popover";
@@ -11,7 +11,7 @@ import l from "@mui/material/Paper";
 var { translator: u } = o, d = n("div")(() => ({ alignSelf: "flex-end" })), f = n("div")(({ theme: e }) => ({
 	cursor: "pointer",
 	fontSize: e.typography.fontSize,
-	color: a.tertiary(),
+	color: r.tertiary(),
 	padding: e.spacing(1)
 })), p = n(l)(({ theme: e }) => ({
 	padding: e.spacing(1),
@@ -21,7 +21,7 @@ var { translator: u } = o, d = n("div")(() => ({ alignSelf: "flex-end" })), f =
 	"& button": {
 		textTransform: "none",
 		fontSize: e.typography.fontSize,
-		color: a.text(),
+		color: r.text(),
 		justifyContent: "flex-start"
 	}
 })), m = class extends e.Component {
@@ -53,12 +53,12 @@ var { translator: u } = o, d = n("div")(() => ({ alignSelf: "flex-end" })), f =
 	};
 	render() {
 		let { categories: e, language: t } = this.props, { actionsAnchorEl: n } = this.state;
-		return /* @__PURE__ */ i(d, { children: [/* @__PURE__ */ r(f, {
+		return /* @__PURE__ */ a(d, { children: [/* @__PURE__ */ i(f, {
 			role: "button",
 			tabIndex: 0,
 			onClick: this.handleActionsClick,
 			children: "Actions"
-		}), /* @__PURE__ */ r(c, {
+		}), /* @__PURE__ */ i(c, {
 			open: !!n,
 			anchorEl: n,
 			onClose: this.handleActionsClose,
@@ -70,10 +70,10 @@ var { translator: u } = o, d = n("div")(() => ({ alignSelf: "flex-end" })), f =
 				vertical: "top",
 				horizontal: "left"
 			},
-			children: /* @__PURE__ */ i(p, { children: [/* @__PURE__ */ i(s, {
+			children: /* @__PURE__ */ a(p, { children: [/* @__PURE__ */ a(s, {
 				onClick: () => this.handleAddCategory(),
 				children: ["+ ", u.t("charting.add", { lng: t })]
-			}), e.length > 0 && e.map((e, n) => e.deletable && !e.correctness && /* @__PURE__ */ r(s, {
+			}), e.length > 0 && e.map((e, n) => e.deletable && !e.correctness && /* @__PURE__ */ i(s, {
 				onClick: () => this.handleDeleteCategory(n),
 				children: `${u.t("charting.delete", { lng: t })} <${e.label || u.t("charting.newLabel", { lng: t })}>`
 			}, n))] })

package/dist/axes.d.ts

@@ -60,14 +60,19 @@ export declare class RawChartAxes extends React.Component {
             current: PropTypes.Requireable<Element>;
         }> | null | undefined>>;
         language: PropTypes.Requireable<string>;
+        onLabelOverhang: PropTypes.Requireable<(...args: any[]) => any>;
     };
     state: {
         height: number;
         width: number;
     };
+    reportedOverhang: number;
+    labelLayout: any;
+    reportLabelOverhang: any;
     measureHiddenLabel: any;
     _onDocMutation: any;
     observeHiddenLabel: any;
+    observeHiddenLabelSize: any;
     setHiddenLabelRef: any;
     componentDidMount(): void;
     componentWillUnmount(): void;

package/dist/axes.js

@@ -1,62 +1,62 @@
 import e from "./node_modules/.bun/@visx_axis@4.0.0_d84c32d47042070f/node_modules/@visx/axis/esm/axis/AxisLeft.js";
 import t from "./node_modules/.bun/@visx_axis@4.0.0_d84c32d47042070f/node_modules/@visx/axis/esm/axis/AxisBottom.js";
 import { TickCorrectnessIndicator as n } from "./common/correctness-indicators.js";
-import { bandKey as r, getRotateAngle as i, getTickValues as a } from "./utils.js";
-import { MarkLabel as o } from "./mark-label.js";
-import s from "react";
-import c from "prop-types";
-import { styled as l } from "@mui/material/styles";
-import { types as u } from "@pie-lib/plot";
-import { AlertDialog as d } from "@pie-lib/config-ui";
-import { jsx as f, jsxs as p } from "react/jsx-runtime";
-import { color as m } from "@pie-lib/render-ui";
-import h from "@mui/material/Checkbox";
-import { renderMath as g } from "@pie-element/shared-math-rendering-mathjax";
-import _ from "@pie-lib/translator";
+import { bandKey as r, getRotateAngle as i, getRotatedLabelOverhang as a, getTickValues as o } from "./utils.js";
+import { MarkLabel as s } from "./mark-label.js";
+import c from "react";
+import l from "prop-types";
+import { styled as u } from "@mui/material/styles";
+import { types as d } from "@pie-lib/plot";
+import { AlertDialog as f } from "@pie-lib/config-ui";
+import { color as p } from "@pie-lib/render-ui";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import g from "@mui/material/Checkbox";
+import { renderMath as _ } from "@pie-element/shared-math-rendering-mathjax";
+import v from "@pie-lib/translator";
 //#region src/axes.tsx
-var { translator: v } = _, y = /* @__PURE__ */ new Set(), b = null;
-function x(e) {
-	y.add(e), !b && typeof document < "u" && (b = new MutationObserver(() => {
-		y.forEach((e) => e());
-	}), b.observe(document.body, {
+var { translator: y } = v, b = /* @__PURE__ */ new Set(), x = null;
+function S(e) {
+	b.add(e), !x && typeof document < "u" && (x = new MutationObserver(() => {
+		b.forEach((e) => e());
+	}), x.observe(document.body, {
 		childList: !0,
 		subtree: !0
 	}));
 }
-function S(e) {
-	y.delete(e), y.size === 0 && b && (b.disconnect(), b = null);
+function C(e) {
+	b.delete(e), b.size === 0 && x && (x.disconnect(), x = null);
 }
-var C = l("text")(({ theme: e }) => ({
+var w = u("text")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	fill: e.palette.error.main
-})), w = l(h)(() => ({ color: `${m.tertiary()} !important` })), T = l("g")(({ theme: e }) => ({
+})), T = u(g)(() => ({ color: `${p.tertiary()} !important` })), E = u("g")(({ theme: e }) => ({
 	"& .vx-axis-line": {
-		stroke: m.visualElementsColors.AXIS_LINE_COLOR,
+		stroke: p.visualElementsColors.AXIS_LINE_COLOR,
 		strokeWidth: 2
 	},
 	"& .vx-axis-tick": {
-		fill: m.visualElementsColors.AXIS_TICK_COLOR,
+		fill: p.visualElementsColors.AXIS_TICK_COLOR,
 		"& line": {
-			stroke: m.visualElementsColors.AXIS_TICK_COLOR,
+			stroke: p.visualElementsColors.AXIS_TICK_COLOR,
 			strokeWidth: 2
 		},
 		fontFamily: e.typography.body1?.fontFamily,
 		fontSize: e.typography.fontSize,
 		textAnchor: "middle"
 	}
-})), E = (e) => ({
+})), D = (e) => ({
 	borderRadius: e.spacing(2),
-	color: m.defaults.WHITE,
+	color: p.defaults.WHITE,
 	fontSize: "16px",
 	width: "16px",
 	height: "16px",
 	padding: "2px",
-	border: `1px solid ${m.defaults.WHITE}`,
+	border: `1px solid ${p.defaults.WHITE}`,
 	boxSizing: "unset"
-}), D = { backgroundColor: m.incorrectWithIcon() }, O = { backgroundColor: m.correct() }, k = class extends s.Component {
+}), O = { backgroundColor: p.incorrectWithIcon() }, k = { backgroundColor: p.correct() }, A = class extends c.Component {
 	static propTypes = {
-		defineChart: c.bool,
-		error: c.any
+		defineChart: l.bool,
+		error: l.any
 	};
 	constructor(e) {
 		super(e), this.state = { dialog: { open: !1 } };
@@ -113,16 +113,16 @@ var C = l("text")(({ theme: e }) => ({
 		return n;
 	};
 	render() {
-		let { categories: e, xBand: t, bandWidth: i, barWidth: a, rotate: s, top: c, graphProps: l, defineChart: u, chartingOptions: m, x: h, y: g, formattedValue: _, changeInteractiveEnabled: y, changeEditableEnabled: b, error: x, autoFocus: S, hiddenLabelRef: T, showCorrectness: k, language: A } = this.props;
+		let { categories: e, xBand: t, bandWidth: i, barWidth: a, rotate: o, top: c, graphProps: l, defineChart: u, chartingOptions: d, x: p, y: g, formattedValue: _, changeInteractiveEnabled: v, changeEditableEnabled: b, error: x, autoFocus: S, hiddenLabelRef: C, showCorrectness: E, language: A } = this.props;
 		if (!_) return null;
 		let j = {
-			correctnessIcon: E,
-			incorrectIcon: D,
-			correctIcon: O
-		}, { dialog: M } = this.state, { changeEditable: N, changeInteractive: P } = m || {}, F = parseInt(_.split("-")[0], 10), I = e[F], { editable: L, interactive: R, label: z, correctness: B } = I || {}, V = t(r({ label: z }, F)), H = (e || []).reduce((e, t) => (e && e.label ? e.label.length : 0) > (t && t.label ? t.label.length : 0) ? e : t, { label: "" }), U = x ? [...new Set(Object.values(x))].join(" ") : "";
-		return /* @__PURE__ */ p("g", { children: [
-			/* @__PURE__ */ p("foreignObject", {
-				x: i ? V : h - a / 2,
+			correctnessIcon: D,
+			incorrectIcon: O,
+			correctIcon: k
+		}, { dialog: M } = this.state, { changeEditable: N, changeInteractive: P } = d || {}, F = parseInt(_.split("-")[0], 10), I = e[F], { editable: L, interactive: R, label: z, correctness: B } = I || {}, V = t(r({ label: z }, F)), H = (e || []).reduce((e, t) => (e && e.label ? e.label.length : 0) > (t && t.label ? t.label.length : 0) ? e : t, { label: "" }), U = x ? [...new Set(Object.values(x))].join(" ") : "";
+		return /* @__PURE__ */ h("g", { children: [
+			/* @__PURE__ */ h("foreignObject", {
+				x: i ? V : p - a / 2,
 				y: 18,
 				width: a,
 				height: 4,
@@ -130,14 +130,14 @@ var C = l("text")(({ theme: e }) => ({
 					pointerEvents: "none",
 					overflow: "visible"
 				},
-				children: [F === 0 && /* @__PURE__ */ f(o, {
+				children: [F === 0 && /* @__PURE__ */ m(s, {
 					isHiddenLabel: !0,
-					inputRef: T,
+					inputRef: C,
 					disabled: !0,
 					mark: H,
 					graphProps: l,
 					barWidth: a
-				}), /* @__PURE__ */ f(o, {
+				}), /* @__PURE__ */ m(s, {
 					autoFocus: u && S,
 					inputRef: (e) => this.input = e,
 					disabled: !u && !L,
@@ -145,31 +145,31 @@ var C = l("text")(({ theme: e }) => ({
 					graphProps: l,
 					onChange: (e) => this.changeCategory(F, e),
 					barWidth: a,
-					rotate: s,
+					rotate: o,
 					correctness: B,
 					error: x && x[F],
-					ariaLabel: v.t("charting.categoryLabel", {
+					ariaLabel: y.t("charting.categoryLabel", {
 						lng: A,
 						index: F + 1
 					}),
 					limitCharacters: !0,
-					correctnessIndicator: k && B && /* @__PURE__ */ f(n, {
+					correctnessIndicator: E && B && /* @__PURE__ */ m(n, {
 						correctness: B,
 						interactive: R,
 						classes: j
 					})
 				})]
 			}),
-			x && F === 0 && /* @__PURE__ */ f(C, {
+			x && F === 0 && /* @__PURE__ */ m(w, {
 				y: g + 23,
 				height: 6,
 				textAnchor: "start",
 				children: U
 			}),
-			u && F === 0 && /* @__PURE__ */ p("svg", {
+			u && F === 0 && /* @__PURE__ */ h("svg", {
 				x: -55,
 				style: { overflow: "visible" },
-				children: [y && /* @__PURE__ */ f("text", {
+				children: [v && /* @__PURE__ */ m("text", {
 					y: g + 90 + c,
 					width: a,
 					height: 4,
@@ -180,12 +180,12 @@ var C = l("text")(({ theme: e }) => ({
 						maxWidth: a,
 						display: "inline-block"
 					},
-					children: this.splitText(P?.authoringLabel, 20).map((e, t) => /* @__PURE__ */ f("tspan", {
+					children: this.splitText(P?.authoringLabel, 20).map((e, t) => /* @__PURE__ */ m("tspan", {
 						x: "0",
 						dy: `${t > 0 ? "1.2em" : ".6em"}`,
 						children: e
 					}, t))
-				}), b && /* @__PURE__ */ f("text", {
+				}), b && /* @__PURE__ */ m("text", {
 					y: g + 145 + c,
 					width: a,
 					height: 4,
@@ -196,15 +196,15 @@ var C = l("text")(({ theme: e }) => ({
 						maxWidth: a,
 						display: "inline-block"
 					},
-					children: this.splitText(N?.authoringLabel, 20).map((e, t) => /* @__PURE__ */ f("tspan", {
+					children: this.splitText(N?.authoringLabel, 20).map((e, t) => /* @__PURE__ */ m("tspan", {
 						x: "0",
 						dy: `${t > 0 ? "1.2em" : ".6em"}`,
 						children: e
 					}, t))
 				})]
 			}),
-			u && y && /* @__PURE__ */ f("foreignObject", {
-				x: h - 24,
+			u && v && /* @__PURE__ */ m("foreignObject", {
+				x: p - 24,
 				y: g + 80 + c,
 				width: a,
 				height: 4,
@@ -212,14 +212,14 @@ var C = l("text")(({ theme: e }) => ({
 					pointerEvents: "visible",
 					overflow: "visible"
 				},
-				children: /* @__PURE__ */ f(w, {
+				children: /* @__PURE__ */ m(T, {
 					style: { position: "fixed" },
 					checked: R,
 					onChange: (e) => this.changeInteractive(F, e.target.checked)
 				})
 			}),
-			u && b && /* @__PURE__ */ f("foreignObject", {
-				x: h - 24,
+			u && b && /* @__PURE__ */ m("foreignObject", {
+				x: p - 24,
 				y: g + 130 + c,
 				width: a,
 				height: 4,
@@ -227,14 +227,14 @@ var C = l("text")(({ theme: e }) => ({
 					pointerEvents: "visible",
 					overflow: "visible"
 				},
-				children: /* @__PURE__ */ f(w, {
+				children: /* @__PURE__ */ m(T, {
 					style: { position: "fixed" },
 					checked: L,
 					onChange: (e) => this.changeEditable(F, e.target.checked)
 				})
 			}),
-			/* @__PURE__ */ f("foreignObject", {
-				x: h - 24,
+			/* @__PURE__ */ m("foreignObject", {
+				x: p - 24,
 				y: g + 100 + c,
 				width: a,
 				height: 4,
@@ -242,7 +242,7 @@ var C = l("text")(({ theme: e }) => ({
 					pointerEvents: "visible",
 					overflow: "visible"
 				},
-				children: /* @__PURE__ */ f(d, {
+				children: /* @__PURE__ */ m(f, {
 					open: M.open,
 					title: M.title,
 					text: M.text,
@@ -253,56 +253,70 @@ var C = l("text")(({ theme: e }) => ({
 		] });
 	}
 };
-k.propTypes = {
-	categories: c.array,
-	xBand: c.func,
-	bandWidth: c.number,
-	barWidth: c.number,
-	rotate: c.number,
-	top: c.number,
-	x: c.number,
-	y: c.number,
-	graphProps: c.object,
-	formattedValue: c.string,
-	onChangeCategory: c.func,
-	onChange: c.func,
-	error: c.object,
-	defineChart: c.bool,
-	chartingOptions: c.object,
-	changeInteractiveEnabled: c.bool,
-	changeEditableEnabled: c.bool,
-	autoFocus: c.bool,
-	onAutoFocusUsed: c.func,
-	showCorrectness: c.bool,
-	hiddenLabelRef: c.oneOfType([c.func, c.shape({ current: c.instanceOf(Element) })]),
-	language: c.string
+A.propTypes = {
+	categories: l.array,
+	xBand: l.func,
+	bandWidth: l.number,
+	barWidth: l.number,
+	rotate: l.number,
+	top: l.number,
+	x: l.number,
+	y: l.number,
+	graphProps: l.object,
+	formattedValue: l.string,
+	onChangeCategory: l.func,
+	onChange: l.func,
+	error: l.object,
+	defineChart: l.bool,
+	chartingOptions: l.object,
+	changeInteractiveEnabled: l.bool,
+	changeEditableEnabled: l.bool,
+	autoFocus: l.bool,
+	onAutoFocusUsed: l.func,
+	showCorrectness: l.bool,
+	hiddenLabelRef: l.oneOfType([l.func, l.shape({ current: l.instanceOf(Element) })]),
+	language: l.string
 };
-var A = class extends s.Component {
+var j = class extends c.Component {
 	static propTypes = {
-		bottomScale: c.func,
-		categories: c.array,
-		defineChart: c.bool,
-		error: c.any,
-		graphProps: u.GraphPropsType.isRequired,
-		xBand: c.func,
-		leftAxis: c.bool,
-		onChange: c.func,
-		onChangeCategory: c.func,
-		top: c.number,
-		theme: c.object,
-		chartingOptions: c.object,
-		changeInteractiveEnabled: c.bool,
-		changeEditableEnabled: c.bool,
-		autoFocus: c.bool,
-		onAutoFocusUsed: c.func,
-		showCorrectness: c.bool,
-		hiddenLabelRef: c.oneOfType([c.func, c.shape({ current: c.instanceOf(Element) })]),
-		language: c.string
+		bottomScale: l.func,
+		categories: l.array,
+		defineChart: l.bool,
+		error: l.any,
+		graphProps: d.GraphPropsType.isRequired,
+		xBand: l.func,
+		leftAxis: l.bool,
+		onChange: l.func,
+		onChangeCategory: l.func,
+		top: l.number,
+		theme: l.object,
+		chartingOptions: l.object,
+		changeInteractiveEnabled: l.bool,
+		changeEditableEnabled: l.bool,
+		autoFocus: l.bool,
+		onAutoFocusUsed: l.func,
+		showCorrectness: l.bool,
+		hiddenLabelRef: l.oneOfType([l.func, l.shape({ current: l.instanceOf(Element) })]),
+		language: l.string,
+		onLabelOverhang: l.func
 	};
 	state = {
 		height: 0,
 		width: 0
 	};
+	reportedOverhang = 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 {
+			bandWidth: l,
+			barWidth: u,
+			rotate: i(r && r.typography ? r.typography.fontSize : 14, s) || (c > u ? 25 : 0)
+		};
+	};
+	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));
+	};
 	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);
@@ -317,68 +331,71 @@ var A = class extends s.Component {
 	observeHiddenLabel = (e) => {
 		if (!e) return;
 		let t = e.querySelector("[data-latex], [data-raw]");
-		t && g(e), (e.querySelector("mjx-container") || !t) && this.measureHiddenLabel(), x(this._onDocMutation);
+		t && _(e), (e.querySelector("mjx-container") || !t) && this.measureHiddenLabel(), S(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));
 	};
 	setHiddenLabelRef = (e) => {
 		e && e !== this.hiddenLabelRef && (this.hiddenLabelRef = e, this.observeHiddenLabel(e));
 	};
 	componentDidMount() {
-		this.hiddenLabelRef && this.observeHiddenLabel(this.hiddenLabelRef);
+		this.hiddenLabelRef && this.observeHiddenLabel(this.hiddenLabelRef), this.reportLabelOverhang();
 	}
 	componentWillUnmount() {
-		S(this._onDocMutation), this._updateTimer && clearTimeout(this._updateTimer);
+		C(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));
+		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: o, onChange: s, onChangeCategory: c, categories: l = [], top: u, defineChart: d, chartingOptions: m, changeInteractiveEnabled: h, changeEditableEnabled: g, theme: _, autoFocus: v, onAutoFocusUsed: y, error: b, showCorrectness: x, language: S } = this.props, { scale: C = {}, range: w = {}, domain: E = {}, size: D = {} } = n || {}, { height: O, width: A } = this.state, j = r && typeof r.rangeRound == "function" && r.rangeRound([0, D.width]), M = r && typeof r.bandwidth == "function" && r.bandwidth(), N = M || C.x && C.x(E.max) / l.length, P = a({
-			...w,
-			step: w.labelStep
-		}), F = i(_ && _.typography ? _.typography.fontSize : 14, O), I = A > N ? 25 : 0;
-		return /* @__PURE__ */ p(T, { children: [o && /* @__PURE__ */ f(e, {
-			scale: C.y,
+		let { graphProps: n, xBand: r, leftAxis: i, onChange: a, onChangeCategory: s, categories: c = [], top: l, defineChart: u, chartingOptions: d, changeInteractiveEnabled: f, changeEditableEnabled: p, autoFocus: g, 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: D, rotate: O } = this.labelLayout(), k = o({
+			...S,
+			step: S.labelStep
+		});
+		return /* @__PURE__ */ h(E, { children: [i && /* @__PURE__ */ m(e, {
+			scale: x.y,
 			tickLength: 10,
 			tickFormat: (e) => e,
-			tickValues: P,
+			tickValues: k,
 			tickLabelProps: (e) => ({
 				dy: 4,
 				dx: -10 - (e.toLocaleString().length || 1) * 5
 			})
-		}), /* @__PURE__ */ f(t, {
-			scale: j,
-			labelProps: { y: 60 + u },
-			top: C.y && C.y(w.min),
+		}), /* @__PURE__ */ m(t, {
+			scale: w,
+			labelProps: { y: 60 + l },
+			top: x.y && x.y(S.min),
 			textLabelProps: () => ({ textAnchor: "middle" }),
 			tickFormat: (e) => e,
-			tickComponent: (e) => /* @__PURE__ */ f(k, {
+			tickComponent: (e) => /* @__PURE__ */ m(A, {
 				hiddenLabelRef: this.setHiddenLabelRef,
-				categories: l,
+				categories: c,
 				xBand: r,
-				bandWidth: M,
-				barWidth: N,
-				rotate: F || I,
-				top: u,
-				defineChart: d,
-				chartingOptions: m,
-				autoFocus: v,
-				onAutoFocusUsed: y,
-				error: b,
-				onChangeCategory: c,
-				changeInteractiveEnabled: h,
-				changeEditableEnabled: g,
-				onChange: s,
+				bandWidth: T,
+				barWidth: D,
+				rotate: O,
+				top: l,
+				defineChart: u,
+				chartingOptions: d,
+				autoFocus: g,
+				onAutoFocusUsed: _,
+				error: v,
+				onChangeCategory: s,
+				changeInteractiveEnabled: f,
+				changeEditableEnabled: p,
+				onChange: a,
 				graphProps: n,
 				x: e.x,
 				y: e.y,
 				formattedValue: e.formattedValue,
-				showCorrectness: x,
-				language: S
+				showCorrectness: y,
+				language: b
 			}),
-			autoFocus: v,
-			onAutoFocusUsed: y
+			autoFocus: g,
+			onAutoFocusUsed: _
 		})] });
 	}
 };
 //#endregion
-export { A as RawChartAxes, A as default, k as TickComponent };
+export { j as RawChartAxes, j as default, A as TickComponent };

package/dist/bars/common/bars.js

@@ -8,8 +8,8 @@ import s from "prop-types";
 import { styled as c } from "@mui/material/styles";
 import l from "debug";
 import { types as u } from "@pie-lib/plot";
-import { Fragment as d, jsx as f, jsxs as p } from "react/jsx-runtime";
-import { color as m } from "@pie-lib/render-ui";
+import { color as d } from "@pie-lib/render-ui";
+import { Fragment as f, jsx as p, jsxs as m } from "react/jsx-runtime";
 //#region src/bars/common/bars.tsx
 var h = l("pie-lib:chart:bars"), g = [
 	"#006699",
@@ -37,7 +37,7 @@ var h = l("pie-lib:chart:bars"), g = [
 	"#167A7A",
 	"#91862D",
 	"#894A65"
-], v = (e, t, n, r, i) => e && t && i ? r[n % r.length] : e && i ? m.visualElementsColors.ROLLOVER_FILL_BAR_COLOR : t || null, y = c(t)(() => ({ fill: m.defaults.TERTIARY })), b = class extends o.Component {
+], v = (e, t, n, r, i) => e && t && i ? r[n % r.length] : e && i ? d.visualElementsColors.ROLLOVER_FILL_BAR_COLOR : t || null, y = c(t)(() => ({ fill: d.defaults.TERTIARY })), b = class extends o.Component {
 	static propTypes = {
 		barColor: s.string,
 		onChangeCategory: s.func,
@@ -90,14 +90,14 @@ var h = l("pie-lib:chart:bars"), g = [
 	};
 	render() {
 		let { graphProps: e, value: t, label: o, xBand: s, index: c, interactive: l, correctness: u, barColor: h, defineChart: g, correctData: b } = this.props, { scale: x, range: S } = e, { dragValue: C, isHovered: w } = this.state, T = v(w, h, c, _, l && !u), E = Number.isFinite(C) ? C : t, D = s.bandwidth(), O = x.y(S.max - E), k = s(n({ label: o }, c)), A = S.max - E, j = S.max - A, M = b ? b.find((e) => e.label === o) : null, N = l ? r : i, P = !!h;
-		return /* @__PURE__ */ p("g", {
+		return /* @__PURE__ */ m("g", {
 			ref: (e) => this.gRef = e,
 			onMouseEnter: this.handleMouseEnter,
 			onMouseLeave: this.handleMouseLeave,
 			onTouchStart: this.handleMouseEnter,
 			onTouchEnd: this.handleMouseLeave,
 			children: [
-				/* @__PURE__ */ f(y, {
+				/* @__PURE__ */ p(y, {
 					x: k,
 					y: x.y(j),
 					width: D,
@@ -107,8 +107,8 @@ var h = l("pie-lib:chart:bars"), g = [
 				u && u.value === "incorrect" && (() => {
 					let e = parseFloat(M && M.value);
 					if (isNaN(e)) return null;
-					let t = x.y(S.max - e), n = O, r = Math.abs(t - n), i = x.y(e), o = t > n ? m.borderGray() : m.defaults.WHITE, s = t > n ? i : i - r;
-					return /* @__PURE__ */ p(d, { children: [/* @__PURE__ */ f(y, {
+					let t = x.y(S.max - e), n = O, r = Math.abs(t - n), i = x.y(e), o = t > n ? d.borderGray() : d.defaults.WHITE, s = t > n ? i : i - r;
+					return /* @__PURE__ */ m(f, { children: [/* @__PURE__ */ p(y, {
 						x: k + 2,
 						y: s,
 						width: D - 4,
@@ -119,15 +119,15 @@ var h = l("pie-lib:chart:bars"), g = [
 							strokeDasharray: "5,2",
 							fill: "none"
 						}
-					}), /* @__PURE__ */ f("foreignObject", {
+					}), /* @__PURE__ */ p("foreignObject", {
 						x: k + D - (P ? 24 : 14),
 						y: i - 12,
 						width: 24,
 						height: 24,
-						children: /* @__PURE__ */ f(a, { dashColor: o })
+						children: /* @__PURE__ */ p(a, { dashColor: o })
 					})] });
 				})(),
-				/* @__PURE__ */ f(N, {
+				/* @__PURE__ */ p(N, {
 					x: k,
 					y: E,
 					defineChart: g,
@@ -155,7 +155,7 @@ var h = l("pie-lib:chart:bars"), g = [
 	};
 	render() {
 		let { data: t, graphProps: n, xBand: r, onChangeCategory: i, defineChart: a, histogram: o, correctData: s } = this.props;
-		return /* @__PURE__ */ f(e, { children: (t || []).map((e, t) => /* @__PURE__ */ f(x, {
+		return /* @__PURE__ */ p(e, { children: (t || []).map((e, t) => /* @__PURE__ */ p(x, {
 			value: e.value,
 			interactive: a || e.interactive,
 			defineChart: a,