@pie-lib/charting 5.22.0 → 5.24.0

package/lib/line/common/line.js

@@ -0,0 +1,257 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.RawLine = exports.Line = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+
+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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _group = require("@vx/group");
+
+var _shape = require("@vx/shape");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _plot = require("@pie-lib/plot");
+
+var _dragHandle = _interopRequireWildcard(require("./drag-handle"));
+
+var _index = require("@material-ui/core/styles/index");
+
+var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
+
+var _renderUi = require("@pie-lib/render-ui");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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; } }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2["default"])(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+var getData = function getData(data, domain) {
+  var _ref = domain || {},
+      max = _ref.max;
+
+  var length = data.length;
+
+  if (!max || !length) {
+    return [];
+  }
+
+  return data.map(function (el, i) {
+    return _objectSpread(_objectSpread({}, el), {}, {
+      x: length > 1 ? i * (max / (length - 1)) : 0.5,
+      y: el.value
+    });
+  });
+};
+
+var RawLine = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(RawLine, _React$Component);
+
+  var _super = _createSuper(RawLine);
+
+  function RawLine(props) {
+    var _this;
+
+    (0, _classCallCheck2["default"])(this, RawLine);
+    _this = _super.call(this, props);
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "setDragValue", function (line) {
+      return _this.setState({
+        line: line
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dragStop", function (index) {
+      var onChange = _this.props.onChange;
+
+      _this.setState({
+        dragging: false
+      }, function () {
+        onChange(index, _this.state.line[index]);
+      });
+    });
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this), "dragValue", function (index, existing, next) {
+      var newLine = (0, _toConsumableArray2["default"])(_this.state.line);
+      newLine[index].dragValue = next;
+
+      _this.setDragValue(newLine);
+    });
+    _this.state = {
+      dragValue: undefined,
+      line: getData(props.data, props.graphProps.domain)
+    };
+    return _this;
+  }
+
+  (0, _createClass2["default"])(RawLine, [{
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      if (!(0, _isEqual["default"])(this.props.data, nextProps.data)) {
+        this.setState({
+          line: getData(nextProps.data, nextProps.graphProps.domain)
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          graphProps = _this$props.graphProps,
+          data = _this$props.data,
+          classes = _this$props.classes,
+          CustomDraggableComponent = _this$props.CustomDraggableComponent,
+          defineChart = _this$props.defineChart;
+      var _this$state = this.state,
+          lineState = _this$state.line,
+          dragging = _this$state.dragging;
+      var scale = graphProps.scale;
+      var lineToUse = dragging ? lineState : getData(data, graphProps.domain);
+      return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_shape.LinePath, {
+        data: lineToUse,
+        x: function x(d) {
+          return scale.x(d.x);
+        },
+        y: function y(d) {
+          return scale.y(d.dragValue !== undefined ? d.dragValue : d.y);
+        },
+        className: classes.line
+      }), lineToUse && lineToUse.map(function (point, i) {
+        var r = 6;
+        var enableDraggable = defineChart || point.interactive;
+        var Component = enableDraggable ? _dragHandle["default"] : _dragHandle.DragHandle;
+        return /*#__PURE__*/_react["default"].createElement(Component, {
+          key: "point-".concat(point.x, "-").concat(i),
+          x: point.x,
+          y: point.dragValue !== undefined ? point.dragValue : point.y,
+          interactive: enableDraggable,
+          r: r,
+          onDragStart: function onDragStart() {
+            return _this2.setState({
+              dragging: true
+            });
+          },
+          onDrag: function onDrag(v) {
+            return _this2.dragValue(i, point.dragValue !== undefined ? point.dragValue : point.y, v);
+          },
+          onDragStop: function onDragStop() {
+            return _this2.dragStop(i);
+          },
+          graphProps: graphProps,
+          CustomDraggableComponent: CustomDraggableComponent,
+          correctness: point.correctness
+        });
+      }));
+    }
+  }]);
+  return RawLine;
+}(_react["default"].Component);
+
+exports.RawLine = RawLine;
+(0, _defineProperty2["default"])(RawLine, "propTypes", {
+  onChange: _propTypes["default"].func,
+  value: _propTypes["default"].number,
+  classes: _propTypes["default"].object,
+  label: _propTypes["default"].string,
+  xBand: _propTypes["default"].func,
+  index: _propTypes["default"].number.isRequired,
+  graphProps: _plot.types.GraphPropsType.isRequired,
+  defineChart: _propTypes["default"].bool,
+  data: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    label: _propTypes["default"].string,
+    value: _propTypes["default"].number
+  })),
+  CustomDraggableComponent: _propTypes["default"].func
+});
+(0, _defineProperty2["default"])(RawLine, "defaultProps", {
+  index: 0
+});
+var StyledLine = (0, _index.withStyles)(function () {
+  return {
+    line: {
+      fill: 'transparent',
+      stroke: _renderUi.color.defaults.TERTIARY,
+      strokeWidth: 3,
+      transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in'
+    }
+  };
+})(RawLine);
+
+var Line = /*#__PURE__*/function (_React$Component2) {
+  (0, _inherits2["default"])(Line, _React$Component2);
+
+  var _super2 = _createSuper(Line);
+
+  function Line() {
+    var _this3;
+
+    (0, _classCallCheck2["default"])(this, Line);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this3 = _super2.call.apply(_super2, [this].concat(args));
+    (0, _defineProperty2["default"])((0, _assertThisInitialized2["default"])(_this3), "changeLine", function (index, category) {
+      var onChange = _this3.props.onChange;
+      var newLine = (0, _toConsumableArray2["default"])(_this3.props.data);
+      var dragValue = category.dragValue,
+          value = category.value;
+      newLine[index].value = dragValue >= 0 ? dragValue : value;
+      onChange(newLine);
+    });
+    return _this3;
+  }
+
+  (0, _createClass2["default"])(Line, [{
+    key: "render",
+    value: function render() {
+      var props = this.props;
+      return /*#__PURE__*/_react["default"].createElement(_group.Group, null, /*#__PURE__*/_react["default"].createElement(StyledLine, (0, _extends2["default"])({}, props, {
+        onChange: this.changeLine
+      })));
+    }
+  }]);
+  return Line;
+}(_react["default"].Component);
+
+exports.Line = Line;
+(0, _defineProperty2["default"])(Line, "propTypes", {
+  data: _propTypes["default"].array,
+  onChange: _propTypes["default"].func,
+  xBand: _propTypes["default"].func,
+  graphProps: _plot.types.GraphPropsType.isRequired
+});
+var _default = Line;
+exports["default"] = _default;
+//# sourceMappingURL=line.js.map

package/lib/line/common/line.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/line/common/line.jsx"],"names":["getData","data","domain","max","length","map","el","i","x","y","value","RawLine","props","line","setState","index","onChange","dragging","state","existing","next","newLine","dragValue","setDragValue","undefined","graphProps","nextProps","classes","CustomDraggableComponent","defineChart","lineState","scale","lineToUse","d","point","r","enableDraggable","interactive","Component","DraggableHandle","DragHandle","v","dragStop","correctness","React","PropTypes","func","number","object","label","string","xBand","isRequired","types","GraphPropsType","bool","arrayOf","shape","StyledLine","fill","stroke","color","defaults","TERTIARY","strokeWidth","transition","Line","category","changeLine","array"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Group } from '@vx/group';\nimport { LinePath } from '@vx/shape';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport DraggableHandle, { DragHandle } from './drag-handle';\nimport { withStyles } from '@material-ui/core/styles/index';\nimport isEqual from 'lodash/isEqual';\nimport { color } from '@pie-lib/render-ui';\n\nconst getData = (data, domain) => {\n  const { max } = domain || {};\n  const length = data.length;\n\n  if (!max || !length) {\n    return [];\n  }\n\n  return data.map((el, i) => ({\n    ...el,\n    x: length > 1 ? i * (max / (length - 1)) : 0.5,\n    y: el.value,\n  }));\n};\n\nexport class RawLine extends React.Component {\n  static propTypes = {\n    onChange: PropTypes.func,\n    value: PropTypes.number,\n    classes: PropTypes.object,\n    label: PropTypes.string,\n    xBand: PropTypes.func,\n    index: PropTypes.number.isRequired,\n    graphProps: types.GraphPropsType.isRequired,\n    defineChart: PropTypes.bool,\n    data: PropTypes.arrayOf(\n      PropTypes.shape({\n        label: PropTypes.string,\n        value: PropTypes.number,\n      }),\n    ),\n    CustomDraggableComponent: PropTypes.func,\n  };\n\n  static defaultProps = {\n    index: 0,\n  };\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      dragValue: undefined,\n      line: getData(props.data, props.graphProps.domain),\n    };\n  }\n\n  UNSAFE_componentWillReceiveProps(nextProps) {\n    if (!isEqual(this.props.data, nextProps.data)) {\n      this.setState({\n        line: getData(nextProps.data, nextProps.graphProps.domain),\n      });\n    }\n  }\n\n  setDragValue = (line) => this.setState({ line });\n\n  dragStop = (index) => {\n    const { onChange } = this.props;\n    this.setState({ dragging: false }, () => {\n      onChange(index, this.state.line[index]);\n    });\n  };\n\n  dragValue = (index, existing, next) => {\n    const newLine = [...this.state.line];\n    newLine[index].dragValue = next;\n    this.setDragValue(newLine);\n  };\n\n  render() {\n    const { graphProps, data, classes, CustomDraggableComponent, defineChart } = this.props;\n    const { line: lineState, dragging } = this.state;\n    const { scale } = graphProps;\n    const lineToUse = dragging ? lineState : getData(data, graphProps.domain);\n\n    return (\n      <React.Fragment>\n        <LinePath\n          data={lineToUse}\n          x={(d) => scale.x(d.x)}\n          y={(d) => scale.y(d.dragValue !== undefined ? d.dragValue : d.y)}\n          className={classes.line}\n        />\n        {lineToUse &&\n          lineToUse.map((point, i) => {\n            const r = 6;\n            const enableDraggable = defineChart || point.interactive;\n            const Component = enableDraggable ? DraggableHandle : DragHandle;\n\n            return (\n              <Component\n                key={`point-${point.x}-${i}`}\n                x={point.x}\n                y={point.dragValue !== undefined ? point.dragValue : point.y}\n                interactive={enableDraggable}\n                r={r}\n                onDragStart={() => this.setState({ dragging: true })}\n                onDrag={(v) => this.dragValue(i, point.dragValue !== undefined ? point.dragValue : point.y, v)}\n                onDragStop={() => this.dragStop(i)}\n                graphProps={graphProps}\n                CustomDraggableComponent={CustomDraggableComponent}\n                correctness={point.correctness}\n              />\n            );\n          })}\n      </React.Fragment>\n    );\n  }\n}\n\nconst StyledLine = withStyles(() => ({\n  line: {\n    fill: 'transparent',\n    stroke: color.defaults.TERTIARY,\n    strokeWidth: 3,\n    transition: 'stroke 200ms ease-in, stroke-width 200ms ease-in',\n  },\n}))(RawLine);\n\nexport class Line extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChange: PropTypes.func,\n    xBand: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n  };\n\n  changeLine = (index, category) => {\n    const { onChange } = this.props;\n    const newLine = [...this.props.data];\n    const { dragValue, value } = category;\n\n    newLine[index].value = dragValue >= 0 ? dragValue : value;\n\n    onChange(newLine);\n  };\n\n  render() {\n    const props = this.props;\n\n    return (\n      <Group>\n        <StyledLine {...props} onChange={this.changeLine} />\n      </Group>\n    );\n  }\n}\n\nexport default Line;\n"],"file":"line.js"}

package/lib/line/line-cross.js

@@ -0,0 +1,203 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.LineCross = 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _plot = require("@pie-lib/plot");
+
+var _shape = require("@vx/shape");
+
+var _group = require("@vx/group");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _renderUi = require("@pie-lib/render-ui");
+
+var _utils = require("../utils");
+
+var _line = _interopRequireDefault(require("./common/line"));
+
+var _excluded = ["classes", "className", "scale", "x", "y", "r", "correctness"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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 DraggableComponent = function DraggableComponent(props) {
+  var _props$classes = props.classes,
+      classes = _props$classes === void 0 ? {} : _props$classes,
+      className = props.className,
+      scale = props.scale,
+      x = props.x,
+      y = props.y,
+      r = props.r,
+      correctness = props.correctness,
+      rest = (0, _objectWithoutProperties2["default"])(props, _excluded);
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+      hover = _useState2[0],
+      setHover = _useState2[1];
+
+  var squareSize = r * 4;
+  var squareHalf = squareSize / 2;
+  var cx = scale.x(x);
+  var cy = scale.y(y);
+  return /*#__PURE__*/_react["default"].createElement(_group.Group, {
+    className: (0, _classnames["default"])(className, classes.line, correctness && correctness.value)
+  }, /*#__PURE__*/_react["default"].createElement(_shape.LinePath, {
+    data: [{
+      x: scale.x(x) - r,
+      y: scale.y(y) + r
+    }, {
+      x: scale.x(x) + r,
+      y: scale.y(y) - r
+    }],
+    key: "point-".concat(x, "-").concat(y, "-1"),
+    x: function x(d) {
+      return d.x;
+    },
+    y: function y(d) {
+      return d.y;
+    },
+    strokeWidth: 5,
+    style: {
+      pointerEvents: 'none'
+    }
+  }), /*#__PURE__*/_react["default"].createElement(_shape.LinePath, {
+    data: [{
+      x: scale.x(x) - r,
+      y: scale.y(y) - r
+    }, {
+      x: scale.x(x) + r,
+      y: scale.y(y) + r
+    }],
+    key: "point-".concat(x, "-").concat(y, "-2"),
+    x: function x(d) {
+      return d.x;
+    },
+    y: function y(d) {
+      return d.y;
+    },
+    strokeWidth: 5,
+    style: {
+      pointerEvents: 'none'
+    }
+  }), hover && /*#__PURE__*/_react["default"].createElement("rect", {
+    x: cx - squareHalf,
+    y: cy - squareHalf,
+    width: squareSize,
+    height: squareSize,
+    stroke: _renderUi.color.defaults.BORDER_GRAY,
+    fill: "none",
+    strokeWidth: 2,
+    pointerEvents: "none"
+  }), /*#__PURE__*/_react["default"].createElement("circle", (0, _extends2["default"])({
+    cx: cx,
+    cy: cy,
+    r: r * 2,
+    className: (0, _classnames["default"])(classes.transparentHandle),
+    onMouseEnter: function onMouseEnter() {
+      return setHover(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setHover(false);
+    }
+  }, rest)));
+};
+
+DraggableComponent.propTypes = {
+  scale: _propTypes["default"].object,
+  x: _propTypes["default"].number,
+  y: _propTypes["default"].number,
+  r: _propTypes["default"].number,
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].object,
+  correctness: _propTypes["default"].shape({
+    value: _propTypes["default"].string,
+    label: _propTypes["default"].string
+  })
+};
+
+var LineCross = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(LineCross, _React$Component);
+
+  var _super = _createSuper(LineCross);
+
+  function LineCross() {
+    (0, _classCallCheck2["default"])(this, LineCross);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(LineCross, [{
+    key: "render",
+    value: function render() {
+      var props = this.props;
+      var data = props.data,
+          graphProps = props.graphProps;
+
+      var _ref = graphProps || {},
+          _ref$scale = _ref.scale,
+          scale = _ref$scale === void 0 ? {} : _ref$scale,
+          _ref$size = _ref.size,
+          size = _ref$size === void 0 ? {} : _ref$size;
+
+      var xBand = (0, _utils.dataToXBand)(scale.x, data, size.width, 'lineCross');
+      return /*#__PURE__*/_react["default"].createElement(_line["default"], (0, _extends2["default"])({}, props, {
+        xBand: xBand,
+        CustomDraggableComponent: DraggableComponent
+      }));
+    }
+  }]);
+  return LineCross;
+}(_react["default"].Component);
+
+exports.LineCross = LineCross;
+(0, _defineProperty2["default"])(LineCross, "propTypes", {
+  data: _propTypes["default"].array,
+  onChange: _propTypes["default"].func,
+  graphProps: _plot.types.GraphPropsType.isRequired
+});
+
+var _default = function _default() {
+  return {
+    type: 'lineCross',
+    Component: LineCross,
+    name: 'Line Cross'
+  };
+};
+
+exports["default"] = _default;
+//# sourceMappingURL=line-cross.js.map

package/lib/line/line-cross.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/line/line-cross.js"],"names":["DraggableComponent","props","classes","className","scale","x","y","r","correctness","rest","hover","setHover","squareSize","squareHalf","cx","cy","line","value","d","pointerEvents","color","defaults","BORDER_GRAY","transparentHandle","propTypes","PropTypes","object","number","string","shape","label","LineCross","data","graphProps","size","xBand","width","React","Component","array","onChange","func","types","GraphPropsType","isRequired","type","name"],"mappings":"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","sourcesContent":["import React, { useState } from 'react';\nimport PropTypes from 'prop-types';\nimport { types } from '@pie-lib/plot';\nimport { LinePath } from '@vx/shape';\nimport { Group } from '@vx/group';\nimport classNames from 'classnames';\nimport { color } from '@pie-lib/render-ui';\nimport { dataToXBand } from '../utils';\nimport RawLine from './common/line';\n\nconst DraggableComponent = (props) => {\n  const { classes = {}, className, scale, x, y, r, correctness, ...rest } = props;\n  const [hover, setHover] = useState(false);\n\n  const squareSize = r * 4;\n  const squareHalf = squareSize / 2;\n  const cx = scale.x(x);\n  const cy = scale.y(y);\n\n  return (\n    <Group className={classNames(className, classes.line, correctness && correctness.value)}>\n      <LinePath\n        data={[\n          { x: scale.x(x) - r, y: scale.y(y) + r },\n          { x: scale.x(x) + r, y: scale.y(y) - r },\n        ]}\n        key={`point-${x}-${y}-1`}\n        x={(d) => d.x}\n        y={(d) => d.y}\n        strokeWidth={5}\n        style={{ pointerEvents: 'none' }}\n      />\n      <LinePath\n        data={[\n          { x: scale.x(x) - r, y: scale.y(y) - r },\n          { x: scale.x(x) + r, y: scale.y(y) + r },\n        ]}\n        key={`point-${x}-${y}-2`}\n        x={(d) => d.x}\n        y={(d) => d.y}\n        strokeWidth={5}\n        style={{ pointerEvents: 'none' }}\n      />\n      {hover && (\n        <rect\n          x={cx - squareHalf}\n          y={cy - squareHalf}\n          width={squareSize}\n          height={squareSize}\n          stroke={color.defaults.BORDER_GRAY}\n          fill=\"none\"\n          strokeWidth={2}\n          pointerEvents=\"none\"\n        />\n      )}\n      <circle\n        cx={cx}\n        cy={cy}\n        r={r * 2}\n        className={classNames(classes.transparentHandle)}\n        onMouseEnter={() => setHover(true)}\n        onMouseLeave={() => setHover(false)}\n        {...rest}\n      />\n    </Group>\n  );\n};\n\nDraggableComponent.propTypes = {\n  scale: PropTypes.object,\n  x: PropTypes.number,\n  y: PropTypes.number,\n  r: PropTypes.number,\n  className: PropTypes.string,\n  classes: PropTypes.object,\n  correctness: PropTypes.shape({\n    value: PropTypes.string,\n    label: PropTypes.string,\n  }),\n};\n\nexport class LineCross extends React.Component {\n  static propTypes = {\n    data: PropTypes.array,\n    onChange: PropTypes.func,\n    graphProps: types.GraphPropsType.isRequired,\n  };\n\n  render() {\n    const props = this.props;\n    const { data, graphProps } = props;\n    const { scale = {}, size = {} } = graphProps || {};\n    const xBand = dataToXBand(scale.x, data, size.width, 'lineCross');\n\n    return <RawLine {...props} xBand={xBand} CustomDraggableComponent={DraggableComponent} />;\n  }\n}\n\nexport default () => ({\n  type: 'lineCross',\n  Component: LineCross,\n  name: 'Line Cross',\n});\n"],"file":"line-cross.js"}

package/lib/line/line-dot.js

@@ -0,0 +1,156 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.LineDot = 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 _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _plot = require("@pie-lib/plot");
+
+var _renderUi = require("@pie-lib/render-ui");
+
+var _utils = require("../utils");
+
+var _line = _interopRequireDefault(require("./common/line"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _excluded = ["scale", "x", "y", "className", "classes", "r", "correctness", "interactive"];
+
+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 DraggableComponent = function DraggableComponent(_ref) {
+  var scale = _ref.scale,
+      x = _ref.x,
+      y = _ref.y,
+      className = _ref.className,
+      classes = _ref.classes,
+      r = _ref.r,
+      correctness = _ref.correctness,
+      interactive = _ref.interactive,
+      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+
+  var _React$useState = _react["default"].useState(false),
+      _React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
+      isHovered = _React$useState2[0],
+      setIsHovered = _React$useState2[1];
+
+  var allowRolloverEvent = !correctness && interactive;
+  return /*#__PURE__*/_react["default"].createElement("g", {
+    onMouseEnter: function onMouseEnter() {
+      return setIsHovered(true);
+    },
+    onMouseLeave: function onMouseLeave() {
+      return setIsHovered(false);
+    }
+  }, /*#__PURE__*/_react["default"].createElement("circle", (0, _extends2["default"])({
+    cx: scale.x(x),
+    cy: scale.y(y),
+    r: r * 3,
+    className: (0, _classnames["default"])(classes.transparentHandle, className),
+    pointerEvents: correctness ? 'none' : ''
+  }, rest)), /*#__PURE__*/_react["default"].createElement("circle", (0, _extends2["default"])({
+    cx: scale.x(x),
+    cy: scale.y(y),
+    r: r,
+    className: (0, _classnames["default"])(className, classes.handle, correctness && correctness.value)
+  }, rest)), isHovered && allowRolloverEvent && /*#__PURE__*/_react["default"].createElement("rect", {
+    x: scale.x(x) - r * 2,
+    y: scale.y(y) - r * 2,
+    width: r * 4,
+    height: r * 4,
+    stroke: _renderUi.color.defaults.BORDER_GRAY,
+    strokeWidth: "1",
+    fill: "none"
+  }));
+};
+
+DraggableComponent.propTypes = {
+  scale: _propTypes["default"].object,
+  x: _propTypes["default"].number,
+  y: _propTypes["default"].number,
+  r: _propTypes["default"].number,
+  className: _propTypes["default"].string,
+  classes: _propTypes["default"].object,
+  correctness: _propTypes["default"].shape({
+    value: _propTypes["default"].string,
+    label: _propTypes["default"].string
+  })
+};
+
+var LineDot = /*#__PURE__*/function (_React$Component) {
+  (0, _inherits2["default"])(LineDot, _React$Component);
+
+  var _super = _createSuper(LineDot);
+
+  function LineDot() {
+    (0, _classCallCheck2["default"])(this, LineDot);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2["default"])(LineDot, [{
+    key: "render",
+    value: function render() {
+      var props = this.props;
+      var data = props.data,
+          graphProps = props.graphProps;
+
+      var _ref2 = graphProps || {},
+          _ref2$scale = _ref2.scale,
+          scale = _ref2$scale === void 0 ? {} : _ref2$scale,
+          _ref2$size = _ref2.size,
+          size = _ref2$size === void 0 ? {} : _ref2$size;
+
+      var xBand = (0, _utils.dataToXBand)(scale.x, data, size.width, 'lineDot');
+      return /*#__PURE__*/_react["default"].createElement(_line["default"], (0, _extends2["default"])({}, props, {
+        xBand: xBand,
+        CustomDraggableComponent: DraggableComponent
+      }));
+    }
+  }]);
+  return LineDot;
+}(_react["default"].Component);
+
+exports.LineDot = LineDot;
+(0, _defineProperty2["default"])(LineDot, "propTypes", {
+  data: _propTypes["default"].array,
+  onChange: _propTypes["default"].func,
+  graphProps: _plot.types.GraphPropsType.isRequired
+});
+
+var _default = function _default() {
+  return {
+    type: 'lineDot',
+    Component: LineDot,
+    name: 'Line Dot'
+  };
+};
+
+exports["default"] = _default;
+//# sourceMappingURL=line-dot.js.map