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

package/src/undo-redo.jsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Button from '@mui/material/Button';
+import { styled } from '@mui/material/styles';
+import { color } from '@pie-lib/render-ui';
+import Translator from '@pie-lib/translator';
+
+const { translator } = Translator;
+
+const StyledButton = styled(Button)(({ theme }) => ({
+  color: color.text(),
+  fontWeight: 'bold',
+  marginBottom: theme.spacing(0.5),
+  '&:not(:last-of-type)': {
+    marginRight: theme.spacing(0.5),
+  },
+  '&:hover': {
+    backgroundColor: color.buttonHoverBg(),
+  },
+}));
+
+export class UndoRedo extends React.Component {
+  static propTypes = {
+    className: PropTypes.string,
+    onUndo: PropTypes.func.isRequired,
+    onRedo: PropTypes.func.isRequired,
+    onReset: PropTypes.func.isRequired,
+    language: PropTypes.string,
+  };
+  static defaultProps = {};
+
+  render() {
+    const { className, onUndo, onRedo, onReset, language } = this.props;
+    return (
+      <div className={classNames(className)}>
+        <StyledButton onClick={() => onUndo(true)}>{translator.t('common:undo', { lng: language })}</StyledButton>
+        <StyledButton onClick={() => onRedo(true)}>{translator.t('graphing.redo', { lng: language })}</StyledButton>
+        <StyledButton onClick={() => onReset()}>{translator.t('graphing.reset', { lng: language })}</StyledButton>
+      </div>
+    );
+  }
+}
+
+export default UndoRedo;

package/src/use-debounce.js

@@ -0,0 +1,13 @@
+import { useEffect, useState } from 'react';
+
+export const useDebounce = (value, delay) => {
+  const [debouncedValue, setDebouncedValue] = useState(value);
+
+  useEffect(() => {
+    const handler = setTimeout(() => {
+      setDebouncedValue(value);
+    }, delay);
+    return () => clearTimeout(handler);
+  }, [value]);
+  return debouncedValue;
+};

package/src/utils.js

@@ -0,0 +1,224 @@
+import { utils } from '@pie-lib/plot';
+import invariant from 'invariant';
+import { cloneDeep, head, isEmpty, isEqual, omit, tail } from 'lodash-es';
+
+export const stripEmptyLabel = (pt) => (pt?.label === '' ? omit(pt, 'label') : pt);
+
+export const tickCount = utils.tickCount;
+export const bounds = utils.bounds;
+export const point = utils.point;
+
+//TODO: This can be removed?
+export const getAngleDeg = () => 0;
+//TODO: This can be removed?
+export const arrowDimensions = () => 0;
+
+export const getTickValues = (prop) => {
+  const tickValues = [];
+  let tickVal = 0;
+
+  while (tickVal >= prop.min && tickValues.indexOf(tickVal) < 0) {
+    tickValues.push(tickVal);
+    tickVal = Math.round((tickVal - prop.step) * 10000) / 10000;
+  }
+
+  tickVal = Math.round(prop.step * 10000) / 10000;
+
+  while (tickVal <= prop.max && tickValues.indexOf(tickVal) < 0) {
+    tickValues.push(tickVal);
+    tickVal = Math.round((tickVal + prop.step) * 10000) / 10000;
+  }
+
+  // return only ticks that are inside the min-max interval
+  if (tickValues) {
+    return tickValues.filter((tV) => tV >= prop.min && tV <= prop.max);
+  }
+
+  return [];
+};
+
+export const countWords = (label) => {
+  if (label == null || isEmpty(label)) {
+    return 1;
+  }
+
+  const words = label.split(' ');
+  return words.length;
+};
+
+// findLongestWord is also used in plot
+export const findLongestWord = (label) => {
+  let longestWord = (label || '')
+    .replace(/<[^>]+>/g, '')
+    .split(' ')
+    .sort((a, b) => b.length - a.length);
+
+  return longestWord[0].length;
+};
+
+// amountToIncreaseWidth is also used in plot
+export const amountToIncreaseWidth = (longestWord) => {
+  if (!longestWord) {
+    return 0;
+  }
+
+  return longestWord * 10;
+};
+
+export const polygonToArea = (points) => {
+  const h = head(points);
+  const area = {
+    left: h.x,
+    top: h.y,
+    bottom: h.y,
+    right: h.x,
+  };
+  return tail(points).reduce((a, p) => {
+    a.left = Math.min(a.left, p.x);
+    a.top = Math.max(a.top, p.y);
+    a.bottom = Math.min(a.bottom, p.y);
+    a.right = Math.max(a.right, p.x);
+    return a;
+  }, area);
+};
+
+export const lineToArea = (from, to) => pointsToArea(from, to);
+
+export const pointsToArea = (a, b) => {
+  invariant(!!a && !!b, 'a or b is undefined');
+  const left = Math.min(a.x, b.x);
+  const top = Math.max(a.y, b.y);
+  const bottom = Math.min(a.y, b.y);
+  const right = Math.max(a.x, b.x);
+  return { left, top, bottom, right };
+};
+
+export const isDomainRangeEqual = (graphProps, nextGraphProps) => {
+  return isEqual(graphProps.domain, nextGraphProps.domain) && isEqual(graphProps.range, nextGraphProps.range);
+};
+
+export const getRightestPoints = (points) => {
+  const sortedPoints = cloneDeep(points);
+  sortedPoints.sort((a, b) => b.x - a.x);
+
+  return { a: sortedPoints[0], b: sortedPoints[1] };
+};
+
+export const getMiddleOfTwoPoints = (a, b) => ({
+  x: (a.x + b.x) / 2,
+  y: (a.y + b.y) / 2,
+});
+
+export const roundNumber = (number) => parseFloat(number.toFixed(4));
+
+export const sameAxes = (p1, p2) =>
+  p1 && p2 && (roundNumber(p1.x) === roundNumber(p2.x) || roundNumber(p1.y) === roundNumber(p2.y));
+
+export const equalPoints = (p1, p2) =>
+  p1 &&
+  p2 &&
+  isEqual(
+    {
+      x: roundNumber(p1.x),
+      y: roundNumber(p1.y),
+    },
+    {
+      x: roundNumber(p2.x),
+      y: roundNumber(p2.y),
+    },
+  );
+
+const getDistanceBetweenTicks = (axis, size) => {
+  const { min, max, step } = axis;
+  const nbOfTicks = (max - min) / step;
+
+  return size / nbOfTicks;
+};
+
+export const thinnerShapesNeeded = (graphProps) => {
+  const {
+    domain,
+    range,
+    size: { width, height },
+  } = graphProps;
+
+  // 14 is the default width of a point
+  return getDistanceBetweenTicks(domain, width) < 14 || getDistanceBetweenTicks(range, height) < 14;
+};
+
+export const getAdjustedGraphLimits = (graphProps) => {
+  const {
+    domain,
+    range,
+    size: { width, height },
+  } = graphProps;
+  const domainTicksDistance = getDistanceBetweenTicks(domain, width);
+  const rangeTicksDistance = getDistanceBetweenTicks(range, height);
+
+  // 15 is the distance required for the arrow to extend the graph
+  const domainPadding = domain.step / (domainTicksDistance / 15);
+  const rangePadding = range.step / (rangeTicksDistance / 15);
+
+  return {
+    domain: {
+      min: domain.min - domainPadding,
+      max: domain.max + domainPadding,
+    },
+    range: {
+      min: range.min - rangePadding,
+      max: range.max + rangePadding,
+    },
+  };
+};
+
+export const getDistanceBetweenTwoPoints = (a, b) => Math.sqrt((b.x - a.x) * (b.x - a.x) + (b.y - a.y) * (b.y - a.y));
+
+const sortPoints = (array) => (array || []).sort((a, b) => a.x - b.x || a.y - b.y);
+
+// check colliniarity of 3 points (source: https://www.geeksforgeeks.org/program-check-three-points-collinear/)
+const checkCollinearity = (a, b, c) => (a.x - b.x) * (c.y - b.y) === (c.x - b.x) * (a.y - b.y);
+
+// 2 lines are overlapping if all 4 points are collinear
+const isSameLine = (markA, markB) =>
+  checkCollinearity(markA.from, markB.from, markB.to) && checkCollinearity(markA.to, markB.from, markB.to);
+
+const isSameCircle = (markA, markB) =>
+  equalPoints(markA.root, markB.root) &&
+  getDistanceBetweenTwoPoints(markB.root, markB.edge) === getDistanceBetweenTwoPoints(markA.root, markA.edge);
+
+export const isDuplicatedMark = (mark, marks, oldMark) => {
+  const { type, building } = mark;
+
+  if (building) {
+    return false;
+  }
+
+  const filteredMarks = (marks || []).filter((m) => m.type === type && !m.building);
+  const index = filteredMarks.findIndex((m) => isEqual(m, oldMark));
+
+  if (index !== -1) {
+    filteredMarks.splice(index, 1);
+  }
+
+  const duplicated = filteredMarks.find((m) => {
+    if (type === 'circle' || type === 'parabola' || type === 'sine' || type === 'absolute' || type === 'exponential') {
+      const { root, edge } = mark;
+
+      return (equalPoints(root, m.root) && equalPoints(edge, m.edge)) || (type === 'circle' && isSameCircle(m, mark));
+    } else if (type === 'line' || type === 'ray' || type === 'segment' || type === 'vector') {
+      const { from, to } = mark;
+
+      return (
+        (equalPoints(from, m.from) && equalPoints(to, m.to)) ||
+        (equalPoints(from, m.to) && equalPoints(to, m.from)) ||
+        (type === 'line' && isSameLine(m, mark))
+      );
+    } else if (type === 'polygon') {
+      return isEqual(sortPoints(cloneDeep(mark.points)), sortPoints(cloneDeep(m.points)));
+    } else if (type === 'point') {
+      return equalPoints(m, mark);
+    }
+  });
+
+  return !!duplicated;
+};

package/dist/_virtual/_rolldown/runtime.js

@@ -1,23 +0,0 @@
-//#region \0rolldown/runtime.js
-var e = Object.create, t = Object.defineProperty, n = Object.getOwnPropertyDescriptor, r = Object.getOwnPropertyNames, i = Object.getPrototypeOf, a = Object.prototype.hasOwnProperty, o = (e, t) => () => (t || (e((t = { exports: {} }).exports, t), e = null), t.exports), s = (e, n) => {
-	let r = {};
-	for (var i in e) t(r, i, {
-		get: e[i],
-		enumerable: !0
-	});
-	return n || t(r, Symbol.toStringTag, { value: "Module" }), r;
-}, c = (e, i, o, s) => {
-	if (i && typeof i == "object" || typeof i == "function") for (var c = r(i), l = 0, u = c.length, d; l < u; l++) d = c[l], !a.call(e, d) && d !== o && t(e, d, {
-		get: ((e) => i[e]).bind(null, d),
-		enumerable: !(s = n(i, d)) || s.enumerable
-	});
-	return e;
-}, l = (n, r, a) => (a = n == null ? {} : e(i(n)), c(r || !n || !n.__esModule ? t(a, "default", {
-	value: n,
-	enumerable: !0
-}) : a, n)), u = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
-	if (typeof require < "u") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-});
-//#endregion
-export { o as __commonJSMin, s as __exportAll, u as __require, l as __toESM };

package/dist/autosize-input.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export interface AutosizeInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'> {
-    className?: string;
-    inputClassName?: string;
-    inputRef?: (node: HTMLInputElement | null) => void;
-    inputStyle?: React.CSSProperties;
-    minWidth?: number | string;
-    style?: React.CSSProperties;
-}
-export declare const AutosizeInput: React.ForwardRefExoticComponent<AutosizeInputProps & React.RefAttributes<HTMLInputElement>>;

package/dist/autosize-input.js

@@ -1,66 +0,0 @@
-import e, { useCallback as t, useLayoutEffect as n, useRef as r, useState as i } from "react";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
-//#region src/autosize-input.tsx
-var s = (e) => {
-	let t = Number.parseFloat(e);
-	return Number.isFinite(t) ? t : 0;
-}, c = (e, t) => {
-	let n = e ?? t;
-	return typeof n == "number" ? n : typeof n == "string" && n.endsWith("px") ? s(n) : 1;
-}, l = e.forwardRef(({ className: e, inputClassName: l, inputRef: u, inputStyle: d, minWidth: f, placeholder: p, style: m, value: h, defaultValue: g, ..._ }, v) => {
-	let y = r(null), b = r(u), x = r(v), S = r(null), [C, w] = i(() => c(f, d?.minWidth));
-	b.current = u, x.current = v;
-	let T = t((e) => {
-		y.current = e, b.current?.(e);
-		let t = x.current;
-		typeof t == "function" ? t(e) : t && (t.current = e);
-	}, []);
-	return n(() => {
-		let e = y.current, t = S.current;
-		if (!e || !t) return;
-		let n = window.getComputedStyle(e);
-		t.style.font = n.font, t.style.letterSpacing = n.letterSpacing, t.style.textTransform = n.textTransform, t.textContent = String(h ?? g ?? p ?? "") || " ";
-		let r = s(n.paddingLeft) + s(n.paddingRight) + s(n.borderLeftWidth) + s(n.borderRightWidth), i = Math.ceil(t.getBoundingClientRect().width + 2), a = n.boxSizing === "border-box" ? i + r : i;
-		w(Math.max(c(f, d?.minWidth), a));
-	}, [
-		g,
-		l,
-		d,
-		f,
-		p,
-		h
-	]), /* @__PURE__ */ o("span", {
-		className: e,
-		style: {
-			display: "inline-block",
-			...m
-		},
-		children: [/* @__PURE__ */ a("input", {
-			..._,
-			ref: T,
-			className: l,
-			placeholder: p,
-			style: {
-				width: C,
-				...d
-			},
-			value: h,
-			defaultValue: g
-		}), /* @__PURE__ */ a("span", {
-			ref: S,
-			"aria-hidden": "true",
-			style: {
-				height: 0,
-				left: 0,
-				overflow: "hidden",
-				position: "absolute",
-				top: 0,
-				visibility: "hidden",
-				whiteSpace: "pre"
-			}
-		})]
-	});
-});
-l.displayName = "AutosizeInput";
-//#endregion
-export { l as AutosizeInput };

package/dist/axis/arrow.d.ts

@@ -1,13 +0,0 @@
-/**
- * @synced-from pie-lib/packages/graphing/src/axis/arrow.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';
-export declare class Arrow extends React.Component {
-    render(): React.JSX.Element;
-}
-export default Arrow;

package/dist/axis/arrow.js

@@ -1,34 +0,0 @@
-import e from "react";
-import t from "prop-types";
-import { types as n } from "@pie-lib/plot";
-import { styled as r } from "@mui/material/styles";
-import { jsx as i } from "react/jsx-runtime";
-//#region src/axis/arrow.tsx
-var a = r("path")(({ theme: e }) => ({ fill: `var(--arrow-color, ${e.palette.common.black})` })), o = class extends e.Component {
-	render() {
-		let { x: e, y: t, className: n, scale: r } = this.props, o = this.props.direction || "left", s = r.x(e), c = r.y(t), l = "", u = (e, t, n) => `translate(${e}, ${t}) rotate(${n})`;
-		return o === "left" && (l = u(s - 15, c, 0)), o === "right" && (l = u(s + 15, c, 180)), o === "up" && (l = u(s, c - 15, 90)), o === "down" && (l = u(s, c + 15, 270)), /* @__PURE__ */ i(a, {
-			d: "m 0,0 8,-5 0,10 -8,-5",
-			transform: l,
-			className: n
-		});
-	}
-};
-o.propTypes = {
-	y: t.number,
-	x: t.number,
-	direction: t.oneOf([
-		"left",
-		"right",
-		"up",
-		"down"
-	]),
-	className: t.string,
-	scale: n.ScaleType.isRequired
-}, o.defaultProps = {
-	y: 0,
-	x: 0,
-	direction: "left"
-};
-//#endregion
-export { o as default };

package/dist/axis/axes.d.ts

@@ -1,132 +0,0 @@
-/**
- * @synced-from pie-lib/packages/graphing/src/axis/axes.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 AxisPropTypes: {
-    includeArrows: PropTypes.Requireable<object>;
-    graphProps: PropTypes.Requireable<object>;
-};
-export declare const sharedValues: (firstNegativeX: any, firstNegativeY: any, distanceFromOriginToFirstNegativeX: any, distanceFromOriginToFirstNegativeY: any, deltaAllowance: any, dy: any) => any[];
-export declare const firstNegativeValue: (interval: any) => any;
-export declare class RawXAxis extends React.Component {
-    static propTypes: {
-        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>;
-            }>>>;
-        }>>>;
-        includeArrows: PropTypes.Requireable<object>;
-    };
-    static defaultProps: {
-        includeArrows: {
-            left: boolean;
-            right: boolean;
-            up: boolean;
-            down: boolean;
-        };
-    };
-    render(): React.JSX.Element;
-}
-export declare class RawYAxis extends React.Component {
-    static propTypes: {
-        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>;
-            }>>>;
-        }>>>;
-        includeArrows: PropTypes.Requireable<object>;
-    };
-    static defaultProps: {
-        includeArrows: {
-            left: boolean;
-            right: boolean;
-            up: boolean;
-            down: boolean;
-        };
-    };
-    render(): React.JSX.Element;
-}
-export default class Axes extends React.Component {
-    static propTypes: {
-        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>;
-            }>>>;
-        }>>>;
-        includeArrows: PropTypes.Requireable<object>;
-    };
-    static defaultProps: {
-        includeArrows: {
-            left: boolean;
-            right: boolean;
-            up: boolean;
-            down: boolean;
-        };
-    };
-    xValues: any;
-    yValues: any;
-    render(): React.JSX.Element;
-}