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

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

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

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,65 +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",
 					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,
@@ -238,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,
@@ -248,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-lib/charting",
-  "version": "8.0.1-next.20261004005223",
+  "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.20261004005223",
+    "@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",