chartx/dist/components/graphs/line/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 _group = _interopRequireDefault(require("./group"));
var _index = _interopRequireDefault(require("../index"));
var _canvax = 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; })(); }
//假如用户传入的是和 堆叠柱状图一样的 二维数组的field [ [uv, uv_bottom], pv ] 这样的，
//那么就 只保留uv作为field， 第二个数据作为 bottom field， 其他的多余的删除掉
//然后，bottomFieldMap中用field的uv作为key，bottom的field作为值，传给group来绘制起点
var bottomFieldMap = {};
var LineGraphs = /*#__PURE__*/function (_GraphsBase) {
  function LineGraphs(opt, app) {
    var _this;
    (0, _classCallCheck2.default)(this, LineGraphs);
    _this = _callSuper(this, LineGraphs, [opt, app]);
    _this.type = "line";
    _this.enabledField = null;
    _this.groups = []; //群组集合

    _canvax._.extend(true, _this, (0, _tools.getDefaultProps)(LineGraphs.defaultProps()), opt);
    _this.init();
    return _this;
  }
  (0, _inherits2.default)(LineGraphs, _GraphsBase);
  return (0, _createClass2.default)(LineGraphs, [{
    key: "init",
    value: function init() {}
  }, {
    key: "draw",
    value: function draw(opt) {
      !opt && (opt = {});
      this.width = opt.width;
      this.height = opt.height;
      _canvax._.extend(true, this.origin, opt.origin);
      this.sprite.context.x = this.origin.x;
      this.sprite.context.y = this.origin.y;
      this.data = this._trimGraphs();
      this._setGroupsForYfield(this.data, null, opt);
      if (this.animation && !opt.resize) {
        this.grow();
      } else {
        this.fire("complete");
      }
      return this;
    }
  }, {
    key: "resetData",
    value: function resetData(dataFrame, dataTrigger, opt) {
      var me = this;
      if (dataFrame) {
        me.dataFrame = dataFrame;
      }
      ;
      if (opt) {
        if ('origin' in opt) {
          if ('x' in opt.origin) this.sprite.context.x = opt.origin.x;
          if ('y' in opt.origin) this.sprite.context.y = opt.origin.y;
        }
      }
      me.data = me._trimGraphs();
      me.groups.forEach(function (g) {
        g.resetData(me.data[g.field].data, dataTrigger, opt);
      });
    }
  }, {
    key: "setEnabledField",
    value: function setEnabledField() {
      //要根据自己的 field，从enabledFields中根据enabled数据，计算一个 enabled版本的field子集
      this.enabledField = this.app.getComponent({
        name: 'coord'
      }).filterEnabledFields(this.field);
    }

    //dataFrame
  }, {
    key: "_trimGraphs",
    value: function _trimGraphs() {
      var me = this;
      var _coord = this.app.getComponent({
        name: 'coord'
      });

      //{"uv":{}.. ,"ppc": "pv":]}
      //这样按照字段摊平的一维结构
      var tmpData = {};
      me.setEnabledField();
      _canvax._.each(_canvax._.flatten(me.enabledField), function (field, i) {
        //let maxValue = 0;

        var fieldConfig = me.app.getComponent({
          name: 'coord'
        }).getFieldConfig(field);

        //单条line的全部data数据
        var _lineData = me.dataFrame.getFieldData(field);
        if (!_lineData) return;
        var _graphsData = [];
        for (var b = 0, bl = _lineData.length; b < bl; b++) {
          //返回一个和value的结构对应的point结构{x:  y: }
          var point = _coord.getPoint({
            iNode: b,
            field: field,
            value: {
              //x:
              y: _lineData[b]
            }
          });
          var node = {
            type: "line",
            iGroup: i,
            iNode: b,
            field: field,
            value: _lineData[b],
            x: point.pos.x,
            y: point.pos.y,
            rowData: me.dataFrame.getRowDataAt(b),
            color: fieldConfig.color //默认设置皮肤颜色，动态的在group里面会被修改
          };
          _graphsData.push(node);
        }
        ;
        tmpData[field] = {
          yAxis: fieldConfig.yAxis,
          field: field,
          data: _graphsData
        };
      });
      return tmpData;
    }

    /**
     * 生长动画
     */
  }, {
    key: "grow",
    value: function grow(callback) {
      var gi = 0;
      var gl = this.groups.length;
      var me = this;
      _canvax._.each(this.groups, function (g) {
        g._grow(function () {
          gi++;
          callback && callback(g);
          if (gi == gl) {
            me.fire("complete");
          }
        });
      });
      return this;
    }

    //field 可以是单个 field 也可以是fields数组
  }, {
    key: "show",
    value: function show(field) {
      var _this2 = this;
      //过渡优化，有field的状态变化，可能就y轴的数据区间都有了变化，这里的优化就成了bug，所有的field都需要绘制一次
      //这个field不再这个graphs里面的，不相关
      // if( _.indexOf( _.flatten( [me.field] ), field ) == -1 ){
      //     return;
      // };

      this.data = this._trimGraphs();

      //先把现有的group resetData
      this.groups.forEach(function (g) {
        g.resetData(_this2.data[g.field].data);
      });

      //然后把field添加到groups里面去
      var newGroups = this._setGroupsForYfield(this.data, field);
      newGroups.forEach(function (g) {
        g._grow();
      });
    }
  }, {
    key: "hide",
    value: function hide(field) {
      var me = this;
      var i = me.getGroupIndex(field);
      if (i > -1) {
        this.groups.splice(i, 1)[0].destroy();
        //return; //这里不能直接return，和上面的show一样，同样的属于过渡优化，因为这个时候y轴的值域可能变了， 其他的graphs需要重新绘制
      }
      ;
      if (bottomFieldMap[field]) {
        var fieldConfig = me.app.getComponent({
          name: 'coord'
        }).getFieldConfig(field);
        fieldConfig.yAxis.resetSection();
      }
      this.data = this._trimGraphs();
      _canvax._.each(this.groups, function (g) {
        g.resetData(me.data[g.field].data);
      });
    }
  }, {
    key: "getGroupIndex",
    value: function getGroupIndex(field) {
      var ind = -1;
      for (var i = 0, l = this.groups.length; i < l; i++) {
        if (this.groups[i].field === field) {
          ind = i;
          break;
        }
      }
      return ind;
    }
  }, {
    key: "getGroup",
    value: function getGroup(field) {
      return this.groups[this.getGroupIndex(field)];
    }
  }, {
    key: "_setGroupsForYfield",
    value: function _setGroupsForYfield(data, fields, opt) {
      var me = this;
      !opt && (opt = {});
      if (fields) {
        //如果有传入field参数，那么就说明只需要从data里面挑选指定的field来添加
        //一般用在add()执行的时候
        fields = _canvax._.flatten([fields]);
      }
      var _flattenField = _canvax._.flatten([this.field]);
      var newGroups = [],
        callbacks = [];
      _canvax._.each(data, function (g, field) {
        if (fields && _canvax._.indexOf(fields, field) == -1) {
          //如果有传入fields，但是当前field不在fields里面的话，不需要处理
          //说明该group已经在graphs里面了
          return;
        }
        ;
        var fieldConfig = me.app.getComponent({
          name: 'coord'
        }).getFieldConfig(field);

        //iGroup 是这条group在本graphs中的ind，而要拿整个图表层级的index， 就是fieldMap.ind
        var iGroup = _canvax._.indexOf(_flattenField, field);
        var group = new _group.default(fieldConfig, iGroup,
        //不同于fieldMap.ind
        me._opt, me.ctx, me.height, me.width, me, bottomFieldMap);
        var insert = false;
        //在groups数组中插入到比自己_groupInd小的元素前面去
        for (var gi = 0, gl = me.groups.length; gi < gl; gi++) {
          if (iGroup < me.groups[gi].iGroup) {
            me.groups.splice(gi, 0, group);
            insert = true;
            me.sprite.addChildAt(group.sprite, gi);
            break;
          }
        }
        ;
        //否则就只需要直接push就好了
        if (!insert) {
          var preGroup = me.groups.find(function (g) {
            return g.field == group.field;
          });
          if (preGroup) {
            me.groups.splice(me.groups.indexOf(preGroup), 1);
            preGroup.destroy();
          }
          me.groups.push(group);
          me.sprite.addChild(group.sprite);
        }
        ;
        group.draw({
          animation: me.animation,
          isResize: opt.resize
        }, g.data);
        newGroups.push(group);
        var _bottomField = bottomFieldMap[field];
        if (_bottomField) {
          callbacks.push(function () {
            return fieldConfig.yAxis.addValToSection(me.dataFrame.getFieldData(_bottomField));
          });
        }
      });

      // 等所有field对应的groups都都添加完之后，再将bottomField的数据添加到y轴，统一执行resetData
      callbacks.forEach(function (cb) {
        return cb();
      });
      return newGroups;
    }

    /**获取data中 和 ind 或者最接近的nodeData */
  }, {
    key: "getNodesAt",
    value: function getNodesAt(ind, e) {
      var _nodesInfoList = []; //节点信息集合
      _canvax._.each(this.groups, function (group) {
        var node = group.getNodeInfoAt(ind, e);
        node && _nodesInfoList.push(node);
      });
      return _nodesInfoList;
    }

    /**获取x像素位置上的nodeData，如果这个值不在data中，则会构建一个 */
  }, {
    key: "getNodesOfPos",
    value: function getNodesOfPos(x) {
      var _nodesInfoList = []; //节点信息集合
      _canvax._.each(this.groups, function (group) {
        var node = group.getNodeInfoOfX(x);
        node && _nodesInfoList.push(node);
      });
      return _nodesInfoList;
    }
  }, {
    key: "getNodesOfXVal",
    value: function getNodesOfXVal(xVal) {}
  }, {
    key: "tipsPointerOf",
    value: function tipsPointerOf(e) {
      this.groups.forEach(function (group) {
        group.tipsPointerOf(e);
      });
    }
  }, {
    key: "tipsPointerHideOf",
    value: function tipsPointerHideOf(e) {
      this.groups.forEach(function (group) {
        group.tipsPointerHideOf(e);
      });
    }
  }], [{
    key: "defaultProps",
    value: function defaultProps() {
      return {
        field: {
          detail: '字段配置，支持二维数组格式',
          default: null
        },
        yAxisAlign: {
          detail: '绘制在哪根y轴上面',
          default: 'left'
        },
        _props: [_group.default]
      };
    }
  }, {
    key: "polyfill",
    value: function polyfill(opt) {
      if (Array.isArray(opt.field)) {
        opt.field.forEach(function (item) {
          if (Array.isArray(item) && item.length > 1) {
            //说明这个是一个河流图，[ [uv, uv_bottom] ] 这样的，
            var bottomField = item[1];
            item.length = 1;
            bottomFieldMap[item[0]] = bottomField;
          }
        });
      }
      return opt;
    }
  }]);
}(_index.default);
_index.default.registerComponent(LineGraphs, 'graphs', 'line');
var _default = exports.default = LineGraphs;