@pie-lib/graphing-solution-set 2.16.0-beta.0

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/arrow.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import classNames from 'classnames';
+import { withStyles } from '@material-ui/core/styles';
+import { types } from '@pie-lib/plot';
+
+const style = (theme) => ({
+  root: {
+    fill: `var(--arrow-color, ${theme.palette.common.black})`,
+  },
+});
+
+export class Arrow extends React.Component {
+  render() {
+    const { x, y, classes, className, scale } = this.props;
+    const names = classNames(classes.root, className);
+    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 <path d="m 0,0 8,-5 0,10 -8,-5" transform={transform} className={names} />;
+  }
+}
+
+Arrow.propTypes = {
+  y: PropTypes.number,
+  x: PropTypes.number,
+  direction: PropTypes.oneOf(['left', 'right', 'up', 'down']),
+  classes: PropTypes.object.isRequired,
+  className: PropTypes.string,
+  scale: types.ScaleType.isRequired,
+};
+
+Arrow.defaultProps = {
+  y: 0,
+  x: 0,
+  direction: 'left',
+};
+
+export default withStyles(style)(Arrow);