chartx/dist/components/linemarkpoint/index.js

Data Visualization Chart Library

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _component = _interopRequireDefault(require("../component"));
var _canvax = _interopRequireDefault(require("canvax"));
var _tools = require("../../utils/tools");
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
var _ = _canvax.default._;
var Rect = _canvax.default.Shapes.Rect;
var lineMarkPoint = /*#__PURE__*/function (_Component) {
  function lineMarkPoint(opt, app) {
    var _this;
    (0, _classCallCheck2.default)(this, lineMarkPoint);
    _this = _callSuper(this, lineMarkPoint, [opt, app]);
    _this.name = "lineMarkPoint";
    _.extend(true, _this, (0, _tools.getDefaultProps)(lineMarkPoint.defaultProps()), opt);
    _this.lineDatas = null;
    _this.sprite = new _canvax.default.Display.Sprite();
    _this.app.graphsSprite.addChild(_this.sprite);
    return _this;
  }
  (0, _inherits2.default)(lineMarkPoint, _Component);
  return (0, _createClass2.default)(lineMarkPoint, [{
    key: "reset",
    value: function reset(opt) {
      _.extend(true, this, opt);
      this.lineDatas = null;
      this.sprite.removeAllChildren();
      this.draw();
    }
  }, {
    key: "draw",
    value: function draw() {
      var me = this;
      var _coord = this.app.getComponent({
        name: 'coord'
      });
      this.pos = {
        x: _coord.origin.x,
        y: _coord.origin.y
      };
      this.setPosition();
      var lineGraphs = me.app.getComponent({
        name: 'graphs',
        type: "line",
        field: me.lineField
      });
      me.lineDatas = lineGraphs.data[me.lineField].data;
      var _xAxis = this.app.getComponent({
        name: "coord"
      }).getAxis({
        type: "xAxis"
      });

      // let iNode = _xAxis.getIndexOfVal( this.xValue );

      // if( iNode == -1 ){
      //     return;
      // };

      var iNode = -1;
      for (var i = 0, l = this.lineDatas.length; i < l; i++) {
        if (this.xValue == this.lineDatas[i].rowData[_xAxis.field]) {
          iNode = i;
          break;
        }
      }
      if (iNode == -1) {
        return;
      }
      ;
      var nodeData = this.lineDatas[iNode];
      var preNodeData = iNode ? this.lineDatas[iNode - 1] : null;
      var nextNodeData = iNode == me.lineDatas.length ? null : this.lineDatas[iNode + 1];
      if (nodeData.y != undefined) {
        var x = nodeData.x;
        var _txtSp = new _canvax.default.Display.Sprite({
          context: {
            x: x
          }
        });
        this.sprite.addChild(_txtSp);
        var txtHeight = 0;
        var _label = new _canvax.default.Display.Text(me.label.text, {
          context: {
            fillStyle: this.label.fontColor,
            fontSize: this.label.fontSize,
            textAlign: 'center',
            textBaseline: 'top'
          }
        });
        _txtSp.addChild(_label);
        txtHeight = _label.getTextHeight();
        var txtWidth = _label.getTextWidth();
        var _bgRect;
        var padding = 0;
        //如果有背景，那么就要加上背景的padding
        if (this.label.background.enabled) {
          padding = this.label.background.padding;
          txtHeight += padding * 2;
          txtWidth += padding * 2;
          _txtSp.context.x -= padding; //sp的y会在下面单独计算好
          _label.context.x += padding;
          _label.context.y += padding;
          var r = me.label.background.radius;

          //添加一下背景
          _bgRect = new Rect({
            context: {
              x: -txtWidth / 2 + padding,
              width: txtWidth,
              height: txtHeight,
              radius: [r, r, r, r],
              fillStyle: me.label.background.fillStyle,
              strokeStyle: me.label.background.strokeStyle,
              lineWidth: me.label.background.lineWidth
            }
          });
          _txtSp.addChild(_bgRect, 0);
        }
        ;
        if (txtWidth / 2 + x > _coord.width) {
          _txtSp.context.x = _coord.width;
          _label.context.textAlign = "right";
          _bgRect && (_bgRect.context.x -= txtWidth / 2 - padding);
        }
        ;
        if (x - txtWidth / 2 < 0) {
          _txtSp.context.x = 0;
          _label.context.textAlign = "left";
          _bgRect && (_bgRect.context.x += txtWidth / 2 - padding);
        }
        ;

        //计算y的位置
        var _me$_getNodeYandLineP = me._getNodeYandLinePointList(nodeData, preNodeData, nextNodeData, _coord, txtHeight),
          y = _me$_getNodeYandLineP.y,
          pointList = _me$_getNodeYandLineP.pointList;
        _txtSp.context.y = y;
        if (me.line.enabled) {
          var _line = new _canvax.default.Shapes.BrokenLine({
            context: {
              pointList: pointList,
              strokeStyle: me.line.strokeStyle,
              lineWidth: me.line.lineWidth
            }
          });
          me.sprite.addChild(_line, 0);
        }
      }
    }
  }, {
    key: "_getNodeYandLinePointList",
    value: function _getNodeYandLinePointList(nodeData, preNodeData, nextNodeData, _coord, txtHeight) {
      var appHeight = this.app.height;
      var coordHeight = _coord.height;
      var y = nodeData.y;
      var lineLength = !this.line.enabled ? 3 : this.line.lineLength;
      var lineDis = this.line.lineDis; //line到node的距离

      var position = "online";
      if (this.position == 'auto') {
        if (preNodeData && preNodeData.y < nodeData.y || nextNodeData && nextNodeData.y < nodeData.y) {
          position = 'offline'; //在线的下方
        }
        ;
        if (position == "online" && Math.abs(y) + lineLength + lineDis + txtHeight > coordHeight) {
          //在上面但是超过了坐标系顶部空间
          position = "offline";
        }
        ;
        if (position == "offline" && Math.abs(y) < lineLength + txtHeight + lineDis) {
          //在线下面，但是超出了坐标系底部空间
          position = "online";
        }
        ;
      } else {
        position = this.position;
      }
      ;
      var top = 0;
      if (position == "online") {
        top = y - lineLength - lineDis - txtHeight;
      } else {
        top = y + lineDis + lineLength;
      }
      ;

      //默认offline
      var pointList = [[nodeData.x, top], [nodeData.x, nodeData.y + lineDis]];
      if (position == "online") {
        pointList = [[nodeData.x, top + txtHeight], [nodeData.x, nodeData.y - lineDis]];
      }
      ;
      return {
        y: top,
        pointList: pointList
      };
    }
  }], [{
    key: "defaultProps",
    value: function defaultProps() {
      return {
        lineField: {
          detail: '对应的line字段',
          default: null
        },
        xValue: {
          detail: '在lineFile字段的折线上对应点的x轴的值',
          default: null
        },
        line: {
          detail: 'line的配置',
          propertys: {
            enabled: {
              detail: '是否要指示线',
              default: true
            },
            lineWidth: {
              detail: '线宽',
              default: 2
            },
            strokeStyle: {
              detail: '线颜色',
              default: '#ccc'
            },
            lineLength: {
              detail: '线的长度，也就是label到line的距离',
              default: 8
            },
            lineDis: {
              detail: 'line到折线上面node的距离',
              default: 3
            }
          }
        },
        label: {
          detail: 'markpoint标注的文本配置',
          propertys: {
            text: {
              detail: 'label内容',
              default: ''
            },
            fontSize: {
              detail: 'label的文本大小',
              default: 12
            },
            fontColor: {
              detail: '文本颜色',
              default: '#666'
            },
            background: {
              detail: 'label的background配置',
              propertys: {
                enabled: {
                  detail: 'label是否需要背景',
                  default: true
                },
                fillStyle: {
                  detail: 'label的背景颜色',
                  default: '#f5f5f6'
                },
                radius: {
                  detail: 'label的背景圆角',
                  default: 6
                },
                strokeStyle: {
                  detail: 'label的背景边框颜色',
                  default: '#f5f5f6'
                },
                lineWidth: {
                  detail: '背景描边',
                  default: 1
                },
                padding: {
                  detail: 'background和label之间的距离',
                  default: 6
                }
              }
            }
          }
        },
        position: {
          detail: '在线的方向，online（线上边） or offline（线下方），默认自动计算',
          default: 'auto'
        }
      };
    }
  }]);
}(_component.default);
_component.default.registerComponent(lineMarkPoint, 'lineMarkPoint');
var _default = exports.default = lineMarkPoint;