chartx
Version:
Data Visualization Chart Library
454 lines (447 loc) • 15.5 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 _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._,
event = _canvax.default.event;
var Line = _canvax.default.Shapes.Line;
var Rect = _canvax.default.Shapes.Rect;
var rectGrid = exports.default = /*#__PURE__*/function (_event$Dispatcher) {
function rectGrid(opt, _coord) {
var _this;
(0, _classCallCheck2.default)(this, rectGrid);
_this = _callSuper(this, rectGrid, [opt, _coord]);
_.extend(true, _this, (0, _tools.getDefaultProps)(rectGrid.defaultProps()));
_this.width = 0;
_this.height = 0;
_this._coord = _coord; //该组件被添加到的目标图表项目，
_this.pos = {
x: 0,
y: 0
};
_this.sprite = null; //总的sprite
_this.xAxisSp = null; //x轴上的线集合
_this.yAxisSp = null; //y轴上的线集合
_this.init(opt);
return _this;
}
(0, _inherits2.default)(rectGrid, _event$Dispatcher);
return (0, _createClass2.default)(rectGrid, [{
key: "init",
value: function init(opt) {
_.extend(true, this, opt);
this.sprite = new _canvax.default.Display.Sprite();
this.gridsp = new _canvax.default.Display.Sprite();
this.sprite.addChild(this.gridsp);
this._clipRect = new Rect({
name: "clipRect",
context: {
width: 0,
height: 0
}
});
this.gridsp.clipTo(this._clipRect);
this.sprite.addChild(this._clipRect);
}
}, {
key: "setX",
value: function setX($n) {
this.sprite.context.x = $n;
}
}, {
key: "setY",
value: function setY($n) {
this.sprite.context.y = $n;
}
}, {
key: "draw",
value: function draw(opt) {
_.extend(true, this, opt);
//this._configData(opt);
this.clean();
this._widget();
this.setX(this.pos.x);
this.setY(this.pos.y);
this._clipRect.context.width = this.width;
this._clipRect.context.height = -this.height;
}
}, {
key: "clean",
value: function clean() {
this.gridsp.removeAllChildren();
}
}, {
key: "reset",
value: function reset(opt) {
this.clean();
this.draw(opt);
}
}, {
key: "_widget",
value: function _widget() {
var self = this;
if (!this.enabled) {
return;
}
;
var _yAxis = self._coord._yAxis[0];
var _xAxis = self._coord._xAxis;
this.fillSp = new _canvax.default.Display.Sprite();
this.gridsp.addChild(this.fillSp);
_.each([self.fill.xDimension, self.fill.yDimension], function (fill, ind) {
var _axis = ind ? _yAxis : _xAxis;
var splitVals = [];
if (fill.enabled) {
if (!fill.splitVals) {
splitVals = _axis.dataSection;
} else {
splitVals = _.flatten([fill.splitVals]);
// splitVals = [_axis.dataSection[0]].concat(_.flatten([fill.splitVals]));
// let lastSectionVal = _axis.dataSection.slice(-1)[0];
// if( splitVals.indexOf( lastSectionVal ) == -1 ){
// splitVals.push( lastSectionVal );
// }
}
;
var fillRanges = [];
if (splitVals.length) {
//splitVals去重
splitVals = _.uniq(splitVals);
var range = [0];
var _loop = function _loop() {
var val = splitVals[i];
var pos = _axis.getPosOf({
val: val
});
if (range.length == 1) {
if (!pos && _axis.type == 'xAxis') {
var dataFrame = self._coord.app.dataFrame;
var orgData = _.find(dataFrame.jsonOrg, function (item) {
return item[_axis.field] == val;
});
if (orgData) {
var orgIndex = orgData.__index__;
if (orgIndex <= dataFrame.range.start) {
pos = 0;
}
if (orgIndex >= dataFrame.range.end) {
pos = self.width;
}
}
}
if (_axis.layoutType == 'peak') {
pos += _axis._cellLength / 2;
}
range.push(parseInt(pos));
fillRanges.push(range);
var nextBegin = range[1];
range = [nextBegin];
}
};
for (var i = 0, l = splitVals.length; i < l; i++) {
_loop();
}
;
//fill的区间数据准备好了
_.each(fillRanges, function (range, rInd) {
if (!range || range && range.length && range[1] <= range[0]) return;
var start = range[0];
var end = range[1];
if (start < 0) {
start = 0;
}
if (end > self._coord.width) {
end = self._coord.width;
}
var rectCtx = {
fillStyle: self.getProp(fill.fillStyle, rInd, "#000"),
fillAlpha: self.getProp(fill.alpha, rInd, 0.02 * (rInd % 2))
};
if (!ind) {
//x轴上面排列的fill
rectCtx.x = start;
rectCtx.y = 0;
rectCtx.width = end - start;
rectCtx.height = -self.height;
} else {
//y轴上面排列的fill
rectCtx.x = 0;
rectCtx.y = -start;
rectCtx.width = self.width;
rectCtx.height = -(end - start);
}
var fillRect = new Rect({
context: rectCtx
});
self.fillSp.addChild(fillRect);
var _text = self.getProp(fill.splitLabels, rInd, "");
if (_text) {
var fontColor = self.getProp(fill.fontColor, rInd, "#666");
var fontSize = self.getProp(fill.fontSize, rInd, 12);
var textAlign = 'center';
var textBaseline = 'top';
var x = rectCtx.x + rectCtx.width / 2;
var y = rectCtx.height + 8;
if (ind) {
//y轴上面排列的fill
textAlign = 'left';
textBaseline = 'middle';
x = rectCtx.x + 8;
y = rectCtx.y + rectCtx.height / 2;
}
var txt = new _canvax.default.Display.Text(_text, {
context: {
fontSize: fontSize,
fillStyle: fontColor,
x: x,
y: y,
textAlign: textAlign,
//"center",//this.isH ? "center" : "left",
textBaseline: textBaseline //"middle", //this.isH ? "top" : "middle",
}
});
self.fillSp.addChild(txt);
txt.on(event.types.get(), function (e) {
e.eventInfo = {
trigger: self,
nodes: [{
name: _text
}]
//iNode : this.iNode
//TODO:这里设置了的话，会导致多graphs里获取不到别的graphs的nodes信息了
//nodes : me.getNodesAt( this.iNode )
};
barGroupSectedHandle.bind(this)(e);
//触发root统一设置e.eventInfo.nodes,所以上面不需要设置
me.app.fire(e.type, e);
});
if (!ind) {
var txtw = txt.getTextWidth();
if (txtw > rectCtx.width) {
var maxLen = rectCtx.width / txtw * _text.length;
if (maxLen < 2) {
txt.resetText('');
} else {
txt.resetText(_text.slice(0, maxLen - 2) + "...");
}
}
}
}
});
console.log(fillRanges);
}
}
});
self.xAxisSp = new _canvax.default.Display.Sprite(), this.gridsp.addChild(self.xAxisSp);
self.yAxisSp = new _canvax.default.Display.Sprite(), this.gridsp.addChild(self.yAxisSp);
var arr = _yAxis ? _yAxis.layoutData : [];
for (var a = 0, al = arr.length; a < al; a++) {
var o = arr[a];
if (!o.visible) continue;
var line = new Line({
id: "back_line_" + a,
context: {
y: o.y,
lineType: self.getProp(self.line.xDimension.lineType, a, 'solid'),
lineWidth: self.getProp(self.line.xDimension.lineWidth, a, 1),
strokeStyle: self.getProp(self.line.xDimension.strokeStyle, a, '#f0f0f0'),
visible: true
}
});
if (self.line.xDimension.enabled) {
self.xAxisSp.addChild(line);
line.context.start.x = 0;
line.context.end.x = self.width;
}
;
}
;
//y轴方向的线集合
arr = _xAxis.layoutData;
for (var _a = 0, _al = arr.length; _a < _al; _a++) {
var _o = arr[_a];
var _line = new Line({
context: {
x: _o.x,
start: {
x: 0,
y: 0
},
end: {
x: 0,
y: -self.height
},
lineType: self.getProp(self.line.yDimension.lineType, _a, 'solid'),
lineWidth: self.getProp(self.line.yDimension.lineWidth, _a, 1),
strokeStyle: self.getProp(self.line.yDimension.strokeStyle, _a, '#f0f0f0'),
visible: true
}
});
if (self.line.yDimension.enabled) {
self.yAxisSp.addChild(_line);
}
;
}
;
}
}, {
key: "getProp",
value: function getProp(prop, i, def) {
var res = def;
if (prop != null && prop != undefined) {
if (_.isString(prop) || _.isNumber(prop)) {
res = prop;
}
if (_.isFunction(prop)) {
res = prop.apply(this, [i, def]);
}
if (_.isArray(prop)) {
res = prop[i];
}
}
;
return res;
}
}], [{
key: "defaultProps",
value: function defaultProps() {
return {
enabled: {
detail: '是否开启grid绘制',
default: true
},
line: {
detail: '网格线条配置',
propertys: {
xDimension: {
detail: '一维方向的网格线',
propertys: {
enabled: {
detail: '是否开启',
default: true
},
data: [],
lineType: {
detail: '线的样式，虚线或者实现',
default: 'solid'
},
lineWidth: {
detail: '线宽',
default: 1
},
strokeStyle: {
detail: '线颜色',
default: '#e6e6e6'
}
}
},
yDimension: {
detail: '二维方向的网格线',
propertys: {
enabled: {
detail: '是否开启',
default: false
},
data: [],
lineType: {
detail: '线的样式，虚线或者实现',
default: 'solid'
},
lineWidth: {
detail: '线宽',
default: 1
},
strokeStyle: {
detail: '线颜色',
default: '#f0f0f0'
}
}
}
}
},
fill: {
detail: '背景色配置',
propertys: {
xDimension: {
detail: '以为方向的背景色块，x方向',
propertys: {
enabled: {
detail: '是否开启',
default: false
},
splitVals: {
detail: "从x轴上面用来分割区块的vals",
default: null //默认等于xaxis的dataSection
},
splitLabels: {
detail: "对应splitVals的文本",
default: null
},
fontColor: {
detail: "对应splitLabels的文本颜色",
default: null
},
fontSize: {
detail: "对应splitLabels的文本字体大小",
default: null
},
fillStyle: {
detail: '背景颜色',
default: null
},
alpha: {
detail: '背景透明度',
default: null
}
}
},
yDimension: {
detail: '以为方向的背景色块，y方向',
propertys: {
enabled: {
detail: '是否开启',
default: false
},
splitVals: {
detail: "从x轴上面用来分割区块的vals",
default: null
},
splitLabels: {
detail: "对应splitVals的文本",
default: null
},
fontColor: {
detail: "对应splitLabels的文本颜色",
default: null
},
fontSize: {
detail: "对应splitLabels的文本字体大小",
default: null
},
fillStyle: {
detail: '背景颜色',
default: null
},
alpha: {
detail: '背景透明度',
default: null
}
}
}
}
}
};
}
}]);
}(event.Dispatcher);