@pie-lib/charting 7.0.4-next.3 → 7.0.4-next.30

package/dist/chart-setup.js

@@ -0,0 +1,231 @@
+import e from "./chart-type.js";
+import { useEffect as t, useState as n } from "react";
+import r from "prop-types";
+import { styled as i } from "@mui/material/styles";
+import { AlertDialog as a, NumberTextFieldCustom as o } from "@pie-lib/config-ui";
+import { color as s } from "@pie-lib/render-ui";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "@mui/material/Typography";
+//#region src/chart-setup.tsx
+var d = (e, t, n, r, i) => {
+	(e || []).forEach((e) => {
+		let t = Math.round(e.value * 10) % Math.round(n.step * 10) / 10;
+		(e.value > n.max || t !== 0) && (e.value = 0);
+	}), t && r({
+		...i,
+		data: e
+	});
+}, f = i("div")(() => ({ width: "450px" })), p = i("div")(({ theme: e }) => ({
+	display: "flex",
+	flexDirection: "column",
+	width: "100%",
+	marginTop: e.spacing(3)
+})), m = i("div")(() => ({
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center"
+})), h = i("div")(() => ({
+	display: "flex",
+	justifyContent: "space-around",
+	alignItems: "center"
+})), g = i(o)(({ theme: e }) => ({
+	width: "130px",
+	margin: `${e.spacing(1)} ${e.spacing(.5)}`
+})), _ = i(o)(({ theme: e }) => ({
+	width: "160px",
+	margin: `${e.spacing(1)} ${e.spacing(.5)}`
+})), v = i("div")(({ theme: e }) => ({
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center",
+	margin: `${e.spacing(3)} 0`
+})), y = i(u)(() => ({ color: s.disabled() })), b = (r) => {
+	let { model: i, onChange: o, chartDimensions: s, gridValues: b = {}, labelValues: x = {}, studentNewCategoryDefaultLabel: S = {}, availableChartTypes: C = {}, chartTypeLabel: w } = r, [T, E] = n({
+		open: !1,
+		title: "",
+		text: "",
+		onClose: null,
+		onConfirm: null
+	}), [D, O] = n(!1), [k, A] = n(""), [j, M] = n(0), { range: N = {}, correctAnswer: P, changeInteractiveEnabled: F, changeEditableEnabled: I } = i, L = i.graph, { showInConfigPanel: R, width: z, height: B } = s || {}, V = {
+		min: z?.min ? Math.max(50, z.min) : 50,
+		max: z?.max ? Math.min(700, z.max) : 700,
+		step: z?.step >= 1 ? Math.min(200, z.step) : 20
+	}, H = {
+		min: B?.min ? Math.max(400, B.min) : 400,
+		max: B?.max ? Math.min(700, B.max) : 700,
+		step: B?.step >= 1 ? Math.min(200, B.step) : 20
+	}, U = b && b.range ? { customValues: b.range } : {
+		min: 0,
+		max: 1e4
+	}, W = x && x.range ? { customValues: x.range } : {
+		min: 0,
+		max: 1e4
+	}, G = /* @__PURE__ */ l(h, { children: [/* @__PURE__ */ c(_, {
+		label: "Grid Interval",
+		value: N.step,
+		variant: "outlined",
+		onChange: (e, t) => $("step", t, e),
+		...U
+	}), /* @__PURE__ */ c(_, {
+		label: "Label Interval",
+		value: N.labelStep,
+		variant: "outlined",
+		onChange: (e, t) => $("labelStep", t, e),
+		...W
+	})] }), K = (e) => {
+		E((t) => ({
+			...t,
+			open: e
+		})), O(e);
+	}, q = (e, t) => e.map((e) => (Object.prototype.hasOwnProperty.call(e, t) && (e[t] = t == "interactive"), e)), J = (e) => {
+		let { correctAnswer: t, data: n } = i;
+		F === !1 && q(n, "interactive"), I === !1 && q(n, "editable"), d(n, e, N, o, i), d(t.data, !1, N, o, i);
+	}, Y = () => {
+		let e = S?.label;
+		o({
+			...i,
+			studentCategoryDefaultLabel: e
+		});
+	}, X = (e) => e.includes("Plot") ? {
+		min: 3,
+		max: 10
+	} : {
+		min: .05,
+		max: 1e4
+	}, Z = (e, t) => {
+		let n = {
+			...L,
+			[e]: t
+		};
+		o({
+			...i,
+			graph: n
+		});
+	}, Q = (e, t) => (e || []).find((e) => e.value > t.max || e.value - t.step * Math.floor(e.value / t.step) !== 0), $ = (e, t, n) => {
+		M(N[e]), A(e), N[e] = t, (e === "max" || e === "step") && (Q(i.data, N) || Q(i.correctAnswer.data, N)) && n?.target ? O(!0) : o({
+			...i,
+			range: N
+		});
+	};
+	t(() => {
+		J(!0), Y();
+	}, []), t(() => {
+		D && E({
+			open: !0,
+			title: "Warning",
+			text: "This change will remove values defined for one or more categories",
+			onConfirm: () => {
+				J(), K(!1), o({
+					...i,
+					range: N,
+					correctAnswer: P
+				});
+			},
+			onClose: () => {
+				N[k] = j, K(!1);
+			}
+		});
+	}, [D]);
+	let ee = N.step === 1 && N.labelStep === 1 && 3 <= N.max && N.max <= 10, te = () => {
+		X.min = 3, X.max = 10, N.max = 10, N.step = 1, N.labelStep = 1, o({
+			...i,
+			range: N
+		});
+	}, ne = (e) => {
+		if (e.includes("Plot")) {
+			if (!ee) {
+				E({
+					open: !0,
+					title: "Warning",
+					text: "The selected chart type does not support the current chart configuration. Reset chart configuration?",
+					onConfirm: () => {
+						te(), J(), K(!1), o({
+							...i,
+							range: N,
+							chartType: e
+						});
+					},
+					onClose: () => {
+						K(!1);
+					}
+				});
+				return;
+			}
+			X.min = 3, X.max = 10, o({
+				...i,
+				chartType: e
+			});
+			return;
+		}
+		o({
+			...i,
+			chartType: e
+		});
+	};
+	return /* @__PURE__ */ l(f, { children: [
+		/* @__PURE__ */ c(u, {
+			variant: "subtitle1",
+			children: "Configure Chart"
+		}),
+		/* @__PURE__ */ l(p, { children: [
+			/* @__PURE__ */ l(h, { children: [/* @__PURE__ */ c(e, {
+				value: i.chartType,
+				onChange: (e) => ne(e.target.value),
+				availableChartTypes: C,
+				chartTypeLabel: w
+			}), /* @__PURE__ */ c(_, {
+				label: "Max Value",
+				value: N.max,
+				min: X(i.chartType).min,
+				max: X(i.chartType).max,
+				variant: "outlined",
+				onChange: (e, t) => $("max", t, e)
+			})] }),
+			!i.chartType.includes("Plot") && G,
+			R && /* @__PURE__ */ l(v, { children: [
+				/* @__PURE__ */ c("div", { children: /* @__PURE__ */ c(u, { children: "Dimensions(px)" }) }),
+				/* @__PURE__ */ l(m, { children: [/* @__PURE__ */ c(g, {
+					label: "Width",
+					value: L.width,
+					min: V.min,
+					max: V.max,
+					step: V.step,
+					variant: "outlined",
+					onChange: (e, t) => Z("width", t)
+				}), /* @__PURE__ */ c(y, { children: "Min 50, Max 700" })] }),
+				/* @__PURE__ */ l(m, { children: [/* @__PURE__ */ c(g, {
+					label: "Height",
+					value: L.height,
+					min: H.min,
+					max: H.max,
+					step: H.step,
+					variant: "outlined",
+					onChange: (e, t) => Z("height", t)
+				}), /* @__PURE__ */ c(y, { children: "Min 400, Max 700" })] })
+			] })
+		] }),
+		/* @__PURE__ */ c(a, {
+			open: T.open,
+			title: T.title,
+			text: T.text,
+			onClose: T.onClose,
+			onConfirm: T.onConfirm
+		})
+	] });
+};
+b.propTypes = {
+	chartDimensions: r.object,
+	domain: r.object,
+	gridValues: r.object,
+	labelValues: r.object,
+	model: r.object,
+	onChange: r.func,
+	range: r.object,
+	chartDimension: r.object,
+	size: r.object,
+	studentNewCategoryDefaultLabel: r.object,
+	availableChartTypes: r.object,
+	chartTypeLabel: r.string
+};
+//#endregion
+export { b as default };

package/dist/chart-type.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @synced-from pie-lib/packages/charting/src/chart-type.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+declare const ChartType: {
+    ({ onChange, value, availableChartTypes, chartTypeLabel }: {
+        onChange: any;
+        value: any;
+        availableChartTypes: any;
+        chartTypeLabel: any;
+    }): React.JSX.Element;
+    propTypes: {
+        onChange: PropTypes.Validator<(...args: any[]) => any>;
+        value: PropTypes.Validator<string>;
+        availableChartTypes: PropTypes.Requireable<PropTypes.InferProps<{
+            histogram: PropTypes.Requireable<string>;
+            bar: PropTypes.Requireable<string>;
+            lineDot: PropTypes.Requireable<string>;
+            lineCross: PropTypes.Requireable<string>;
+            dotPlot: PropTypes.Requireable<string>;
+            linePlot: PropTypes.Requireable<string>;
+        }>>;
+        chartTypeLabel: PropTypes.Requireable<string>;
+    };
+};
+export default ChartType;

package/dist/chart-type.js

@@ -0,0 +1,68 @@
+import "react";
+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 i from "@mui/material/MenuItem";
+import a from "@mui/material/FormControl";
+import o from "@mui/material/InputLabel";
+import { Select as s } from "@mui/material";
+//#region src/chart-type.tsx
+var c = t("div")(() => ({ width: "160px" })), l = t(a)(() => ({ width: "160px" })), u = t(o)(() => ({ backgroundColor: "transparent" })), d = ({ onChange: e, value: t, availableChartTypes: a, chartTypeLabel: o }) => /* @__PURE__ */ n(c, { children: /* @__PURE__ */ r(l, {
+	variant: "outlined",
+	children: [/* @__PURE__ */ n(u, {
+		id: "type-helper-label",
+		children: o
+	}), /* @__PURE__ */ r(s, {
+		labelId: "type-helper-label",
+		id: "type-helper-label-select",
+		name: "chartType",
+		value: t,
+		onChange: e,
+		label: o,
+		MenuProps: { transitionDuration: {
+			enter: 225,
+			exit: 195
+		} },
+		children: [
+			a?.histogram && /* @__PURE__ */ n(i, {
+				value: "histogram",
+				children: a.histogram
+			}),
+			a?.bar && /* @__PURE__ */ n(i, {
+				value: "bar",
+				children: a.bar
+			}),
+			a?.lineDot && /* @__PURE__ */ n(i, {
+				value: "lineDot",
+				children: a.lineDot
+			}),
+			a?.lineCross && /* @__PURE__ */ n(i, {
+				value: "lineCross",
+				children: a.lineCross
+			}),
+			a?.dotPlot && /* @__PURE__ */ n(i, {
+				value: "dotPlot",
+				children: a.dotPlot
+			}),
+			a?.linePlot && /* @__PURE__ */ n(i, {
+				value: "linePlot",
+				children: a.linePlot
+			})
+		]
+	})]
+}) });
+d.propTypes = {
+	onChange: e.func.isRequired,
+	value: e.string.isRequired,
+	availableChartTypes: e.shape({
+		histogram: e.string,
+		bar: e.string,
+		lineDot: e.string,
+		lineCross: e.string,
+		dotPlot: e.string,
+		linePlot: e.string
+	}),
+	chartTypeLabel: e.string
+};
+//#endregion
+export { d as default };

package/dist/chart-types.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @synced-from pie-lib/packages/charting/src/chart-types.js
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+declare const _default: {
+    Bar: () => {
+        type: string;
+        Component: typeof import("./bars/bar.js").Bar;
+        name: string;
+    };
+    Histogram: () => {
+        type: string;
+        Component: typeof import("./bars/histogram.js").Histogram;
+        name: string;
+    };
+    LineDot: () => {
+        type: string;
+        Component: typeof import("./line/line-dot.js").LineDot;
+        name: string;
+    };
+    DotPlot: () => {
+        type: string;
+        Component: typeof import("./plot/dot.js").DotPlot;
+        name: string;
+    };
+    LinePlot: () => {
+        type: string;
+        Component: typeof import("./plot/line.js").LinePlot;
+        name: string;
+    };
+    LineCross: () => {
+        type: string;
+        Component: typeof import("./line/line-cross.js").LineCross;
+        name: string;
+    };
+};
+export default _default;

package/dist/chart-types.js

@@ -0,0 +1,17 @@
+import e from "./bars/bar.js";
+import t from "./bars/histogram.js";
+import n from "./line/line-dot.js";
+import r from "./line/line-cross.js";
+import i from "./plot/dot.js";
+import a from "./plot/line.js";
+//#region src/chart-types.ts
+var o = {
+	Bar: e,
+	Histogram: t,
+	LineDot: n,
+	DotPlot: i,
+	LinePlot: a,
+	LineCross: r
+};
+//#endregion
+export { o as default };

package/dist/chart.d.ts

@@ -0,0 +1,88 @@
+/**
+ * @synced-from pie-lib/packages/charting/src/chart.jsx
+ * @auto-generated
+ *
+ * This file is automatically synced from pie-elements and converted to TypeScript.
+ * Manual edits will be overwritten on next sync.
+ * To make changes, edit the upstream JavaScript file and run sync again.
+ */
+import React from 'react';
+import PropTypes from 'prop-types';
+export declare class Chart extends React.Component {
+    constructor(props: any);
+    static propTypes: {
+        className: PropTypes.Requireable<string>;
+        chartType: PropTypes.Validator<string>;
+        size: PropTypes.Requireable<PropTypes.InferProps<{
+            width: PropTypes.Requireable<number>;
+            height: PropTypes.Requireable<number>;
+        }>>;
+        domain: PropTypes.Requireable<PropTypes.InferProps<{
+            label: PropTypes.Requireable<string>;
+            min: PropTypes.Requireable<number>;
+            max: PropTypes.Requireable<number>;
+            axisLabel: PropTypes.Requireable<string>;
+        }>>;
+        data: PropTypes.Requireable<(PropTypes.InferProps<{
+            label: PropTypes.Requireable<string>;
+            value: PropTypes.Requireable<number>;
+        }> | null | undefined)[]>;
+        range: PropTypes.Requireable<PropTypes.InferProps<{
+            label: PropTypes.Requireable<string>;
+            min: PropTypes.Requireable<number>;
+            max: PropTypes.Requireable<number>;
+            step: PropTypes.Requireable<number>;
+            labelStep: PropTypes.Requireable<number>;
+            axisLabel: PropTypes.Requireable<string>;
+        }>>;
+        charts: PropTypes.Requireable<any[]>;
+        labelsPlaceholders: PropTypes.Requireable<object>;
+        title: PropTypes.Requireable<string>;
+        titlePlaceholder: PropTypes.Requireable<string>;
+        onDataChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onChangeLabels: PropTypes.Requireable<(...args: any[]) => any>;
+        onChangeTitle: PropTypes.Requireable<(...args: any[]) => any>;
+        error: PropTypes.Requireable<any>;
+        addCategoryEnabled: PropTypes.Requireable<boolean>;
+        showPixelGuides: PropTypes.Requireable<boolean>;
+        categoryDefaultLabel: PropTypes.Requireable<string>;
+        categoryDefaults: PropTypes.Requireable<object>;
+        defineChart: PropTypes.Requireable<boolean>;
+        theme: PropTypes.Requireable<object>;
+        chartingOptions: PropTypes.Requireable<object>;
+        changeInteractiveEnabled: PropTypes.Requireable<boolean>;
+        changeEditableEnabled: PropTypes.Requireable<boolean>;
+        language: PropTypes.Requireable<string>;
+        mathMlOptions: PropTypes.Requireable<object>;
+        labelsCharactersLimit: PropTypes.Requireable<number>;
+        correctData: PropTypes.Requireable<(PropTypes.InferProps<{
+            label: PropTypes.Requireable<string>;
+            value: PropTypes.Requireable<number>;
+        }> | null | undefined)[]>;
+    };
+    static defaultProps: {
+        size: {
+            width: number;
+            height: number;
+        };
+    };
+    state: {
+        charts: {
+            type: string;
+            Component: typeof import("./bars/bar.jsx").Bar;
+            name: string;
+        }[];
+        autoFocus: boolean;
+    };
+    generateMaskId(): string;
+    handleAlertDialog: (open: any, callback: any) => void;
+    getChart: any;
+    changeData: any;
+    changeCategory: any;
+    addCategory: any;
+    deleteCategory: any;
+    getFilteredCategories: any;
+    resetAutoFocus: any;
+    render(): React.JSX.Element;
+}
+export default Chart;