@pie-lib/plot 2.7.3 → 2.8.1-beta.0

package/CHANGELOG.md

@@ -3,34 +3,45 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-## [2.7.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.7.2...@pie-lib/plot@2.7.3) (2023-10-16)
+## [2.8.1-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.7.3...@pie-lib/plot@2.8.1-beta.0) (2025-07-20)
 
+**Note:** Version bump only for package @pie-lib/plot
 
-### Bug Fixes
 
-* **charting:** refine error message display to prevent overlapping with other elements and other messages PD-3121 ([f2de1ad](https://github.com/pie-framework/pie-lib/commit/f2de1adb4d19a44e403beb3d88cbb333e3c5adb9))
-* **charting:** wip PD-3105 ([f2f8234](https://github.com/pie-framework/pie-lib/commit/f2f82343a373ae1a8f669754a061963cbfdbeb08))
-* **charting:** wip PD-3105 revert push in develop ([6cce5e2](https://github.com/pie-framework/pie-lib/commit/6cce5e2d25d079c1c3eb195425dc2cf016fcd36e))
 
 
 
+# [2.8.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.7.3...@pie-lib/plot@2.8.0-beta.0) (2025-07-20)
 
+**Note:** Version bump only for package @pie-lib/plot
 
-## [2.7.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.7.1...@pie-lib/plot@2.7.2) (2023-06-24)
 
-**Note:** Version bump only for package @pie-lib/plot
 
 
 
+# [2.9.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.7.3...@pie-lib/plot@2.9.0-beta.0) (2025-07-15)
 
+**Note:** Version bump only for package @pie-lib/plot
 
-## [2.7.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.7.0...@pie-lib/plot@2.7.1) (2023-06-13)
+# [2.8.0-beta.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.7.3...@pie-lib/plot@2.8.0-beta.0) (2025-07-15)
 
 **Note:** Version bump only for package @pie-lib/plot
 
+## [2.7.3](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.7.2...@pie-lib/plot@2.7.3) (2023-10-16)
 
+### Bug Fixes
+
+- **charting:** refine error message display to prevent overlapping with other elements and other messages PD-3121 ([f2de1ad](https://github.com/pie-framework/pie-lib/commit/f2de1adb4d19a44e403beb3d88cbb333e3c5adb9))
+- **charting:** wip PD-3105 ([f2f8234](https://github.com/pie-framework/pie-lib/commit/f2f82343a373ae1a8f669754a061963cbfdbeb08))
+- **charting:** wip PD-3105 revert push in develop ([6cce5e2](https://github.com/pie-framework/pie-lib/commit/6cce5e2d25d079c1c3eb195425dc2cf016fcd36e))
+
+## [2.7.2](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.7.1...@pie-lib/plot@2.7.2) (2023-06-24)
 
+**Note:** Version bump only for package @pie-lib/plot
+
+## [2.7.1](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.7.0...@pie-lib/plot@2.7.1) (2023-06-13)
 
+**Note:** Version bump only for package @pie-lib/plot
 
 # [2.7.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/plot@2.6.13...@pie-lib/plot@2.7.0) (2023-06-12)
 

package/NEXT.CHANGELOG.json

@@ -0,0 +1 @@
+[]

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "2.7.3",
+  "version": "2.8.1-beta.0",
   "description": "Some underlying components for building charts/graphs",
   "keywords": [
     "react",
@@ -18,17 +18,21 @@
   "dependencies": {
     "@mapbox/point-geometry": "^0.1.0",
     "@material-ui/core": "^3.8.3",
+    "@pie-lib/editable-html": "beta",
+    "@pie-lib/render-ui": "beta",
     "@vx/axis": "^0.0.183",
     "@vx/event": "^0.0.182",
     "@vx/grid": "^0.0.183",
     "@vx/point": "^0.0.182",
     "@vx/shape": "^0.0.183",
+    "assert": "^1.4.1",
     "classnames": "^2.2.6",
     "d3-scale": "^2.1.2",
     "d3-selection": "^1.3.2",
     "debug": "^4.1.1",
     "invariant": "^2.2.4",
     "lodash": "^4.17.11",
+    "prop-types": "^15.7.2",
     "react": "^16.8.1",
     "react-draggable": "^3.1.1",
     "react-redux": "^6.0.0",
@@ -38,6 +42,6 @@
   "peerDependencies": {
     "react": "^16.8.1"
   },
-  "gitHead": "cda593dd0aedaadb7e1fd85f12d72ca3bb03d375",
+  "gitHead": "e2aa3ddac60f49bcb8c2562370f496323642f453",
   "scripts": {}
 }

package/src/__tests__/__snapshots__/grid-draggable.test.jsx.snap

@@ -0,0 +1,185 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`gridDraggable snapshot render with decimals 1`] = `
+<mockConstructor
+  axis="both"
+  grid={
+    Array [
+      1,
+      1,
+    ]
+  }
+  onDrag={[Function]}
+  onMouseDown={[Function]}
+  onStart={[Function]}
+  onStop={[Function]}
+>
+  <Component
+    domain={
+      Object {
+        "max": 1.6,
+        "min": -1.5,
+        "step": 0.3,
+      }
+    }
+    graphProps={
+      Object {
+        "domain": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "getRootNode": [Function],
+        "range": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "scale": Object {
+          "x": [MockFunction] {
+            "calls": Array [
+              Array [
+                1,
+              ],
+              Array [
+                0,
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": 1,
+              },
+              Object {
+                "type": "return",
+                "value": 0,
+              },
+            ],
+          },
+          "y": [MockFunction] {
+            "calls": Array [
+              Array [
+                1,
+              ],
+              Array [
+                0,
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": 1,
+              },
+              Object {
+                "type": "return",
+                "value": 0,
+              },
+            ],
+          },
+        },
+        "size": Object {
+          "height": 500,
+          "width": 500,
+        },
+        "snap": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+      }
+    }
+    isDragging={false}
+    range={
+      Object {
+        "max": 3,
+        "min": -2,
+        "step": 0.2,
+      }
+    }
+  />
+</mockConstructor>
+`;
+
+exports[`gridDraggable snapshot reqular 1`] = `
+<mockConstructor
+  axis="both"
+  grid={
+    Array [
+      1,
+      1,
+    ]
+  }
+  onDrag={[Function]}
+  onMouseDown={[Function]}
+  onStart={[Function]}
+  onStop={[Function]}
+>
+  <Component
+    graphProps={
+      Object {
+        "domain": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "getRootNode": [Function],
+        "range": Object {
+          "max": 1,
+          "min": 0,
+          "step": 1,
+        },
+        "scale": Object {
+          "x": [MockFunction] {
+            "calls": Array [
+              Array [
+                1,
+              ],
+              Array [
+                0,
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": 1,
+              },
+              Object {
+                "type": "return",
+                "value": 0,
+              },
+            ],
+          },
+          "y": [MockFunction] {
+            "calls": Array [
+              Array [
+                1,
+              ],
+              Array [
+                0,
+              ],
+            ],
+            "results": Array [
+              Object {
+                "type": "return",
+                "value": 1,
+              },
+              Object {
+                "type": "return",
+                "value": 0,
+              },
+            ],
+          },
+        },
+        "size": Object {
+          "height": 500,
+          "width": 500,
+        },
+        "snap": Object {
+          "x": [MockFunction],
+          "y": [MockFunction],
+        },
+      }
+    }
+    isDragging={false}
+  />
+</mockConstructor>
+`;

package/src/__tests__/__snapshots__/root.test.jsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`root snapshot matches 1`] = `
+<div>
+  <div>
+    <svg
+      height={480}
+      width={540}
+    >
+      <g
+        transform="translate(70, 40)"
+      >
+        hi
+      </g>
+    </svg>
+  </div>
+</div>
+`;

package/src/__tests__/draggable.test.jsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { shallow } from 'enzyme';
+import Draggable from '../draggable';
+
+const wrapper = () => {
+  return shallow(
+    <Draggable>
+      <div>hellow</div>
+    </Draggable>,
+    { disableLifecycleMethods: true },
+  );
+};
+
+describe('draggable', () => {
+  describe('local', () => {
+    it('resets x/y in state', () => {
+      const w = wrapper();
+      w.setState({ x: 1, y: 1 });
+      w.instance().componentWillReceiveProps({});
+      expect(w.state()).toMatchObject({ x: 0, y: 0 });
+    });
+  });
+});

package/src/__tests__/grid-draggable.test.jsx

@@ -0,0 +1,326 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { gridDraggable } from '../grid-draggable';
+import { getDelta } from '../utils';
+
+import { clientPoint } from 'd3-selection';
+
+jest.mock('d3-selection', () => ({
+  clientPoint: jest.fn().mockReturnValue([0, 0]),
+}));
+
+jest.mock('../draggable', () => ({
+  DraggableCore: jest.fn((type, props, children) => children),
+}));
+
+jest.mock('../utils', () => ({
+  getDelta: jest.fn(),
+}));
+
+const xyFn = () => {
+  const out = jest.fn((n) => n);
+  out.invert = jest.fn((n) => n);
+  return out;
+};
+const getGraphProps = () => ({
+  scale: {
+    x: xyFn(),
+    y: xyFn(),
+  },
+  snap: {
+    x: xyFn(),
+    y: xyFn(),
+  },
+  domain: {
+    min: 0,
+    max: 1,
+    step: 1,
+  },
+  range: {
+    min: 0,
+    max: 1,
+    step: 1,
+  },
+  size: {
+    width: 500,
+    height: 500,
+  },
+  getRootNode: () => ({}),
+});
+
+describe('gridDraggable', () => {
+  const wrapper = (opts, extras) => {
+    const defaults = {
+      graphProps: getGraphProps(),
+    };
+
+    defaults.graphProps.scale.x.invert = jest.fn((x) => x);
+    defaults.graphProps.scale.y.invert = jest.fn((x) => x);
+
+    const props = { ...defaults, ...extras };
+
+    opts = {
+      anchorPoint: jest.fn().mockReturnValue({ x: 0, y: 0 }),
+      bounds: jest.fn().mockReturnValue({ left: 0, top: 0, bottom: 0, right: 0 }),
+      fromDelta: jest.fn(),
+      ...opts,
+    };
+
+    const Comp = gridDraggable(opts)(() => <div />);
+    return shallow(<Comp {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('reqular', () => {
+      const w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+
+    it('render with decimals', () => {
+      const w = wrapper(
+        {},
+        {
+          domain: {
+            min: -1.5,
+            max: 1.6,
+            step: 0.3,
+          },
+          range: {
+            min: -2,
+            max: 3,
+            step: 0.2,
+          },
+        },
+      );
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    describe('grid', () => {
+      it('returns the grid', () => {
+        const w = wrapper();
+        const g = w.instance().grid();
+        expect(g).toEqual({ x: 1, y: 1 });
+      });
+    });
+
+    describe('onStart', () => {
+      it('sets the drag state', () => {
+        const w = wrapper();
+        w.instance().onStart({ clientX: 100, clientY: 100 });
+        expect(w.state().startX).toEqual(100);
+        expect(w.state().startY).toEqual(100);
+      });
+
+      it('calls the handler', () => {
+        const onDragStart = jest.fn();
+        const w = wrapper(
+          {},
+          {
+            onDragStart,
+          },
+        );
+        w.instance().onStart({ clientX: 100, clientY: 100 });
+        expect(onDragStart).toHaveBeenCalled();
+      });
+    });
+
+    describe('position', () => {
+      it('returns position object', () => {
+        const w = wrapper();
+        const pos = w.instance().position();
+
+        const anchorPoint = {
+          x: 0,
+          y: 0,
+        };
+        expect(pos).toEqual({
+          anchorPoint,
+          x: expect.any(Function),
+          y: expect.any(Function),
+        });
+      });
+    });
+
+    describe('tiny', () => {
+      it('returns true for 10 ', () => {
+        const w = wrapper();
+        w.setState({ startX: 0 });
+        const result = w.instance().tiny('x', { clientX: 10 });
+        expect(result).toBe(false);
+      });
+      it('returns true for 0.01', () => {
+        const w = wrapper();
+        w.setState({ startX: 0 });
+        const result = w.instance().tiny('x', { clientX: 0.01 });
+        expect(result).toBe(true);
+      });
+    });
+
+    describe('onDrag', () => {
+      let onDrag, w;
+
+      beforeEach(() => {
+        onDrag = jest.fn();
+        w = wrapper({}, { onDrag });
+        w.instance().applyDelta = jest.fn().mockReturnValue(0);
+        w.instance().props.graphProps.getRootNode = jest.fn().mockReturnValue({
+          ownerSVGElement: null,
+          getBoundingClientRect: jest.fn(() => ({
+            left: 0,
+            top: 0,
+            right: 100,
+            bottom: 100,
+          })),
+        });
+        w.instance().getClientPoint = jest.fn().mockReturnValue([50, 50]); // Mocking getClientPoint
+        w.instance().onDrag({}, { x: 1, y: 1 });
+      });
+
+      it('calls applyDelta', () => {
+        expect(w.instance().applyDelta).toHaveBeenCalled();
+      });
+
+      it('calls callback', () => {
+        expect(onDrag).toHaveBeenCalledWith(0);
+      });
+
+      const bounds = (left, right, top, bottom) => ({ left, right, top, bottom });
+      describe('bounds', () => {
+        const assertEarlyExit = (bounds, dd) => {
+          it(`${JSON.stringify(bounds)}, ${dd.deltaX}, ${dd.deltaY} `, () => {
+            w = wrapper({}, { onDrag });
+            w.instance().getScaledBounds = jest.fn().mockReturnValue(bounds);
+            w.instance().getClientPoint = jest.fn().mockReturnValue([50, 50]);
+            w.instance().onDrag({}, dd);
+            expect(w.instance().getClientPoint).not.toHaveBeenCalled();
+          });
+        };
+        assertEarlyExit(bounds(0, 0, 0, 0), { deltaX: -10 });
+        assertEarlyExit(bounds(0, 0, 0, 0), { deltaX: 10 });
+        assertEarlyExit(bounds(-100, 100, 0, 0), { deltaY: -10 });
+        assertEarlyExit(bounds(-100, 100, -100, 0), { deltaY: 10 });
+        it('calls client point if it doesnt exit early bounds', () => {
+          w = wrapper({}, { onDrag });
+          w.instance().getScaledBounds = jest.fn().mockReturnValue(bounds(100, 100, 100, 100));
+          w.instance().getClientPoint = jest.fn().mockReturnValue([50, 50]);
+          w.instance().onDrag({}, { deltaX: 10 });
+          expect(w.instance().getClientPoint).toHaveBeenCalled(); // Asserting that getClientPoint is called
+        });
+      });
+    });
+
+    describe('skipDragOutsideOfBounds', () => {
+      let w;
+      const assertSkipDrag = (dd, rawXFn, rawYFn, expected) => {
+        rawXFn = rawXFn || ((x) => x);
+        rawYFn = rawYFn || ((y) => y);
+
+        it(`${dd.deltaX}, ${dd.deltaY}, ${expected}`, () => {
+          w = wrapper({});
+          const gp = getGraphProps();
+
+          const mockGetBoundingClientRect = jest.fn(() => ({
+            left: 0,
+            top: 0,
+            right: 100,
+            bottom: 100,
+          }));
+
+          w.instance().getClientPoint = jest.fn(() => [
+            rawXFn(gp.domain.min, gp.domain.max),
+            rawYFn(gp.range.min, gp.range.max),
+          ]);
+
+          const rootNode = {
+            ownerSVGElement: null,
+            getBoundingClientRect: mockGetBoundingClientRect,
+          };
+
+          const result = w.instance().skipDragOutsideOfBounds(dd, {}, { ...gp, getRootNode: () => rootNode });
+          expect(result).toEqual(expected);
+        });
+      };
+      assertSkipDrag(
+        { deltaX: 1 },
+        (min, max) => min - 1,
+        (min, max) => min,
+        true,
+      );
+      assertSkipDrag(
+        { deltaX: -1 },
+        (min, max) => max + 1,
+        (min, max) => min,
+        true,
+      );
+      assertSkipDrag(
+        { deltaY: 1 },
+        (min, max) => max,
+        (min, max) => max + 1,
+        true,
+      );
+      assertSkipDrag(
+        { deltaY: -1 },
+        (min, max) => max,
+        (min, max) => min - 1,
+        true,
+      );
+      assertSkipDrag(
+        { deltaY: 1 },
+        (min, max) => max,
+        (min, max) => max,
+        false,
+      );
+      assertSkipDrag(
+        { deltaY: -1 },
+        (min, max) => max,
+        (min, max) => min,
+        false,
+      );
+    });
+
+    describe('getDelta', () => {
+      it('calls utils.getDelta', () => {
+        const w = wrapper();
+        w.instance().position = jest.fn().mockReturnValue({
+          anchorPoint: {
+            x: 0,
+            y: 0,
+          },
+          x: jest.fn((x) => x),
+          y: jest.fn((y) => y),
+        });
+        w.instance().getDelta({ x: 1, y: 1 });
+        expect(getDelta).toHaveBeenCalledWith({ x: 0, y: 0 }, { x: 1, y: 1 });
+      });
+    });
+    describe('applyDelta', () => {
+      it('calls fromDelta', () => {
+        const fromDelta = jest.fn();
+        const w = wrapper({ fromDelta });
+        w.instance().getDelta = jest.fn();
+        w.instance().applyDelta({ x: 1, y: 1 });
+        expect(fromDelta).toHaveBeenCalledWith(expect.anything(), undefined);
+      });
+    });
+    describe('onStop', () => {
+      it('calls onDragStop', () => {
+        const onDragStop = jest.fn();
+        const w = wrapper({}, { onDragStop });
+        w.setState({ startX: 0, startY: 0 });
+        w.instance().onStop({}, {});
+        expect(onDragStop).toHaveBeenCalled();
+      });
+
+      it('calls onClick if tiny', () => {
+        const onClick = jest.fn();
+        const w = wrapper({}, { onClick });
+        w.instance().tiny = jest.fn().mockReturnValue(true);
+        clientPoint.mockReturnValue([0, 0]);
+        w.instance().onStop({}, {});
+        expect(onClick).toHaveBeenCalledWith({ x: 0, y: 0 });
+      });
+    });
+  });
+});