@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
364 lines • 13.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var _ = tslib_1.__importStar(require("@antv/util"));
var g_1 = require("@antv/g");
var scale_1 = require("@antv/scale");
var global_1 = require("../../base/global");
var view_layer_1 = tslib_1.__importDefault(require("../../base/view-layer"));
var factory_1 = require("../../components/factory");
var legend_1 = tslib_1.__importDefault(require("./component/legend"));
var shape_1 = require("./shape");
require("./component/label");
require("./component/legend");
var MatrixLayer = /** @class */ (function (_super) {
tslib_1.__extends(MatrixLayer, _super);
function MatrixLayer() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = 'matrix';
_this.gridSize = [];
return _this;
}
MatrixLayer.getDefaultOptions = function () {
return _.deepMix({}, _super.getDefaultOptions.call(this), {
forceSquare: false,
shapeType: 'rect',
legend: {
visible: true,
position: 'right-center',
},
tooltip: {
shared: false,
crosshairs: false,
},
xAxis: {
visible: true,
gridAlign: 'center',
grid: {
visible: true,
},
tickLine: {
visible: true,
},
line: {
visible: false,
},
autoRotateLabel: true,
},
yAxis: {
visible: true,
gridAlign: 'center',
grid: {
visible: true,
align: 'center',
},
tickLine: {
visible: true,
},
autoRotateLabel: true,
},
color: ['#9ae3d5', '#66cdbb', '#e7a744', '#f1e066', '#f27664', '#e7c1a2'],
label: {
visible: true,
adjustColor: true,
adjustPosition: true,
offset: 0,
style: {
stroke: 'rgba(255,255,255,0)',
lineWidth: 0,
},
},
});
};
MatrixLayer.prototype.afterInit = function () {
_super.prototype.afterInit.call(this);
if (this.options.forceSquare) {
var panelRange = this.view.get('panelRange');
var _a = this.options, xField = _a.xField, yField = _a.yField, data = _a.data;
var xCount = _.valuesOfKey(data, xField).length;
var yCount = _.valuesOfKey(data, yField).length;
var rangeSize = Math.min(panelRange.width, panelRange.height);
var count = Math.max(xCount, yCount);
var gridSize = rangeSize / count;
var width = gridSize * xCount;
var height = gridSize * yCount;
this.view.set('panelRange', new g_1.BBox(panelRange.x, panelRange.y, width, height));
}
};
MatrixLayer.prototype.afterRender = function () {
if (this.options.legend && this.options.legend.visible) {
this.matrixLegend = new legend_1.default(tslib_1.__assign({ view: this.view, plot: this }, this.options.legend));
this.matrixLegend.render();
this.paddingController.registerPadding(this.matrixLegend, 'outer');
}
_super.prototype.afterRender.call(this);
};
MatrixLayer.prototype.changeShape = function (type) {
if (this.options.shapeType === type) {
return;
}
this.options.shapeType = type;
if (type === 'rect') {
var geom = this.view.get('elements')[0];
var shapes = geom.getShapes();
this.circleToRect(shapes);
}
else if (type === 'circle') {
var geom = this.view.get('elements')[0];
var shapes = geom.getShapes();
this.rectToCircle(shapes);
}
};
MatrixLayer.prototype.mappingSize = function (field) {
if (this.options.sizeField && this.options.sizeField === field) {
return;
}
// 创建scale
var values = _.valuesOfKey(this.options.data, field);
var min = Math.min.apply(Math, values);
var max = Math.max.apply(Math, values);
var LinearScale = scale_1.getScale('linear');
var scale = new LinearScale({
min: min,
max: max,
});
var geom = this.view.get('elements')[0];
var shapes = geom.getShapes();
if (this.options.shapeType === 'rect') {
this.rectSizeMapping(shapes, scale, field);
}
else if (this.options.shapeType === 'circle') {
this.circleSizeMapping(shapes, scale, field);
}
};
MatrixLayer.prototype.disableMappingSize = function () {
var geom = this.view.get('elements')[0];
var shapes = geom.getShapes();
if (this.options.shapeType === 'rect') {
this.rectDisableSizeMapping(shapes);
}
else if (this.options.shapeType === 'circle') {
this.circleDisableSizeMapping(shapes);
}
};
MatrixLayer.prototype.geometryParser = function () {
return '';
};
MatrixLayer.prototype.coord = function () { };
MatrixLayer.prototype.legend = function () {
this.setConfig('legends', false);
};
MatrixLayer.prototype.addGeometry = function () {
this.gridSize = this.getGridSize();
if (this.options.shapeType === 'rect') {
var rect = this.addRect();
this.setConfig('element', rect);
}
else {
var circle = this.addCircle();
this.setConfig('element', circle);
}
};
MatrixLayer.prototype.addRect = function () {
// 如果用户设置了size，将size数值转换为[0,1]区间
var size = [0.3, 0.9];
if (this.options.shapeSize) {
size[0] = this.options.shapeSize[0] / this.gridSize[0];
size[1] = this.options.shapeSize[1] / this.gridSize[1];
}
var rect = {
type: 'polygon',
position: {
fields: [this.options.xField, this.options.yField],
},
color: {
fields: [this.options.colorField],
values: this.options.color,
},
shape: {
values: ['rect'],
},
label: this.extractLabel(),
};
if (this.options.sizeField) {
rect.size = {
fields: [this.options.sizeField],
values: size,
};
}
else {
rect.size = {
values: [1],
};
}
return rect;
};
MatrixLayer.prototype.addCircle = function () {
var size = [0.3, 0.9];
if (this.options.shapeSize) {
size = this.options.shapeSize;
}
else {
size[0] = this.gridSize[0] * size[0] * 0.5;
size[1] = this.gridSize[1] * size[1] * 0.5;
}
var circle = {
type: 'point',
position: {
fields: [this.options.xField, this.options.yField],
},
color: {
fields: [this.options.colorField],
values: this.options.color,
},
shape: {
values: ['curvePoint'],
},
label: this.extractLabel(),
};
if (this.options.sizeField) {
circle.size = {
fields: [this.options.sizeField],
values: size,
};
}
else {
circle.size = {
values: [Math.min(this.gridSize[0], this.gridSize[1]) * 0.5 * 0.9],
};
}
return circle;
};
MatrixLayer.prototype.extractLabel = function () {
var labelOptions = this.options.label;
// 不显示label的情况
if (!labelOptions.visible) {
return false;
}
if (!this.options.sizeField && !this.options.colorField) {
return false;
}
var label = factory_1.getComponent('label', tslib_1.__assign({ plot: this, top: true, labelType: 'matrixLabel', fields: this.options.colorField ? [this.options.colorField] : [this.options.sizeField] }, labelOptions));
return label;
};
MatrixLayer.prototype.getGridSize = function () {
if (this.options.padding === 'auto') {
return [0, 0];
}
else {
var viewRange = this.getViewRange();
var _a = this.options, padding = _a.padding, xField = _a.xField, yField = _a.yField, data = _a.data;
var width = viewRange.width - padding[1] - padding[3];
var height = viewRange.height - padding[0] - padding[2];
var xCount = _.valuesOfKey(data, xField).length;
var yCount = _.valuesOfKey(data, yField).length;
return [width / xCount, height / yCount];
}
};
MatrixLayer.prototype.circleToRect = function (shapes) {
var _this = this;
var gridSize = this.gridSize;
_.each(shapes, function (shape) {
var _a = shape.get('origin'), x = _a.x, y = _a.y, size = _a.size;
var sizeRatio = (size * 2) / Math.min(gridSize[0], gridSize[1]);
if (!_this.options.sizeField) {
sizeRatio = 1;
}
var curvePath = shape_1.getCircleCurve(x, y, size);
var rectPath = shape_1.getRectPath(x, y, gridSize[0], gridSize[1], sizeRatio);
shape.stopAnimate();
shape.attr('path', curvePath);
shape.animate({
path: rectPath,
}, 500, 'easeLinear');
});
};
MatrixLayer.prototype.rectToCircle = function (shapes) {
var _this = this;
_.each(shapes, function (shape) {
var coord = shape.get('coord');
var points = shape.get('origin').points;
var ps = [];
_.each(points, function (p) {
ps.push(coord.convertPoint(p));
});
var bbox = shape.getBBox();
var width = bbox.width;
var height = bbox.height;
var centerX = bbox.minX + width / 2;
var centerY = bbox.minY + height / 2;
var offsetRatio = _this.options.sizeField ? 1 : 0.9;
var curvePath = shape_1.getCircleCurve(centerX, centerY, (Math.min(width, height) / 2) * offsetRatio);
var circlePath = shape_1.getCirclePath(centerX, centerY, (Math.min(width, height) / 2) * offsetRatio);
shape.stopAnimate();
shape.animate({
path: curvePath,
}, 500, 'easeLinear', function () {
shape.attr('path', circlePath);
});
});
};
MatrixLayer.prototype.rectSizeMapping = function (shapes, scale, field) {
_.each(shapes, function (shape) {
var data = shape.get('origin')._origin;
var ratio = 0.3 + scale.scale(data[field]) * 0.6;
shape.get('origin').size = ratio;
var bbox = shape.getBBox();
var width = bbox.width;
var height = bbox.height;
var centerX = bbox.minX + width / 2;
var centerY = bbox.minY + height / 2;
var path = shape_1.getRectPath(centerX, centerY, width, height, ratio);
shape.stopAnimate();
shape.animate({
path: path,
}, 500, 'easeLinear');
});
};
MatrixLayer.prototype.circleSizeMapping = function (shapes, scale, field) {
_.each(shapes, function (shape) {
var data = shape.get('origin')._origin;
var ratio = 0.3 + scale.scale(data[field]) * 0.6;
var _a = shape.get('origin'), x = _a.x, y = _a.y, size = _a.size;
var path = shape_1.getCirclePath(x, y, size * ratio);
shape.get('origin').size = size * ratio;
shape.stopAnimate();
shape.animate({
path: path,
}, 500, 'easeLinear');
});
};
MatrixLayer.prototype.circleDisableSizeMapping = function (shapes) {
var _this = this;
_.each(shapes, function (shape) {
var _a = shape.get('origin'), x = _a.x, y = _a.y;
var size = Math.min(_this.gridSize[0], _this.gridSize[1]) * 0.9;
shape.get('origin').size = size / 2;
var path = shape_1.getCirclePath(x, y, size / 2);
shape.stopAnimate();
shape.animate({
path: path,
}, 500, 'easeLinear');
});
};
MatrixLayer.prototype.rectDisableSizeMapping = function (shapes) {
var _this = this;
_.each(shapes, function (shape) {
var bbox = shape.getBBox();
var width = bbox.width;
var height = bbox.height;
var centerX = bbox.minX + width / 2;
var centerY = bbox.minY + height / 2;
var path = shape_1.getRectPath(centerX, centerY, _this.gridSize[0], _this.gridSize[1], 1);
shape.get('origin').size = 1;
shape.stopAnimate();
shape.animate({
path: path,
}, 500, 'easeLinear');
});
};
return MatrixLayer;
}(view_layer_1.default));
exports.default = MatrixLayer;
global_1.registerPlotType('matrix', MatrixLayer);
//# sourceMappingURL=layer.js.map