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

package/src/tools/shared/line/__tests__/index.test.jsx

@@ -0,0 +1,255 @@
+import { lineTool, lineToolComponent, lineBase } from '../index';
+import { utils } from '@pie-lib/plot';
+import { shallow } from 'enzyme';
+import React from 'react';
+import { graphProps as getGraphProps } from '../../../../__tests__/utils';
+
+const { xy } = utils;
+const xyLabel = (x, y, label) => ({ x, y, label });
+
+describe('lineTool', () => {
+  describe('addPoint', () => {
+    let toolbar;
+    beforeEach(() => {
+      toolbar = lineTool('lineType', () => <div />)();
+    });
+    it('returns a building mark', () => {
+      const result = toolbar.addPoint(xy(1, 1));
+      expect(result).toEqual({
+        type: 'lineType',
+        building: true,
+        from: xy(1, 1),
+      });
+    });
+
+    it('returns a complete mark', () => {
+      const result = toolbar.addPoint(xy(1, 1), { from: xy(0, 0) });
+      expect(result).toEqual({
+        building: false,
+        from: xy(0, 0),
+        to: xy(1, 1),
+      });
+    });
+  });
+});
+
+describe('lineToolComponent', () => {
+  let Comp;
+  let mark;
+  let onChange;
+  let w;
+  const wrapper = (extras) => {
+    const defaults = {
+      mark,
+      onChange: jest.fn(),
+      graphProps: getGraphProps(),
+    };
+    const props = { ...defaults, ...extras };
+
+    return shallow(<Comp {...props} />);
+  };
+
+  beforeEach(() => {
+    Comp = lineToolComponent(() => <text />);
+    mark = { from: xy(0, 0), to: xy(1, 1) };
+  });
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+  describe('logic', () => {
+    describe('startDrag', () => {
+      it('sets state', () => {
+        w = wrapper();
+        w.instance().startDrag();
+        expect(w.state('mark')).toEqual(mark);
+      });
+    });
+
+    describe('stopDrag/changeMark', () => {
+      let update = { from: xy(2, 2), to: xy(4, 4) };
+      beforeEach(() => {
+        w = wrapper();
+        w.instance().changeMark(update);
+        w.instance().stopDrag();
+      });
+      it('calls onChange', () => {
+        expect(w.instance().props.onChange).toHaveBeenCalledWith(mark, update);
+      });
+    });
+  });
+});
+
+describe('lineBase', () => {
+  let Comp;
+  let w;
+  let onChange = jest.fn();
+  let changeMarkProps = jest.fn();
+
+  beforeEach(() => {
+    Comp = lineBase(() => <text />);
+  });
+
+  const wrapper = (extras) => {
+    const defaults = {
+      onChange,
+      changeMarkProps,
+      graphProps: getGraphProps(),
+      from: xy(0, 0),
+      to: xy(1, 1),
+    };
+    const props = { ...defaults, ...extras };
+
+    return shallow(<Comp {...props} />);
+  };
+
+  // used to test items that have labels attached to points
+  const labelNode = document.createElement('foreignObject');
+  const wrapperWithLabels = (extras = {}) =>
+    wrapper({
+      ...extras,
+      labelNode: labelNode,
+      from: xyLabel(0, 0, 'A'),
+      to: xyLabel(1, 1, 'B'),
+    });
+
+  describe('render', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+
+    it('renders with labels', () => {
+      w = wrapperWithLabels();
+      expect(w).toMatchSnapshot();
+    });
+  });
+
+  describe('logic', () => {
+    const assertCallsOnChange = (fn, args, expected) => {
+      it('calls onChange', () => {
+        const w = wrapper();
+        w.instance()[fn](...args);
+        expect(w.instance().props.onChange).toBeCalledWith(expected);
+      });
+    };
+
+    const assertCallsOnChangeWithLabels = (fn, args, expected) => {
+      it('calls onChange with labels', () => {
+        const w = wrapperWithLabels();
+        w.instance()[fn](...args);
+        expect(w.instance().props.onChange).toBeCalledWith(expected);
+      });
+    };
+
+    describe('dragComp', () => {
+      const update = { from: xy(2, 2), to: xy(4, 4) };
+      assertCallsOnChange('dragComp', [update], update);
+    });
+
+    describe('dragComp keeps labels on both "from" and "to"', () => {
+      const update = { from: xy(2, 2), to: xy(4, 4) };
+      assertCallsOnChangeWithLabels('dragComp', [update], {
+        from: xyLabel(2, 2, 'A'),
+        to: xyLabel(4, 4, 'B'),
+      });
+    });
+
+    describe('dragFrom', () => {
+      assertCallsOnChange('dragFrom', [xy(2, 2)], { from: xy(2, 2), to: xy(1, 1) });
+    });
+
+    describe('dragFrom keeps labels on "from"', () => {
+      assertCallsOnChangeWithLabels('dragFrom', [xy(2, 2)], {
+        from: xyLabel(2, 2, 'A'),
+        to: xyLabel(1, 1, 'B'),
+      });
+    });
+
+    describe('dragTo', () => {
+      assertCallsOnChange('dragTo', [xy(2, 2)], { from: xy(0, 0), to: xy(2, 2) });
+    });
+
+    describe('dragTo keeps labels on "to"', () => {
+      assertCallsOnChangeWithLabels('dragTo', [xy(3, 3)], {
+        from: xyLabel(0, 0, 'A'),
+        to: xyLabel(3, 3, 'B'),
+      });
+    });
+
+    describe('labelChange', () => {
+      it('updates "label" property for point', () => {
+        w = wrapperWithLabels({ labelModeEnabled: true });
+
+        w.instance().labelChange(xyLabel(0, 0, 'Label A'), 'from');
+        expect(changeMarkProps).toBeCalledWith({
+          from: xyLabel(0, 0, 'Label A'),
+        });
+
+        w.instance().labelChange(xyLabel(0, 0, 'Label B'), 'to');
+        expect(changeMarkProps).toBeCalledWith({
+          to: xyLabel(0, 0, 'Label B'),
+        });
+      });
+
+      it('removes "label" property if the field is empty', () => {
+        w = wrapperWithLabels();
+
+        w.instance().labelChange(xyLabel(0, 0, ''), 'from');
+        expect(changeMarkProps).toBeCalledWith({
+          from: xy(0, 0),
+        });
+
+        w.instance().labelChange(xyLabel(0, 0, ''), 'to');
+        expect(changeMarkProps).toBeCalledWith({
+          to: xy(0, 0),
+        });
+      });
+    });
+
+    describe('clickPoint', () => {
+      it('adds "label" property to a point', () => {
+        w = wrapperWithLabels({ labelModeEnabled: true });
+
+        w.instance().clickPoint(xy(0, 0), 'from');
+        expect(changeMarkProps).toBeCalledWith({
+          from: xyLabel(0, 0, ''),
+          to: xyLabel(1, 1, 'B'),
+        });
+
+        w.instance().clickPoint(xy(1, 1), 'to');
+        expect(changeMarkProps).toBeCalledWith({
+          from: xyLabel(0, 0, 'A'),
+          to: xyLabel(1, 1, ''),
+        });
+      });
+
+      it('adds "label" property to a point when limit labeling', () => {
+        const changeMarkProps = jest.fn();
+        w = wrapperWithLabels({ labelModeEnabled: true, limitLabeling: true, changeMarkProps });
+
+        w.instance().clickPoint(xy(0, 0), 'from');
+        expect(changeMarkProps).toHaveBeenCalledTimes(0);
+      });
+
+      it('if point already has label, keeps that value', () => {
+        w = wrapperWithLabels({ labelModeEnabled: true });
+
+        w.instance().clickPoint(xyLabel(0, 0, 'Label A'), 'from');
+        expect(changeMarkProps).toBeCalledWith({
+          from: xyLabel(0, 0, 'Label A'),
+          to: xyLabel(1, 1, 'B'),
+        });
+
+        w.instance().clickPoint(xyLabel(1, 1, 'Label B'), 'to');
+        expect(changeMarkProps).toBeCalledWith({
+          from: xyLabel(0, 0, 'A'),
+          to: xyLabel(1, 1, 'Label B'),
+        });
+      });
+    });
+  });
+});

package/src/tools/shared/line/__tests__/line-path.test.jsx

@@ -0,0 +1,53 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { graphProps as getGraphProps } from '../../../../__tests__/utils';
+import { gridDraggable, utils } from '@pie-lib/plot';
+const { xy } = utils;
+
+import * as lineUtils from '../../../../utils';
+
+const { bounds, pointsToArea } = lineUtils;
+jest.mock('../../../../utils', () => {
+  const a = jest.requireActual('../../../../utils');
+  return {
+    pointsToArea: jest.fn().mockReturnValue({}),
+    bounds: jest.fn().mockReturnValue({}),
+    point: a.point,
+  };
+});
+
+jest.mock('@pie-lib/plot', () => {
+  const a = jest.requireActual('@pie-lib/plot');
+  return {
+    gridDraggable: jest.fn((opts) => jest.fn()),
+    types: a.types,
+    utils: a.utils,
+  };
+});
+
+describe('LinePath', () => {
+  let LinePath;
+  let w;
+  let onChange = jest.fn();
+  beforeEach(() => {
+    LinePath = require('../line-path').LinePath;
+  });
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: getGraphProps(),
+      from: xy(0, 0, 0),
+      to: xy(1, 1, 0),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<LinePath {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/tools/shared/line/__tests__/with-root-edge.test.jsx

@@ -0,0 +1,73 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { rootEdgeComponent, withRootEdge, rootEdgeToFromToWrapper } from '../with-root-edge';
+import { graphProps as getGraphProps } from '../../../../__tests__/utils';
+import { utils } from '@pie-lib/plot';
+import { lineToolComponent, LineToolMockComponent } from '../index';
+const { xy } = utils;
+jest.mock('../index', () => {
+  const out = {
+    lineBase: jest.fn().mockReturnValue(() => <div />),
+    lineToolComponent: jest.fn().mockReturnValue(() => <div />),
+  };
+  return out;
+});
+
+describe('rootEdgeToToFromWRapper', () => {
+  let Comp;
+  let w;
+  let onChange = jest.fn();
+  beforeEach(() => {
+    Comp = rootEdgeToFromToWrapper(() => <div />);
+  });
+  const wrapper = (extras) => {
+    const defaults = {
+      mark: { root: xy(1, 1), edge: xy(2, 2) },
+      onChange,
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<Comp {...props} />);
+  };
+
+  it('renders', () => {
+    w = wrapper();
+    expect(w).toMatchSnapshot();
+  });
+
+  it('has from/to mark', () => {
+    w = wrapper();
+    expect(w.props().mark).toEqual({ from: xy(1, 1), to: xy(2, 2) });
+  });
+
+  it('calls onChange with root edge ', () => {
+    w = wrapper();
+    w.props().onChange({ from: xy(1, 1), to: xy(2, 2) }, { from: xy(3, 3), to: xy(4, 4) });
+    expect(onChange).toHaveBeenCalledWith({ root: xy(1, 1), edge: xy(2, 2) }, { root: xy(3, 3), edge: xy(4, 4) });
+  });
+});
+describe('rootEdgeComponent', () => {
+  let w;
+  let onChange = jest.fn();
+  let Comp;
+  let mark;
+  beforeEach(() => {
+    mark = { root: xy(0, 0), edge: xy(1, 1) };
+    Comp = rootEdgeComponent(() => <text />);
+  });
+  const wrapper = (extras, opts) => {
+    const defaults = {
+      mark,
+      graphProps: getGraphProps(),
+      onChange,
+    };
+
+    const props = { ...defaults, ...extras };
+    return shallow(<Comp {...props} />, opts);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/tools/shared/line/index.jsx

@@ -4,7 +4,7 @@ import cloneDeep from 'lodash/cloneDeep';
 import { BasePoint } from '../point';
 import { types, utils, gridDraggable, trig } from '@pie-lib/plot';
 import PropTypes from 'prop-types';
-import { disabled, correct, incorrect, missing } from '../styles';
+import { disabled, disabledSecondary, correct, incorrect, missing } from '../styles';
 import ReactDOM from 'react-dom';
 import MarkLabel from '../../../mark-label';
 import isEmpty from 'lodash/isEmpty';
@@ -55,8 +55,13 @@ export const lineToolComponent = (Component) => {
 
       this.setState({ mark: undefined }, () => {
         const { type } = update;
-        const shouldNotChange = type && (type === 'parabola' || type === 'sine') && sameAxes(update.from, update.to);
-
+        let shouldNotChange =
+          type &&
+          (type === 'parabola' || type === 'sine' || type === 'absolute' || type === 'exponential') &&
+          sameAxes(update.from, update.to);
+        if (!shouldNotChange && type && type === 'exponential' && update.from && update.to) {
+          shouldNotChange = update.from.y === 0 || update.to.y === 0 || update.from.y * update.to.y < 0;
+        }
         if (!isEqual(mark, update) && !shouldNotChange) {
           onChange(mark, update);
         }
@@ -95,7 +100,7 @@ export const lineToolComponent = (Component) => {
     };
 
     render() {
-      const { graphProps, onClick, labelNode, labelModeEnabled, coordinatesOnHover } = this.props;
+      const { graphProps, onClick, labelNode, labelModeEnabled, coordinatesOnHover, limitLabeling } = this.props;
       const mark = this.state.mark ? this.state.mark : this.props.mark;
 
       const from = cloneDeep(mark.from);
@@ -132,6 +137,7 @@ export const lineToolComponent = (Component) => {
           onDragStop={this.stopDrag}
           labelNode={labelNode}
           labelModeEnabled={labelModeEnabled}
+          limitLabeling={limitLabeling}
         />
       );
     }
@@ -249,8 +255,22 @@ export const lineBase = (Comp, opts) => {
       changeMarkProps({ [type]: update });
     };
 
-    clickPoint = (point, type) => {
-      const { changeMarkProps, from, to } = this.props;
+    clickPoint = (point, type, data) => {
+      const { changeMarkProps, disabled, from, to, labelModeEnabled, limitLabeling, onClick } = this.props;
+
+      if (!labelModeEnabled) {
+        onClick(point || data);
+        return;
+      }
+
+      if (disabled) {
+        return;
+      }
+
+      // limit labeling the points of the line
+      if (limitLabeling) {
+        return;
+      }
 
       if (type === 'middle' && !point && from && to) {
         point = { ...point, ...getMiddleOfTwoPoints(from, to) };
@@ -338,7 +358,7 @@ export const lineBase = (Comp, opts) => {
               middle={middle}
               onDrag={this.dragComp}
               {...common}
-              onClick={labelModeEnabled ? () => this.clickPoint(middle, 'middle') : common.onClick}
+              onClick={(data) => this.clickPoint(middle, 'middle', data)}
             />
           )}
           {lineLabelNode}
@@ -350,7 +370,7 @@ export const lineBase = (Comp, opts) => {
             coordinatesOnHover={coordinatesOnHover}
             onDrag={this.dragFrom}
             {...common}
-            onClick={labelModeEnabled ? () => this.clickPoint(from, 'from') : common.onClick}
+            onClick={(data) => this.clickPoint(from, 'from', data)}
           />
           {fromLabelNode}
 
@@ -363,7 +383,7 @@ export const lineBase = (Comp, opts) => {
               coordinatesOnHover={coordinatesOnHover}
               onDrag={this.dragTo}
               {...common}
-              onClick={labelModeEnabled ? () => this.clickPoint(to, 'to') : common.onClick}
+              onClick={(data) => this.clickPoint(to, 'to', data)}
             />
           )}
           {toLabelNode}
@@ -378,19 +398,23 @@ export const lineBase = (Comp, opts) => {
 export const styles = {
   line: () => ({
     fill: 'transparent',
-    stroke: color.primaryLight(),
+    stroke: color.defaults.BLACK,
     strokeWidth: 3,
     transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',
     '&:hover': {
       strokeWidth: 6,
-      stroke: color.primaryDark(),
+      stroke: color.defaults.PRIMARY_DARK,
     },
   }),
   arrow: () => ({
-    fill: color.secondary(),
+    fill: color.defaults.BLACK,
   }),
   disabledArrow: () => ({
-    ...disabled(),
+    ...disabledSecondary(),
+  }),
+  disabledSecondary: () => ({
+    ...disabledSecondary('stroke'),
+    strokeWidth: 2,
   }),
   disabled: () => ({
     ...disabled('stroke'),
@@ -404,5 +428,7 @@ export const styles = {
   }),
   missing: (theme, key) => ({
     ...missing(key),
+    strokeWidth: 1,
+    strokeDasharray: '4 3',
   }),
 };

package/src/tools/shared/line/line-path.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import { types } from '@pie-lib/plot';
 import classNames from 'classnames';
-import { disabled, correct, incorrect, missing } from '../styles';
+import { disabled, correct, incorrect, missing, disabledSecondary } from '../styles';
 import * as vx from '@vx/shape';
 import { color } from '@pie-lib/render-ui';
 
@@ -34,7 +34,12 @@ export class RawLinePath extends React.Component {
       <React.Fragment>
         <vx.LinePath
           data={data}
-          className={classNames(classes.drawLine, disabled && classes.disabled, classes[correctness], className)}
+          className={classNames(
+            classes.drawLine,
+            disabled && classes.disabledSecondary,
+            classes[correctness],
+            className,
+          )}
           {...rest}
         />
         <vx.LinePath
@@ -42,7 +47,7 @@ export class RawLinePath extends React.Component {
           className={classNames(
             classes.line,
             isDragging && classes.dragging,
-            disabled && classes.disabled,
+            disabled && classes.disabledSecondary,
             classes[correctness],
             className,
           )}
@@ -54,18 +59,18 @@ export class RawLinePath extends React.Component {
 }
 
 const dragging = () => ({
-  strokeWidth: 7,
-  stroke: color.secondaryLight(),
+  strokeWidth: 4,
+  stroke: color.defaults.BLACK,
 });
 
 export const LinePath = withStyles((theme) => ({
   drawLine: {
     fill: 'none',
     strokeWidth: 2,
-    stroke: color.secondaryLight(),
+    stroke: color.black(),
   },
   line: {
-    strokeWidth: 6,
+    strokeWidth: 3,
     fill: 'none',
     transition: 'stroke-width 200ms ease-in, stroke 200ms ease-in',
     stroke: 'transparent',
@@ -76,6 +81,10 @@ export const LinePath = withStyles((theme) => ({
     ...disabled('stroke'),
     strokeWidth: 2,
   },
+  disabledSecondary: {
+    ...disabledSecondary('stroke'),
+    strokeWidth: 2,
+  },
   correct: {
     ...correct('stroke'),
   },
@@ -84,5 +93,7 @@ export const LinePath = withStyles((theme) => ({
   },
   missing: {
     ...missing('stroke'),
+    strokeWidth: 1,
+    strokeDasharray: '4 3',
   },
 }))(RawLinePath);

package/src/tools/shared/line/with-root-edge.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { types } from '@pie-lib/plot';
-import { LinePath } from '../line/line-path';
+import { LinePath } from './line-path';
 import { curveMonotoneX } from '@vx/curve';
 import { lineBase, lineToolComponent } from './index';
 
@@ -51,11 +51,12 @@ const withPointsGenerationLinePath = (getPoints) => {
   const LinePathComponent = (props) => {
     const { graphProps, from, to, onClick, onDragStart, onDragStop, onChange, disabled, correctness, ...rest } = props;
 
-    const { dataPoints } = getPoints({
+    const { dataPoints, enableCurve = true } = getPoints({
       graphProps: props.graphProps,
       root: from,
       edge: to,
     });
+
     const raw = dataPoints.map((d) => [graphProps.scale.x(d.x), graphProps.scale.y(d.y)]);
 
     const common = {
@@ -68,8 +69,13 @@ const withPointsGenerationLinePath = (getPoints) => {
       correctness,
     };
 
-    return <LinePath data={raw} from={from} to={to} curve={curveMonotoneX} {...common} {...rest} />;
+    if (!enableCurve) {
+      return <LinePath data={raw} from={from} to={to} {...common} {...rest} />;
+    } else {
+      return <LinePath data={raw} from={from} to={to} curve={curveMonotoneX} {...common} {...rest} />;
+    }
   };
+
   LinePathComponent.propTypes = {
     graphProps: types.GraphPropsType.isRequired,
     from: types.PointType.isRequired,
@@ -81,6 +87,7 @@ const withPointsGenerationLinePath = (getPoints) => {
     disabled: PropTypes.bool,
     correctness: PropTypes.string,
   };
+
   return LinePathComponent;
 };
 

package/src/tools/shared/point/__tests__/__snapshots__/arrow-point.test.jsx.snap

@@ -0,0 +1,56 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ArrowPoint snapshot renders 1`] = `
+<RawArrow
+  className="className"
+  classes={
+    Object {
+      "correct": "RawArrow-correct-4",
+      "disabled": "RawArrow-disabled-2",
+      "disabledSecondary": "RawArrow-disabledSecondary-3",
+      "incorrect": "RawArrow-incorrect-5",
+      "missing": "RawArrow-missing-6",
+      "point": "RawArrow-point-1",
+    }
+  }
+  from={
+    Object {
+      "x": 0,
+      "y": 0,
+    }
+  }
+  graphProps={
+    Object {
+      "domain": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "range": Object {
+        "max": 1,
+        "min": 0,
+        "step": 1,
+      },
+      "scale": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+      "size": Object {
+        "height": 400,
+        "width": 400,
+      },
+      "snap": Object {
+        "x": [MockFunction],
+        "y": [MockFunction],
+      },
+    }
+  }
+  onChange={[MockFunction]}
+  to={
+    Object {
+      "x": 1,
+      "y": 1,
+    }
+  }
+/>
+`;