@pie-lib/graphing 2.14.22 → 2.15.1-beta.0

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

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BasePoint snapshot renders 1`] = `
+<RawBp
+  className="className"
+  classes={
+    Object {
+      "correct": "RawBp-correct-4",
+      "disabled": "RawBp-disabled-2",
+      "disabledSecondary": "RawBp-disabledSecondary-3",
+      "incorrect": "RawBp-incorrect-5",
+      "missing": "RawBp-missing-6",
+      "point": "RawBp-point-1",
+    }
+  }
+  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]}
+/>
+`;

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

@@ -0,0 +1,87 @@
+import { shallow } from 'enzyme/build';
+import React from 'react';
+import { ArrowPoint } from '../index';
+import { graphProps } from '../../../../__tests__/utils';
+import { bounds } from '../../../../utils';
+import { gridDraggable, utils } from '@pie-lib/plot';
+
+const { xy } = utils;
+jest.mock('../../../../utils', () => {
+  const { point } = jest.requireActual('../../../../utils');
+  return {
+    bounds: jest.fn(),
+    point,
+  };
+});
+
+jest.mock('@pie-lib/plot/index', () => {
+  const { types, utils } = jest.requireActual('@pie-lib/plot/index');
+  return {
+    gridDraggable: jest.fn((opts) => (Comp) => Comp),
+    types,
+    utils,
+  };
+});
+
+describe('ArrowPoint', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+      from: xy(0, 0),
+      to: xy(1, 1),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<ArrowPoint {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+  describe('gridDraggable options', () => {
+    let opts;
+    let domain;
+    let range;
+    beforeEach(() => {
+      domain = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      range = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      const w = wrapper();
+      opts = gridDraggable.mock.calls[0][0];
+    });
+
+    describe('bounds', () => {
+      it('calls utils.bounds with area', () => {
+        const result = opts.bounds({ x: 0, y: 0 }, { domain, range });
+        expect(bounds).toHaveBeenCalledWith({ left: 0, top: 0, bottom: 0, right: 0 }, domain, range);
+      });
+    });
+    describe('anchorPoint', () => {
+      it('returns x/y', () => {
+        const result = opts.anchorPoint({ x: 0, y: 0 });
+        expect(result).toEqual({ x: 0, y: 0 });
+      });
+    });
+
+    describe('fromDelta', () => {
+      it('returns a new point from the x/y + delta', () => {
+        const result = opts.fromDelta({ x: -1, y: 0 }, { x: 1, y: 3 });
+        expect(result).toEqual({ x: 0, y: 3 });
+      });
+    });
+  });
+});

package/src/tools/shared/point/__tests__/base-point.test.jsx

@@ -0,0 +1,84 @@
+import { shallow } from 'enzyme/build';
+import React from 'react';
+import { BasePoint } from '../index';
+import { gridDraggable } from '@pie-lib/plot';
+import { graphProps } from '../../../../__tests__/utils';
+import { bounds } from '../../../../utils';
+
+jest.mock('../../../../utils', () => {
+  const { point } = jest.requireActual('../../../../utils');
+  return {
+    bounds: jest.fn(),
+    point,
+  };
+});
+
+jest.mock('@pie-lib/plot/index', () => {
+  const { types, utils } = jest.requireActual('@pie-lib/plot/index');
+  return {
+    gridDraggable: jest.fn((opts) => (Comp) => Comp),
+    types,
+    utils,
+  };
+});
+
+describe('BasePoint', () => {
+  let w;
+  let onChange = jest.fn();
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      onChange,
+      graphProps: graphProps(),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<BasePoint {...props} />);
+  };
+
+  describe('snapshot', () => {
+    it('renders', () => {
+      w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+  describe('gridDraggable options', () => {
+    let opts;
+    let domain;
+    let range;
+    beforeEach(() => {
+      domain = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      range = {
+        min: 0,
+        max: 1,
+        step: 1,
+      };
+      const w = wrapper();
+      opts = gridDraggable.mock.calls[0][0];
+    });
+
+    describe('bounds', () => {
+      it('calls utils.bounds with area', () => {
+        const result = opts.bounds({ x: 0, y: 0 }, { domain, range });
+        expect(bounds).toHaveBeenCalledWith({ left: 0, top: 0, bottom: 0, right: 0 }, domain, range);
+      });
+    });
+    describe('anchorPoint', () => {
+      it('returns x/y', () => {
+        const result = opts.anchorPoint({ x: 0, y: 0 });
+        expect(result).toEqual({ x: 0, y: 0 });
+      });
+    });
+
+    describe('fromDelta', () => {
+      it('returns a new point from the x/y + delta', () => {
+        const result = opts.fromDelta({ x: -1, y: 0 }, { x: 1, y: 3 });
+        expect(result).toEqual({ x: 0, y: 3 });
+      });
+    });
+  });
+});

package/src/tools/shared/point/arrow-point.jsx

@@ -47,7 +47,10 @@ export class RawArrow extends React.Component {
     }
 
     return (
-      <g className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)} {...rest}>
+      <g
+        className={classNames(classes.point, disabled && classes.disabledSecondary, classes[correctness], className)}
+        {...rest}
+      >
         <polygon
           points={points}
           transform={`

package/src/tools/shared/point/arrow.jsx

@@ -32,7 +32,10 @@ export default class Arrow extends React.Component {
         ${scaledX - size}, ${scaledY + size / 2}`;
 
     return (
-      <g className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)} {...rest}>
+      <g
+        className={classNames(classes.point, disabled && classes.disabledSecondary, classes[correctness], className)}
+        {...rest}
+      >
         <ArrowHead size={size} transform={transform} points={points} />
       </g>
     );

package/src/tools/shared/point/base-point.jsx

@@ -5,6 +5,9 @@ import { types } from '@pie-lib/plot';
 import CoordinatesLabel from '../../../coordinates-label';
 import ReactDOM from 'react-dom';
 import { thinnerShapesNeeded } from '../../../utils';
+import MissingSVG from '../icons/MissingSVG';
+import CorrectSVG from '../icons/CorrectSVG';
+import IncorrectSVG from '../icons/IncorrectSVG';
 
 export class RawBp extends React.Component {
   static propTypes = {
@@ -38,11 +41,31 @@ export class RawBp extends React.Component {
       // we need to remove style from props
       // eslint-disable-next-line no-unused-vars,react/prop-types
       style,
+      onClick,
+      // Refactored RawBp component by isolating onTouchStart and onTouchEnd handlers to the outer circle, resolving erratic touch event behavior.
+      // Remaining props are now applied only to the inner circle for improved event handling consistency.
+      onTouchStart,
+      onTouchEnd,
       ...rest
     } = this.props;
     const { showCoordinates } = this.state;
     const { scale } = graphProps;
     const r = thinnerShapesNeeded(graphProps) ? 5 : 7;
+    let SvgComponent;
+    switch (correctness) {
+      case 'missing':
+        SvgComponent = MissingSVG;
+        break;
+      case 'correct':
+        SvgComponent = CorrectSVG;
+        break;
+      case 'incorrect':
+        SvgComponent = IncorrectSVG;
+        break;
+      default:
+        SvgComponent = null;
+        break;
+    }
 
     return (
       <>
@@ -53,15 +76,17 @@ export class RawBp extends React.Component {
           cy={scale.y(y)}
           onMouseEnter={() => this.setState({ showCoordinates: true })}
           onMouseLeave={() => this.setState({ showCoordinates: false })}
-          {...rest}
+          onTouchStart={onTouchStart}
+          onTouchEnd={onTouchEnd}
+          onClick={onClick}
         />
         <g
-          className={classNames(classes.point, disabled && classes.disabled, classes[correctness], className)}
+          className={classNames(classes.point, disabled && classes.disabledSecondary, classes[correctness], className)}
           onMouseEnter={() => this.setState({ showCoordinates: true })}
           onMouseLeave={() => this.setState({ showCoordinates: false })}
-          {...rest}
         >
           <circle {...rest} r={r} cx={scale.x(x)} cy={scale.y(y)} />
+          {SvgComponent && <SvgComponent scale={scale} x={x} y={y} />}
           {labelNode &&
             coordinatesOnHover &&
             showCoordinates &&

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

@@ -1,7 +1,7 @@
 import { withStyles } from '@material-ui/core/styles/index';
 import { gridDraggable } from '@pie-lib/plot';
 import * as utils from '../../../utils';
-import { disabled, correct, incorrect, missing } from '../styles';
+import { disabled, correct, incorrect, missing, disabledSecondary } from '../styles';
 import { RawBp } from './base-point';
 import { RawArrow } from './arrow-point';
 import { color } from '@pie-lib/render-ui';
@@ -29,7 +29,7 @@ const styles = () => {
     point: {
       '& circle, & polygon': {
         cursor: 'pointer',
-        fill: color.secondary(),
+        fill: color.defaults.BLACK,
       },
     },
     disabled: {
@@ -37,6 +37,11 @@ const styles = () => {
         ...disabled(),
       },
     },
+    disabledSecondary: {
+      '& circle, & polygon': {
+        ...disabledSecondary(),
+      },
+    },
     correct: {
       '& circle, & polygon': {
         ...correct(),

package/src/tools/shared/styles.js

@@ -5,16 +5,21 @@ export const disabled = (key = 'fill') => ({
   pointerEvents: 'none',
 });
 
+export const disabledSecondary = (key = 'fill') => ({
+  [key]: color.disabledSecondary(),
+  pointerEvents: 'none',
+});
+
 export const correct = (key = 'fill') => ({
-  [key]: color.correct(),
+  [key]: color.correctWithIcon(),
   pointerEvents: 'none',
 });
 export const incorrect = (key = 'fill') => ({
-  [key]: color.incorrect(),
+  [key]: color.incorrectWithIcon(),
   pointerEvents: 'none',
 });
 
 export const missing = (key = 'fill') => ({
-  [key]: color.missing(),
+  [key]: color.missingWithIcon(),
   pointerEvents: 'none',
 });

package/src/tools/sine/__tests__/component.test.jsx

@@ -0,0 +1,51 @@
+import { withRootEdge } from '../../shared/line/with-root-edge';
+import { buildDataPoints, sinY } from '@pie-lib/graphing-utils';
+import { utils } from '@pie-lib/plot';
+
+import { graphProps as getGraphProps } from '../../../__tests__/utils';
+
+const { xy } = utils;
+jest.mock('@pie-lib/graphing-utils/index', () => ({
+  sinY: jest.fn().mockReturnValue(0),
+  buildDataPoints: jest.fn().mockReturnValue([]),
+  parabolaFromTwoPoints: jest.fn(() => jest.fn()),
+  getAmplitudeAndFreq: jest.fn().mockReturnValue({ freq: 4, amplitude: 1 }),
+  FREQ_DIVIDER: 16,
+}));
+
+jest.mock('../../shared/line/with-root-edge', () => ({
+  withRootEdge: jest.fn(),
+  rootEdgeComponent: jest.fn(),
+}));
+describe('Parabola', () => {
+  let fnBody;
+  let graphProps;
+  let root;
+  let edge;
+  let result;
+  beforeEach(() => {
+    require('../component');
+    fnBody = withRootEdge.mock.calls[0][0];
+    graphProps = getGraphProps();
+    root = xy(0, 0);
+    edge = xy(1, 1);
+
+    result = fnBody({ graphProps, root, edge });
+  });
+  it('fnBody is not null', () => {
+    expect(fnBody).toBeDefined();
+  });
+
+  it('calls buildDataPoints', () => {
+    const { domain, range } = graphProps;
+    expect(buildDataPoints).toHaveBeenCalledWith({ ...domain, step: 0.25 }, range, root, edge, expect.anything());
+  });
+
+  it('calls sinY', () => {
+    expect(sinY).toHaveBeenCalledWith(1, 4, expect.anything());
+  });
+
+  it('returns dataPoints', () => {
+    expect(result).toEqual({ root, edge, dataPoints: [] });
+  });
+});

package/src/tools/sine/component.jsx

@@ -4,29 +4,29 @@ import { withRootEdge, rootEdgeComponent } from '../shared/line/with-root-edge';
 
 const log = debug('pie-lib:graphing:sine');
 
-log('sine...');
-
 const Sine = withRootEdge((props) => {
-  const { domain } = props.graphProps;
+  const { root, edge, graphProps } = props;
+  const { domain, range } = graphProps;
 
-  const { root, edge } = props;
   const { amplitude, freq } = getAmplitudeAndFreq(root, edge);
   const interval = freq / FREQ_DIVIDER;
+
   log('[getPoints] amplitude:', amplitude, 'freq:', freq);
 
   const dataPoints =
     edge && edge.x === root.x
       ? []
       : buildDataPoints(
-          domain.min,
-          domain.max,
+          { ...domain, step: interval },
+          range,
           root,
           edge,
-          interval,
           sinY(amplitude, freq, { phase: root.x, vertical: root.y }),
         );
+
   return { root: props.root, edge: props.edge, dataPoints };
 });
 
 const Component = rootEdgeComponent(Sine);
+
 export default Component;

package/src/tools/vector/__tests__/__snapshots__/component.test.jsx.snap

@@ -0,0 +1,12 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Line snapshot renders 1`] = `
+<line
+  className="className"
+  strokeDasharray={-5.585786437626905}
+  x1={0}
+  x2={1}
+  y1={0}
+  y2={1}
+/>
+`;

package/src/tools/vector/__tests__/component.test.jsx

@@ -0,0 +1,26 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { Line } from '../component';
+import { graphProps as getGraphProps } from '../../../__tests__/utils';
+import { utils } from '@pie-lib/plot';
+
+describe('Line', () => {
+  let w;
+  const wrapper = (extras) => {
+    const defaults = {
+      classes: {},
+      className: 'className',
+      graphProps: getGraphProps(),
+      from: utils.xy(0, 0),
+      to: utils.xy(1, 1),
+    };
+    const props = { ...defaults, ...extras };
+    return shallow(<Line {...props} />);
+  };
+  describe('snapshot', () => {
+    it('renders', () => {
+      const w = wrapper();
+      expect(w).toMatchSnapshot();
+    });
+  });
+});

package/src/tools/vector/component.jsx

@@ -10,6 +10,7 @@ import { getDistanceBetweenTwoPoints } from '../../utils';
 const lineStyles = (theme) => ({
   line: styles.line(theme),
   disabled: styles.disabled(theme),
+  disabledSecondary: styles.disabledSecondary(theme),
   correct: styles.correct(theme, 'stroke'),
   incorrect: styles.incorrect(theme, 'stroke'),
   missing: styles.missing(theme, 'stroke'),
@@ -32,7 +33,7 @@ export const Line = (props) => {
 
   return (
     <line
-      className={classNames(classes.line, disabled && classes.disabled, classes[correctness], className)}
+      className={classNames(classes.line, disabled && classes.disabledSecondary, classes[correctness], className)}
       x1={startPoint.x}
       y1={startPoint.y}
       x2={endPoint.x}

package/src/undo-redo.jsx

@@ -40,7 +40,6 @@ export class UndoRedo extends React.Component {
 const styles = (theme) => ({
   button: {
     color: color.text(),
-    backgroundColor: color.background(),
     marginBottom: theme.spacing.unit / 2,
     '&:not(:last-of-type)': {
       marginRight: theme.spacing.unit / 2,

package/src/utils.js

@@ -203,7 +203,7 @@ export const isDuplicatedMark = (mark, marks, oldMark) => {
   }
 
   const duplicated = filteredMarks.find((m) => {
-    if (type === 'circle' || type === 'parabola' || type === 'sine') {
+    if (type === 'circle' || type === 'parabola' || type === 'sine' || type === 'absolute' || type === 'exponential') {
       const { root, edge } = mark;
 
       return (equalPoints(root, m.root) && equalPoints(edge, m.edge)) || (type === 'circle' && isSameCircle(m, mark));

package/lib/axis/arrow.js

@@ -1,115 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = exports.Arrow = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _classnames = _interopRequireDefault(require("classnames"));
-
-var _styles = require("@material-ui/core/styles");
-
-var _plot = require("@pie-lib/plot");
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2["default"])(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2["default"])(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2["default"])(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var style = function style(theme) {
-  return {
-    root: {
-      fill: "var(--arrow-color, ".concat(theme.palette.common.black, ")")
-    }
-  };
-};
-
-var Arrow = /*#__PURE__*/function (_React$Component) {
-  (0, _inherits2["default"])(Arrow, _React$Component);
-
-  var _super = _createSuper(Arrow);
-
-  function Arrow() {
-    (0, _classCallCheck2["default"])(this, Arrow);
-    return _super.apply(this, arguments);
-  }
-
-  (0, _createClass2["default"])(Arrow, [{
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          x = _this$props.x,
-          y = _this$props.y,
-          classes = _this$props.classes,
-          className = _this$props.className,
-          scale = _this$props.scale;
-      var names = (0, _classnames["default"])(classes.root, className);
-      var direction = this.props.direction || 'left';
-      var xv = scale.x(x);
-      var yv = scale.y(y);
-      var transform = '';
-
-      var getTransform = function getTransform(x, y, rotate) {
-        return "translate(".concat(x, ", ").concat(y, ") rotate(").concat(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 /*#__PURE__*/_react["default"].createElement("path", {
-        d: "m 0,0 8,-5 0,10 -8,-5",
-        transform: transform,
-        className: names
-      });
-    }
-  }]);
-  return Arrow;
-}(_react["default"].Component);
-
-exports.Arrow = Arrow;
-Arrow.propTypes = {
-  y: _propTypes["default"].number,
-  x: _propTypes["default"].number,
-  direction: _propTypes["default"].oneOf(['left', 'right', 'up', 'down']),
-  classes: _propTypes["default"].object.isRequired,
-  className: _propTypes["default"].string,
-  scale: _plot.types.ScaleType.isRequired
-};
-Arrow.defaultProps = {
-  y: 0,
-  x: 0,
-  direction: 'left'
-};
-
-var _default = (0, _styles.withStyles)(style)(Arrow);
-
-exports["default"] = _default;
-//# sourceMappingURL=arrow.js.map

package/lib/axis/arrow.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../src/axis/arrow.jsx"],"names":["style","theme","root","fill","palette","common","black","Arrow","props","x","y","classes","className","scale","names","direction","xv","yv","transform","getTransform","rotate","React","Component","propTypes","PropTypes","number","oneOf","object","isRequired","string","types","ScaleType","defaultProps"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AAEA;;AACA;;AACA;;;;;;AAEA,IAAMA,KAAK,GAAG,SAARA,KAAQ,CAACC,KAAD;AAAA,SAAY;AACxBC,IAAAA,IAAI,EAAE;AACJC,MAAAA,IAAI,+BAAwBF,KAAK,CAACG,OAAN,CAAcC,MAAd,CAAqBC,KAA7C;AADA;AADkB,GAAZ;AAAA,CAAd;;IAMaC,K;;;;;;;;;;;;WACX,kBAAS;AACP,wBAA4C,KAAKC,KAAjD;AAAA,UAAQC,CAAR,eAAQA,CAAR;AAAA,UAAWC,CAAX,eAAWA,CAAX;AAAA,UAAcC,OAAd,eAAcA,OAAd;AAAA,UAAuBC,SAAvB,eAAuBA,SAAvB;AAAA,UAAkCC,KAAlC,eAAkCA,KAAlC;AACA,UAAMC,KAAK,GAAG,4BAAWH,OAAO,CAACT,IAAnB,EAAyBU,SAAzB,CAAd;AACA,UAAIG,SAAS,GAAG,KAAKP,KAAL,CAAWO,SAAX,IAAwB,MAAxC;AAEA,UAAMC,EAAE,GAAGH,KAAK,CAACJ,CAAN,CAAQA,CAAR,CAAX;AACA,UAAMQ,EAAE,GAAGJ,KAAK,CAACH,CAAN,CAAQA,CAAR,CAAX;AAEA,UAAIQ,SAAS,GAAG,EAAhB;;AAEA,UAAMC,YAAY,GAAG,SAAfA,YAAe,CAACV,CAAD,EAAIC,CAAJ,EAAOU,MAAP;AAAA,mCAA+BX,CAA/B,eAAqCC,CAArC,sBAAkDU,MAAlD;AAAA,OAArB;;AAEA,UAAIL,SAAS,KAAK,MAAlB,EAA0B;AACxBG,QAAAA,SAAS,GAAGC,YAAY,CAACH,EAAE,GAAG,EAAN,EAAUC,EAAV,EAAc,CAAd,CAAxB;AACD;;AAED,UAAIF,SAAS,KAAK,OAAlB,EAA2B;AACzBG,QAAAA,SAAS,GAAGC,YAAY,CAACH,EAAE,GAAG,EAAN,EAAUC,EAAV,EAAc,GAAd,CAAxB;AACD;;AAED,UAAIF,SAAS,KAAK,IAAlB,EAAwB;AACtBG,QAAAA,SAAS,GAAGC,YAAY,CAACH,EAAD,EAAKC,EAAE,GAAG,EAAV,EAAc,EAAd,CAAxB;AACD;;AAED,UAAIF,SAAS,KAAK,MAAlB,EAA0B;AACxBG,QAAAA,SAAS,GAAGC,YAAY,CAACH,EAAD,EAAKC,EAAE,GAAG,EAAV,EAAc,GAAd,CAAxB;AACD;;AAED,0BAAO;AAAM,QAAA,CAAC,EAAC,uBAAR;AAAgC,QAAA,SAAS,EAAEC,SAA3C;AAAsD,QAAA,SAAS,EAAEJ;AAAjE,QAAP;AACD;;;EA9BwBO,kBAAMC,S;;;AAiCjCf,KAAK,CAACgB,SAAN,GAAkB;AAChBb,EAAAA,CAAC,EAAEc,sBAAUC,MADG;AAEhBhB,EAAAA,CAAC,EAAEe,sBAAUC,MAFG;AAGhBV,EAAAA,SAAS,EAAES,sBAAUE,KAAV,CAAgB,CAAC,MAAD,EAAS,OAAT,EAAkB,IAAlB,EAAwB,MAAxB,CAAhB,CAHK;AAIhBf,EAAAA,OAAO,EAAEa,sBAAUG,MAAV,CAAiBC,UAJV;AAKhBhB,EAAAA,SAAS,EAAEY,sBAAUK,MALL;AAMhBhB,EAAAA,KAAK,EAAEiB,YAAMC,SAAN,CAAgBH;AANP,CAAlB;AASArB,KAAK,CAACyB,YAAN,GAAqB;AACnBtB,EAAAA,CAAC,EAAE,CADgB;AAEnBD,EAAAA,CAAC,EAAE,CAFgB;AAGnBM,EAAAA,SAAS,EAAE;AAHQ,CAArB;;eAMe,wBAAWf,KAAX,EAAkBO,KAAlB,C","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport classNames from 'classnames';\nimport { withStyles } from '@material-ui/core/styles';\nimport { types } from '@pie-lib/plot';\n\nconst style = (theme) => ({\n  root: {\n    fill: `var(--arrow-color, ${theme.palette.common.black})`,\n  },\n});\n\nexport class Arrow extends React.Component {\n  render() {\n    const { x, y, classes, className, scale } = this.props;\n    const names = classNames(classes.root, className);\n    let direction = this.props.direction || 'left';\n\n    const xv = scale.x(x);\n    const yv = scale.y(y);\n\n    let transform = '';\n\n    const getTransform = (x, y, rotate) => `translate(${x}, ${y}) rotate(${rotate})`;\n\n    if (direction === 'left') {\n      transform = getTransform(xv - 15, yv, 0);\n    }\n\n    if (direction === 'right') {\n      transform = getTransform(xv + 15, yv, 180);\n    }\n\n    if (direction === 'up') {\n      transform = getTransform(xv, yv - 15, 90);\n    }\n\n    if (direction === 'down') {\n      transform = getTransform(xv, yv + 15, 270);\n    }\n\n    return <path d=\"m 0,0 8,-5 0,10 -8,-5\" transform={transform} className={names} />;\n  }\n}\n\nArrow.propTypes = {\n  y: PropTypes.number,\n  x: PropTypes.number,\n  direction: PropTypes.oneOf(['left', 'right', 'up', 'down']),\n  classes: PropTypes.object.isRequired,\n  className: PropTypes.string,\n  scale: types.ScaleType.isRequired,\n};\n\nArrow.defaultProps = {\n  y: 0,\n  x: 0,\n  direction: 'left',\n};\n\nexport default withStyles(style)(Arrow);\n"],"file":"arrow.js"}