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

package/dist/chart.js

@@ -0,0 +1,250 @@
+import e from "./grid.js";
+import { dataToXBand as t, getDomainAndRangeByChartType as n, getGridLinesAndAxisByChartType as r, getTopPadding as i } from "./utils.js";
+import a from "./axes.js";
+import o from "./chart-types.js";
+import s from "./actions-button.js";
+import c from "react";
+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";
+//#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 {
+	constructor(e) {
+		super(e), this.state = {
+			dialog: { open: !1 },
+			actionsAnchorEl: null
+		}, this.maskUid = this.generateMaskId();
+	}
+	static propTypes = {
+		className: l.string,
+		chartType: l.string.isRequired,
+		size: l.shape({
+			width: l.number,
+			height: l.number
+		}),
+		domain: l.shape({
+			label: l.string,
+			min: l.number,
+			max: l.number,
+			axisLabel: l.string
+		}),
+		data: l.arrayOf(l.shape({
+			label: l.string,
+			value: l.number
+		})),
+		range: l.shape({
+			label: l.string,
+			min: l.number,
+			max: l.number,
+			step: l.number,
+			labelStep: l.number,
+			axisLabel: l.string
+		}),
+		charts: l.array,
+		labelsPlaceholders: l.object,
+		title: l.string,
+		titlePlaceholder: l.string,
+		onDataChange: l.func,
+		onChangeLabels: l.func,
+		onChangeTitle: l.func,
+		error: l.any,
+		addCategoryEnabled: l.bool,
+		showPixelGuides: l.bool,
+		categoryDefaultLabel: l.string,
+		categoryDefaults: l.object,
+		defineChart: l.bool,
+		theme: l.object,
+		chartingOptions: l.object,
+		changeInteractiveEnabled: l.bool,
+		changeEditableEnabled: l.bool,
+		language: l.string,
+		mathMlOptions: l.object,
+		labelsCharactersLimit: l.number,
+		correctData: l.arrayOf(l.shape({
+			label: l.string,
+			value: l.number
+		}))
+	};
+	static defaultProps = { size: {
+		width: 480,
+		height: 480
+	} };
+	state = {
+		charts: [
+			o.Bar(),
+			o.Histogram(),
+			o.LineDot(),
+			o.LineCross(),
+			o.DotPlot(),
+			o.LinePlot()
+		],
+		autoFocus: !1
+	};
+	generateMaskId() {
+		return "chart-" + (Math.random() * 1e4).toFixed();
+	}
+	handleAlertDialog = (e, t) => this.setState({ dialog: { open: e } }, t);
+	getChart = () => {
+		let e = this.props.charts || this.state.charts, { chartType: t } = this.props, n = null, r = null;
+		return t ? (r = e && e.find((e) => e.type === t), n = r && r.Component) : (r = e && e[0], n = r && r.Component, t = r && r.type), {
+			type: t,
+			ChartComponent: n
+		};
+	};
+	changeData = (e) => {
+		let { onDataChange: t } = this.props;
+		t(e);
+	};
+	changeCategory = (e, t) => {
+		let n = parseInt(e, 10);
+		if (n >= 0) {
+			let { data: e, onDataChange: r } = this.props;
+			e[n] = {
+				...e[n],
+				...t
+			}, r(e);
+		}
+	};
+	addCategory = () => {
+		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", {
+				count: 20,
+				lng: a
+			}),
+			onConfirm: () => this.handleAlertDialog(!1)
+		} }) : (this.setState({ autoFocus: !0 }), e([...t, {
+			inDefineChart: r,
+			label: n || y.t("charting.newLabel", { lng: a }),
+			value: 0,
+			deletable: !0,
+			editable: i ? i?.editable : !0,
+			interactive: i ? i?.interactive : !0
+		}]));
+	};
+	deleteCategory = (e) => {
+		let { data: t, onDataChange: n } = this.props;
+		typeof e != "number" || e < 0 || t && t.length > 0 && n(t.filter((t, n) => n !== e));
+	};
+	getFilteredCategories = () => {
+		let { data: e, defineChart: t } = this.props;
+		return e ? e.map((e) => ({
+			...e,
+			deletable: t || e.deletable
+		})) : [];
+	};
+	resetAutoFocus = () => {
+		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 = {
+			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 = {
+			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, {
+			title: d,
+			onChangeTitle: v,
+			disabledTitle: !F,
+			showTitle: !0,
+			showLabels: !0,
+			labels: R,
+			onChangeLabels: y,
+			labelsPlaceholders: S,
+			titlePlaceholder: C,
+			defineChart: F,
+			disabledLabels: !F,
+			isChart: !0,
+			showPixelGuides: D,
+			rootRef: (e) => this.rootNode = e,
+			mathMlOptions: k,
+			labelsCharactersLimit: j,
+			...Q,
+			children: [
+				/* @__PURE__ */ g(e, {
+					...G,
+					xBand: J,
+					rowTickValues: U,
+					columnTickValues: H
+				}),
+				/* @__PURE__ */ g(a, {
+					autoFocus: this.state.autoFocus,
+					onAutoFocusUsed: this.resetAutoFocus,
+					...G,
+					defineChart: F,
+					categories: B,
+					xBand: J,
+					leftAxis: W,
+					onChange: this.changeData,
+					onChangeCategory: this.changeCategory,
+					chartingOptions: l,
+					changeInteractiveEnabled: T,
+					changeEditableEnabled: E,
+					top: Z,
+					error: O,
+					showCorrectness: N === "linePlot" || N === "dotPlot"
+				}),
+				w ? /* @__PURE__ */ g("foreignObject", {
+					x: I,
+					y: L - 16,
+					width: I,
+					height: L,
+					children: /* @__PURE__ */ g("div", {
+						xmlns: "http://www.w3.org/1999/xhtml",
+						style: {
+							display: "flex",
+							justifyContent: "flex-start"
+						},
+						children: /* @__PURE__ */ g(s, {
+							categories: B,
+							addCategory: this.addCategory,
+							deleteCategory: this.deleteCategory,
+							language: A
+						})
+					})
+				}) : null,
+				/* @__PURE__ */ g("mask", {
+					id: `${this.maskUid}`,
+					children: /* @__PURE__ */ g("rect", {
+						...K,
+						fill: "white"
+					})
+				}),
+				/* @__PURE__ */ g("g", {
+					id: "marks",
+					mask: `url('#${this.maskUid}')`,
+					children: z && /* @__PURE__ */ g(z, {
+						...G,
+						data: B,
+						height: Q.graphProps.size.height,
+						defineChart: F,
+						onChange: this.changeData,
+						onChangeCategory: this.changeCategory,
+						correctData: M
+					})
+				})
+			]
+		}), /* @__PURE__ */ g(h, {
+			open: P.open,
+			title: P.title,
+			text: P.text,
+			onClose: P.onClose,
+			onConfirm: P.onConfirm
+		})] });
+	}
+};
+//#endregion
+export { S as default };

package/dist/common/correctness-indicators.d.ts

@@ -0,0 +1,70 @@
+/**
+ * @synced-from pie-lib/packages/charting/src/common/correctness-indicators.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 CorrectnessIndicator: {
+    ({ scale, x, y, correctness, interactive }: {
+        scale: any;
+        x: any;
+        y: any;
+        correctness: any;
+        interactive: any;
+    }): React.JSX.Element | null;
+    propTypes: {
+        scale: PropTypes.Requireable<PropTypes.InferProps<{
+            x: PropTypes.Requireable<(...args: any[]) => any>;
+            y: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>;
+        x: PropTypes.Validator<number>;
+        y: PropTypes.Validator<number>;
+        correctness: PropTypes.Requireable<PropTypes.InferProps<{
+            value: PropTypes.Requireable<string>;
+            label: PropTypes.Requireable<string>;
+        }>>;
+        interactive: PropTypes.Requireable<boolean>;
+    };
+};
+export declare const SmallCorrectPointIndicator: {
+    ({ scale, x, correctness, correctData, label }: {
+        scale: any;
+        x: any;
+        correctness: any;
+        correctData: any;
+        label: any;
+    }): React.JSX.Element | null;
+    propTypes: {
+        scale: PropTypes.Validator<NonNullable<PropTypes.InferProps<{
+            x: PropTypes.Requireable<(...args: any[]) => any>;
+            y: PropTypes.Requireable<(...args: any[]) => any>;
+        }>>>;
+        x: PropTypes.Validator<number>;
+        correctness: PropTypes.Requireable<PropTypes.InferProps<{
+            value: PropTypes.Requireable<string>;
+            label: PropTypes.Requireable<string>;
+        }>>;
+        correctData: PropTypes.Requireable<(PropTypes.InferProps<{
+            label: PropTypes.Requireable<string>;
+            value: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
+        }> | null | undefined)[]>;
+        label: PropTypes.Requireable<string>;
+    };
+};
+export declare const TickCorrectnessIndicator: {
+    ({ correctness, interactive }: {
+        correctness: any;
+        interactive: any;
+    }): React.JSX.Element | null;
+    propTypes: {
+        correctness: PropTypes.Requireable<PropTypes.InferProps<{
+            value: PropTypes.Requireable<string>;
+            label: PropTypes.Requireable<string>;
+        }>>;
+        interactive: PropTypes.Requireable<boolean>;
+    };
+};

package/dist/common/correctness-indicators.js

@@ -0,0 +1,106 @@
+import "react";
+import e from "prop-types";
+import { styled as t } from "@mui/material/styles";
+import { color as n } from "@pie-lib/render-ui";
+import { jsx as r } from "react/jsx-runtime";
+import i from "@mui/icons-material/Check";
+import a from "@mui/icons-material/Close";
+//#region src/common/correctness-indicators.tsx
+var o = t(i)(({ theme: e }) => ({
+	borderRadius: e.spacing(2),
+	color: n.defaults.WHITE,
+	fontSize: "16px",
+	width: "16px",
+	height: "16px",
+	padding: "2px",
+	border: `1px solid ${n.defaults.WHITE}`,
+	stroke: "initial",
+	boxSizing: "unset",
+	backgroundColor: n.correct(),
+	display: "block",
+	"&.small": {
+		fontSize: "10px",
+		width: "10px",
+		height: "10px"
+	}
+})), s = t(a)(({ theme: e }) => ({
+	borderRadius: e.spacing(2),
+	color: n.defaults.WHITE,
+	fontSize: "16px",
+	width: "16px",
+	height: "16px",
+	padding: "2px",
+	border: `1px solid ${n.defaults.WHITE}`,
+	stroke: "initial",
+	boxSizing: "unset",
+	backgroundColor: n.incorrectWithIcon(),
+	display: "block",
+	"&.small": {
+		fontSize: "10px",
+		width: "10px",
+		height: "10px"
+	}
+})), c = ({ scale: e, x: t, y: n, correctness: i, interactive: a }) => {
+	if (!i || !a) return null;
+	let c = e ? e.x(t) : t, l = e ? e.y(n) : n, u = i.value === "correct";
+	return /* @__PURE__ */ r("foreignObject", {
+		x: c - 11,
+		y: l - 11,
+		width: 22,
+		height: 22,
+		children: r(u ? o : s, { title: i.label })
+	});
+}, l = ({ scale: e, x: t, correctness: n, correctData: i, label: a }) => {
+	if (n && n.value === "incorrect") {
+		let s = parseFloat(i.find((e) => e.label === a)?.value);
+		if (isNaN(s)) return null;
+		let c = e.y(s) - 7.5;
+		return /* @__PURE__ */ r("foreignObject", {
+			x: e.x(t) - 7.5,
+			y: c,
+			width: 15,
+			height: 15,
+			children: /* @__PURE__ */ r(o, {
+				className: "small",
+				title: n.label
+			})
+		});
+	}
+	return null;
+}, u = ({ correctness: e, interactive: t }) => !e || !t ? null : e.value === "correct" ? /* @__PURE__ */ r(o, { title: e.label }) : /* @__PURE__ */ r(s, { title: e.label });
+c.propTypes = {
+	scale: e.shape({
+		x: e.func,
+		y: e.func
+	}),
+	x: e.number.isRequired,
+	y: e.number.isRequired,
+	correctness: e.shape({
+		value: e.string,
+		label: e.string
+	}),
+	interactive: e.bool
+}, l.propTypes = {
+	scale: e.shape({
+		x: e.func,
+		y: e.func
+	}).isRequired,
+	x: e.number.isRequired,
+	correctness: e.shape({
+		value: e.string,
+		label: e.string
+	}),
+	correctData: e.arrayOf(e.shape({
+		label: e.string,
+		value: e.oneOfType([e.string, e.number])
+	})),
+	label: e.string
+}, u.propTypes = {
+	correctness: e.shape({
+		value: e.string,
+		label: e.string
+	}),
+	interactive: e.bool
+};
+//#endregion
+export { c as CorrectnessIndicator, l as SmallCorrectPointIndicator, u as TickCorrectnessIndicator };

package/dist/common/drag-handle.d.ts

@@ -0,0 +1,129 @@
+/**
+ * @synced-from pie-lib/packages/charting/src/common/drag-handle.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 DragHandle: {
+    ({ x, y, width, graphProps, interactive, isHovered, correctness, isPlot, ...rest }: {
+        [x: string]: any;
+        x: any;
+        y: any;
+        width: any;
+        graphProps: any;
+        interactive: any;
+        isHovered: any;
+        correctness: any;
+        isPlot: any;
+    }): React.JSX.Element;
+    propTypes: {
+        x: PropTypes.Validator<number>;
+        y: PropTypes.Validator<number>;
+        width: PropTypes.Requireable<number>;
+        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>;
+            }>>>;
+        }>>>;
+        interactive: PropTypes.Requireable<boolean>;
+        isHovered: PropTypes.Requireable<boolean>;
+        correctness: PropTypes.Requireable<PropTypes.InferProps<{
+            value: PropTypes.Requireable<string>;
+            label: PropTypes.Requireable<string>;
+        }>>;
+        isPlot: PropTypes.Requireable<boolean>;
+    };
+};
+export declare const D: {
+    new (props: any): {
+        grid: any;
+        onStart: any;
+        position: any;
+        tiny: any;
+        getScaledBounds: any;
+        getClientPoint: any;
+        skipDragOutsideOfBounds: any;
+        onDrag: any;
+        getDelta: any;
+        applyDelta: any;
+        onStop: any;
+        render(): React.JSX.Element;
+        context: unknown;
+        setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<{}>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
+        readonly props: Readonly<{}>;
+        state: Readonly<{}>;
+        refs: {
+            [key: string]: React.ReactInstance;
+        };
+        componentDidMount?(): void;
+        shouldComponentUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): boolean;
+        componentWillUnmount?(): void;
+        componentDidCatch?(error: Error, errorInfo: React.ErrorInfo): void;
+        getSnapshotBeforeUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>): any;
+        componentDidUpdate?(prevProps: Readonly<{}>, prevState: Readonly<{}>, snapshot?: any): void;
+        componentWillMount?(): void;
+        UNSAFE_componentWillMount?(): void;
+        componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillReceiveProps?(nextProps: Readonly<{}>, nextContext: any): void;
+        componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+        UNSAFE_componentWillUpdate?(nextProps: Readonly<{}>, nextState: Readonly<{}>, nextContext: any): void;
+    };
+    propTypes: {
+        disabled: PropTypes.Requireable<boolean>;
+        onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
+        onDrag: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragStop: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        onMove: 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>;
+            }>>>;
+        }>>>;
+    };
+    contextType?: React.Context<any> | undefined;
+};
+export default D;

package/dist/common/drag-handle.js

@@ -0,0 +1,120 @@
+import { getScale as e } from "../utils.js";
+import t from "./drag-icon.js";
+import "react";
+import n from "prop-types";
+import { styled as r } from "@mui/material/styles";
+import { gridDraggable as i, types as a, utils as o } from "@pie-lib/plot";
+import { color as s } from "@pie-lib/render-ui";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import u from "@mui/icons-material/Check";
+import d from "@mui/icons-material/Close";
+//#region src/common/drag-handle.tsx
+var f = r("svg")(() => ({ overflow: "visible !important" })), p = r("ellipse")(() => ({
+	fill: "transparent",
+	clipPath: "polygon(50% 0%, 100% 0%, 100% 50%, 0% 50%, 0% 0%)"
+})), m = r(u)(() => ({
+	backgroundColor: s.correct(),
+	borderRadius: "16px",
+	color: s.defaults.WHITE,
+	fontSize: "16px",
+	padding: "2px",
+	border: `4px solid ${s.defaults.WHITE}`,
+	width: "16px",
+	height: "16px",
+	boxSizing: "unset"
+})), h = r(d)(() => ({
+	backgroundColor: s.incorrectWithIcon(),
+	borderRadius: "16px",
+	color: s.defaults.WHITE,
+	fontSize: "16px",
+	padding: "2px",
+	border: `4px solid ${s.defaults.WHITE}`,
+	width: "16px",
+	height: "16px",
+	boxSizing: "unset"
+})), g = ({ x: n, y: r, width: i, graphProps: a, interactive: o, isHovered: u, correctness: d, isPlot: g, ..._ }) => {
+	let { scale: v } = a, y = e(i)?.scale;
+	return /* @__PURE__ */ l(f, {
+		x: n,
+		y: v.y(r) - 10,
+		width: i,
+		overflow: "visible",
+		children: [
+			u && !d && o && /* @__PURE__ */ c(t, {
+				width: i,
+				scaleValue: y,
+				color: s.defaults.BORDER_GRAY
+			}),
+			o && !d && /* @__PURE__ */ c(p, {
+				cx: i / 2,
+				cy: 10,
+				rx: i / 2,
+				ry: 66,
+				..._
+			}),
+			/* @__PURE__ */ c("defs", { children: /* @__PURE__ */ l("filter", {
+				id: "bottomShadow",
+				x: "0",
+				y: "0",
+				width: "140%",
+				height: "140%",
+				children: [
+					/* @__PURE__ */ c("feGaussianBlur", {
+						in: "SourceAlpha",
+						stdDeviation: "3"
+					}),
+					/* @__PURE__ */ c("feOffset", {
+						dx: "0",
+						dy: "5",
+						result: "offsetblur"
+					}),
+					/* @__PURE__ */ c("feFlood", { floodColor: "#00000033" }),
+					/* @__PURE__ */ c("feComposite", {
+						in2: "offsetblur",
+						operator: "in"
+					}),
+					/* @__PURE__ */ l("feMerge", { children: [/* @__PURE__ */ c("feMergeNode", {}), /* @__PURE__ */ c("feMergeNode", { in: "SourceGraphic" })] })
+				]
+			}) }),
+			d && o && !g && /* @__PURE__ */ c("foreignObject", {
+				x: i / 2 - 14,
+				y: 0,
+				width: 40,
+				height: 40,
+				children: d.value === "correct" ? /* @__PURE__ */ c(m, { title: d.label }) : /* @__PURE__ */ c(h, { title: d.label })
+			})
+		]
+	});
+};
+g.propTypes = {
+	x: n.number.isRequired,
+	y: n.number.isRequired,
+	width: n.number,
+	graphProps: a.GraphPropsType.isRequired,
+	interactive: n.bool,
+	isHovered: n.bool,
+	correctness: n.shape({
+		value: n.string,
+		label: n.string
+	}),
+	isPlot: n.bool
+};
+var _ = g, v = i({
+	axis: "y",
+	fromDelta: (e, t) => (t.x = 0, o.point(e).add(o.point(t)).y),
+	bounds: (e, { domain: t, range: n }) => {
+		let r = {
+			left: 0,
+			top: e.y,
+			bottom: e.y,
+			right: 0
+		};
+		return o.bounds(r, t, n);
+	},
+	anchorPoint: (e) => ({
+		x: e.x,
+		y: e.y
+	})
+})(_);
+//#endregion
+export { _ as DragHandle, v as default };

package/dist/common/drag-icon.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @synced-from pie-lib/packages/charting/src/common/drag-icon.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';
+declare const DragIcon: {
+    ({ width, scaleValue, color }: {
+        width: any;
+        scaleValue: any;
+        color: any;
+    }): React.JSX.Element;
+    propTypes: {
+        width: PropTypes.Validator<number>;
+        scaleValue: PropTypes.Validator<number>;
+        color: PropTypes.Requireable<string>;
+    };
+};
+export default DragIcon;