@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
223 lines • 8.31 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var base_1 = tslib_1.__importDefault(require("./base"));
var _ = tslib_1.__importStar(require("@antv/util"));
var global_1 = require("../base/global");
var layer_1 = tslib_1.__importDefault(require("../base/layer"));
require("../plots/index");
var ComboUtil = tslib_1.__importStar(require("./util"));
var padding_1 = require("./util/padding");
var global_2 = require("../theme/global");
var OverlappedComboPlot = /** @class */ (function (_super) {
tslib_1.__extends(OverlappedComboPlot, _super);
function OverlappedComboPlot(container, props) {
var _this = _super.call(this, container, props) || this;
_this.options = props;
return _this;
}
OverlappedComboPlot.prototype.getDefaultOptions = function () {
return {
xAxis: {
visible: true,
autoHideLabel: false,
autoRotateLabel: false,
autoRotateTitle: false,
grid: {
visible: false,
},
line: {
visible: true,
},
tickLine: {
visible: true,
},
label: {
visible: true,
},
title: {
visible: false,
offset: 12,
},
},
yAxis: {
visible: true,
autoHideLabel: false,
autoRotateLabel: false,
autoRotateTitle: true,
grid: {
visible: true,
},
line: {
visible: true,
},
tickLine: {
visible: true,
},
label: {
visible: true,
},
title: {
visible: false,
offset: 12,
},
colorMapping: true,
synchroTick: true,
},
label: {
visible: false,
},
tooltip: {
visible: true,
sort: true,
},
legend: {
visible: true,
position: 'top-left',
},
};
};
OverlappedComboPlot.prototype.createComboLayers = function () {
var _this = this;
_super.prototype.createComboLayers.call(this);
this.legendInfo = [];
this.axisInfo = [];
this.paddingComponents = [];
this.globalComponents = [];
this.singleGeomCount = 0;
this.backLayer = new layer_1.default({
canvas: this.getCanvas(),
width: this.width,
height: this.height,
});
if (this.options.layers.length > 0) {
/** create layers */
_.each(this.options.layers, function (layerCfg) {
var _a, _b;
var overlapConfig = _this.getOverlappedConfig(layerCfg);
var viewLayerCtr = global_1.getPlotType(layerCfg.type);
var viewLayerProps = _.deepMix({}, layerCfg, {
canvas: _this.canvas,
x: 0,
y: 0,
width: _this.width,
height: _this.height,
}, overlapConfig);
var viewLayer = new viewLayerCtr(viewLayerProps);
viewLayer.hide();
viewLayer.render();
(_a = _this.axisInfo).push.apply(_a, ComboUtil.getAxisData(viewLayer, viewLayerProps, _this.globalOptions));
(_b = _this.legendInfo).push.apply(_b, ComboUtil.getLegendData(viewLayer, viewLayerProps));
_this.addLayer(viewLayer);
});
}
/** add top layer for legend & tooltip */
this.topLayer = new layer_1.default({
canvas: this.getCanvas(),
width: this.width,
height: this.height,
});
};
/** 图层叠加时的layer config */
OverlappedComboPlot.prototype.getOverlappedConfig = function (layerCfg) {
var colorCfg = ComboUtil.getColorConfig(layerCfg.type, layerCfg, this.singleGeomCount);
if (colorCfg && colorCfg.single) {
this.singleGeomCount++;
}
return _.deepMix({}, {
xAxis: {
visible: false,
},
yAxis: {
visible: false,
},
legend: {
visible: false,
},
tooltip: {
visible: false,
},
padding: [0, 0, 0, 0],
color: colorCfg ? colorCfg.color : null,
});
};
OverlappedComboPlot.prototype.overlappingLegend = function () {
var legendItems = ComboUtil.mergeLegendData(this.legendInfo);
this.legendContainer = this.topLayer.container.addGroup();
return ComboUtil.createLegend(legendItems, this.width, this.height, this.getCanvas(), this.globalOptions.legend.position);
};
OverlappedComboPlot.prototype.render = function () {
var _a;
var _this = this;
this.doDestroy();
this.createComboLayers();
var bleeding = global_2.getGlobalTheme().bleeding;
if (this.globalOptions.legend.visible) {
var legend = this.overlappingLegend();
this.globalComponents.push({ type: 'legend', component: legend.component });
this.paddingComponents.push(legend);
}
// 先获取legend的padding
var legendPadding = padding_1.getOverlappingPadding(this.layers[0], this.paddingComponents);
var axisComponents = ComboUtil.axesLayout(this.globalOptions, this.axisInfo, legendPadding, this.layers[0], this.width, this.height, this.getCanvas());
(_a = this.paddingComponents).push.apply(_a, axisComponents);
_.each(axisComponents, function (axis) {
_this.globalComponents.push({ type: 'axis', component: axis.component });
});
// 计算padding
var padding = padding_1.getOverlappingPadding(this.layers[0], this.paddingComponents);
if (!this.globalOptions.xAxis.visible) {
padding[2] += bleeding[2];
}
// 更新layers
_.each(this.layers, function (layer) {
layer.updateConfig({
padding: padding,
});
layer.show();
layer.render();
layer.view
.get('backgroundGroup')
.get('backShape')
.remove();
layer.view
.get('panelGroup')
.get('backShape')
.remove();
});
//补画坐标轴grid
if (this.globalOptions.yAxis.grid.visible) {
var leftAxis = axisComponents[0].component;
var containerLayer = this.layers[0];
var coord = containerLayer.view.get('coord');
var container = containerLayer.view.get('backgroundGroup');
ComboUtil.drawYGrid(leftAxis, coord, container, this.globalOptions);
}
if (this.globalOptions.tooltip.visible) {
var tooltip = ComboUtil.showTooltip(this.canvas, this.layers, this.globalOptions.tooltip);
this.globalComponents.push({ type: 'tooltip', component: tooltip });
}
};
OverlappedComboPlot.prototype.doDestroy = function () {
this.clearComponents();
this.eachLayer(function (layer) {
layer.destroy();
});
this.layers = [];
};
OverlappedComboPlot.prototype.clearComponents = function () {
_.each(this.globalComponents, function (c) {
if (c.type === 'legend' || c.type === 'tooltip') {
c.component.destroy();
}
if (c.type === 'axis') {
c.component.clear();
}
});
this.paddingComponents = [];
this.globalComponents = [];
};
return OverlappedComboPlot;
}(base_1.default));
exports.default = OverlappedComboPlot;
//# sourceMappingURL=overlapped.js.map