@pie-element/charting 12.4.0-beta.7 → 13.0.0-next.20261002094057

package/dist/controller/defaults.d.ts

@@ -0,0 +1,44 @@
+/**
+ * @synced-from pie-elements/packages/charting/controller/src/defaults.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.
+ */
+/**
+ * NOTE: There's no functionality described for graphTitle,
+ * rationale, scoringType, studentInstructions, teacherInstructions
+ * so there's no implementation (they are only added in model)
+ */
+declare const _default: {
+    addCategoryEnabled: boolean;
+    changeAddCategoryEnabled: boolean;
+    changeEditableEnabled: boolean;
+    changeInteractiveEnabled: boolean;
+    chartType: string;
+    correctAnswer: {};
+    data: never[];
+    domain: {};
+    graph: {
+        width: number;
+        height: number;
+    };
+    prompt: string;
+    promptEnabled: boolean;
+    range: {
+        label: string;
+        max: number;
+        min: number;
+        labelStep: number;
+    };
+    rationale: string;
+    rationaleEnabled: boolean;
+    scoringType: string;
+    studentInstructionsEnabled: boolean;
+    studentNewCategoryDefaultLabel: string;
+    teacherInstructions: string;
+    teacherInstructionsEnabled: boolean;
+    title: string;
+};
+export default _default;

package/dist/controller/defaults.js

@@ -0,0 +1,33 @@
+//#region src/controller/defaults.ts
+var e = {
+	addCategoryEnabled: !0,
+	changeAddCategoryEnabled: !1,
+	changeEditableEnabled: !1,
+	changeInteractiveEnabled: !1,
+	chartType: "lineCross",
+	correctAnswer: {},
+	data: [],
+	domain: {},
+	graph: {
+		width: 480,
+		height: 480
+	},
+	prompt: "",
+	promptEnabled: !0,
+	range: {
+		label: "",
+		max: 1,
+		min: 0,
+		labelStep: 1
+	},
+	rationale: "",
+	rationaleEnabled: !0,
+	scoringType: "all or nothing",
+	studentInstructionsEnabled: !0,
+	studentNewCategoryDefaultLabel: "New Category",
+	teacherInstructions: "",
+	teacherInstructionsEnabled: !0,
+	title: ""
+};
+//#endregion
+export { e as default };

package/dist/controller/index.d.ts

@@ -0,0 +1,28 @@
+/**
+ * @synced-from pie-elements/packages/charting/controller/src/index.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.
+ */
+export declare const checkLabelsEquality: (givenAnswerLabel: any, correctAnswerLabel: any) => boolean;
+export declare const setCorrectness: (answers: any, partialScoring: any) => any;
+export declare const normalize: (question: any) => any;
+export declare const getScore: (question: any, session: any, env?: {}) => {
+    score: number;
+    answers: any;
+};
+/**
+ * Generates detailed trace log for scoring evaluation
+ * @param {Object} model - the question model
+ * @param {Object} session - the student session
+ * @param {Object} env - the environment
+ * @returns {Array} traceLog - array of trace messages
+ */
+export declare const getLogTrace: (model: any, session: any, env: any) => string[];
+export declare const filterCategories: (categories: any) => any;
+export declare function model(question: any, session: any, env: any): Promise<unknown>;
+export declare function outcome(model: any, session: any, env: any): Promise<unknown>;
+export declare const createCorrectResponseSession: (question: any, env: any) => Promise<unknown>;
+export declare const validate: (model?: {}, config?: {}) => {};

package/dist/controller/index.js

@@ -0,0 +1,153 @@
+import e from "./defaults.js";
+import { isEmpty as t, isEqual as n, pick as r } from "@pie-element/shared-lodash";
+import i from "debug";
+import { partialScoring as a } from "@pie-element/shared-controller-utils";
+//#region src/controller/index.ts
+var o = i("@pie-element:graphing:controller"), s = (e) => (e || "").toLowerCase(), c = (e, t) => s(e) === s(t), l = (e, t) => e ? e.map((e) => ({
+	...e,
+	correctness: {
+		value: t ? "incorrect" : "correct",
+		label: t ? "incorrect" : "correct"
+	}
+})) : [], u = (t) => ({
+	...e,
+	...t
+}), d = (e, t, n = {}) => {
+	let { correctAnswer: r, data: i = [], scoringType: o } = e, u = [], d = a.enabled({ partialScoring: o === void 0 ? o : o === "partial scoring" }, n), { data: f = [] } = r || {}, m = p(i), h = l(t && t.answer || m, d), g = 0;
+	if (d) {
+		let e = 0, t = 0, n = (n, r) => {
+			let { value: i, label: a, index: o } = n, s = i === r.value, l = c(a, r.label);
+			e += 2, s && (t += 1, n.correctness.value = "correct"), l && (t += 1, n.correctness.label = "correct"), s && l && u.push({
+				label: a,
+				index: o
+			});
+		};
+		f.forEach((r, i) => {
+			let a = m[i], o = h[i];
+			o ? a ? !a.editable && o.interactive ? (e += 1, o.value === r.value && (t += 1, o.correctness.value = "correct", u.push({
+				label: o.label,
+				index: i
+			})), o.correctness.label = "correct") : a.editable && o.interactive ? n(o, r) : o.interactive || (o.correctness.value = "correct", o.correctness.label = "correct", u.push({
+				label: o.label,
+				index: i
+			})) : n(o, r) : e += 2;
+		}), g = e ? t / e : 0;
+	} else g = +(f.length === h.length), h = h.map((e, t) => {
+		let n = f[t], r = n ? e.value === n.value : !1, i = n ? s(e.label) === s(n.label) : !1;
+		return (!r || !i) && (g = 0), r && i && u.push({
+			label: e.label,
+			index: t
+		}), {
+			...e,
+			correctness: {
+				value: r ? "correct" : "incorrect",
+				label: i ? "correct" : "incorrect"
+			}
+		};
+	});
+	let _ = {
+		score: parseFloat(g.toFixed(2)),
+		answers: h
+	};
+	return n.extraProps && n.extraProps.correctResponseEnabled && (_.correctResponses = u), _;
+}, f = (e, t, n) => {
+	let r = [], { correctAnswer: i, data: o = [], scoringType: s } = e || {}, { data: l = [] } = i || {}, u = t && t.answer || [], f = a.enabled({ partialScoring: s === void 0 ? s : s === "partial scoring" }, n), m = p(o), h = u.length > 0 ? p(u) : m;
+	if (u.length || r.push("Student did not modify the chart. Initial chart is scored."), l.forEach((e, t) => {
+		let n = m[t], i = h[t];
+		if (!i) {
+			r.push(`Category ${t + 1}: missing (expected value '${e.value}', label '${e.label}').`);
+			return;
+		}
+		let a = i.value === e.value, o = c(i.label, e.label);
+		if (!i.interactive) {
+			r.push(`Category ${t + 1}: non-interactive category treated as correct.`);
+			return;
+		}
+		if (u.length > 0) {
+			let e = !n || i.value !== n.value, s = !n || !c(i.label, n.label);
+			if (!e && !s) {
+				a && o ? r.push(`Category ${t + 1}: unchanged from initial value and correct.`) : r.push(`Category ${t + 1}: unchanged from initial value but incorrect.`);
+				return;
+			}
+			let l = [];
+			e && l.push(`value ${a ? "correct" : "incorrect"}`), s && l.push(`label ${o ? "correct" : "incorrect"}`), r.push(`Category ${t + 1}: modified - ${l.join(", ")}.`);
+		} else a && o ? r.push(`Category ${t + 1}: initial values are correct.`) : a ? r.push(`Category ${t + 1}: initial value correct, label incorrect.`) : o ? r.push(`Category ${t + 1}: initial value incorrect, label correct.`) : r.push(`Category ${t + 1}: initial value and label incorrect.`);
+	}), h.length > l.length) {
+		let e = h.length - l.length;
+		r.push(`${e} extra category(ies) provided beyond expected number.`);
+	}
+	f ? (r.push("Score calculated using partial scoring."), r.push("Student receives credit for each correct value and label independently.")) : (r.push("Score calculated using all-or-nothing scoring."), r.push("Student must match all category values and labels exactly for full credit."));
+	let g = d(e, t, n);
+	return r.push(`Score: ${g.score}.`), r;
+}, p = (e) => e ? e.map(({ deletable: e, ...t }) => t) : [];
+function m(e, t, n) {
+	return new Promise((r) => {
+		let i = u(e), { addCategoryEnabled: a, chartType: s, data: c, domain: l, graph: f, prompt: m, promptEnabled: h, range: g, rationale: _, title: v, rationaleEnabled: y, teacherInstructions: b, teacherInstructionsEnabled: x, correctAnswer: S, scoringType: C, studentNewCategoryDefaultLabel: w, language: T, extraCSSRules: E } = i, D = {
+			addCategoryEnabled: a,
+			chartType: s,
+			data: p(c),
+			domain: l,
+			graph: f,
+			prompt: h ? m : null,
+			range: g,
+			rationale: _,
+			title: v,
+			size: f,
+			showToggle: !1,
+			correctness: {
+				correctness: "incorrect",
+				score: "0%"
+			},
+			disabled: n.mode !== "gather",
+			scoringType: C,
+			studentNewCategoryDefaultLabel: w,
+			language: T,
+			env: n,
+			extraCSSRules: E
+		}, O = d(i, t, n), k = p(O.answers);
+		n.mode === "view" && (D.correctedAnswer = k.map(({ correctness: e, ...t }) => ({
+			...t,
+			interactive: !1
+		})), D.addCategoryEnabled = !1), n.mode === "evaluate" && (D.correctedAnswer = k, D.correctAnswer = S, D.showToggle = !!S?.data?.length && O.score !== 1, D.addCategoryEnabled = !1, D.showKeyLegend = !0), n.role === "instructor" && (n.mode === "view" || n.mode === "evaluate") ? (D.rationale = y ? _ : null, D.teacherInstructions = x ? b : null) : (D.rationale = null, D.teacherInstructions = null), o("base: ", D), r(D);
+	});
+}
+function h(e, n, r) {
+	return new Promise((i) => {
+		let a = f(e, n, r), o = d(e, n, r), s = {
+			score: o.score,
+			empty: !n || t(n),
+			traceLog: a
+		};
+		r.extraProps && r.extraProps.correctResponseEnabled && (s.extraProps = { correctResponse: o.correctResponses }), i(s);
+	});
+}
+var g = (e, t) => new Promise((n) => {
+	if (t.mode !== "evaluate" && t.role === "instructor") {
+		let { correctAnswer: r } = e, i = r && r.data;
+		if (t.mode === "gather") {
+			let { data: t } = e;
+			i = (r && r.data || []).map((e, n) => ({
+				...t[n],
+				...e
+			}));
+		}
+		n({
+			answer: i,
+			id: "1"
+		});
+	} else return n(null);
+}), _ = (e) => (e || "").replaceAll(/<[^>]*>/g, ""), v = (e) => (e || "").replace(/(<(?!img|iframe|source)([^>]+)>)/gi, ""), y = (e = {}, i = {}) => {
+	let { correctAnswer: a, data: o } = e || {}, { data: s } = a || {}, c = s || [], l = {}, u = {}, d = {};
+	return [
+		"teacherInstructions",
+		"prompt",
+		"rationale"
+	].forEach((t) => {
+		i[t]?.required && !v(e[t]) && (l[t] = "This field is required.");
+	}), c.forEach((e, t) => {
+		let { label: n } = e;
+		_(n) ? c.some((e, r) => e.label === n && t !== r) && (d[t] = "Category names should be unique. ") : d[t] = "Content should not be empty. ";
+	}), c.length < 1 || c.length > 20 ? u.categoriesError = "The correct answer should include between 1 and 20 categories." : n(o.map((e) => r(e, "value", "label")), s.map((e) => r(e, "value", "label"))) && (u.identicalError = "Correct answer should not be identical to the chart’s initial state"), t(d) || (l.categoryErrors = d), t(u) || (l.correctAnswerErrors = u), l;
+};
+//#endregion
+export { c as checkLabelsEquality, g as createCorrectResponseSession, p as filterCategories, f as getLogTrace, d as getScore, m as model, u as normalize, h as outcome, l as setCorrectness, y as validate };

package/dist/delivery/index.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @synced-from pie-elements/packages/charting/src/index.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 Main from './main.js';
+export { Main as Component };
+export default class Graphing extends HTMLElement {
+    constructor();
+    _scheduleMathRender: any;
+    _initMathObserver(): void;
+    _disconnectMathObserver(): void;
+    set model(m: any);
+    set session(s: any);
+    get session(): any;
+    connectedCallback(): void;
+    isComplete: (answer: any) => boolean;
+    changeAnswers: any;
+    _render(): void;
+    disconnectedCallback(): void;
+}

package/dist/delivery/index.js

@@ -0,0 +1,64 @@
+import { Main as e } from "./main.js";
+import t from "react";
+import { createRoot as n } from "react-dom/client";
+import { ModelSetEvent as r, SessionChangedEvent as i } from "@pie-element/shared-player-events";
+import { renderMath as a } from "@pie-element/shared-math-rendering-mathjax";
+//#region src/delivery/index.ts
+var o = class extends HTMLElement {
+	constructor() {
+		super(), this._root = null, this._mathObserver = null, this._mathRenderPending = !1;
+	}
+	_scheduleMathRender = () => {
+		this._mathRenderPending || (this._mathRenderPending = !0, requestAnimationFrame(() => {
+			this._mathObserver && this._mathObserver.disconnect(), a(this), this._mathRenderPending = !1, setTimeout(() => {
+				this._mathObserver && this._mathObserver.observe(this, {
+					childList: !0,
+					subtree: !0
+				});
+			}, 50);
+		}));
+	};
+	_initMathObserver() {
+		this._mathObserver || (this._mathObserver = new MutationObserver(this._scheduleMathRender), this._mathObserver.observe(this, {
+			childList: !0,
+			subtree: !0
+		}));
+	}
+	_disconnectMathObserver() {
+		this._mathObserver &&= (this._mathObserver.disconnect(), null);
+	}
+	set model(e) {
+		this._model = e, this._session && this.isComplete(this._session.answer) ? this.dispatchEvent(new r(this.tagName.toLowerCase(), !0, !!this._model)) : this.dispatchEvent(new r(this.tagName.toLowerCase(), !1, !!this._model)), this._render();
+	}
+	set session(e) {
+		this._session = e, this._render();
+	}
+	get session() {
+		return this._session;
+	}
+	connectedCallback() {
+		this._initMathObserver(), this._render();
+	}
+	isComplete = (e) => Array.isArray(e) && e.length > 0;
+	changeAnswers = (e) => {
+		this._session.answer = e, this.dispatchEvent(new i(this.tagName.toLowerCase(), this.isComplete(this._session.answer))), this._render();
+	};
+	_render() {
+		if (!this._model || !this._session) return;
+		this._initMathObserver();
+		let r = {
+			...this._model,
+			data: this._model.data ? [...this._model.data] : this._model.data
+		}, i = t.createElement(e, {
+			model: r,
+			categories: this._session.answer,
+			onAnswersChange: this.changeAnswers
+		});
+		this._root ||= n(this), this._root.render(i);
+	}
+	disconnectedCallback() {
+		this._disconnectMathObserver(), this._root &&= (this._root.unmount(), null);
+	}
+};
+//#endregion
+export { e as Component, o as default };

package/dist/delivery/main.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @synced-from pie-elements/packages/charting/src/main.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 Main extends React.Component {
+    static propTypes: {
+        model: PropTypes.Validator<object>;
+        onAnswersChange: PropTypes.Requireable<(...args: any[]) => any>;
+        categories: PropTypes.Requireable<any[]>;
+    };
+    constructor(props: any);
+    componentDidUpdate(prevProps: any): void;
+    changeData: (data: any) => void;
+    toggleCorrect: (showingCorrect: any) => void;
+    render(): React.JSX.Element;
+}
+export default Main;

package/dist/delivery/main.js

@@ -0,0 +1,128 @@
+import e from "react";
+import t from "prop-types";
+import { styled as n } from "@mui/material/styles";
+import * as r from "@pie-lib/render-ui";
+import { Collapsible as i, PreviewPrompt as a, UiLayout as o, color as s, hasMedia as c, hasText as l } from "@pie-lib/render-ui";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+import { Chart as f, KeyLegend as p, chartTypes as m } from "@pie-lib/charting";
+import { isEqual as h } from "@pie-element/shared-lodash";
+import g from "@pie-lib/correct-answer-toggle";
+//#region src/delivery/main.tsx
+function _(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function v(e, t) {
+	return !e || _(e) ? e : _(e.default) ? e.default : t && _(e[t]) ? e[t] : t && _(e[t]?.default) ? e[t].default : e;
+}
+var y = v(o, "UiLayout") || v(w.UiLayout, "UiLayout"), b = v(a, "PreviewPrompt") || v(w.PreviewPrompt, "PreviewPrompt"), x = v(i, "Collapsible") || v(w.Collapsible, "Collapsible"), S = r, C = S.default, w = C && typeof C == "object" ? C : S, T = n(y)({
+	color: s.text(),
+	backgroundColor: s.background(),
+	overflowX: "scroll",
+	overflowY: "hidden"
+}), E = n(f)(({ theme: e }) => ({
+	marginTop: e.spacing(2),
+	marginBottom: e.spacing(2)
+})), D = n(x)(({ theme: e }) => ({ marginBottom: e.spacing(2) })), O = class extends e.Component {
+	static propTypes = {
+		model: t.object.isRequired,
+		onAnswersChange: t.func,
+		categories: t.array
+	};
+	constructor(e) {
+		super(e), this.state = {
+			categories: e.categories || e.model.data,
+			showingCorrect: !1
+		};
+	}
+	componentDidUpdate(e) {
+		h(e.categories, this.props.categories) ? h(e.model.data, this.props.model.data) || this.setState({ categories: this.props.model.data }) : this.setState({ categories: this.props.categories });
+	}
+	changeData = (e) => this.setState({ categories: e }, () => this.props.onAnswersChange(e));
+	toggleCorrect = (e) => this.setState({ showingCorrect: e });
+	render() {
+		let { categories: e, showingCorrect: t } = this.state, { model: n } = this.props, { teacherInstructions: r, prompt: i, chartType: a, size: o, domain: s, range: f, title: h, addCategoryEnabled: _, studentNewCategoryDefaultLabel: v, showToggle: y, rationale: S, correctAnswer: C, language: w, env: O, showKeyLegend: k } = n, { correctedAnswer: A, extraCSSRules: j } = n, M = (C?.data || []).map((e) => ({
+			...e,
+			interactive: !1,
+			editable: !1
+		})), { mode: N } = O || {};
+		N === "view" && (A = (A || []).map((e) => ({
+			...e,
+			editable: !1
+		})));
+		let P = n.rationale && (l(n.rationale) || c(n.rationale));
+		return /* @__PURE__ */ d(T, {
+			extraCSSRules: j,
+			children: [
+				n.teacherInstructions && (l(n.teacherInstructions) || c(n.teacherInstructions)) && /* @__PURE__ */ u(D, {
+					labels: {
+						hidden: "Show Teacher Instructions",
+						visible: "Hide Teacher Instructions"
+					},
+					children: /* @__PURE__ */ u(b, { prompt: r })
+				}),
+				i && /* @__PURE__ */ u(b, {
+					className: "prompt",
+					prompt: i
+				}),
+				/* @__PURE__ */ u(g, {
+					show: y,
+					toggled: t,
+					onToggle: this.toggleCorrect,
+					language: w
+				}),
+				t && y ? /* @__PURE__ */ u(E, {
+					chartType: a,
+					size: o,
+					domain: s,
+					range: f,
+					charts: [
+						m.Bar(),
+						m.Histogram(),
+						m.LineDot(),
+						m.LineCross(),
+						m.DotPlot(),
+						m.LinePlot()
+					],
+					data: M || e,
+					title: h,
+					onDataChange: this.changeData,
+					addCategoryEnabled: !1,
+					categoryDefaultLabel: v,
+					language: w,
+					labelsPlaceholders: {}
+				}) : /* @__PURE__ */ u(E, {
+					chartType: a,
+					size: o,
+					domain: s,
+					range: f,
+					charts: [
+						m.Bar(),
+						m.Histogram(),
+						m.LineDot(),
+						m.LineCross(),
+						m.DotPlot(),
+						m.LinePlot()
+					],
+					data: A || e,
+					title: h,
+					onDataChange: this.changeData,
+					addCategoryEnabled: _,
+					categoryDefaultLabel: v,
+					language: w,
+					labelsPlaceholders: {},
+					correctData: y ? M : void 0
+				}),
+				!t && k && /* @__PURE__ */ u(p, { language: w }),
+				P && /* @__PURE__ */ u(x, {
+					labels: {
+						hidden: "Show Rationale",
+						visible: "Hide Rationale"
+					},
+					children: /* @__PURE__ */ u(b, { prompt: S })
+				})
+			]
+		});
+	}
+};
+//#endregion
+export { O as Main, O as default };

package/dist/index.d.ts

@@ -0,0 +1 @@
+export { default } from './delivery/index.js';

package/dist/index.iife.d.ts

@@ -0,0 +1,8 @@
+/**
+ * IIFE entry point for charting element
+ * This file is only used for IIFE builds and includes auto-registration
+ *
+ * @sync-generated - Auto-generated during sync from pie-elements
+ */
+import Element from './index.js';
+export default Element;