@pie-lib/graphing 4.0.5-next.3 → 4.0.5-next.31

package/dist/graph.js

@@ -0,0 +1,209 @@
+import { isDuplicatedMark as e } from "./utils.js";
+import t, { AxisPropTypes as n } from "./axis/axes.js";
+import r from "./grid.js";
+import { LabelType as i } from "./labels.js";
+import a from "./bg.js";
+import o from "react";
+import s from "prop-types";
+import { cloneDeep as c, isEqual as l } from "@pie-element/shared-lodash";
+import { Root as u, createGraphProps as d, types as f } from "@pie-lib/plot";
+import p from "debug";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+//#region src/graph.tsx
+var g = p("pie-lib:graphing:graph"), _ = {
+	axesSettings: s.shape(n),
+	backgroundMarks: s.array,
+	className: s.string,
+	collapsibleToolbar: s.bool,
+	collapsibleToolbarTitle: s.string,
+	disabledLabels: s.bool,
+	disabledTitle: s.bool,
+	domain: f.DomainType,
+	labels: s.shape(i),
+	labelModeEnabled: s.bool,
+	coordinatesOnHover: s.bool,
+	marks: s.array,
+	onChangeLabels: s.func,
+	onChangeMarks: s.func,
+	onChangeTitle: s.func,
+	range: f.DomainType,
+	size: s.shape({
+		width: s.number.isRequired,
+		height: s.number.isRequired
+	}),
+	showLabels: s.bool,
+	showPixelGuides: s.bool,
+	showTitle: s.bool,
+	title: s.string,
+	tools: s.array,
+	limitLabeling: s.bool
+}, v = (e) => ({
+	x: -23,
+	y: -23,
+	width: e.width + 46,
+	height: e.height + 46
+}), y = ({ marks: e, currentTool: t, onChangeMarks: n, removeIncompleteTool: r }) => {
+	let i = e.filter((e) => e.building)[0], a = c(e);
+	if (i && t && i.type !== t.type) {
+		let e = a.findIndex((e) => l(e, i));
+		e >= 0 && a.splice(e, 1);
+	}
+	return r && !l(a, e) && n(a), a;
+}, b = class extends o.Component {
+	constructor(e) {
+		super(e), this.maskUid = this.generateMaskId();
+	}
+	static propTypes = {
+		..._,
+		currentTool: s.object
+	};
+	static defaultProps = {
+		onChangeMarks: () => {},
+		disabledLabels: !1,
+		disabledTitle: !1
+	};
+	state = {};
+	_justDragged = !1;
+	startDrag = () => {
+		this._justDragged = !1;
+	};
+	stopDrag = () => {
+		this._justDragged = !0, setTimeout(() => {
+			this._justDragged = !1;
+		}, 300);
+	};
+	generateMaskId() {
+		return "graph-" + (Math.random() * 1e4).toFixed();
+	}
+	componentDidMount = () => this.setState({ labelNode: this.labelNode });
+	changeMark = (t, n) => {
+		let { onChangeMarks: r, marks: i } = this.props, a = c(i), o = a.findIndex((e) => l(e, t));
+		o >= 0 && !e(n, i, t) && (a.splice(o, 1, n), r(a));
+	};
+	completeMark = (e) => {
+		let { currentTool: t, marks: n } = this.props, r = n.filter((e) => e.building)[0];
+		if (!r || !t) return;
+		let i = t.complete(r, e);
+		this.updateMarks(r, i);
+	};
+	updateMarks = (t, n, r = !1) => {
+		let { onChangeMarks: i, marks: a } = this.props, o = c(a);
+		if (!n || !n.building && e(n, a)) return;
+		let s = o.findIndex((e) => l(e, t));
+		s >= 0 ? (o.splice(s, 1, n), i(o)) : r && i([...o, n]);
+	};
+	getComponent = (e) => {
+		if (!e) return null;
+		let t = (this.props.tools || []).find((t) => t.type === e.type);
+		return t && t.Component || null;
+	};
+	onBgClick = (e) => {
+		let { x: t, y: n } = e || {}, { labelModeEnabled: r, currentTool: i, marks: a } = this.props;
+		if (this._justDragged || r || !i || [null, void 0].includes(t) || [null, void 0].includes(n)) return;
+		g("[onBgClick] x,y: ", t, n);
+		let o = a.filter((e) => e.building)[0], s;
+		s = o && i && o.type === i.type ? i.addPoint({
+			x: t,
+			y: n
+		}, { ...o }) : i.addPoint({
+			x: t,
+			y: n
+		}, void 0), this.updateMarks(o, s, !0);
+	};
+	render() {
+		let { axesSettings: e, currentTool: n, coordinatesOnHover: i, size: o, disabledLabels: s, disabledTitle: c, domain: l, backgroundMarks: f, range: p, title: g, labels: _, labelModeEnabled: b, labelsPlaceholders: x, limitLabeling: S, showLabels: C, showPixelGuides: w, showTitle: T, titlePlaceholder: E, onChangeLabels: D, onChangeTitle: O, mathMlOptions: k = {}, onChangeMarks: A, removeIncompleteTool: j } = this.props, { marks: M } = this.props, N = d(l, p, o, () => this.rootNode), P = v(o), F = {
+			graphProps: N,
+			labelModeEnabled: b,
+			limitLabeling: S
+		};
+		return M = y({
+			marks: M || [],
+			currentTool: n,
+			onChangeMarks: A,
+			removeIncompleteTool: j
+		}), /* @__PURE__ */ m(u, {
+			rootRef: (e) => this.rootNode = e,
+			disabledTitle: c,
+			disabledLabels: s,
+			labels: _,
+			labelsPlaceholders: x || {},
+			showPixelGuides: w,
+			showLabels: C,
+			showTitle: T,
+			title: g,
+			titlePlaceholder: E,
+			onChangeTitle: O,
+			onChangeLabels: D,
+			mathMlOptions: k,
+			...F,
+			children: /* @__PURE__ */ h("g", {
+				transform: l && l.padding && l.range ? `translate(${l.padding}, ${p.padding})` : void 0,
+				children: [
+					/* @__PURE__ */ m(r, { ...F }),
+					/* @__PURE__ */ m(t, {
+						...e,
+						...F
+					}),
+					/* @__PURE__ */ m(a, {
+						...o,
+						onClick: this.onBgClick,
+						...F
+					}),
+					/* @__PURE__ */ h("mask", {
+						id: `${this.maskUid}`,
+						children: [/* @__PURE__ */ m("rect", {
+							...P,
+							fill: "white"
+						}), " "]
+					}),
+					/* @__PURE__ */ h("g", {
+						id: "marks",
+						mask: `url('#${this.maskUid}')`,
+						children: [
+							(f || []).map((e, t) => {
+								let n = this.getComponent(e), r = e.type;
+								return /* @__PURE__ */ m(n, {
+									mark: {
+										...e,
+										disabled: !0,
+										isBackground: !0
+									},
+									labelNode: this.state.labelNode,
+									onClick: this.onBgClick,
+									...F
+								}, `${r}-${t}-bg`);
+							}),
+							M.map((e, t) => {
+								let r = this.getComponent(e), a = e.type;
+								return /* @__PURE__ */ m(r, {
+									mark: e,
+									coordinatesOnHover: i,
+									onChange: this.changeMark,
+									onComplete: this.completeMark,
+									onClick: this.onBgClick,
+									onDragStart: this.startDrag,
+									onDragStop: this.stopDrag,
+									labelNode: this.state.labelNode,
+									isToolActive: n && a === n.type,
+									...F
+								}, `${a}-${t}`);
+							}),
+							/* @__PURE__ */ m("foreignObject", {
+								ref: (e) => this.labelNode = e,
+								x: "0",
+								y: "0",
+								...o,
+								style: {
+									pointerEvents: "none",
+									fontSize: "14px"
+								}
+							})
+						]
+					})
+				]
+			})
+		});
+	}
+};
+//#endregion
+export { b as default, _ as graphPropTypes };

package/dist/grid-setup.d.ts

@@ -0,0 +1,27 @@
+/**
+ * @synced-from pie-lib/packages/graphing/src/grid-setup.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 GridSetup: {
+    (props: any): React.JSX.Element;
+    propTypes: {
+        domain: PropTypes.Requireable<object>;
+        displayedFields: PropTypes.Requireable<object>;
+        gridValues: PropTypes.Requireable<object>;
+        includeAxes: PropTypes.Requireable<boolean>;
+        labelValues: PropTypes.Requireable<object>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onChangeView: PropTypes.Requireable<(...args: any[]) => any>;
+        range: PropTypes.Requireable<object>;
+        size: PropTypes.Requireable<object>;
+        sizeConstraints: PropTypes.Requireable<object>;
+        standardGrid: PropTypes.Requireable<boolean>;
+    };
+};
+export default GridSetup;

package/dist/grid-setup.js

@@ -0,0 +1,307 @@
+import "react";
+import e from "prop-types";
+import { styled as t } from "@mui/material/styles";
+import { Fragment as n, jsx as r, jsxs as i } from "react/jsx-runtime";
+import * as a from "@pie-lib/render-ui";
+import { InputContainer as o, color as s } from "@pie-lib/render-ui";
+import c from "@pie-lib/editable-html-tip-tap";
+import { Accordion as l, AccordionDetails as u, AccordionSummary as d, Typography as f } from "@mui/material";
+import p from "@mui/icons-material/ExpandMore";
+import { NumberTextFieldCustom as m, Toggle as h } from "@pie-lib/config-ui";
+//#region src/grid-setup.tsx
+function g(e) {
+	return typeof e == "function" || typeof e == "object" && !!e && typeof e.$$typeof == "symbol";
+}
+function _(e, t) {
+	return !e || g(e) ? e : g(e.default) ? e.default : t && g(e[t]) ? e[t] : t && g(e[t]?.default) ? e[t].default : e;
+}
+var v = _(o, "InputContainer") || _(x.InputContainer, "InputContainer"), y = a, b = y.default, x = b && typeof b == "object" ? b : y, S = t("div")(() => ({ width: "450px" })), C = t("div")(() => ({
+	display: "flex",
+	flexDirection: "column",
+	width: "100%"
+})), w = t("div")(() => ({
+	display: "flex",
+	flexDirection: "column",
+	alignItems: "center"
+})), T = t("div")(() => ({
+	display: "flex",
+	justifyContent: "space-around",
+	alignItems: "center"
+})), E = t("div")(({ theme: e }) => ({
+	width: "130px",
+	margin: `${e.spacing(1)} ${e.spacing(.5)}`
+})), D = t("div")(({ theme: e }) => ({
+	width: "160px",
+	margin: `${e.spacing(1)} ${e.spacing(.5)}`,
+	"& .MuiFormControl-root": { width: "100%" }
+})), O = t("div")(({ theme: e }) => ({
+	width: "230px",
+	margin: `${e.spacing(1)} ${e.spacing(.5)}`,
+	"& .MuiFormControl-root": { width: "100%" }
+})), k = t(f)(({ theme: e }) => ({
+	fontStyle: "italic",
+	margin: `${e.spacing(1)} 0`
+})), A = t("div")(() => ({
+	display: "flex",
+	justifyContent: "space-between",
+	alignItems: "center"
+})), j = t(f)(() => ({ color: s.disabled() })), M = t("div")(({ theme: e }) => ({ paddingTop: e.spacing(2) })), N = (e) => {
+	let { disabled: t, displayedFields: n, labelValue: a, labelValues: o, gridValue: s, gridValues: c, onChange: l } = e, { labelStep: u = {}, step: d = {} } = n;
+	return /* @__PURE__ */ i(w, { children: [d && d.enabled && /* @__PURE__ */ r(D, { children: /* @__PURE__ */ r(m, {
+		label: d.label || "",
+		value: s,
+		customValues: c,
+		variant: "outlined",
+		disabled: t,
+		onChange: (e, t) => l("step", t)
+	}) }), u && u.enabled && /* @__PURE__ */ r(D, { children: /* @__PURE__ */ r(m, {
+		label: u.label || "",
+		value: a,
+		customValues: o,
+		variant: "outlined",
+		disabled: t,
+		onChange: (e, t) => l("labelStep", t)
+	}) })] });
+};
+N.propTypes = {
+	disabled: e.bool,
+	displayedFields: e.object,
+	labelValue: e.number,
+	labelValues: e.array,
+	gridValue: e.number,
+	gridValues: e.array,
+	onChange: e.func
+};
+var P = (e) => {
+	let { disabled: t, displayedFields: n, displayHeader: a, label: o, maxValue: s, minValue: l, onChange: u, type: d } = e, { axisLabel: p = {}, min: h = {}, max: g = {} } = n;
+	return /* @__PURE__ */ i(w, { children: [
+		a && /* @__PURE__ */ i(f, {
+			variant: "subtitle2",
+			children: [/* @__PURE__ */ r("i", { children: d === "domain" ? "x" : "y" }), "-axis"]
+		}),
+		h && h.enabled && /* @__PURE__ */ r(D, { children: /* @__PURE__ */ r(m, {
+			label: h.label || "",
+			value: l,
+			min: -1e4,
+			max: s - .05,
+			variant: "outlined",
+			disabled: t,
+			onChange: (e, t) => u("min", t)
+		}) }),
+		g && g.enabled && /* @__PURE__ */ r(D, { children: /* @__PURE__ */ r(m, {
+			label: g.label || "",
+			value: s,
+			min: l + .05,
+			max: 1e4,
+			variant: "outlined",
+			disabled: t,
+			onChange: (e, t) => u("max", t)
+		}) }),
+		p && p.enabled && /* @__PURE__ */ r(D, { children: /* @__PURE__ */ r(v, {
+			label: p.label || "",
+			children: /* @__PURE__ */ r(M, { children: /* @__PURE__ */ r(c, {
+				onChange: (e) => u("axisLabel", e),
+				markup: o || "",
+				charactersLimit: 5,
+				onKeyDown: (e) => e.key === "Enter",
+				activePlugins: [
+					"bold",
+					"italic",
+					"underline",
+					"strikethrough"
+				]
+			}) })
+		}) })
+	] });
+};
+P.propTypes = {
+	disabled: e.bool,
+	displayedFields: e.object,
+	displayHeader: e.bool,
+	label: e.string,
+	maxValue: e.number,
+	minValue: e.number,
+	type: e.string,
+	onChange: e.func
+};
+var F = (e) => {
+	let { domain: t, displayedFields: a = {}, gridValues: o = {}, includeAxes: s, labelValues: c = {}, onChange: g, onChangeView: _, range: v, size: y, sizeConstraints: b, standardGrid: x } = e, D = {
+		min: 2,
+		max: 41
+	}, { axisLabel: M = {}, dimensionsEnabled: F, includeAxesEnabled: I, labelStep: L = {}, min: R = {}, max: z = {}, standardGridEnabled: B, step: V = {} } = a || {}, H = R.enabled || z.enabled || M.enabled || V.enabled || L.enabled, U = {
+		step: V,
+		labelStep: L
+	}, W = {
+		min: R,
+		max: z,
+		axisLabel: M
+	}, G = (e) => {
+		let n = (e) => {
+			let n = e === "domain" ? t : v;
+			return {
+				min: 1,
+				max: n.max < D.min || n.max > D.max ? 16 : n.max,
+				step: 1,
+				labelStep: 0
+			};
+		};
+		g({
+			includeAxes: e,
+			range: {
+				...v,
+				...e ? { labelStep: 1 } : n("range")
+			},
+			domain: {
+				...t,
+				...e ? { labelStep: 1 } : n("domain")
+			}
+		});
+	}, K = (e) => {
+		g({
+			standardGrid: e,
+			range: {
+				...t,
+				axisLabel: v.axisLabel
+			},
+			graph: {
+				...y,
+				height: y.width
+			}
+		});
+	}, q = (e, t) => {
+		let n = {
+			...y,
+			[e]: t
+		};
+		x && (n.height = t), g({ graph: n });
+	}, J = (e, n) => {
+		t[e] = n, x && e !== "axisLabel" && (v[e] = n), g({
+			domain: t,
+			range: v
+		});
+	}, Y = (e, t) => {
+		v[e] = t, g({ range: v });
+	}, X = /* @__PURE__ */ i(n, { children: [
+		/* @__PURE__ */ i(T, { children: [/* @__PURE__ */ r(P, {
+			displayedFields: W,
+			displayHeader: H,
+			type: "domain",
+			minValue: t.min,
+			maxValue: t.max,
+			label: t.axisLabel,
+			includeAxes: s,
+			onChange: J
+		}), /* @__PURE__ */ r(P, {
+			displayedFields: W,
+			displayHeader: H,
+			type: "range",
+			minValue: v.min,
+			maxValue: v.max,
+			label: v.axisLabel,
+			disabled: x,
+			includeAxes: s,
+			onChange: Y
+		})] }),
+		(R.enabled || z.enabled) && /* @__PURE__ */ r(k, { children: "If you want the axis to be visible, use a zero or negative Min Value, and a positive Max Value" }),
+		(V.enabled || L.enabled) && /* @__PURE__ */ i(T, { children: [/* @__PURE__ */ r(N, {
+			displayedFields: U,
+			gridValue: t.step,
+			labelValue: t.labelStep,
+			gridValues: o.domain || [],
+			labelValues: c.domain || [],
+			onChange: J
+		}), /* @__PURE__ */ r(N, {
+			disabled: x,
+			displayedFields: U,
+			gridValue: v.step,
+			labelValue: v.labelStep,
+			gridValues: o.range || [],
+			labelValues: c.range || [],
+			onChange: Y
+		})] }),
+		L.enabled && /* @__PURE__ */ r(k, { children: "For unnumbered gridlines, enter a label interval of 0" })
+	] }), Z = z.enabled ? /* @__PURE__ */ i(w, { children: [/* @__PURE__ */ r(O, { children: /* @__PURE__ */ r(m, {
+		label: "Number of Vertical Gridlines",
+		value: t.max,
+		min: !s && D.min,
+		max: !s && D.max,
+		variant: "outlined",
+		onChange: (e, t) => J("max", t)
+	}) }), /* @__PURE__ */ r(O, { children: /* @__PURE__ */ r(m, {
+		label: "Number of Horizontal Gridlines",
+		value: v.max,
+		min: !s && D.min,
+		max: !s && D.max,
+		variant: "outlined",
+		disabled: x,
+		onChange: (e, t) => Y("max", t)
+	}) })] }) : null;
+	return /* @__PURE__ */ r(S, { children: /* @__PURE__ */ i(l, {
+		onChange: _,
+		TransitionProps: { timeout: {
+			enter: 225,
+			exit: 195
+		} },
+		children: [/* @__PURE__ */ r(d, {
+			expandIcon: /* @__PURE__ */ r(p, {}),
+			children: /* @__PURE__ */ r(f, {
+				variant: "subtitle1",
+				children: "Customize Grid Setup"
+			})
+		}), /* @__PURE__ */ r(u, { children: /* @__PURE__ */ i(C, { children: [
+			I && /* @__PURE__ */ r(h, {
+				label: "Include axes and labels?",
+				toggle: G,
+				checked: s
+			}),
+			B && /* @__PURE__ */ r(h, {
+				label: "Constrain to standard coordinate grid?",
+				toggle: K,
+				checked: x
+			}),
+			s ? X : Z,
+			F && /* @__PURE__ */ i(A, { children: [
+				/* @__PURE__ */ i("div", { children: [/* @__PURE__ */ r(f, { children: "Dimensions(px)" }), /* @__PURE__ */ i(j, { children: [
+					"Min ",
+					b.min,
+					", Max ",
+					b.max
+				] })] }),
+				/* @__PURE__ */ r(E, { children: /* @__PURE__ */ r(m, {
+					label: "Width",
+					value: y.width,
+					min: b.min,
+					max: b.max,
+					step: b.step,
+					variant: "outlined",
+					onChange: (e, t) => q("width", t)
+				}) }),
+				/* @__PURE__ */ r(E, { children: /* @__PURE__ */ r(m, {
+					label: "Height",
+					value: y.height,
+					min: b.min,
+					max: b.max,
+					step: b.step,
+					variant: "outlined",
+					disabled: x,
+					onChange: (e, t) => q("height", t)
+				}) })
+			] })
+		] }) })]
+	}) });
+};
+F.propTypes = {
+	domain: e.object,
+	displayedFields: e.object,
+	gridValues: e.object,
+	includeAxes: e.bool,
+	labelValues: e.object,
+	onChange: e.func,
+	onChangeView: e.func,
+	range: e.object,
+	size: e.object,
+	sizeConstraints: e.object,
+	standardGrid: e.bool
+};
+//#endregion
+export { F as default };

package/dist/grid.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @synced-from pie-lib/packages/graphing/src/grid.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 Grid extends React.Component {
+    static propTypes: {
+        disabled: PropTypes.Requireable<boolean>;
+        disabledAdditionalGrid: PropTypes.Requireable<boolean>;
+        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>;
+            }>>>;
+        }>>>;
+    };
+    getAdditionalGridProps: any;
+    render(): React.JSX.Element;
+}
+export default Grid;

package/dist/grid.js

@@ -0,0 +1,59 @@
+import { getTickValues as e } from "./utils.js";
+import t from "./node_modules/.bun/@visx_grid@3.12.0_f4eacebf2041cd4f/node_modules/@visx/grid/esm/grids/GridRows.js";
+import n from "./node_modules/.bun/@visx_grid@3.12.0_f4eacebf2041cd4f/node_modules/@visx/grid/esm/grids/GridColumns.js";
+import r from "./node_modules/.bun/@visx_grid@3.12.0_f4eacebf2041cd4f/node_modules/@visx/grid/esm/grids/Grid.js";
+import i from "react";
+import a from "prop-types";
+import { types as o } from "@pie-lib/plot";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+//#region src/grid.tsx
+var u = class extends i.Component {
+	static propTypes = {
+		disabled: a.bool,
+		disabledAdditionalGrid: a.bool,
+		graphProps: o.GraphPropsType.isRequired
+	};
+	getAdditionalGridProps = (t, n) => {
+		let { graphProps: { scale: r, size: { width: i, height: a }, domain: o, range: s } } = this.props, c = e({
+			...s,
+			step: s.labelStep
+		}).filter((e) => t.includes(e)), l = e({
+			...o,
+			step: o.labelStep
+		}).filter((e) => n.includes(e)), u = c.length && Math.min(...c).toString().replace(/[.-]/g, "").length || 1, d = c.length && Math.max(...c).toString().replace(/[.-]/g, "").length || 1, f = Math.max(u, d) * 9 + 22, p = r.x(0), m = r.y(0), h = `${p - f} ${f} ${i}`, g = `${m} 28 ${a}`, _ = o.labelStep > 0 && s.labelStep > 0 && c && l && c.length > 1 && l.length > 1 && (c.length !== t.length || l.length !== n.length), v = l.filter((e) => e >= 0 || p - r.x(e) > f);
+		return {
+			rowTickLabelValues: c.filter((e) => e >= 0 || r.y(e) - m > 28),
+			columnTickLabelValues: v,
+			rowStrokeDasharray: h,
+			columnStrokeDasharray: g,
+			displayAdditionalGrid: _
+		};
+	};
+	render() {
+		let { graphProps: i } = this.props, { scale: a, size: { height: o, width: u }, domain: d, range: f } = i, p = e(f), m = e(d), { rowTickLabelValues: h, columnTickLabelValues: g, rowStrokeDasharray: _, columnStrokeDasharray: v, displayAdditionalGrid: y } = this.getAdditionalGridProps(p, m), b = d.labelStep * 2 === d.step || f.labelStep * 2 === f.step ? "#9FA8DA" : "#7985CB";
+		return /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(r, {
+			innerRef: (e) => this.grid = e,
+			xScale: a.x,
+			yScale: a.y,
+			width: u,
+			height: o,
+			stroke: "#E1E6EC",
+			rowTickValues: p,
+			columnTickValues: m
+		}), y && /* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c(t, {
+			scale: a.y,
+			width: u,
+			tickValues: h,
+			stroke: b,
+			strokeDasharray: _
+		}), /* @__PURE__ */ c(n, {
+			scale: a.x,
+			height: o,
+			tickValues: g,
+			stroke: b,
+			strokeDasharray: v
+		})] })] });
+	}
+};
+//#endregion
+export { u as default };

package/dist/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @synced-from pie-lib/packages/graphing/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 Graph from './graph.js';
+import GraphContainer from './container/index.js';
+import GridSetup from './grid-setup.js';
+import * as tools from './tools/index.js';
+import ToolMenu from './tool-menu.js';
+import KeyLegend from './key-legend.js';
+export { Graph, GraphContainer, GridSetup, ToolMenu, tools, KeyLegend };

package/dist/index.js

@@ -0,0 +1,7 @@
+import e from "./graph.js";
+import { tools_exports as t } from "./tools/index.js";
+import n from "./tool-menu.js";
+import r from "./container/index.js";
+import i from "./grid-setup.js";
+import a from "./key-legend.js";
+export { e as Graph, r as GraphContainer, i as GridSetup, a as KeyLegend, n as ToolMenu, t as tools };

package/dist/key-legend.d.ts

@@ -0,0 +1,21 @@
+/**
+ * @synced-from pie-lib/packages/graphing/src/key-legend.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 KeyLegend: {
+    ({ className, isLabelAvailable }: {
+        className: any;
+        isLabelAvailable: any;
+    }): React.JSX.Element;
+    propTypes: {
+        className: PropTypes.Requireable<string>;
+        isLabelAvailable: PropTypes.Requireable<boolean>;
+    };
+};
+export default KeyLegend;