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

package/dist/line/common/line.js

@@ -0,0 +1,114 @@
+import e from "../../node_modules/.bun/@visx_group@3.12.0_f4eacebf2041cd4f/node_modules/@visx/group/esm/Group.js";
+import t from "../../node_modules/.bun/@visx_shape@3.12.0_f4eacebf2041cd4f/node_modules/@visx/shape/esm/shapes/LinePath.js";
+import n, { DragHandle as r } from "./drag-handle.js";
+import i from "react";
+import a from "prop-types";
+import { styled as o } from "@mui/material/styles";
+import { isEqual as s } from "@pie-element/shared-lodash";
+import { types as c } from "@pie-lib/plot";
+import { color as l } from "@pie-lib/render-ui";
+import { jsx as u, jsxs as d } from "react/jsx-runtime";
+//#region src/line/common/line.tsx
+var f = (e, t) => {
+	let { max: n } = t || {}, r = e.length;
+	return !n || !r ? [] : e.map((e, t) => ({
+		...e,
+		x: r > 1 ? t * (n / (r - 1)) : .5,
+		y: e.value
+	}));
+}, p = o(t)(() => ({
+	fill: "transparent",
+	stroke: l.defaults.TERTIARY,
+	strokeWidth: 3,
+	transition: "stroke 200ms ease-in, stroke-width 200ms ease-in"
+})), m = o(class extends i.Component {
+	static propTypes = {
+		onChange: a.func,
+		value: a.number,
+		label: a.string,
+		xBand: a.func,
+		index: a.number.isRequired,
+		graphProps: c.GraphPropsType.isRequired,
+		defineChart: a.bool,
+		data: a.arrayOf(a.shape({
+			label: a.string,
+			value: a.number
+		})),
+		CustomDraggableComponent: a.func,
+		correctData: a.array
+	};
+	static defaultProps = { index: 0 };
+	constructor(e) {
+		super(e), this.state = {
+			dragValue: void 0,
+			line: f(e.data, e.graphProps.domain)
+		};
+	}
+	UNSAFE_componentWillReceiveProps(e) {
+		s(this.props.data, e.data) || this.setState({ line: f(e.data, e.graphProps.domain) });
+	}
+	setDragValue = (e) => this.setState({ line: e });
+	dragStop = (e) => {
+		let { onChange: t } = this.props;
+		this.setState({ dragging: !1 }, () => {
+			t(e, this.state.line[e]);
+		});
+	};
+	dragValue = (e, t, n) => {
+		let r = [...this.state.line];
+		r[e].dragValue = n, this.setDragValue(r);
+	};
+	render() {
+		let { graphProps: e, data: t, CustomDraggableComponent: a, defineChart: o, correctData: s } = this.props, { line: c, dragging: l } = this.state, { scale: m } = e, h = l ? c : f(t, e.domain);
+		return /* @__PURE__ */ d(i.Fragment, { children: [/* @__PURE__ */ u(p, {
+			data: h,
+			x: (e) => m.x(e.x),
+			y: (e) => m.y(e.dragValue === void 0 ? e.y : e.dragValue),
+			className: "line"
+		}), h && h.map((t, i) => {
+			let c = o || t.interactive;
+			return /* @__PURE__ */ u(c ? n : r, {
+				x: t.x,
+				y: t.dragValue === void 0 ? t.y : t.dragValue,
+				interactive: c,
+				r: 6,
+				onDragStart: () => this.setState({ dragging: !0 }),
+				onDrag: (e) => this.dragValue(i, t.dragValue === void 0 ? t.y : t.dragValue, e),
+				onDragStop: () => this.dragStop(i),
+				graphProps: e,
+				CustomDraggableComponent: a,
+				correctness: t.correctness,
+				correctData: s,
+				label: t.label
+			}, `point-${t.x}-${i}`);
+		})] });
+	}
+})(() => ({ "& .line": {
+	fill: "transparent",
+	stroke: l.defaults.TERTIARY,
+	strokeWidth: 3,
+	transition: "stroke 200ms ease-in, stroke-width 200ms ease-in"
+} })), h = class extends i.Component {
+	static propTypes = {
+		data: a.array,
+		onChange: a.func,
+		xBand: a.func,
+		graphProps: c.GraphPropsType.isRequired,
+		CustomDraggableComponent: a.func,
+		defineChart: a.bool,
+		correctData: a.array
+	};
+	changeLine = (e, t) => {
+		let { onChange: n } = this.props, r = [...this.props.data], { dragValue: i, value: a } = t;
+		r[e].value = i >= 0 ? i : a, n(r);
+	};
+	render() {
+		let t = this.props;
+		return /* @__PURE__ */ u(e, { children: /* @__PURE__ */ u(m, {
+			...t,
+			onChange: this.changeLine
+		}) });
+	}
+};
+//#endregion
+export { h as default };

package/dist/line/line-cross.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @synced-from pie-lib/packages/charting/src/line/line-cross.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';
+export declare class LineCross extends React.Component {
+    static propTypes: {
+        data: PropTypes.Requireable<any[]>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        graphProps: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            scale: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                x: PropTypes.Validator<(...args: any[]) => any>;
+                y: PropTypes.Validator<(...args: any[]) => any>;
+            }>>>;
+            snap: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                x: PropTypes.Validator<(...args: any[]) => any>;
+                y: PropTypes.Validator<(...args: any[]) => any>;
+            }>>>;
+            domain: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                min: PropTypes.Validator<number>;
+                max: PropTypes.Validator<number>;
+                step: PropTypes.Requireable<number>;
+            }>>>;
+            range: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                min: PropTypes.Validator<number>;
+                max: PropTypes.Validator<number>;
+                step: PropTypes.Requireable<number>;
+            }>>>;
+            size: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                width: PropTypes.Validator<number>;
+                height: PropTypes.Validator<number>;
+            }>>>;
+        }>>>;
+    };
+    render(): React.JSX.Element;
+}
+declare const _default: () => {
+    type: string;
+    Component: typeof LineCross;
+    name: string;
+};
+export default _default;

package/dist/line/line-cross.js

@@ -0,0 +1,133 @@
+import e from "../node_modules/.bun/@visx_group@3.12.0_f4eacebf2041cd4f/node_modules/@visx/group/esm/Group.js";
+import t from "../node_modules/.bun/@visx_shape@3.12.0_f4eacebf2041cd4f/node_modules/@visx/shape/esm/shapes/LinePath.js";
+import { CorrectnessIndicator as n, SmallCorrectPointIndicator as r } from "../common/correctness-indicators.js";
+import { dataToXBand as i } from "../utils.js";
+import a from "./common/line.js";
+import o, { useState as 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 { color as d } from "@pie-lib/render-ui";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+//#region src/line/line-cross.tsx
+var m = l(t)(() => ({
+	stroke: d.defaults.TEXT,
+	transition: "fill 200ms linear, height 200ms linear",
+	"&.non-interactive": { stroke: d.disabled?.() || "#ccc" }
+})), h = l(e)(({ correctness: e, interactive: t }) => ({
+	stroke: d.defaults.TEXT,
+	transition: "fill 200ms linear, height 200ms linear",
+	...e && !t && {
+		fill: `${d.defaults.BLACK} !important`,
+		stroke: `${d.defaults.BLACK} !important`
+	},
+	"&.non-interactive": { stroke: d.disabled?.() || "#ccc" }
+})), g = l("circle")(() => ({
+	height: "20px",
+	fill: "transparent",
+	stroke: "transparent"
+})), _ = (e) => {
+	let { className: t, scale: i, x: a, y: o, r: c, correctness: l, interactive: u, correctData: _, label: v, ...y } = e, [b, x] = s(!1), S = c * 4, C = S / 2, w = i.x(a), T = i.y(o);
+	return /* @__PURE__ */ p(h, {
+		className: t,
+		correctness: l,
+		interactive: u,
+		children: [
+			/* @__PURE__ */ f(m, {
+				data: [{
+					x: i.x(a) - c,
+					y: i.y(o) + c
+				}, {
+					x: i.x(a) + c,
+					y: i.y(o) - c
+				}],
+				x: (e) => e.x,
+				y: (e) => e.y,
+				strokeWidth: 5,
+				style: { pointerEvents: "none" }
+			}, `point-${a}-${o}-1`),
+			/* @__PURE__ */ f(m, {
+				data: [{
+					x: i.x(a) - c,
+					y: i.y(o) - c
+				}, {
+					x: i.x(a) + c,
+					y: i.y(o) + c
+				}],
+				x: (e) => e.x,
+				y: (e) => e.y,
+				strokeWidth: 5,
+				style: { pointerEvents: "none" }
+			}, `point-${a}-${o}-2`),
+			b && /* @__PURE__ */ f("rect", {
+				x: w - C,
+				y: T - C,
+				width: S,
+				height: S,
+				stroke: d.defaults.BORDER_GRAY,
+				fill: "none",
+				strokeWidth: 2,
+				pointerEvents: "none"
+			}),
+			/* @__PURE__ */ f(g, {
+				cx: w,
+				cy: T,
+				r: c * 2,
+				onMouseEnter: () => x(!0),
+				onMouseLeave: () => x(!1),
+				...y
+			}),
+			/* @__PURE__ */ f(n, {
+				scale: i,
+				x: a,
+				y: o,
+				r: c,
+				correctness: l,
+				interactive: u
+			}),
+			/* @__PURE__ */ f(r, {
+				scale: i,
+				x: a,
+				r: c,
+				correctness: l,
+				correctData: _,
+				label: v
+			})
+		]
+	});
+};
+_.propTypes = {
+	scale: c.object,
+	x: c.number,
+	y: c.number,
+	r: c.number,
+	className: c.string,
+	correctness: c.shape({
+		value: c.string,
+		label: c.string
+	}),
+	interactive: c.bool,
+	correctData: c.array,
+	label: c.string
+};
+var v = class extends o.Component {
+	static propTypes = {
+		data: c.array,
+		onChange: c.func,
+		graphProps: u.GraphPropsType.isRequired
+	};
+	render() {
+		let e = this.props, { data: t, graphProps: n } = e, { scale: r = {}, size: o = {} } = n || {}, s = i(r.x, t, o.width, "lineCross");
+		return /* @__PURE__ */ f(a, {
+			...e,
+			xBand: s,
+			CustomDraggableComponent: _
+		});
+	}
+}, y = () => ({
+	type: "lineCross",
+	Component: v,
+	name: "Line Cross"
+});
+//#endregion
+export { y as default };

package/dist/line/line-dot.d.ts

@@ -0,0 +1,47 @@
+/**
+ * @synced-from pie-lib/packages/charting/src/line/line-dot.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';
+export declare class LineDot extends React.Component {
+    static propTypes: {
+        data: PropTypes.Requireable<any[]>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        graphProps: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            scale: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                x: PropTypes.Validator<(...args: any[]) => any>;
+                y: PropTypes.Validator<(...args: any[]) => any>;
+            }>>>;
+            snap: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                x: PropTypes.Validator<(...args: any[]) => any>;
+                y: PropTypes.Validator<(...args: any[]) => any>;
+            }>>>;
+            domain: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                min: PropTypes.Validator<number>;
+                max: PropTypes.Validator<number>;
+                step: PropTypes.Requireable<number>;
+            }>>>;
+            range: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                min: PropTypes.Validator<number>;
+                max: PropTypes.Validator<number>;
+                step: PropTypes.Requireable<number>;
+            }>>>;
+            size: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                width: PropTypes.Validator<number>;
+                height: PropTypes.Validator<number>;
+            }>>>;
+        }>>>;
+    };
+    render(): React.JSX.Element;
+}
+declare const _default: () => {
+    type: string;
+    Component: typeof LineDot;
+    name: string;
+};
+export default _default;

package/dist/line/line-dot.js

@@ -0,0 +1,101 @@
+import { CorrectnessIndicator as e, SmallCorrectPointIndicator as t } from "../common/correctness-indicators.js";
+import { dataToXBand as n } from "../utils.js";
+import r from "./common/line.js";
+import i from "react";
+import a from "prop-types";
+import { styled as o } from "@mui/material/styles";
+import { types as s } from "@pie-lib/plot";
+import { color as c } from "@pie-lib/render-ui";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/line/line-dot.tsx
+var d = o("circle")(() => ({})), f = o("circle")(() => ({
+	height: "20px",
+	fill: "transparent",
+	stroke: "none",
+	pointerEvents: "auto"
+})), p = ({ scale: n, x: r, y: a, r: o, correctness: s, interactive: p, correctData: m, label: h, ...g }) => {
+	let [_, v] = i.useState(!1), y = !s && p;
+	return /* @__PURE__ */ u("g", {
+		onMouseEnter: () => v(!0),
+		onMouseLeave: () => v(!1),
+		onTouchStart: () => v(!0),
+		onTouchEnd: () => v(!1),
+		children: [
+			/* @__PURE__ */ l(f, {
+				cx: n.x(r),
+				cy: n.y(a),
+				r: o * 3,
+				onMouseEnter: () => v(!0),
+				onMouseLeave: () => v(!1),
+				...g
+			}),
+			/* @__PURE__ */ l(d, {
+				cx: n.x(r),
+				cy: n.y(a),
+				r: o,
+				correctness: s,
+				interactive: p,
+				...g
+			}),
+			/* @__PURE__ */ l(e, {
+				scale: n,
+				x: r,
+				y: a,
+				r: o,
+				correctness: s,
+				interactive: p
+			}),
+			/* @__PURE__ */ l(t, {
+				scale: n,
+				x: r,
+				r: o,
+				correctness: s,
+				correctData: m,
+				label: h
+			}),
+			_ && y && /* @__PURE__ */ l("rect", {
+				x: n.x(r) - o * 2,
+				y: n.y(a) - o * 2,
+				width: o * 4,
+				height: o * 4,
+				stroke: c.defaults.BORDER_GRAY,
+				strokeWidth: "1",
+				fill: "none"
+			})
+		]
+	});
+};
+p.propTypes = {
+	scale: a.object,
+	x: a.number,
+	y: a.number,
+	r: a.number,
+	correctness: a.shape({
+		value: a.string,
+		label: a.string
+	}),
+	interactive: a.bool,
+	correctData: a.array,
+	label: a.string
+};
+var m = class extends i.Component {
+	static propTypes = {
+		data: a.array,
+		onChange: a.func,
+		graphProps: s.GraphPropsType.isRequired
+	};
+	render() {
+		let e = this.props, { data: t, graphProps: i } = e, { scale: a = {}, size: o = {} } = i || {}, s = n(a.x, t, o.width, "lineDot");
+		return /* @__PURE__ */ l(r, {
+			...e,
+			xBand: s,
+			CustomDraggableComponent: p
+		});
+	}
+}, h = () => ({
+	type: "lineDot",
+	Component: m,
+	name: "Line Dot"
+});
+//#endregion
+export { h as default };

package/dist/mark-label.d.ts

@@ -0,0 +1,55 @@
+/**
+ * @synced-from pie-lib/packages/charting/src/mark-label.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 const MarkLabel: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        autoFocus: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        error: PropTypes.Requireable<any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        graphProps: PropTypes.Requireable<PropTypes.InferProps<{
+            scale: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                x: PropTypes.Validator<(...args: any[]) => any>;
+                y: PropTypes.Validator<(...args: any[]) => any>;
+            }>>>;
+            snap: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                x: PropTypes.Validator<(...args: any[]) => any>;
+                y: PropTypes.Validator<(...args: any[]) => any>;
+            }>>>;
+            domain: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                min: PropTypes.Validator<number>;
+                max: PropTypes.Validator<number>;
+                step: PropTypes.Requireable<number>;
+            }>>>;
+            range: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                min: PropTypes.Validator<number>;
+                max: PropTypes.Validator<number>;
+                step: PropTypes.Requireable<number>;
+            }>>>;
+            size: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+                width: PropTypes.Validator<number>;
+                height: PropTypes.Validator<number>;
+            }>>>;
+        }>>;
+        inputRef: PropTypes.Requireable<(...args: any[]) => any>;
+        mark: PropTypes.Requireable<object>;
+        barWidth: PropTypes.Requireable<number>;
+        rotate: PropTypes.Requireable<number>;
+        correctness: PropTypes.Requireable<PropTypes.InferProps<{
+            value: PropTypes.Requireable<string>;
+            label: PropTypes.Requireable<string>;
+        }>>;
+        isHiddenLabel: PropTypes.Requireable<boolean>;
+        limitCharacters: PropTypes.Requireable<boolean>;
+        correctnessIndicator: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+    };
+};
+export default MarkLabel;

package/dist/mark-label.js

@@ -0,0 +1,138 @@
+import e from "./node_modules/.bun/clsx@2.1.1/node_modules/clsx/dist/clsx.js";
+import { AutosizeInput as t } from "./autosize-input.js";
+import { correct as n, disabled as r, incorrect as i } from "./common/styles.js";
+import { useCallback as a, useEffect as o, useRef as s, useState as 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 { color as f } from "@pie-lib/render-ui";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { renderMath as h } from "@pie-element/shared-math-rendering-mathjax";
+//#region src/mark-label.tsx
+var g = u("div")({
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center"
+});
+u("input")(({ theme: e }) => ({
+	float: "right",
+	fontFamily: e.typography.fontFamily,
+	fontSize: e.typography.fontSize,
+	border: "none",
+	"&.correct": n("color"),
+	"&.incorrect": i("color"),
+	"&.disabled": { backgroundColor: "transparent !important" },
+	"&.error": { border: `2px solid ${e.palette.error.main}` }
+}));
+var _ = u("div")(({ theme: e }) => ({
+	pointerEvents: "auto",
+	textAlign: "center",
+	fontSize: e.typography.fontSize + 2,
+	fontFamily: e.typography.fontFamily,
+	color: f.primaryDark(),
+	paddingTop: e.typography.fontSize / 2,
+	"&.disabled": {
+		...r("color"),
+		backgroundColor: "transparent !important"
+	},
+	"&.error": { border: `2px solid ${e.palette.error.main}` },
+	"&.correct": { ...n("color") },
+	"&.incorrect": { ...i("color") }
+}));
+function v(e) {
+	let t = e?.trim() || "";
+	return (/* @__PURE__ */ new RegExp(/^[1-9]*[0-9]*\s?[1-9][0-9]*\/[1-9][0-9]*$/)).test(t);
+}
+function y(e) {
+	let t = e?.trim() || "", n, r = "", i = t.split(" ");
+	n = i[1] && i[1].includes("/") ? i[1].split("/") || "" : t?.split("/") || "";
+	let a;
+	if (v(e)) return i[0] && i[1] && (r = i[0]), a = `\\(${r}\\frac{${n[0]}}{${n[1]}}\\)`, a;
+}
+var b = (n) => {
+	let [r, i] = c(null), l = a((e) => i(e), null), { mark: u = {}, disabled: d, inputRef: f, barWidth: v, rotate: b, correctness: x, autoFocus: S, error: C, isHiddenLabel: w, limitCharacters: T, correctnessIndicator: E } = n, [D, O] = c(u.label), [k, A] = c(y(u.label)), [j, M] = c(!1), N = s(null), P = (e) => {
+		T && e.target.value && e.target.value.length > 20 || O(e.target.value);
+	}, F = () => j === !1 && k !== void 0, I = (e) => {
+		A(y(u.label)), M(!1), n.onChange(e.target.value);
+	}, L = {};
+	return b && (L = {
+		width: "unset",
+		textAlign: "left"
+	}), o(() => {
+		O(u.label);
+	}, [u.label]), o(() => {
+		let e = N.current;
+		e && k && (e.innerHTML = k, h(e));
+	}, [D, k]), /* @__PURE__ */ m(g, { children: [E, F() ? /* @__PURE__ */ p(_, {
+		ref: (e) => {
+			N.current = e, typeof f == "function" && f(e);
+		},
+		className: e({
+			disabled: d,
+			error: C,
+			correct: u.editable && x?.label === "correct",
+			incorrect: u.editable && x?.label === "incorrect"
+		}),
+		onClick: () => M(!0),
+		style: {
+			minWidth: v,
+			position: "fixed",
+			transformOrigin: "left",
+			transform: `rotate(${b}deg)`,
+			visibility: w ? "hidden" : "unset",
+			marginTop: E ? "24px" : "0"
+		}
+	}) : /* @__PURE__ */ p(t, {
+		inputRef: (e) => {
+			l(e), typeof f == "function" && f(e);
+		},
+		name: "mark-label-input",
+		autoFocus: j || S,
+		disabled: d,
+		inputClassName: e(x && u.editable ? x.label : null, d && "disabled", C && "error"),
+		inputStyle: {
+			minWidth: v,
+			textAlign: "center",
+			background: "transparent",
+			boxSizing: "border-box",
+			paddingLeft: 0,
+			paddingRight: 0,
+			border: "none",
+			...L
+		},
+		value: D,
+		style: {
+			position: "fixed",
+			pointerEvents: "auto",
+			top: 0,
+			left: 0,
+			minWidth: v,
+			transformOrigin: "left",
+			transform: `rotate(${b}deg)`,
+			visibility: w ? "hidden" : "unset",
+			marginTop: E ? "24px" : "0"
+		},
+		onChange: P,
+		onBlur: I
+	})] });
+};
+b.propTypes = {
+	autoFocus: l.bool,
+	disabled: l.bool,
+	error: l.any,
+	onChange: l.func,
+	graphProps: d.GraphPropsType,
+	inputRef: l.func,
+	mark: l.object,
+	barWidth: l.number,
+	rotate: l.number,
+	correctness: l.shape({
+		value: l.string,
+		label: l.string
+	}),
+	isHiddenLabel: l.bool,
+	limitCharacters: l.bool,
+	correctnessIndicator: l.node
+};
+//#endregion
+export { b as default };