chartx
Version:
Data Visualization Chart Library
637 lines (617 loc) • 20.1 kB
JavaScript
"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 _index = _interopRequireDefault(require("./index"));
var _canvax = _interopRequireDefault(require("canvax"));
var _xaxis = _interopRequireDefault(require("./xaxis"));
var _yaxis = _interopRequireDefault(require("./yaxis"));
var _grid = _interopRequireDefault(require("./grid"));
var _tools = require("../../utils/tools");
var _trigger = _interopRequireDefault(require("../trigger"));
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._,
event = _canvax.default.event;
var Rect = /*#__PURE__*/function (_coordBase) {
function Rect(opt, app) {
var _this;
(0, _classCallCheck2.default)(this, Rect);
_this = _callSuper(this, Rect, [opt, app]);
_.extend(true, _this, (0, _tools.getDefaultProps)(Rect.defaultProps()), _this.setDefaultOpt(opt, app));
_this.type = "rect";
_this._xAxis = null;
_this._yAxis = [];
_this._yAxisLeft = null;
_this._yAxisRight = null;
_this._grid = null;
_this.init(opt);
return _this;
}
(0, _inherits2.default)(Rect, _coordBase);
return (0, _createClass2.default)(Rect, [{
key: "setDefaultOpt",
value: function setDefaultOpt(coordOpt, app) {
var coord = {
field: this.dataFrame.fields[0],
xAxis: {
//波峰波谷布局模型，默认是柱状图的，折线图种需要做覆盖
layoutType: "rule",
//"peak",
//默认为false，x轴的计量是否需要取整， 这样 比如某些情况下得柱状图的柱子间隔才均匀。
//比如一像素间隔的柱状图，如果需要精确的绘制出来每个柱子的间距是1px， 就必须要把这里设置为true
posParseToInt: false
},
grid: {}
};
_.extend(true, coord, coordOpt);
if (coord.yAxis) {
var _nyarr = [];
//TODO: 因为我们的deep extend 对于数组是整个对象引用过去，所以，这里需要
//把每个子元素单独clone一遍，恩恩恩， 在canvax中优化extend对于array的处理
_.each(_.flatten([coord.yAxis]), function (yopt) {
_nyarr.push(_.clone(yopt));
});
coord.yAxis = _nyarr;
} else {
coord.yAxis = [];
}
;
//根据opt中得Graphs配置，来设置 coord.yAxis
var graphsArr = app._opt.graphs ? _.flatten([app._opt.graphs]) : [];
//有graphs的就要用找到这个graphs.field来设置coord.yAxis
var _loop = function _loop() {
var graphs = graphsArr[i];
if (graphs.type == "bar") {
//如果graphs里面有柱状图，那么就整个xAxis都强制使用 peak 的layoutType
coord.xAxis.layoutType = "peak";
}
if (graphs.field) {
//没有配置field的话就不绘制这个 graphs了
var align = "left"; //默认left
if (graphs.yAxisAlign == "right") {
align = "right";
}
;
var optsYaxisObj = null;
optsYaxisObj = _.find(coord.yAxis, function (obj, i) {
return obj.align == align || !obj.align && i == (align == "left" ? 0 : 1);
});
if (!optsYaxisObj) {
optsYaxisObj = {
align: align,
field: []
};
coord.yAxis.push(optsYaxisObj);
} else {
if (!optsYaxisObj.align) {
optsYaxisObj.align = align;
}
}
if (!optsYaxisObj.field) {
optsYaxisObj.field = [];
} else {
if (!_.isArray(optsYaxisObj.field)) {
optsYaxisObj.field = [optsYaxisObj.field];
}
}
if (_.isArray(graphs.field)) {
optsYaxisObj.field = optsYaxisObj.field.concat(graphs.field);
} else {
optsYaxisObj.field.push(graphs.field);
}
}
};
for (var i = 0; i < graphsArr.length; i++) {
_loop();
}
;
//再梳理一遍yAxis，get没有align的手动配置上align
//要手动把yAxis 按照 left , right的顺序做次排序
var _lys = [],
_rys = [];
_.each(coord.yAxis, function (yAxis, i) {
if (!yAxis.align) {
yAxis.align = i ? "right" : "left";
}
if (yAxis.align == "left") {
_lys.push(yAxis);
} else {
_rys.push(yAxis);
}
});
coord.yAxis = _lys.concat(_rys);
if (coord.horizontal) {
coord.xAxis.isH = true;
_.each(coord.yAxis, function (yAxis) {
yAxis.isH = true;
});
}
;
if ("enabled" in coord) {
//如果有给直角坐标系做配置display，就直接通知到xAxis，yAxis，grid三个子组件
_.extend(true, coord.xAxis, {
enabled: coord.enabled
});
_.each(coord.yAxis, function (yAxis) {
_.extend(true, yAxis, {
enabled: coord.enabled
});
});
coord.grid.enabled = coord.enabled;
}
;
if ("animation" in coord) {
//如果有给直角坐标系做配置animation，就直接通知到xAxis，yAxis，grid三个子组件
_.extend(true, coord.xAxis, {
animation: coord.animation
});
_.each(coord.yAxis, function (yAxis) {
_.extend(true, yAxis, {
animation: coord.animation
});
});
coord.grid.animation = coord.animation;
}
;
return coord;
}
}, {
key: "init",
value: function init() {
this._initModules();
//创建好了坐标系统后，设置 _fieldsDisplayMap 的值，
// _fieldsDisplayMap 的结构里包含每个字段是否在显示状态的enabled 和 这个字段属于哪个yAxis
this.graphsFieldsMap = this.setGraphsFieldsMap({
type: "yAxis"
});
}
}, {
key: "reset",
value: function reset() {
this.resetData(this.dataFrame);
}
}, {
key: "resetData",
value: function resetData(dataFrame) {
var me = this;
var _padding = this.app.padding;
//let w = this._opt.width || this.app.width;
var h = this._opt.height || this.app.height;
var w = this._opt.width || this.app.width;
if (this.horizontal) {
//如果是横向的坐标系统，也就是xy对调，那么高宽也要对调
var _num = w;
w = h;
h = _num;
}
;
this.dataFrame = dataFrame;
var _yAxisWAll = 0;
var _leftYAxisW = 0;
_.each(this._yAxis, function (_yAxis) {
//这个_yAxis是具体的y轴实例
var yAxisDataFrame = me.getAxisDataFrame(_yAxis.field);
_yAxis.resetData(yAxisDataFrame);
_yAxisWAll += _yAxis.width;
if (_yAxis.align == 'left') {
_leftYAxisW = _yAxis.width;
}
});
var xAxisWidth = w - _yAxisWAll - _padding.left - _padding.right;
this.width = xAxisWidth;
var _xAxisDataFrame = this.getAxisDataFrame(this.xAxis.field);
this._xAxis.resetData(_xAxisDataFrame, {
width: xAxisWidth,
pos: {
x: _padding.left + _leftYAxisW
//y : y
}
});
this.origin.x = _leftYAxisW + _padding.left;
this._resetXY_axisLine_pos();
this._grid.reset({
animation: false
});
}
}, {
key: "draw",
value: function draw(opt) {
//在绘制的时候，要先拿到xAxis的高
!opt && (opt = {});
var _padding = this.app.padding;
var h = opt.height || this.app.height;
var w = opt.width || this.app.width;
if (this.horizontal) {
//如果是横向的坐标系统，也就是xy对调，那么高宽也要对调
var _num = w;
w = h;
h = _num;
}
;
var y = h - this._xAxis.height - _padding.bottom;
var _yAxisW = 0;
var _yAxisRW = 0;
//绘制yAxis
if (this._yAxisLeft) {
this._yAxisLeft.draw({
pos: {
x: _padding.left,
y: y
},
yMaxHeight: y - _padding.top,
resize: opt.resize
});
_yAxisW = this._yAxisLeft.width;
}
//如果有双轴
if (this._yAxisRight) {
this._yAxisRight.draw({
pos: {
x: 0,
y: y
},
yMaxHeight: y - _padding.top,
resize: opt.resize
});
_yAxisRW = this._yAxisRight.width;
}
;
//绘制x轴
this._xAxis.draw({
pos: {
x: _padding.left + _yAxisW,
y: y
},
width: w - _yAxisW - _padding.left - _yAxisRW - _padding.right,
resize: opt.resize
});
this._yAxisRight && this._yAxisRight.setX(_yAxisW + _padding.left + this._xAxis.width);
this.width = this._xAxis.width;
this.height = this._yAxis.length ? this._yAxis[0].height : 0;
this.origin.x = _yAxisW + _padding.left;
this.origin.y = y;
//绘制背景网格
this._grid.draw({
width: this.width,
height: this.height,
pos: this.origin,
resize: opt.resize
});
this._initInduce();
this._resetXY_axisLine_pos();
if (this.horizontal) {
this._horizontal({
w: w,
h: h
});
}
}
}, {
key: "_resetXY_axisLine_pos",
value: function _resetXY_axisLine_pos() {
var me = this;
//设置下x y 轴的 _axisLine轴线的位置，默认 axisLine.position==default
var xAxisPosY;
if (this._xAxis.enabled) {
if (this._xAxis.axisLine.position == 'center') {
xAxisPosY = -this._yAxis[0].height / 2;
}
if (this._xAxis.axisLine.position == 'center') {
xAxisPosY = -this._yAxis[0].height / 2;
}
if (_.isNumber(this._xAxis.axisLine.position)) {
xAxisPosY = -this._yAxis[0].getPosOfVal(this._xAxis.axisLine.position);
}
if (xAxisPosY !== undefined) {
this._xAxis._axisLine.context.y = xAxisPosY;
}
}
_.each(this._yAxis, function (_yAxis) {
//这个_yAxis是具体的y轴实例
var yAxisPosX;
if (_yAxis.enabled) {
if (_yAxis.axisLine.position == 'center') {
yAxisPosX = me._xAxis.width / 2;
}
;
if (_.isNumber(_yAxis.axisLine.position)) {
yAxisPosX = me._xAxis.getPosOfVal(_yAxis.axisLine.position);
}
;
if (yAxisPosX !== undefined) {
_yAxis._axisLine.context.x = yAxisPosX;
}
;
}
});
}
}, {
key: "getSizeAndOrigin",
value: function getSizeAndOrigin() {
var obj = {
width: this.width,
height: this.height,
origin: this.origin
};
if (this.horizontal) {
var _padding = this.app.padding;
//因为在drawBeginHorizontal中
//横向了之后， 要把4个padding值轮换换过了
//top,right 对调 ， bottom,left 对调
//所以，这里要对调换回来给到origin
var left = _padding.bottom;
var top = _padding.right;
obj = {
width: this._yAxis[0].height,
height: this._xAxis.width,
origin: {
x: this._xAxis.height + left,
y: this._yAxis[0].height + top
}
};
}
;
return obj;
}
}, {
key: "_initModules",
value: function _initModules() {
this._grid = new _grid.default(this.grid, this);
this.sprite.addChild(this._grid.sprite);
var _xAxisDataFrame = this.getAxisDataFrame(this.xAxis.field);
this._xAxis = new _xaxis.default(this.xAxis, _xAxisDataFrame, this);
this._axiss.push(this._xAxis);
this.sprite.addChild(this._xAxis.sprite);
//这里定义的是配置
var yAxis = this.yAxis;
var yAxisLeft, yAxisRight;
var yAxisLeftDataFrame, yAxisRightDataFrame;
// yAxis 肯定是个数组
if (!_.isArray(yAxis)) {
yAxis = [yAxis];
}
;
//left是一定有的
yAxisLeft = _.find(yAxis, function (ya) {
return ya.align == "left";
});
if (yAxisLeft) {
yAxisLeftDataFrame = this.getAxisDataFrame(yAxisLeft.field);
this._yAxisLeft = new _yaxis.default(yAxisLeft, yAxisLeftDataFrame, this);
this._yAxisLeft.axis = yAxisLeft;
this.sprite.addChild(this._yAxisLeft.sprite);
this._yAxis.push(this._yAxisLeft);
this._axiss.push(this._yAxisLeft);
}
yAxisRight = _.find(yAxis, function (ya) {
return ya.align == "right";
});
if (yAxisRight) {
yAxisRightDataFrame = this.getAxisDataFrame(yAxisRight.field);
this._yAxisRight = new _yaxis.default(yAxisRight, yAxisRightDataFrame, this);
this._yAxisRight.axis = yAxisRight;
this.sprite.addChild(this._yAxisRight.sprite);
this._yAxis.push(this._yAxisRight);
this._axiss.push(this._yAxisRight);
}
;
}
/**
*
* @param {x,y} size
*/
}, {
key: "_horizontal",
value: function _horizontal(opt) {
var me = this;
var w = opt.h;
var h = opt.w;
_.each([me.sprite.context], function (ctx) {
ctx.x += (w - h) / 2;
ctx.y += (h - w) / 2;
var origin = {
x: h / 2,
y: w / 2
};
ctx.rotation = 90;
ctx.rotateOrigin = origin;
});
}
//由coor_base中得addField removeField来调用
}, {
key: "changeFieldEnabled",
value: function changeFieldEnabled(field) {
var _this2 = this;
this.setFieldEnabled(field);
var fieldConfig = this.getFieldConfig(field);
var _axis = fieldConfig.yAxis || fieldConfig.rAxis;
var enabledFields = this.getEnabledFieldsOf(_axis); //[ fieldConfig.yAxis.align ];
_axis.resetData(this.getAxisDataFrame(enabledFields));
this.draw();
var graphs = this.app.getGraphs();
graphs.forEach(function (graph) {
graph.origin = _this2.origin;
graph.sprite.context.x = _this2.origin.x;
graph.sprite.context.y = _this2.origin.y;
});
}
}, {
key: "_initInduce",
value: function _initInduce() {
var me = this;
me.induce = new _canvax.default.Shapes.Rect({
id: "induce",
context: {
x: me.origin.x,
y: me.origin.y - me.height,
width: me.width,
height: me.height,
fillStyle: '#000000',
globalAlpha: 0,
cursor: 'pointer'
}
});
if (!me.sprite.getChildById("induce")) {
me.sprite.addChild(me.induce);
}
;
me.induce.on(event.types.get(), function (e) {
//e.eventInfo = me._getInfoHandler(e);
me.fire(e.type, e);
//图表触发，用来处理Tips
me.app.fire(e.type, e);
});
}
}, {
key: "getTipsInfoHandler",
value: function getTipsInfoHandler(e) {
//这里只获取xAxis的刻度信息;
var induceX = e.point.x;
if (e.target !== this.induce) {
induceX = this.induce.globalToLocal(e.target.localToGlobal(e.point)).x;
}
;
var xNode = this._xAxis.getNodeInfoOfX(induceX);
var obj = {
xAxis: xNode,
dimension_1: xNode,
//和xAxis一致，， 极坐标也会有dimension_1
title: xNode.text,
//下面两个属性是所有坐标系统一的
iNode: xNode.ind,
nodes: [
//遍历_graphs 去拿东西
]
};
if (e.eventInfo) {
_.extend(true, obj, e.eventInfo);
//把xNode信息写到eventInfo上面
if (obj.xAxis) {
e.eventInfo.xAxis = xNode;
}
;
}
;
return obj;
}
//下面的方法是所有坐标系都要提供的方法，用来计算位置的， graphs里面会调用
//return {pos {x,y}, value :{x,y}}
}, {
key: "getPoint",
value: function getPoint(opt) {
var point = {
x: 0,
y: undefined
};
var xaxisExp = {
type: "xAxis"
};
var yaxisExp = {
type: "yAxis",
field: opt.field
};
var _xAxis = this.getAxis(xaxisExp);
var _yAxis = this.getAxis(yaxisExp);
var _iNode = opt.iNode || 0;
var _value = opt.value; //x y 一般至少会带 yval过来
if (!("x" in _value)) {
//如果没有传xval过来，要用iNode去xAxis的org去取
_value.x = _.flatten(_xAxis.dataOrg)[_iNode];
}
;
point.x = _xAxis.getPosOf({
ind: _iNode,
val: _value.x
});
var y = _value.y;
if (!isNaN(y) && y !== null && y !== undefined && y !== "") {
if (!!opt.vIndex) {
//说明是堆叠的
//要获取到对应Y轴的最小值， 如果最小值是大于0的，那么val要加上这个最小值
if (_yAxis._min > 0) {
y += _yAxis._min;
}
}
point.y = -_yAxis.getPosOfVal(y);
} else {
point.y = undefined;
}
;
return {
pos: point,
value: _value
};
}
}, {
key: "getAxisOriginPoint",
value: function getAxisOriginPoint(exp) {
var _yAxis = this.getAxis(exp);
return {
pos: -_yAxis.originPos,
value: _yAxis.origin
};
}
}, {
key: "getOriginPos",
value: function getOriginPos(exp) {
var xaxisExp = {
type: "xAxis"
};
var yaxisExp = {
type: "yAxis",
field: exp.field
};
var _xAxis = this.getAxis(xaxisExp);
var _yAxis = this.getAxis(yaxisExp);
return {
x: _xAxis.originPos,
y: -_yAxis.originPos
};
}
//某axis变化了后，对应的依附于该axis的graphs都要重新reset
}, {
key: "resetGraphsOfAxis",
value: function resetGraphsOfAxis(axis) {
var _this3 = this;
var graphs = this.app.getGraphs();
if (axis.type == 'yAxis') {
graphs.forEach(function (graph) {
if (graph.yAxisAlign == axis.align) {
graph.resetData(null, new _trigger.default(_this3));
graph.origin = _this3.origin;
graph.sprite.context.x = _this3.origin.x;
graph.sprite.context.y = _this3.origin.y;
}
});
}
}
}], [{
key: "defaultProps",
value: function defaultProps() {
return {
horizontal: {
detail: '横向翻转坐标系',
documentation: "横向翻转坐标系",
insertText: "horizontal: ",
default: false,
values: [true, false]
},
_props: {
xAxis: _xaxis.default,
yAxis: _yaxis.default,
grid: _grid.default
}
};
}
}]);
}(_index.default);
_index.default.registerComponent(Rect, 'coord', 'rect');
var _default = exports.default = Rect;