@pie-lib/graphing 2.14.22 → 2.15.0-beta.1

package/src/__tests__/use-debounce.test.js

@@ -0,0 +1,21 @@
+import { useState, useEffect } from 'react';
+import { useDebounce } from '../use-debounce';
+
+jest.useFakeTimers();
+
+jest.mock('react', () => ({
+  useState: jest.fn(),
+  useEffect: jest.fn((fn, deps) => fn()),
+}));
+
+describe('useDebounce', () => {
+  it('..', () => {
+    const debouncedValue = null;
+    const setDebouncedValue = jest.fn();
+
+    useState.mockReturnValue([debouncedValue, setDebouncedValue]);
+    useDebounce('foo', 1000);
+    jest.runAllTimers();
+    expect(setDebouncedValue).toHaveBeenCalledWith('foo');
+  });
+});

package/src/__tests__/utils.js

@@ -0,0 +1,38 @@
+export const scaleMock = () => {
+  const fn = jest.fn((n) => n);
+  fn.invert = jest.fn((n) => n);
+  return fn;
+};
+
+export const graphProps = (dmin = 0, dmax = 1, rmin = 0, rmax = 1) => ({
+  scale: {
+    x: scaleMock(),
+    y: scaleMock(),
+  },
+  snap: {
+    x: jest.fn((n) => n),
+    y: jest.fn((n) => n),
+  },
+  domain: {
+    min: dmin,
+    max: dmax,
+    step: 1,
+  },
+  range: {
+    min: rmin,
+    max: rmax,
+    step: 1,
+  },
+  size: {
+    width: 400,
+    height: 400,
+  },
+});
+
+export const xy = (x, y, index) => {
+  const out = { x, y, index };
+  if (!Number.isFinite(index)) {
+    delete out.index;
+  }
+  return out;
+};

package/src/__tests__/utils.test.js

@@ -0,0 +1,151 @@
+import * as utils from '../utils';
+
+const xy = (x, y) => ({ x, y });
+
+const tick = (isMajor, v) => ({
+  major: isMajor,
+  value: v,
+  x: v,
+});
+
+const major = tick.bind(null, true);
+const minor = tick.bind(null, false);
+
+describe('utils', () => {
+  describe('polygonToArea', () => {
+    const assertPolygon = (points, area) => {
+      it(`converts ${points} -> ${area}`, () => {
+        const result = utils.polygonToArea(points);
+        expect(result).toEqual(area);
+      });
+    };
+    assertPolygon([xy(0, 0), xy(1, 1), xy(1, -1)], {
+      left: 0,
+      top: 1,
+      bottom: -1,
+      right: 1,
+    });
+    assertPolygon([xy(0, 0), xy(3, 0), xy(2, -1), xy(4, -3), xy(1, -4), xy(2, -2)], {
+      left: 0,
+      top: 0,
+      bottom: -4,
+      right: 4,
+    });
+  });
+
+  describe('lineToArea', () => {
+    const assertLine = (from, to, expected) => {
+      it(`${from},${to} => ${expected}`, () => {
+        const result = utils.lineToArea(from, to);
+        expect(result).toEqual(expected);
+      });
+    };
+
+    assertLine(xy(1, 1), xy(2, 2), { left: 1, top: 2, bottom: 1, right: 2 });
+    assertLine(xy(-1, 4), xy(4, -3), {
+      left: -1,
+      top: 4,
+      bottom: -3,
+      right: 4,
+    });
+  });
+
+  describe('getTickValues', () => {
+    const assertGetTickValues = (props, expected) => {
+      it(` => ${expected}`, () => {
+        const result = utils.getTickValues(props);
+        expect(result).toEqual(expected);
+      });
+    };
+
+    assertGetTickValues({ min: 0, max: 10, step: 1 }, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]);
+    assertGetTickValues({ min: 0, max: 3, step: 0.5 }, [0, 0.5, 1, 1.5, 2, 2.5, 3]);
+    assertGetTickValues({ min: -0.2, max: 2, step: 0.6 }, [0, 0.6, 1.2, 1.8]);
+    assertGetTickValues({ min: -3.4, max: 6.2, step: 1.2 }, [0, -1.2, -2.4, 1.2, 2.4, 3.6, 4.8, 6]);
+
+    assertGetTickValues({ min: 0.6, max: 4.8, step: 0.3 }, [
+      0.6,
+      0.9,
+      1.2,
+      1.5,
+      1.8,
+      2.1,
+      2.4,
+      2.7,
+      3.0,
+      3.3,
+      3.6,
+      3.9,
+      4.2,
+      4.5,
+      4.8,
+    ]);
+    assertGetTickValues({ min: 0.5, max: 4.9, step: 0.3 }, [
+      0.6,
+      0.9,
+      1.2,
+      1.5,
+      1.8,
+      2.1,
+      2.4,
+      2.7,
+      3.0,
+      3.3,
+      3.6,
+      3.9,
+      4.2,
+      4.5,
+      4.8,
+    ]);
+    assertGetTickValues({ min: 0, max: 3, step: 0.125 }, [
+      0,
+      0.125,
+      0.25,
+      0.375,
+      0.5,
+      0.625,
+      0.75,
+      0.875,
+      1,
+      1.125,
+      1.25,
+      1.375,
+      1.5,
+      1.625,
+      1.75,
+      1.875,
+      2,
+      2.125,
+      2.25,
+      2.375,
+      2.5,
+      2.625,
+      2.75,
+      2.875,
+      3,
+    ]);
+  });
+
+  describe('countWords', () => {
+    it('should return 1 if label is undefined', () => {
+      const label = undefined;
+      const result = utils.countWords(label);
+
+      expect(result).toEqual(1);
+    });
+
+    it('should return 1 if label is null', () => {
+      const label = null;
+      const result = utils.countWords(label);
+
+      expect(result).toEqual(1);
+    });
+
+    it('should return 3 if label has 3 words', () => {
+      const label = 'Number of months';
+      const result = utils.countWords(label);
+
+      expect(result).toEqual(3);
+    });
+  });
+});

package/src/axis/__tests__/__snapshots__/arrow.test.jsx.snap

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Arrow snapshot down 1`] = `
+<path
+  className="className"
+  d="m 0,0 8,-5 0,10 -8,-5"
+  transform="translate(0, 15) rotate(270)"
+/>
+`;
+
+exports[`Arrow snapshot left 1`] = `
+<path
+  className="className"
+  d="m 0,0 8,-5 0,10 -8,-5"
+  transform="translate(-15, 0) rotate(0)"
+/>
+`;
+
+exports[`Arrow snapshot right 1`] = `
+<path
+  className="className"
+  d="m 0,0 8,-5 0,10 -8,-5"
+  transform="translate(15, 0) rotate(180)"
+/>
+`;
+
+exports[`Arrow snapshot up 1`] = `
+<path
+  className="className"
+  d="m 0,0 8,-5 0,10 -8,-5"
+  transform="translate(0, -15) rotate(90)"
+/>
+`;

package/src/axis/__tests__/__snapshots__/axes.test.jsx.snap

@@ -0,0 +1,122 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RawXAxis snapshot renders 1`] = `
+<Fragment>
+  <F
+    left={0}
+    scale={[MockFunction]}
+    tickFormat={[Function]}
+    tickLabelProps={[Function]}
+    top={0}
+  />
+  <WithStyles(Arrow)
+    direction="left"
+    scale={
+      Object {
+        "x": [MockFunction],
+        "y": [MockFunction] {
+          "calls": Array [
+            Array [
+              0,
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": 0,
+            },
+          ],
+        },
+      }
+    }
+    x={0}
+    y={0}
+  />
+  <WithStyles(Arrow)
+    direction="right"
+    scale={
+      Object {
+        "x": [MockFunction],
+        "y": [MockFunction] {
+          "calls": Array [
+            Array [
+              0,
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": 0,
+            },
+          ],
+        },
+      }
+    }
+    x={1}
+    y={0}
+  />
+</Fragment>
+`;
+
+exports[`RawYAxis snapshot renders 1`] = `
+<Fragment>
+  <F
+    height={400}
+    hideZero={true}
+    left={0}
+    orientation="left"
+    scale={[MockFunction]}
+    tickFormat={[Function]}
+    tickLabelProps={[Function]}
+    tickLength={10}
+    tickTextAnchor="bottom"
+    top={0}
+  />
+  <WithStyles(Arrow)
+    direction="down"
+    scale={
+      Object {
+        "x": [MockFunction] {
+          "calls": Array [
+            Array [
+              0,
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": 0,
+            },
+          ],
+        },
+        "y": [MockFunction],
+      }
+    }
+    x={0}
+    y={0}
+  />
+  <WithStyles(Arrow)
+    direction="up"
+    scale={
+      Object {
+        "x": [MockFunction] {
+          "calls": Array [
+            Array [
+              0,
+            ],
+          ],
+          "results": Array [
+            Object {
+              "type": "return",
+              "value": 0,
+            },
+          ],
+        },
+        "y": [MockFunction],
+      }
+    }
+    x={0}
+    y={1}
+  />
+</Fragment>
+`;

package/src/axis/__tests__/arrow.test.jsx

@@ -0,0 +1,39 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Arrow } from '../arrow';
+
+describe('Arrow', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      scale: {
+        x: jest.fn((n) => n),
+        y: jest.fn((n) => n),
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<Arrow {...props} />);
+  };
+  describe('snapshot', () => {
+    it('up', () => {
+      w = wrapper({ direction: 'up' });
+      expect(w).toMatchSnapshot();
+    });
+    it('down', () => {
+      w = wrapper({ direction: 'down' });
+      expect(w).toMatchSnapshot();
+    });
+    it('left', () => {
+      w = wrapper({ direction: 'left' });
+      expect(w).toMatchSnapshot();
+    });
+    it('right', () => {
+      w = wrapper({ direction: 'right' });
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/axis/__tests__/axes.test.jsx

@@ -0,0 +1,220 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { graphProps } from '../../__tests__/utils';
+
+import Axes, { RawXAxis, RawYAxis, firstNegativeValue, sharedValues } from '../axes';
+
+describe('RawXAxis', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+      includeArrows: {
+        left: true,
+        right: true,
+        up: true,
+        down: true,
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<RawXAxis {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});
+
+describe('RawYAxis', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+      includeArrows: {
+        left: true,
+        right: true,
+        up: true,
+        down: true,
+      },
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<RawYAxis {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});
+
+const customScaleMock = (distance) => {
+  const fn = jest.fn((n) => n * distance);
+  fn.invert = jest.fn((n) => n * distance);
+  return fn;
+};
+
+describe.only('Axes', () => {
+  let w;
+  let onChange = jest.fn();
+
+  const customGraphProps = {
+    ...graphProps(),
+    domain: {
+      min: -2,
+      max: 2,
+      labelStep: 1,
+      step: 1,
+    },
+    range: {
+      min: -2,
+      max: 2,
+      step: 1,
+      labelStep: 1,
+    },
+    scale: {
+      x: customScaleMock(200),
+      y: customScaleMock(150),
+    },
+  };
+
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: customGraphProps,
+    };
+
+    const props = { ...defaults, ...extras };
+    return shallow(<Axes {...props} />);
+  };
+  describe('xValues', () => {
+    it('renders', () => {
+      w = wrapper();
+      const result = w.instance().xValues();
+      expect(result).toEqual({
+        columnTicksValues: expect.arrayContaining([-2, -1, 0, 1, 2]),
+        distanceFromOriginToFirstNegativeX: 150,
+        firstNegativeX: -1,
+      });
+    });
+  });
+  describe('yValues', () => {
+    it('renders', () => {
+      w = wrapper();
+      const result = w.instance().yValues();
+      expect(result).toEqual({
+        rowTickValues: expect.arrayContaining([-2, -1, 0, 1, 2]),
+        distanceFromOriginToFirstNegativeY: 200,
+        firstNegativeY: -1,
+      });
+    });
+  });
+});
+
+describe('firstNegativeValue should return undefiend for undefined interval', () => {
+  const interval = undefined;
+  const result = firstNegativeValue(interval);
+  expect(result).toEqual(undefined);
+});
+
+describe('firstNegativeValue should return undefiend for empty interval', () => {
+  const interval = [];
+  const result = firstNegativeValue(interval);
+  expect(result).toEqual(undefined);
+});
+
+describe('firstNegativeValue should return undefined if there is no negative in interval array', () => {
+  const interval = [1, 5, 7, 4, 5];
+  const result = firstNegativeValue(interval);
+  expect(result).toEqual(undefined);
+});
+
+describe('firstNegativeValue should return first negative number from interval', () => {
+  const interval = [1, 5, 7, -2, 4, 5, -1];
+  const result = firstNegativeValue(interval);
+  expect(result).toEqual(-2);
+});
+
+describe('skipValue should be empty array if firstNegativeValue for one of the axes is undefined', () => {
+  // x
+  const intervalX = [1, 2, 3, 4, 5, 6];
+  const firstNegativeX = firstNegativeValue(intervalX);
+  const distanceFromOriginToFirstNegativeX = -22;
+
+  // y
+  const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
+  const firstNegativeY = firstNegativeValue(intervalY);
+  const distanceFromOriginToFirstNegativeY = -22;
+
+  const deltaAllowance = 5;
+
+  const result = sharedValues(
+    firstNegativeX,
+    firstNegativeY,
+    distanceFromOriginToFirstNegativeX,
+    distanceFromOriginToFirstNegativeY,
+    deltaAllowance,
+  );
+
+  expect(result).toEqual([]);
+});
+
+describe('skipValue should be empty array if firstNegativeX and firstNegativeY are equal but they do not overlap', () => {
+  // x
+  const intervalX = [-1, -2, 1, 2, 3, 4, 5, 6];
+  const firstNegativeX = firstNegativeValue(intervalX);
+  const distanceFromOriginToFirstNegativeX = -7;
+
+  // y
+  const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
+  const firstNegativeY = firstNegativeValue(intervalY);
+  const distanceFromOriginToFirstNegativeY = -22;
+
+  const deltaAllowance = 5;
+
+  const result = sharedValues(
+    firstNegativeX,
+    firstNegativeY,
+    distanceFromOriginToFirstNegativeX,
+    distanceFromOriginToFirstNegativeY,
+    deltaAllowance,
+  );
+
+  expect(result).toEqual([]);
+});
+
+describe('skipValue should be -1 if firstNegativeX and firstNegativeY are equal and they overlap', () => {
+  // x
+  const intervalX = [-1, -2, 1, 2, 3, 4, 5, 6];
+  const firstNegativeX = firstNegativeValue(intervalX);
+  const distanceFromOriginToFirstNegativeX = -20;
+
+  // y
+  const intervalY = [-1, -2, 1, 2, 3, 4, 5, 6];
+  const firstNegativeY = firstNegativeValue(intervalY);
+  const distanceFromOriginToFirstNegativeY = -22;
+
+  const deltaAllowance = 5;
+
+  const result = sharedValues(
+    firstNegativeX,
+    firstNegativeY,
+    distanceFromOriginToFirstNegativeX,
+    distanceFromOriginToFirstNegativeY,
+    deltaAllowance,
+  );
+
+  expect(result).toEqual([-1]);
+});

package/src/axis/axes.jsx

@@ -23,16 +23,16 @@ const AxisDefaultProps = {
 
 const axisStyles = (theme) => ({
   line: {
-    stroke: color.primary(),
-    strokeWidth: 5,
+    stroke: color.defaults.PRIMARY,
+    strokeWidth: 3,
   },
   arrow: {
-    fill: color.primary(),
+    fill: color.defaults.PRIMARY,
   },
   tick: {
-    fill: color.primary(),
+    fill: color.defaults.PRIMARY,
     '& > line': {
-      stroke: color.primary(),
+      stroke: color.defaults.PRIMARY,
     },
   },
   labelFontSize: {

package/src/container/index.jsx

@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
 import isEqual from 'lodash/isEqual';
 import { ActionCreators } from 'redux-undo';
 import GraphWithControls from '../graph-with-controls';
-import { lastActionMiddleware, getLastAction } from './middleware';
+import { lastActionMiddleware } from './middleware';
 
 const mapStateToProps = (s) => ({
   marks: s.marks.present,
@@ -58,11 +58,9 @@ class Root extends React.Component {
   onStoreChange = () => {
     const { marks, onChangeMarks } = this.props;
     const storeState = this.store.getState();
-    const lastAction = getLastAction();
-    const isUndoOperation = lastAction.type.includes('UNDO') || lastAction.type.includes('REDO');
 
     if (!isEqual(storeState.marks.present, marks)) {
-      onChangeMarks(storeState.marks.present, isUndoOperation);
+      onChangeMarks(storeState.marks.present);
     }
   };
 

package/src/coordinates-label.jsx

@@ -12,7 +12,7 @@ const styles = (theme) => ({
     fontSize: theme.typography.fontSize,
     borderRadius: '8px',
     background: theme.palette.common.white,
-    color: color.primaryDark(),
+    color: color.defaults.PRIMARY_DARK,
   },
   inputLabel: {
     padding: 0,
@@ -20,8 +20,9 @@ const styles = (theme) => ({
 });
 
 export const getLabelPosition = (graphProps, x, y, labelLength) => {
-  const { scale, domain } = graphProps;
-  const topShift = 8;
+  const { scale, domain, range } = graphProps;
+  // treat corner cases for maximum and minimum
+  const topShift = y === range.min ? 16 : y === range.max ? 0 : 8;
   const leftShift = 10;
   const rightEdge = scale.x(x) + labelLength + leftShift;