@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
192 lines • 7.21 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var _ = tslib_1.__importStar(require("@antv/util"));
var global_1 = require("../../base/global");
var view_layer_1 = tslib_1.__importDefault(require("../../base/view-layer"));
var factory_1 = require("../../components/factory");
var factory_2 = require("../../geoms/factory");
var scale_1 = require("../../util/scale");
require("./animation/clipIn-with-data");
var apply_responsive_1 = tslib_1.__importDefault(require("./apply-responsive"));
require("./apply-responsive/theme");
require("./component/label/line-label");
require("./component/label/point-label");
var EventParser = tslib_1.__importStar(require("./event"));
var index_1 = require("./interaction/index");
require("./theme");
var GEOM_MAP = {
line: 'line',
point: 'point',
};
var LineLayer = /** @class */ (function (_super) {
tslib_1.__extends(LineLayer, _super);
function LineLayer() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = 'line';
return _this;
}
LineLayer.getDefaultOptions = function () {
return _.deepMix({}, _super.getDefaultOptions.call(this), {
connectNulls: false,
smooth: false,
lineSize: 2,
lineStyle: {
lineJoin: 'round',
lineCap: 'round',
},
point: {
visible: false,
size: 3,
shape: 'circle',
style: {
stroke: '#fff',
},
},
label: {
visible: false,
type: 'point',
},
legend: {
visible: true,
position: 'top-left',
wordSpacing: 4,
},
});
};
LineLayer.prototype.getOptions = function (props) {
var options = _super.prototype.getOptions.call(this, props);
// @ts-ignore
var defaultOptions = this.constructor.getDefaultOptions();
return _.deepMix({}, options, defaultOptions, props);
};
LineLayer.prototype.afterRender = function () {
var props = this.options;
// 响应式
if (props.responsive && props.padding !== 'auto') {
this.applyResponsive('afterRender');
}
_super.prototype.afterRender.call(this);
};
LineLayer.prototype.geometryParser = function (dim, type) {
return GEOM_MAP[type];
};
LineLayer.prototype.scale = function () {
var props = this.options;
var scales = {};
/** 配置x-scale */
scales[props.xField] = {};
if (_.has(props, 'xAxis')) {
scale_1.extractScale(scales[props.xField], props.xAxis);
}
/** 配置y-scale */
scales[props.yField] = {};
if (_.has(props, 'yAxis')) {
scale_1.extractScale(scales[props.yField], props.yAxis);
}
this.setConfig('scales', scales);
scale_1.trySetScaleMinToZero(scales[props.yField], _.map(props.data, function (item) { return item[props.yField]; }));
_super.prototype.scale.call(this);
};
LineLayer.prototype.coord = function () { };
LineLayer.prototype.addGeometry = function () {
// 配置线
this.addLine();
// 配置数据点
this.addPoint();
};
LineLayer.prototype.addLine = function () {
var props = this.options;
this.line = factory_2.getGeom('line', 'main', {
plot: this,
});
if (props.label) {
this.label();
}
this.setConfig('element', this.line);
};
LineLayer.prototype.addPoint = function () {
var props = this.options;
var defaultConfig = { visible: false };
if (props.point) {
props.point = _.deepMix(defaultConfig, props.point);
}
if (props.point && props.point.visible) {
this.point = factory_2.getGeom('point', 'guide', {
plot: this,
});
this.point.active = false;
this.setConfig('element', this.point);
}
};
LineLayer.prototype.label = function () {
var props = this.options;
var label = props.label;
if (label.visible === false || this.singleLineLabelCheck()) {
this.line.label = false;
return;
}
/** label类型为line，即跟随在折线尾部时，设置offset为0 */
if (label.type === 'line') {
label.offset = 0;
}
this.line.label = factory_1.getComponent('label', tslib_1.__assign({ plot: this, top: true, labelType: label.type, fields: label.type === 'line' ? [props.seriesField] : [props.yField] }, label));
};
LineLayer.prototype.animation = function () {
_super.prototype.animation.call(this);
var props = this.options;
if (props.animation === false) {
// 关闭动画
this.line.animate = false;
if (this.point)
this.point.animate = false;
}
else if (_.has(props, 'animation')) {
// 根据动画类型区分图形动画和群组动画
if (props.animation.type === 'clipingWithData' && props.padding !== 'auto') {
this.line.animate = {
appear: {
animation: 'clipingWithData',
easing: 'easeLinear',
duration: 10000,
yField: props.yField,
seriesField: props.seriesField,
plot: this,
},
};
// 如果有数据点的话要追加数据点的动画
if (props.point && props.point.visible) {
this.point.animate = false;
}
}
}
};
LineLayer.prototype.applyInteractions = function () {
_super.prototype.applyInteractions.call(this);
// 加入默认交互
var interactions = this.view.get('interactions');
var lineActive = new index_1.LineActive({ view: this.view });
interactions.lineActive = lineActive;
var lineSelect = new index_1.LineSelect({ view: this.view });
interactions.lineSelect = lineSelect;
};
LineLayer.prototype.parseEvents = function (eventParser) {
_super.prototype.parseEvents.call(this, EventParser);
};
LineLayer.prototype.applyResponsive = function (stage) {
var _this = this;
var methods = apply_responsive_1.default[stage];
_.each(methods, function (r) {
var responsive = r;
responsive.method(_this);
});
};
LineLayer.prototype.singleLineLabelCheck = function () {
// 不允许单折线设置尾部跟随label
return !this.options.seriesField && this.options.label.type && this.options.label.type === 'line';
};
return LineLayer;
}(view_layer_1.default));
exports.default = LineLayer;
global_1.registerPlotType('line', LineLayer);
//# sourceMappingURL=layer.js.map