@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
190 lines • 6.98 kB
JavaScript
import { __assign, __extends } from "tslib";
import * as _ from '@antv/util';
import { registerPlotType } from '../../base/global';
import ViewLayer from '../../base/view-layer';
import { getComponent } from '../../components/factory';
import { getGeom } from '../../geoms/factory';
import { extractScale, trySetScaleMinToZero } from '../../util/scale';
import './animation/clipIn-with-data';
import responsiveMethods from './apply-responsive';
import './apply-responsive/theme';
import './component/label/line-label';
import './component/label/point-label';
import * as EventParser from './event';
import { LineActive, LineSelect } from './interaction/index';
import './theme';
var GEOM_MAP = {
line: 'line',
point: 'point',
};
var LineLayer = /** @class */ (function (_super) {
__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')) {
extractScale(scales[props.xField], props.xAxis);
}
/** 配置y-scale */
scales[props.yField] = {};
if (_.has(props, 'yAxis')) {
extractScale(scales[props.yField], props.yAxis);
}
this.setConfig('scales', scales);
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 = 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 = 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 = getComponent('label', __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 LineActive({ view: this.view });
interactions.lineActive = lineActive;
var lineSelect = new 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 = responsiveMethods[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;
}(ViewLayer));
export default LineLayer;
registerPlotType('line', LineLayer);
//# sourceMappingURL=layer.js.map