@pie-lib/charting 8.0.1-next.20261004003105 → 8.0.1-next.20261004011201

package/dist/__tests__/mark-label-name.test.d.ts

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

package/dist/__tests__/text-alternative.test.d.ts

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

package/dist/actions-button.js

@@ -3,17 +3,17 @@ 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 o from "@mui/material/Button";
-import s from "@mui/material/Popover";
-import c from "@mui/material/Paper";
-import l from "@pie-lib/translator";
+import o from "@pie-lib/translator";
+import s from "@mui/material/Button";
+import c from "@mui/material/Popover";
+import l from "@mui/material/Paper";
 //#region src/actions-button.tsx
-var { translator: u } = l, d = n("div")(() => ({ alignSelf: "flex-end" })), f = n("div")(({ theme: e }) => ({
+var { translator: u } = o, d = n("div")(() => ({ alignSelf: "flex-end" })), f = n("div")(({ theme: e }) => ({
 	cursor: "pointer",
 	fontSize: e.typography.fontSize,
 	color: a.tertiary(),
 	padding: e.spacing(1)
-})), p = n(c)(({ theme: e }) => ({
+})), p = n(l)(({ theme: e }) => ({
 	padding: e.spacing(1),
 	display: "flex",
 	flexDirection: "column",
@@ -58,7 +58,7 @@ var { translator: u } = l, d = n("div")(() => ({ alignSelf: "flex-end" })), f =
 			tabIndex: 0,
 			onClick: this.handleActionsClick,
 			children: "Actions"
-		}), /* @__PURE__ */ r(s, {
+		}), /* @__PURE__ */ r(c, {
 			open: !!n,
 			anchorEl: n,
 			onClose: this.handleActionsClose,
@@ -70,10 +70,10 @@ var { translator: u } = l, d = n("div")(() => ({ alignSelf: "flex-end" })), f =
 				vertical: "top",
 				horizontal: "left"
 			},
-			children: /* @__PURE__ */ i(p, { children: [/* @__PURE__ */ i(o, {
+			children: /* @__PURE__ */ i(p, { children: [/* @__PURE__ */ i(s, {
 				onClick: () => this.handleAddCategory(),
 				children: ["+ ", u.t("charting.add", { lng: t })]
-			}), e.length > 0 && e.map((e, n) => e.deletable && !e.correctness && /* @__PURE__ */ r(o, {
+			}), e.length > 0 && e.map((e, n) => e.deletable && !e.correctness && /* @__PURE__ */ r(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

@@ -59,6 +59,7 @@ export declare class RawChartAxes extends React.Component {
         hiddenLabelRef: PropTypes.Requireable<NonNullable<((...args: any[]) => any) | PropTypes.InferProps<{
             current: PropTypes.Requireable<Element>;
         }> | null | undefined>>;
+        language: PropTypes.Requireable<string>;
     };
     state: {
         height: number;

package/dist/axes.js

@@ -12,23 +12,24 @@ 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";
 //#region src/axes.tsx
-var _ = /* @__PURE__ */ new Set(), v = null;
-function y(e) {
-	_.add(e), !v && typeof document < "u" && (v = new MutationObserver(() => {
-		_.forEach((e) => e());
-	}), v.observe(document.body, {
+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, {
 		childList: !0,
 		subtree: !0
 	}));
 }
-function b(e) {
-	_.delete(e), _.size === 0 && v && (v.disconnect(), v = null);
+function S(e) {
+	y.delete(e), y.size === 0 && b && (b.disconnect(), b = null);
 }
-var x = l("text")(({ theme: e }) => ({
+var C = l("text")(({ theme: e }) => ({
 	fontSize: e.typography.fontSize - 2,
 	fill: e.palette.error.main
-})), S = l(h)(() => ({ color: `${m.tertiary()} !important` })), C = l("g")(({ theme: e }) => ({
+})), w = l(h)(() => ({ color: `${m.tertiary()} !important` })), T = l("g")(({ theme: e }) => ({
 	"& .vx-axis-line": {
 		stroke: m.visualElementsColors.AXIS_LINE_COLOR,
 		strokeWidth: 2
@@ -43,7 +44,7 @@ var x = l("text")(({ theme: e }) => ({
 		fontSize: e.typography.fontSize,
 		textAnchor: "middle"
 	}
-})), w = (e) => ({
+})), E = (e) => ({
 	borderRadius: e.spacing(2),
 	color: m.defaults.WHITE,
 	fontSize: "16px",
@@ -52,7 +53,7 @@ var x = l("text")(({ theme: e }) => ({
 	padding: "2px",
 	border: `1px solid ${m.defaults.WHITE}`,
 	boxSizing: "unset"
-}), T = { backgroundColor: m.incorrectWithIcon() }, E = { backgroundColor: m.correct() }, D = class extends s.Component {
+}), D = { backgroundColor: m.incorrectWithIcon() }, O = { backgroundColor: m.correct() }, k = class extends s.Component {
 	static propTypes = {
 		defineChart: c.bool,
 		error: c.any
@@ -112,16 +113,16 @@ var x = 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: v, changeEditableEnabled: y, error: b, autoFocus: C, hiddenLabelRef: D, showCorrectness: O } = this.props;
+		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;
 		if (!_) return null;
-		let k = {
-			correctnessIcon: w,
-			incorrectIcon: T,
-			correctIcon: E
-		}, { dialog: A } = this.state, { changeEditable: j, changeInteractive: M } = m || {}, N = parseInt(_.split("-")[0], 10), P = e[N], { editable: F, interactive: I, label: L, correctness: R } = P || {}, z = t(r({ label: L }, N)), B = (e || []).reduce((e, t) => (e && e.label ? e.label.length : 0) > (t && t.label ? t.label.length : 0) ? e : t, { label: "" }), V = b ? [...new Set(Object.values(b))].join(" ") : "";
+		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 ? z : h - a / 2,
+				x: i ? V : h - a / 2,
 				y: 18,
 				width: a,
 				height: 4,
@@ -129,42 +130,46 @@ var x = l("text")(({ theme: e }) => ({
 					pointerEvents: "none",
 					overflow: "visible"
 				},
-				children: [N === 0 && /* @__PURE__ */ f(o, {
+				children: [F === 0 && /* @__PURE__ */ f(o, {
 					isHiddenLabel: !0,
-					inputRef: D,
+					inputRef: T,
 					disabled: !0,
-					mark: B,
+					mark: H,
 					graphProps: l,
 					barWidth: a
 				}), /* @__PURE__ */ f(o, {
-					autoFocus: u && C,
+					autoFocus: u && S,
 					inputRef: (e) => this.input = e,
-					disabled: !u && !F,
-					mark: P,
+					disabled: !u && !L,
+					mark: I,
 					graphProps: l,
-					onChange: (e) => this.changeCategory(N, e),
+					onChange: (e) => this.changeCategory(F, e),
 					barWidth: a,
 					rotate: s,
-					correctness: R,
-					error: b && b[N],
+					correctness: B,
+					error: x && x[F],
+					ariaLabel: v.t("charting.categoryLabel", {
+						lng: A,
+						index: F + 1
+					}),
 					limitCharacters: !0,
-					correctnessIndicator: O && R && /* @__PURE__ */ f(n, {
-						correctness: R,
-						interactive: I,
-						classes: k
+					correctnessIndicator: k && B && /* @__PURE__ */ f(n, {
+						correctness: B,
+						interactive: R,
+						classes: j
 					})
 				})]
 			}),
-			b && N === 0 && /* @__PURE__ */ f(x, {
+			x && F === 0 && /* @__PURE__ */ f(C, {
 				y: g + 23,
 				height: 6,
 				textAnchor: "start",
-				children: V
+				children: U
 			}),
-			u && N === 0 && /* @__PURE__ */ p("svg", {
+			u && F === 0 && /* @__PURE__ */ p("svg", {
 				x: -55,
 				style: { overflow: "visible" },
-				children: [v && /* @__PURE__ */ f("text", {
+				children: [y && /* @__PURE__ */ f("text", {
 					y: g + 90 + c,
 					width: a,
 					height: 4,
@@ -175,12 +180,12 @@ var x = l("text")(({ theme: e }) => ({
 						maxWidth: a,
 						display: "inline-block"
 					},
-					children: this.splitText(M?.authoringLabel, 20).map((e, t) => /* @__PURE__ */ f("tspan", {
+					children: this.splitText(P?.authoringLabel, 20).map((e, t) => /* @__PURE__ */ f("tspan", {
 						x: "0",
 						dy: `${t > 0 ? "1.2em" : ".6em"}`,
 						children: e
 					}, t))
-				}), y && /* @__PURE__ */ f("text", {
+				}), b && /* @__PURE__ */ f("text", {
 					y: g + 145 + c,
 					width: a,
 					height: 4,
@@ -191,14 +196,14 @@ var x = l("text")(({ theme: e }) => ({
 						maxWidth: a,
 						display: "inline-block"
 					},
-					children: this.splitText(j?.authoringLabel, 20).map((e, t) => /* @__PURE__ */ f("tspan", {
+					children: this.splitText(N?.authoringLabel, 20).map((e, t) => /* @__PURE__ */ f("tspan", {
 						x: "0",
 						dy: `${t > 0 ? "1.2em" : ".6em"}`,
 						children: e
 					}, t))
 				})]
 			}),
-			u && v && /* @__PURE__ */ f("foreignObject", {
+			u && y && /* @__PURE__ */ f("foreignObject", {
 				x: h - 24,
 				y: g + 80 + c,
 				width: a,
@@ -207,13 +212,13 @@ var x = l("text")(({ theme: e }) => ({
 					pointerEvents: "visible",
 					overflow: "visible"
 				},
-				children: /* @__PURE__ */ f(S, {
+				children: /* @__PURE__ */ f(w, {
 					style: { position: "fixed" },
-					checked: I,
-					onChange: (e) => this.changeInteractive(N, e.target.checked)
+					checked: R,
+					onChange: (e) => this.changeInteractive(F, e.target.checked)
 				})
 			}),
-			u && y && /* @__PURE__ */ f("foreignObject", {
+			u && b && /* @__PURE__ */ f("foreignObject", {
 				x: h - 24,
 				y: g + 130 + c,
 				width: a,
@@ -222,10 +227,10 @@ var x = l("text")(({ theme: e }) => ({
 					pointerEvents: "visible",
 					overflow: "visible"
 				},
-				children: /* @__PURE__ */ f(S, {
+				children: /* @__PURE__ */ f(w, {
 					style: { position: "fixed" },
-					checked: F,
-					onChange: (e) => this.changeEditable(N, e.target.checked)
+					checked: L,
+					onChange: (e) => this.changeEditable(F, e.target.checked)
 				})
 			}),
 			/* @__PURE__ */ f("foreignObject", {
@@ -238,17 +243,17 @@ var x = l("text")(({ theme: e }) => ({
 					overflow: "visible"
 				},
 				children: /* @__PURE__ */ f(d, {
-					open: A.open,
-					title: A.title,
-					text: A.text,
-					onClose: A.onClose,
-					onConfirm: A.onConfirm
+					open: M.open,
+					title: M.title,
+					text: M.text,
+					onClose: M.onClose,
+					onConfirm: M.onConfirm
 				})
 			})
 		] });
 	}
 };
-D.propTypes = {
+k.propTypes = {
 	categories: c.array,
 	xBand: c.func,
 	bandWidth: c.number,
@@ -269,9 +274,10 @@ D.propTypes = {
 	autoFocus: c.bool,
 	onAutoFocusUsed: c.func,
 	showCorrectness: c.bool,
-	hiddenLabelRef: c.oneOfType([c.func, c.shape({ current: c.instanceOf(Element) })])
+	hiddenLabelRef: c.oneOfType([c.func, c.shape({ current: c.instanceOf(Element) })]),
+	language: c.string
 };
-var O = class extends s.Component {
+var A = class extends s.Component {
 	static propTypes = {
 		bottomScale: c.func,
 		categories: c.array,
@@ -290,7 +296,8 @@ var O = class extends s.Component {
 		autoFocus: c.bool,
 		onAutoFocusUsed: c.func,
 		showCorrectness: c.bool,
-		hiddenLabelRef: c.oneOfType([c.func, c.shape({ current: c.instanceOf(Element) })])
+		hiddenLabelRef: c.oneOfType([c.func, c.shape({ current: c.instanceOf(Element) })]),
+		language: c.string
 	};
 	state = {
 		height: 0,
@@ -310,7 +317,7 @@ var O = 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(), y(this._onDocMutation);
+		t && g(e), (e.querySelector("mjx-container") || !t) && this.measureHiddenLabel(), x(this._onDocMutation);
 	};
 	setHiddenLabelRef = (e) => {
 		e && e !== this.hiddenLabelRef && (this.hiddenLabelRef = e, this.observeHiddenLabel(e));
@@ -319,38 +326,38 @@ var O = class extends s.Component {
 		this.hiddenLabelRef && this.observeHiddenLabel(this.hiddenLabelRef);
 	}
 	componentWillUnmount() {
-		b(this._onDocMutation), this._updateTimer && clearTimeout(this._updateTimer);
+		S(this._onDocMutation), this._updateTimer && clearTimeout(this._updateTimer);
 	}
 	componentDidUpdate(e) {
 		e.categories !== this.props.categories && (this._updateTimer && clearTimeout(this._updateTimer), this._updateTimer = setTimeout(() => this.measureHiddenLabel(), 50));
 	}
 	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 } = this.props, { scale: S = {}, range: w = {}, domain: T = {}, size: E = {} } = n || {}, { height: O, width: k } = this.state, A = r && typeof r.rangeRound == "function" && r.rangeRound([0, E.width]), j = r && typeof r.bandwidth == "function" && r.bandwidth(), M = j || S.x && S.x(T.max) / l.length, N = a({
+		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
-		}), P = i(_ && _.typography ? _.typography.fontSize : 14, O), F = k > M ? 25 : 0;
-		return /* @__PURE__ */ p(C, { children: [o && /* @__PURE__ */ f(e, {
-			scale: S.y,
+		}), F = i(_ && _.typography ? _.typography.fontSize : 14, O), I = A > N ? 25 : 0;
+		return /* @__PURE__ */ p(T, { children: [o && /* @__PURE__ */ f(e, {
+			scale: C.y,
 			tickLength: 10,
 			tickFormat: (e) => e,
-			tickValues: N,
+			tickValues: P,
 			tickLabelProps: (e) => ({
 				dy: 4,
 				dx: -10 - (e.toLocaleString().length || 1) * 5
 			})
 		}), /* @__PURE__ */ f(t, {
-			scale: A,
+			scale: j,
 			labelProps: { y: 60 + u },
-			top: S.y && S.y(w.min),
+			top: C.y && C.y(w.min),
 			textLabelProps: () => ({ textAnchor: "middle" }),
 			tickFormat: (e) => e,
-			tickComponent: (e) => /* @__PURE__ */ f(D, {
+			tickComponent: (e) => /* @__PURE__ */ f(k, {
 				hiddenLabelRef: this.setHiddenLabelRef,
 				categories: l,
 				xBand: r,
-				bandWidth: j,
-				barWidth: M,
-				rotate: P || F,
+				bandWidth: M,
+				barWidth: N,
+				rotate: F || I,
 				top: u,
 				defineChart: d,
 				chartingOptions: m,
@@ -365,7 +372,8 @@ var O = class extends s.Component {
 				x: e.x,
 				y: e.y,
 				formattedValue: e.formattedValue,
-				showCorrectness: x
+				showCorrectness: x,
+				language: S
 			}),
 			autoFocus: v,
 			onAutoFocusUsed: y
@@ -373,4 +381,4 @@ var O = class extends s.Component {
 	}
 };
 //#endregion
-export { O as RawChartAxes, O as default, D as TickComponent };
+export { A as RawChartAxes, A as default, k as TickComponent };

package/dist/chart.d.ts

@@ -1,5 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+export declare const chartAlternative: ({ title, chartType, categories, range, language }: {
+    title: any;
+    chartType: any;
+    categories: any;
+    range: any;
+    language: any;
+}) => {
+    ariaLabel: string;
+    ariaDescription: string;
+};
 export declare class Chart extends React.Component {
     constructor(props: any);
     static propTypes: {

package/dist/chart.js

@@ -8,12 +8,34 @@ import l from "prop-types";
 import { styled as u } from "@mui/material/styles";
 import d from "debug";
 import { cloneDeep as f } from "@pie-element/shared-lodash";
-import { Root as p, createGraphProps as m } from "@pie-lib/plot";
-import { AlertDialog as h } from "@pie-lib/config-ui";
-import { jsx as g, jsxs as _ } from "react/jsx-runtime";
-import v from "@pie-lib/translator";
+import { Root as p, createGraphProps as m, utils as h } from "@pie-lib/plot";
+import { AlertDialog as g } from "@pie-lib/config-ui";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+import y from "@pie-lib/translator";
 //#region src/chart.tsx
-var { translator: y } = v, b = d("pie-lib:charts:chart"), x = u("div")(() => ({ width: "min-content" })), S = class extends c.Component {
+var { translator: b } = y, ee = d("pie-lib:charts:chart"), x = u("div")(() => ({ width: "min-content" })), S = (e) => e ? h.extractTextFromHTML(e).trim() : "", C = ({ title: e, chartType: t, categories: n, range: r, language: i }) => {
+	let a = {
+		lng: i,
+		interpolation: { escapeValue: !1 }
+	}, o = b.t(`charting.chartTypes.${t}`, a), s = S(r.label), c = s ? b.t("charting.labelledValueRange", {
+		...a,
+		label: s,
+		min: r.min,
+		max: r.max
+	}) : b.t("charting.valueRange", {
+		...a,
+		min: r.min,
+		max: r.max
+	}), l = b.t("charting.categories", {
+		...a,
+		count: n.length,
+		categories: n.map((e) => S(e.label)).join(", ")
+	});
+	return {
+		ariaLabel: S(e) || o,
+		ariaDescription: `${o}. ${l} ${c}`
+	};
+}, w = class extends c.Component {
 	constructor(e) {
 		super(e), this.state = {
 			dialog: { open: !1 },
@@ -114,15 +136,15 @@ var { translator: y } = v, b = d("pie-lib:charts:chart"), x = u("div")(() => ({
 		let { onDataChange: e, data: t, categoryDefaultLabel: n, defineChart: r, categoryDefaults: i, language: a } = this.props;
 		(t || []).length > 19 ? this.setState({ dialog: {
 			open: !0,
-			title: y.t("common:warning", { lng: a }),
-			text: y.t("charting.reachedLimit_other", {
+			title: b.t("common:warning", { lng: a }),
+			text: b.t("charting.reachedLimit_other", {
 				count: 20,
 				lng: a
 			}),
 			onConfirm: () => this.handleAlertDialog(!1)
 		} }) : (this.setState({ autoFocus: !0 }), e([...t, {
 			inDefineChart: r,
-			label: n || y.t("charting.newLabel", { lng: a }),
+			label: n || b.t("charting.newLabel", { lng: a }),
 			value: 0,
 			deletable: !0,
 			editable: !i || i?.editable,
@@ -144,27 +166,36 @@ var { translator: y } = v, b = d("pie-lib:charts:chart"), x = u("div")(() => ({
 		this.setState({ autoFocus: !1 });
 	};
 	render() {
-		let { domain: o = {}, range: c = {}, chartingOptions: l, size: u, title: d, onChangeTitle: v, onChangeLabels: y, labelsPlaceholders: S, titlePlaceholder: C, addCategoryEnabled: w, changeInteractiveEnabled: T, changeEditableEnabled: E, showPixelGuides: D, error: O, mathMlOptions: k = {}, language: A, labelsCharactersLimit: j, correctData: M } = this.props, { chartType: N } = this.props, { dialog: P } = this.state, F = this.props.defineChart || !1, { width: I, height: L } = u || {}, R = {
+		let { domain: o = {}, range: c = {}, chartingOptions: l, size: u, title: d, onChangeTitle: h, onChangeLabels: y, labelsPlaceholders: b, titlePlaceholder: S, addCategoryEnabled: w, changeInteractiveEnabled: T, changeEditableEnabled: E, showPixelGuides: D, error: O, mathMlOptions: k = {}, language: A, labelsCharactersLimit: j, correctData: M } = this.props, { chartType: N } = this.props, { dialog: P } = this.state, F = this.props.defineChart || !1, { width: I, height: L } = u || {}, R = {
 			left: c?.label || "",
 			bottom: o?.label || ""
-		}, { ChartComponent: z } = this.getChart(), B = this.getFilteredCategories(), V = n(o, c, N), { verticalLines: H, horizontalLines: U, leftAxis: W } = r(V.range, N), G = { graphProps: m(V.domain, V.range, u, () => this.rootNode) };
-		b("[render] common:", G);
-		let K = {
+		}, { type: z, ChartComponent: B } = this.getChart(), V = this.getFilteredCategories(), H = n(o, c, N), { ariaLabel: U, ariaDescription: W } = C({
+			title: d,
+			chartType: z,
+			categories: V,
+			range: {
+				...H.range,
+				label: c.label
+			},
+			language: A
+		}), { verticalLines: G, horizontalLines: K, leftAxis: q } = r(H.range, N), J = { graphProps: m(H.domain, H.range, u, () => this.rootNode) };
+		ee("[render] common:", J);
+		let Y = {
 			x: -10,
 			y: -75,
 			width: I + 20,
 			height: L + 130
-		}, { scale: q } = G.graphProps, J = t(q.x, B, I, N), Y = J.bandwidth() || q.x(V.domain.max) / B.length, X = F ? 160 : 60, Z = i(Y), Q = f(G);
-		return Q.graphProps.size.height += Z + X, (N === "dotPlot" || N === "linePlot") && M?.length && R.bottom && (Q.graphProps.size.height += 25), /* @__PURE__ */ _(x, { children: [/* @__PURE__ */ _(p, {
+		}, { scale: X } = J.graphProps, Z = t(X.x, V, I, N), te = Z.bandwidth() || X.x(H.domain.max) / V.length, ne = F ? 160 : 60, Q = i(te), $ = f(J);
+		return $.graphProps.size.height += Q + ne, (N === "dotPlot" || N === "linePlot") && M?.length && R.bottom && ($.graphProps.size.height += 25), /* @__PURE__ */ v(x, { children: [/* @__PURE__ */ v(p, {
 			title: d,
-			onChangeTitle: v,
+			onChangeTitle: h,
 			disabledTitle: !F,
 			showTitle: !0,
 			showLabels: !0,
 			labels: R,
 			onChangeLabels: y,
-			labelsPlaceholders: S,
-			titlePlaceholder: C,
+			labelsPlaceholders: b,
+			titlePlaceholder: S,
 			defineChart: F,
 			disabledLabels: !F,
 			isChart: !0,
@@ -172,64 +203,67 @@ var { translator: y } = v, b = d("pie-lib:charts:chart"), x = u("div")(() => ({
 			rootRef: (e) => this.rootNode = e,
 			mathMlOptions: k,
 			labelsCharactersLimit: j,
-			...Q,
+			ariaLabel: U,
+			ariaDescription: W,
+			...$,
 			children: [
-				/* @__PURE__ */ g(e, {
-					...G,
-					xBand: J,
-					rowTickValues: U,
-					columnTickValues: H
+				/* @__PURE__ */ _(e, {
+					...J,
+					xBand: Z,
+					rowTickValues: K,
+					columnTickValues: G
 				}),
-				/* @__PURE__ */ g(a, {
+				/* @__PURE__ */ _(a, {
 					autoFocus: this.state.autoFocus,
 					onAutoFocusUsed: this.resetAutoFocus,
-					...G,
+					...J,
 					defineChart: F,
-					categories: B,
-					xBand: J,
-					leftAxis: W,
+					categories: V,
+					xBand: Z,
+					leftAxis: q,
 					onChange: this.changeData,
 					onChangeCategory: this.changeCategory,
 					chartingOptions: l,
 					changeInteractiveEnabled: T,
 					changeEditableEnabled: E,
-					top: Z,
+					top: Q,
 					error: O,
-					showCorrectness: N === "linePlot" || N === "dotPlot"
+					showCorrectness: N === "linePlot" || N === "dotPlot",
+					language: A
 				}),
-				w ? /* @__PURE__ */ g("foreignObject", {
+				w ? /* @__PURE__ */ _("foreignObject", {
 					x: I,
 					y: L - 16,
 					width: I,
 					height: L,
-					children: /* @__PURE__ */ g("div", {
+					children: /* @__PURE__ */ _("div", {
 						xmlns: "http://www.w3.org/1999/xhtml",
 						style: {
 							display: "flex",
 							justifyContent: "flex-start"
 						},
-						children: /* @__PURE__ */ g(s, {
-							categories: B,
+						children: /* @__PURE__ */ _(s, {
+							categories: V,
 							addCategory: this.addCategory,
 							deleteCategory: this.deleteCategory,
 							language: A
 						})
 					})
 				}) : null,
-				/* @__PURE__ */ g("mask", {
+				/* @__PURE__ */ _("mask", {
 					id: `${this.maskUid}`,
-					children: /* @__PURE__ */ g("rect", {
-						...K,
+					children: /* @__PURE__ */ _("rect", {
+						...Y,
 						fill: "white"
 					})
 				}),
-				/* @__PURE__ */ g("g", {
+				/* @__PURE__ */ _("g", {
 					id: "marks",
 					mask: `url('#${this.maskUid}')`,
-					children: z && /* @__PURE__ */ g(z, {
-						...G,
-						data: B,
-						height: Q.graphProps.size.height,
+					children: B && /* @__PURE__ */ _(B, {
+						...J,
+						data: V,
+						height: $.graphProps.size.height,
 						defineChart: F,
 						onChange: this.changeData,
 						onChangeCategory: this.changeCategory,
@@ -237,7 +271,7 @@ var { translator: y } = v, b = d("pie-lib:charts:chart"), x = u("div")(() => ({
 					})
 				})
 			]
-		}), /* @__PURE__ */ g(h, {
+		}), /* @__PURE__ */ _(g, {
 			open: P.open,
 			title: P.title,
 			text: P.text,
@@ -247,4 +281,4 @@ var { translator: y } = v, b = d("pie-lib:charts:chart"), x = u("div")(() => ({
 	}
 };
 //#endregion
-export { S as Chart, S as default };
+export { w as Chart, w as default, C as chartAlternative };

package/dist/key-legend.js

@@ -3,9 +3,9 @@ import e from "prop-types";
 import { styled as t } from "@mui/material/styles";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { color as i } from "@pie-lib/render-ui";
-import a from "@mui/icons-material/Check";
-import o from "@mui/icons-material/Close";
-import s from "@pie-lib/translator";
+import a from "@pie-lib/translator";
+import o from "@mui/icons-material/Check";
+import s from "@mui/icons-material/Close";
 //#region src/key-legend.tsx
 var c = t("div")(({ theme: e }) => ({
 	backgroundColor: i.defaults.WHITE,
@@ -22,11 +22,11 @@ var c = t("div")(({ theme: e }) => ({
 })), u = t("div")(({ theme: e }) => ({
 	fontSize: e.typography.h6.fontSize,
 	fontWeight: "700"
-})), d = t("div")(() => ({ marginLeft: "2px" })), f = t(a)(({ theme: e }) => ({
+})), d = t("div")(() => ({ marginLeft: "2px" })), f = t(o)(({ theme: e }) => ({
 	backgroundColor: i.correct(),
 	borderRadius: e.spacing(2),
 	color: i.defaults.WHITE
-})), p = t(o)(({ theme: e }) => ({
+})), p = t(s)(({ theme: e }) => ({
 	backgroundColor: i.incorrectWithIcon(),
 	borderRadius: e.spacing(2),
 	color: i.defaults.WHITE
@@ -35,7 +35,7 @@ var c = t("div")(({ theme: e }) => ({
 	display: "flex",
 	alignItems: "center",
 	gap: "12px"
-})), { translator: h } = s, g = ({ language: e }) => /* @__PURE__ */ r(c, { children: [
+})), { translator: h } = a, g = ({ language: e }) => /* @__PURE__ */ r(c, { children: [
 	/* @__PURE__ */ n(u, { children: "Key" }),
 	/* @__PURE__ */ r(l, { children: [/* @__PURE__ */ n(p, {}), /* @__PURE__ */ n("div", { children: h.t("charting.keyLegend.incorrectAnswer", { lng: e }) })] }),
 	/* @__PURE__ */ r(l, { children: [/* @__PURE__ */ n(f, {}), /* @__PURE__ */ n("div", { children: h.t("charting.keyLegend.correctAnswer", { lng: e }) })] }),

package/dist/mark-label.d.ts

@@ -42,6 +42,7 @@ export declare const MarkLabel: {
         isHiddenLabel: PropTypes.Requireable<boolean>;
         limitCharacters: PropTypes.Requireable<boolean>;
         correctnessIndicator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        ariaLabel: PropTypes.Requireable<string>;
     };
 };
 export default MarkLabel;

package/dist/mark-label.js

@@ -51,22 +51,22 @@ function b(e) {
 	if (y(e)) return i[0] && i[1] && (r = i[0]), a = `\\(${r}\\frac{${n[0]}}{${n[1]}}\\)`, a;
 }
 var x = (n) => {
-	let [r, i] = c(null), l = a((e) => i(e), null), { mark: u = {}, disabled: d, inputRef: m, barWidth: y, rotate: x, correctness: S, autoFocus: C, error: w, isHiddenLabel: T, limitCharacters: E, correctnessIndicator: D } = n, [O, k] = c(u.label), [A, j] = c(b(u.label)), [M, N] = c(!1), P = s(null), F = (e) => {
-		E && e.target.value && e.target.value.length > 20 || k(e.target.value);
-	}, I = () => M === !1 && A !== void 0, L = (e) => {
-		j(b(u.label)), N(!1), n.onChange(e.target.value);
-	}, R = {};
-	return x && (R = {
+	let [r, i] = c(null), l = a((e) => i(e), null), { mark: u = {}, disabled: d, inputRef: m, barWidth: y, rotate: x, correctness: S, autoFocus: C, error: w, isHiddenLabel: T, limitCharacters: E, correctnessIndicator: D, ariaLabel: O } = n, [k, A] = c(u.label), [j, M] = c(b(u.label)), [N, P] = c(!1), F = s(null), I = (e) => {
+		E && e.target.value && e.target.value.length > 20 || A(e.target.value);
+	}, L = () => N === !1 && j !== void 0, R = (e) => {
+		M(b(u.label)), P(!1), n.onChange(e.target.value);
+	}, z = {};
+	return x && (z = {
 		width: "unset",
 		textAlign: "left"
 	}), o(() => {
-		k(u.label);
+		A(u.label);
 	}, [u.label]), o(() => {
-		let e = P.current;
-		e && A && (e.innerHTML = A, h(e));
-	}, [O, A]), /* @__PURE__ */ p(g, { children: [D, I() ? /* @__PURE__ */ f(v, {
+		let e = F.current;
+		e && j && (e.innerHTML = j, h(e));
+	}, [k, j]), /* @__PURE__ */ p(g, { children: [D, L() ? /* @__PURE__ */ f(v, {
 		ref: (e) => {
-			P.current = e, typeof m == "function" && m(e);
+			F.current = e, typeof m == "function" && m(e);
 		},
 		className: e({
 			disabledMarkLabel: d,
@@ -74,7 +74,7 @@ var x = (n) => {
 			correct: u.editable && S?.label === "correct",
 			incorrect: u.editable && S?.label === "incorrect"
 		}),
-		onClick: () => N(!0),
+		onClick: () => P(!0),
 		style: {
 			minWidth: y,
 			position: "fixed",
@@ -88,7 +88,8 @@ var x = (n) => {
 			l(e), typeof m == "function" && m(e);
 		},
 		name: "mark-label-input",
-		autoFocus: M || C,
+		"aria-label": O,
+		autoFocus: N || C,
 		disabled: d,
 		inputClassName: e(S && u.editable ? S.label : null, d && "disabledMarkLabel", w && "error"),
 		inputStyle: {
@@ -103,9 +104,9 @@ var x = (n) => {
 				color: _,
 				WebkitTextFillColor: _
 			} : {},
-			...R
+			...z
 		},
-		value: O,
+		value: k,
 		style: {
 			position: "fixed",
 			pointerEvents: "auto",
@@ -117,8 +118,8 @@ var x = (n) => {
 			visibility: T ? "hidden" : "unset",
 			marginTop: D ? "24px" : "0"
 		},
-		onChange: F,
-		onBlur: L
+		onChange: I,
+		onBlur: R
 	})] });
 };
 x.propTypes = {
@@ -137,7 +138,8 @@ x.propTypes = {
 	}),
 	isHiddenLabel: l.bool,
 	limitCharacters: l.bool,
-	correctnessIndicator: l.node
+	correctnessIndicator: l.node,
+	ariaLabel: l.string
 };
 //#endregion
 export { x as MarkLabel, x as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/charting",
-  "version": "8.0.1-next.20261004003105",
+  "version": "8.0.1-next.20261004011201",
   "description": "charting",
   "repository": {
     "type": "git",
@@ -13,9 +13,9 @@
     "@mapbox/point-geometry": "^1.1.0",
     "@mui/icons-material": "^7.3.4",
     "@mui/material": "^7.3.4",
-    "@pie-lib/plot": "5.0.1-next.20261004003105",
+    "@pie-lib/plot": "5.0.1-next.20261004011201",
     "@pie-lib/render-ui": "8.0.1-next.20261003161149",
-    "@pie-lib/translator": "5.0.1-next.20261004003105",
+    "@pie-lib/translator": "5.0.1-next.20261004011201",
     "@visx/axis": "^4.0.0",
     "@visx/event": "^4.0.0",
     "@visx/grid": "^4.0.0",
@@ -29,7 +29,7 @@
     "invariant": "^2.2.4",
     "react-draggable": "^4.7.1",
     "prop-types": "^15.8.1",
-    "@pie-lib/config-ui": "14.0.1-next.20261004003105",
+    "@pie-lib/config-ui": "14.0.1-next.20261004011201",
     "@pie-element/shared-math-rendering-mathjax": "0.1.2-next.20261003161149",
     "@pie-element/shared-lodash": "0.1.2-next.20261002215153",
     "clsx": "^2.1.1",