@pie-lib/graphing-solution-set 0.1.0

package/dist/undo-redo.js

@@ -0,0 +1,33 @@
+import e from "react";
+import t from "prop-types";
+import { styled as n } from "@mui/material/styles";
+import { jsx as r } from "react/jsx-runtime";
+import { color as i } from "@pie-lib/render-ui";
+import a from "@mui/material/Button";
+import o from "@pie-lib/translator";
+//#region src/undo-redo.tsx
+var { translator: s } = o, c = n(a)(({ theme: e }) => ({
+	color: i.text(),
+	fontWeight: "bold",
+	marginBottom: e.spacing(.5),
+	"&:not(:last-of-type)": { marginRight: e.spacing(.5) }
+})), l = class extends e.Component {
+	static propTypes = {
+		className: t.string,
+		onReset: t.func.isRequired,
+		language: t.string
+	};
+	static defaultProps = {};
+	render() {
+		let { className: e, onReset: t = !1, language: n } = this.props;
+		return /* @__PURE__ */ r("div", {
+			className: e,
+			children: /* @__PURE__ */ r(c, {
+				onClick: () => t(),
+				children: s.t("graphing.reset", { lng: n })
+			})
+		});
+	}
+};
+//#endregion
+export { l as default };

package/dist/use-debounce.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/use-debounce.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 useDebounce: (value: any, delay: any) => any;
+//# sourceMappingURL=use-debounce.d.ts.map

package/dist/use-debounce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-debounce.d.ts","sourceRoot":"","sources":["../src/use-debounce.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAIH,eAAO,MAAM,WAAW,GAAI,UAAK,EAAE,UAAK,QAUvC,CAAC"}

package/dist/use-debounce.js

@@ -0,0 +1,13 @@
+import { useEffect as e, useState as t } from "react";
+//#region src/use-debounce.ts
+var n = (n, r) => {
+	let [i, a] = t(n);
+	return e(() => {
+		let e = setTimeout(() => {
+			a(n);
+		}, r);
+		return () => clearTimeout(e);
+	}, [n]), i;
+};
+//#endregion
+export { n as useDebounce };

package/dist/utils.d.ts

@@ -0,0 +1,59 @@
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/utils.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 bounds: (area: any, domain: any, range: any) => {
+    left: number;
+    right: number;
+    top: number;
+    bottom: number;
+};
+export declare const point: (o: any) => import("@mapbox/point-geometry").default;
+export declare const getAngleDeg: () => number;
+export declare const arrowDimensions: () => number;
+export declare const getTickValues: (prop: any) => number[];
+export declare const countWords: (label: any) => any;
+export declare const findLongestWord: (label: any) => any;
+export declare const amountToIncreaseWidth: (longestWord: any) => number;
+export declare const polygonToArea: (points: any) => any;
+export declare const lineToArea: (from: any, to: any) => {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+};
+export declare const pointsToArea: (a: any, b: any) => {
+    left: number;
+    top: number;
+    bottom: number;
+    right: number;
+};
+export declare const getRightestPoints: (points: any) => {
+    a: any;
+    b: any;
+};
+export declare const getMiddleOfTwoPoints: (a: any, b: any) => {
+    x: number;
+    y: number;
+};
+export declare const roundNumber: (number: any) => number;
+export declare const sameAxes: (p1: any, p2: any) => any;
+export declare const equalPoints: (p1: any, p2: any) => any;
+export declare const thinnerShapesNeeded: (graphProps: any) => boolean;
+export declare const getAdjustedGraphLimits: (graphProps: any) => {
+    domain: {
+        min: number;
+        max: any;
+    };
+    range: {
+        min: number;
+        max: any;
+    };
+};
+export declare const isDuplicatedMark: (mark: any, marks: any, oldMark: any) => boolean;
+export declare const areArraysOfObjectsEqual: (array1: any, array2: any) => boolean;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAMH,eAAO,MAAM,MAAM;;;;;CAAe,CAAC;AACnC,eAAO,MAAM,KAAK,sDAAc,CAAC;AAGjC,eAAO,MAAM,WAAW,cAAU,CAAC;AAEnC,eAAO,MAAM,eAAe,cAAU,CAAC;AAEvC,eAAO,MAAM,aAAa,GAAI,SAAI,aAsBjC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,UAAK,QAO/B,CAAC;AAGF,eAAO,MAAM,eAAe,GAAI,UAAK,QAOpC,CAAC;AAGF,eAAO,MAAM,qBAAqB,GAAI,gBAAW,WAMhD,CAAC;AAEF,eAAO,MAAM,aAAa,GAAI,WAAM,QAenC,CAAC;AAEF,eAAO,MAAM,UAAU,GAAI,SAAI,EAAE,OAAE;;;;;CAA2B,CAAC;AAE/D,eAAO,MAAM,YAAY,GAAI,MAAC,EAAE,MAAC;;;;;CAOhC,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,WAAM;;;CAKvC,CAAC;AAEF,eAAO,MAAM,oBAAoB,GAAI,MAAC,EAAE,MAAC;;;CAGvC,CAAC;AAEH,eAAO,MAAM,WAAW,GAAI,WAAM,WAAkC,CAAC;AAErE,eAAO,MAAM,QAAQ,GAAI,OAAE,EAAE,OAAE,QACmE,CAAC;AAEnG,eAAO,MAAM,WAAW,GAAI,OAAE,EAAE,OAAE,QAY/B,CAAC;AASJ,eAAO,MAAM,mBAAmB,GAAI,eAAU,YAS7C,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,eAAU;;;;;;;;;CAuBhD,CAAC;AAWF,eAAO,MAAM,gBAAgB,GAAI,SAAI,EAAE,UAAK,EAAE,YAAO,YA4BpD,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,WAAM,EAAE,WAAM,YAwBrD,CAAC"}

package/dist/utils.js

@@ -0,0 +1,72 @@
+import "./_virtual/_rolldown/runtime.js";
+import { require_browser as e } from "./node_modules/.bun/invariant@2.2.4/node_modules/invariant/browser.js";
+import { cloneDeep as t, head as n, isEmpty as r, isEqual as i, tail as a } from "lodash-es";
+import { utils as o } from "@pie-lib/plot";
+e();
+var s = o.bounds, c = o.point, l = () => 0, u = () => 0, d = (e) => {
+	let t = [], n = 0;
+	for (; n >= e.min && t.indexOf(n) < 0;) t.push(n), n = Math.round((n - e.step) * 1e4) / 1e4;
+	for (n = Math.round(e.step * 1e4) / 1e4; n <= e.max && t.indexOf(n) < 0;) t.push(n), n = Math.round((n + e.step) * 1e4) / 1e4;
+	return t ? t.filter((t) => t >= e.min && t <= e.max) : [];
+}, f = (e) => e == null || r(e) ? 1 : e.split(" ").length, p = (e) => (e || "").replace(/<[^>]+>/g, "").split(" ").sort((e, t) => t.length - e.length)[0].length, m = (e) => e ? e * 10 : 0, h = (e) => {
+	let t = n(e), r = {
+		left: t.x,
+		top: t.y,
+		bottom: t.y,
+		right: t.x
+	};
+	return a(e).reduce((e, t) => (e.left = Math.min(e.left, t.x), e.top = Math.max(e.top, t.y), e.bottom = Math.min(e.bottom, t.y), e.right = Math.max(e.right, t.x), e), r);
+}, g = (e) => {
+	let n = t(e);
+	return n.sort((e, t) => t.x - e.x), {
+		a: n[0],
+		b: n[1]
+	};
+}, _ = (e, t) => ({
+	x: (e.x + t.x) / 2,
+	y: (e.y + t.y) / 2
+}), v = (e) => parseFloat(e.toFixed(4)), y = (e, t) => e && t && (v(e.x) === v(t.x) || v(e.y) === v(t.y)), b = (e, t) => e && t && i({
+	x: v(e.x),
+	y: v(e.y)
+}, {
+	x: v(t.x),
+	y: v(t.y)
+}), x = (e, t) => {
+	let { min: n, max: r, step: i } = e;
+	return t / ((r - n) / i);
+}, S = (e) => {
+	let { domain: t, range: n, size: { width: r, height: i } } = e;
+	return x(t, r) < 14 || x(n, i) < 14;
+}, C = (e) => {
+	let { domain: t, range: n, size: { width: r, height: i } } = e, a = x(t, r), o = x(n, i), s = t.step / (a / 15), c = n.step / (o / 15);
+	return {
+		domain: {
+			min: t.min - s,
+			max: t.max + s
+		},
+		range: {
+			min: n.min - c,
+			max: n.max + c
+		}
+	};
+}, w = (e) => (e || []).sort((e, t) => e.x - t.x || e.y - t.y), T = (e, t, n) => (e.x - t.x) * (n.y - t.y) === (n.x - t.x) * (e.y - t.y), E = (e, t) => T(e.from, t.from, t.to) && T(e.to, t.from, t.to), D = (e, n, r) => {
+	let { type: a, building: o } = e;
+	if (o) return !1;
+	let s = (n || []).filter((e) => e.type === a && !e.building), c = s.findIndex((e) => i(e, r));
+	return c !== -1 && s.splice(c, 1), !!s.find((n) => {
+		if (a === "line") {
+			let { from: t, to: r } = e;
+			return b(t, n.from) && b(r, n.to) || b(t, n.to) && b(r, n.from) || a === "line" && E(n, e);
+		} else if (a === "polygon") return i(w(t(e.points)), w(t(n.points)));
+	});
+}, O = (e, t) => {
+	if (e.length !== t.length) return !1;
+	for (let n = 0; n < e.length; n++) {
+		let r = e[n], i = t[n];
+		if (Object.keys(r).length !== Object.keys(i).length) return !1;
+		for (let e in r) if (r[e] !== i[e]) return !1;
+	}
+	return !0;
+};
+//#endregion
+export { m as amountToIncreaseWidth, O as areArraysOfObjectsEqual, u as arrowDimensions, s as bounds, f as countWords, b as equalPoints, p as findLongestWord, C as getAdjustedGraphLimits, l as getAngleDeg, _ as getMiddleOfTwoPoints, g as getRightestPoints, d as getTickValues, D as isDuplicatedMark, c as point, h as polygonToArea, v as roundNumber, y as sameAxes, S as thinnerShapesNeeded };

package/package.json

@@ -0,0 +1,64 @@
+{
+  "name": "@pie-lib/graphing-solution-set",
+  "version": "0.1.0",
+  "description": "Graphing components",
+  "dependencies": {
+    "@dnd-kit/sortable": "10.0.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/style": "^0.8.0",
+    "@mapbox/point-geometry": "^1.1.0",
+    "@mui/icons-material": "^7.3.4",
+    "@mui/material": "^7.3.4",
+    "@pie-lib/drag": "0.1.0",
+    "@pie-lib/editable-html-tip-tap": "0.1.0",
+    "@pie-lib/graphing-utils": "0.1.0",
+    "@pie-lib/plot": "0.1.0",
+    "@pie-lib/render-ui": "0.1.0",
+    "@pie-lib/tools": "0.1.0",
+    "@pie-lib/translator": "0.1.0",
+    "@visx/axis": "^3.0.0",
+    "@visx/clip-path": "^3.0.0",
+    "@visx/curve": "^3.0.0",
+    "@visx/event": "^3.0.0",
+    "@visx/grid": "^3.0.0",
+    "@visx/group": "^3.0.0",
+    "@visx/point": "^3.0.0",
+    "@visx/shape": "^3.0.0",
+    "classnames": "^2.2.6",
+    "d3-scale": "^4.0.2",
+    "d3-selection": "^3.0.0",
+    "debug": "^4.1.1",
+    "invariant": "^2.2.4",
+    "lodash-es": "^4.17.23",
+    "prop-types": "^15.7.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-draggable": "^3.3.0",
+    "react-input-autosize": "^2.2.1",
+    "react-redux": "^6.0.0",
+    "redux": "^4.0.1",
+    "redux-undo": "^1.1.0",
+    "@pie-lib/config-ui": "0.1.0",
+    "@dnd-kit/core": "6.3.1",
+    "@dnd-kit/utilities": "3.2.2"
+  },
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "sideEffects": false,
+  "scripts": {
+    "build": "bun x vite build && bun x tsc --emitDeclarationOnly",
+    "dev": "bun x vite",
+    "test": "bun x vitest run"
+  }
+}

package/src/axis/arrow.tsx

@@ -0,0 +1,67 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/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';
+import PropTypes from 'prop-types';
+
+import { styled } from '@mui/material/styles';
+import { types } from '@pie-lib/plot';
+
+const StyledPath: any = styled('path')(({ theme }) => ({
+  fill: `var(--arrow-color, ${theme.palette.common.black})`,
+}));
+
+export class Arrow extends React.Component {
+  render() {
+    const { x, y, className, scale } = this.props;
+    let direction = this.props.direction || 'left';
+
+    const xv = scale.x(x);
+    const yv = scale.y(y);
+
+    let transform = '';
+
+    const getTransform = (x, y, rotate) => `translate(${x}, ${y}) rotate(${rotate})`;
+
+    if (direction === 'left') {
+      transform = getTransform(xv - 15, yv, 0);
+    }
+
+    if (direction === 'right') {
+      transform = getTransform(xv + 15, yv, 180);
+    }
+
+    if (direction === 'up') {
+      transform = getTransform(xv, yv - 15, 90);
+    }
+
+    if (direction === 'down') {
+      transform = getTransform(xv, yv + 15, 270);
+    }
+
+    return <StyledPath d="m 0,0 8,-5 0,10 -8,-5" transform={transform} className={className} />;
+  }
+}
+
+Arrow.propTypes = {
+  y: PropTypes.number,
+  x: PropTypes.number,
+  direction: PropTypes.oneOf(['left', 'right', 'up', 'down']),
+  className: PropTypes.string,
+  scale: types.ScaleType.isRequired,
+};
+
+Arrow.defaultProps = {
+  y: 0,
+  x: 0,
+  direction: 'left',
+};
+
+export default Arrow;

package/src/axis/axes.tsx

@@ -0,0 +1,321 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/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 { Axis } from '@visx/axis';
+import { types } from '@pie-lib/plot';
+import PropTypes from 'prop-types';
+import Arrow from './arrow.js';
+import { styled } from '@mui/material/styles';
+import { amountToIncreaseWidth, countWords, findLongestWord, getTickValues } from '../utils.js';
+import { color, Readable as ReadableImport } from '@pie-lib/render-ui';
+
+function isRenderableReactInteropType(value: any) {
+  return (
+    typeof value === 'function' ||
+    (typeof value === 'object' && value !== null && typeof value.$$typeof === 'symbol')
+  );
+}
+
+function unwrapReactInteropSymbol(maybeSymbol: any, namedExport?: string) {
+  if (!maybeSymbol) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol)) return maybeSymbol;
+  if (isRenderableReactInteropType(maybeSymbol.default)) return maybeSymbol.default;
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport])) {
+    return maybeSymbol[namedExport];
+  }
+  if (namedExport && isRenderableReactInteropType(maybeSymbol[namedExport]?.default)) {
+    return maybeSymbol[namedExport].default;
+  }
+  return maybeSymbol;
+}
+const Readable = unwrapReactInteropSymbol(ReadableImport, 'Readable') || unwrapReactInteropSymbol(renderUi.Readable, 'Readable');
+import * as RenderUiNamespace from '@pie-lib/render-ui';
+const renderUiNamespaceAny = RenderUiNamespace as any;
+const renderUiDefaultMaybe = renderUiNamespaceAny['default'];
+const renderUi =
+  renderUiDefaultMaybe && typeof renderUiDefaultMaybe === 'object'
+    ? renderUiDefaultMaybe
+    : renderUiNamespaceAny;
+export const AxisPropTypes = {
+  includeArrows: PropTypes.object,
+  graphProps: PropTypes.object,
+};
+
+const AxisDefaultProps = {
+  includeArrows: {
+    left: true,
+    right: true,
+    up: true,
+    down: true,
+  },
+};
+
+const StyledAxesGroup: any = styled('g')(() => ({
+  '& .visx-axis-line': {
+    stroke: '#8a92c0',
+    strokeWidth: 4,
+  },
+  '& .visx-axis-tick': {
+    fill: color.defaults.BLACK,
+    '& > line': {
+      stroke: '#8a92c0',
+    },
+  },
+}));
+
+const AxisLabelHolder: any = styled('div')(({ theme, centered }) => ({
+  padding: 0,
+  margin: 0,
+  '* > *': {
+    margin: 0,
+    padding: 0,
+  },
+  '& p': {
+    margin: 0,
+  },
+  fontSize: theme.typography.fontSize,
+  ...(centered && { textAlign: 'center' }),
+}));
+
+const StyledArrow: any = styled(Arrow)({
+  fill: '#8a92c0',
+});
+
+const tickLabelStyles = {
+  fontFamily: 'Roboto',
+  fontSize: '14px',
+  cursor: 'inherit',
+};
+
+export const sharedValues = (
+  firstNegativeX,
+  firstNegativeY,
+  distanceFromOriginToFirstNegativeX,
+  distanceFromOriginToFirstNegativeY,
+  deltaAllowance,
+  dy,
+) => {
+  let result = [];
+
+  if (
+    firstNegativeX === firstNegativeY &&
+    distanceFromOriginToFirstNegativeX - deltaAllowance < distanceFromOriginToFirstNegativeY &&
+    distanceFromOriginToFirstNegativeY < distanceFromOriginToFirstNegativeX + deltaAllowance &&
+    distanceFromOriginToFirstNegativeX - deltaAllowance < dy &&
+    dy < distanceFromOriginToFirstNegativeX + deltaAllowance
+  ) {
+    result.push(firstNegativeX);
+  }
+
+  return result;
+};
+
+export const firstNegativeValue = (interval) => (interval || []).find((element) => element < 0);
+
+export class RawXAxis extends React.Component {
+  static propTypes = {
+    ...AxisPropTypes,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+  static defaultProps = AxisDefaultProps;
+
+  render() {
+    const { includeArrows, graphProps, columnTicksValues, skipValues, distanceFromOriginToFirstNegativeY, dy } =
+      this.props;
+    const { scale, domain, size, range } = graphProps || {};
+
+    const labelProps = (label) => {
+      const y = skipValues && skipValues[0] === label ? distanceFromOriginToFirstNegativeY + 4 : dy;
+
+      return {
+        ...tickLabelStyles,
+        textAnchor: 'middle',
+        y: y,
+        dx: label === 0 ? -10 : 0,
+        dy: label === 0 ? -7 : 0,
+      };
+    };
+
+    const necessaryRows = countWords(domain.axisLabel);
+    const longestWord = findLongestWord(domain.axisLabel);
+    const necessaryWidth = amountToIncreaseWidth(longestWord) + 2;
+
+    return (
+      <StyledAxesGroup>
+        <Axis
+          scale={scale.x}
+          top={scale.y(0)}
+          left={0}
+          label={domain.label}
+          rangePadding={8}
+          tickFormat={(value) => value}
+          tickLabelProps={labelProps}
+          tickValues={columnTicksValues}
+          hideZero={!(domain.labelStep || range.labelStep) && domain.min <= 0}
+        />
+        {includeArrows && includeArrows.left && <StyledArrow direction="left" x={domain.min} y={0} scale={scale} />}
+        {includeArrows && includeArrows.right && <StyledArrow direction="right" x={domain.max} y={0} scale={scale} />}
+        {domain.axisLabel && (
+          <foreignObject x={size.width + 17} y={scale.y(0) - 9} width={necessaryWidth} height={20 * necessaryRows}>
+            <Readable false>
+              <AxisLabelHolder dangerouslySetInnerHTML={{ __html: domain.axisLabel }} />
+            </Readable>
+          </foreignObject>
+        )}
+      </StyledAxesGroup>
+    );
+  }
+}
+
+const XAxis = RawXAxis;
+
+export class RawYAxis extends React.Component {
+  static propTypes = {
+    ...AxisPropTypes,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+  static defaultProps = AxisDefaultProps;
+
+  render() {
+    const { includeArrows, graphProps, skipValues, rowTickValues } = this.props;
+    const { scale, range, size } = graphProps || {};
+
+    const necessaryWidth = range.axisLabel ? amountToIncreaseWidth(range.axisLabel.length) : 0;
+
+    const customTickFormat = (value) => (skipValues && skipValues.indexOf(value) >= 0 ? '' : value);
+
+    return (
+      <StyledAxesGroup>
+        <Axis
+          orientation={'left'}
+          scale={scale.y}
+          top={0}
+          height={size.height}
+          left={scale.x(0)}
+          label={range.label}
+          labelProps={{ 'data-pie-readable': false }}
+          rangePadding={8}
+          tickLength={10}
+          tickFormat={customTickFormat}
+          tickLabelProps={(value) => {
+            let digits = value.toLocaleString().replace(/[.-]/g, '').length || 1;
+
+            return {
+              ...tickLabelStyles,
+              dy: 4,
+              dx: -10 - digits * 9,
+              'data-pie-readable': false,
+            };
+          }}
+          hideZero={true}
+          tickTextAnchor={'bottom'}
+          tickValues={rowTickValues}
+        />
+        {includeArrows && includeArrows.down && <StyledArrow direction="down" x={0} y={range.min} scale={scale} />}
+        {includeArrows && includeArrows.up && <StyledArrow direction="up" x={0} y={range.max} scale={scale} />}
+        {range.axisLabel && (
+          <foreignObject x={scale.x(0) - necessaryWidth / 2} y={-33} width={necessaryWidth} height="20">
+            <Readable false>
+              <AxisLabelHolder centered dangerouslySetInnerHTML={{ __html: range.axisLabel }} />
+            </Readable>
+          </foreignObject>
+        )}
+      </StyledAxesGroup>
+    );
+  }
+}
+
+const YAxis = RawYAxis;
+
+export default class Axes extends React.Component {
+  static propTypes = {
+    ...AxisPropTypes,
+    graphProps: types.GraphPropsType.isRequired,
+  };
+  static defaultProps = AxisDefaultProps;
+
+  xValues: any = () => {
+    const { graphProps } = this.props;
+    const { scale, domain } = graphProps || {};
+
+    if (!domain || !scale) {
+      return;
+    }
+
+    const ticks = getTickValues({ ...domain, step: domain.labelStep });
+    const negative = firstNegativeValue(ticks);
+
+    return {
+      columnTicksValues: ticks,
+      firstNegativeX: negative,
+      distanceFromOriginToFirstNegativeX: Math.abs(scale.y(0) - scale.y(negative)),
+    };
+  };
+
+  yValues: any = () => {
+    const { graphProps } = this.props;
+    const { scale, range } = graphProps || {};
+
+    if (!range || !scale) {
+      return;
+    }
+
+    const ticks = getTickValues({ ...range, step: range.labelStep });
+    const negative = firstNegativeValue(ticks);
+
+    return {
+      rowTickValues: ticks,
+      firstNegativeY: negative,
+      distanceFromOriginToFirstNegativeY: Math.abs(scale.x(0) - scale.x(negative)),
+    };
+  };
+
+  render() {
+    const { graphProps } = this.props;
+    const { domain, range } = graphProps || {};
+    const { columnTicksValues, firstNegativeX, distanceFromOriginToFirstNegativeX } = this.xValues();
+    const { rowTickValues, firstNegativeY, distanceFromOriginToFirstNegativeY } = this.yValues();
+    const deltaAllowance = 6;
+    const dy = 25;
+
+    const skipValues = sharedValues(
+      firstNegativeX,
+      firstNegativeY,
+      distanceFromOriginToFirstNegativeX,
+      distanceFromOriginToFirstNegativeY,
+      deltaAllowance,
+      dy,
+    );
+
+    // each axis has to be displayed only if the domain & range include it
+    return (
+      <StyledAxesGroup>
+        {range.min <= 0 ? (
+          <XAxis
+            {...this.props}
+            skipValues={skipValues}
+            columnTicksValues={columnTicksValues}
+            distanceFromOriginToFirstNegativeY={distanceFromOriginToFirstNegativeY}
+            dy={dy}
+          />
+        ) : null}
+        {domain.min <= 0 ? (
+          <YAxis
+            {...this.props}
+            skipValues={skipValues}
+            rowTickValues={rowTickValues}
+            distanceFromOriginToFirstNegativeX={distanceFromOriginToFirstNegativeX}
+          />
+        ) : null}
+      </StyledAxesGroup>
+    );
+  }
+}

package/src/axis/index.ts

@@ -0,0 +1,13 @@
+// @ts-nocheck
+/**
+ * @synced-from pie-lib/packages/graphing-solution-set/src/axis/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 Axes, { AxisPropTypes } from './axes.js';
+
+export { Axes, AxisPropTypes };