@antv/g2plot
Version:
G2 Plot, a market of plots built with the Grammar of Graphics'
229 lines • 8.74 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 squarify_1 = tslib_1.__importDefault(require("./layout/squarify"));
var interaction_1 = require("./interaction");
var EventParser = tslib_1.__importStar(require("./event"));
require("./components/label");
var PARENT_NODE_OFFSET = 4;
var BLOCK_MARGIN = 4;
var TreemapLayer = /** @class */ (function (_super) {
tslib_1.__extends(TreemapLayer, _super);
function TreemapLayer() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.type = 'line';
return _this;
}
TreemapLayer.getDefaultOptions = function () {
return _.deepMix({}, _super.getDefaultOptions.call(this), {
maxLevel: 2,
padding: [0, 0, 0, 0],
tooltip: {
visible: false,
},
legend: {
visible: false,
},
xAxis: {
visible: false,
},
yAxis: {
visible: false,
},
xField: 'x',
yField: 'y',
label: {
visible: true,
adjustPosition: true,
style: {
stroke: 'rgba(0,0,0,0)',
lineWidth: 0,
fontSize: 12,
},
},
meta: {
x: {
nice: false,
},
y: {
nice: false,
},
},
});
};
TreemapLayer.prototype.beforeInit = function () {
var _this = this;
var interactions = this.options.interactions;
if (interactions) {
_.each(interactions, function (interaction) {
if (interaction.type === 'drilldown') {
_this.isDrilldown = true;
_this.options.maxLevel = 1;
}
});
}
};
TreemapLayer.prototype.geometryParser = function (dim, type) {
return 'polygon';
};
TreemapLayer.prototype.getTreemapData = function (data, level) {
var viewRange = this.getViewRange();
var root = squarify_1.default(data, viewRange.x, viewRange.y, viewRange.width, viewRange.height);
this.recursive(root, 1);
var treemapData = [];
this.getAllNodes(root, treemapData, level);
treemapData.sort(function (a, b) {
return a.depth - b.depth;
});
this.options.xField = 'x';
this.options.yField = 'y';
return treemapData;
};
TreemapLayer.prototype.processData = function () {
return this.rootData;
};
TreemapLayer.prototype.beforInit = function () {
_super.prototype.beforeInit.call(this);
var data = this.options.data;
var treemapData = this.getTreemapData(data);
this.rootData = treemapData;
};
TreemapLayer.prototype.coord = function () { };
TreemapLayer.prototype.addGeometry = function () {
var _this = this;
var _a = this.options, data = _a.data, colorField = _a.colorField, color = _a.color;
var treemapData = this.getTreemapData(data);
this.rootData = treemapData;
var maxLevel = this.options.maxLevel;
this.rect = {
type: 'polygon',
position: {
fields: ['x', 'y'],
},
color: {
fields: [colorField],
values: color,
},
style: {
fields: ['depth'],
callback: function (d) {
var defaultStyle = {
lineWidth: 1,
stroke: 'rgba(0,0,0,0.3)',
opacity: d / maxLevel,
};
if (d === 1) {
defaultStyle = {
lineWidth: 1,
stroke: 'black',
opacity: d / maxLevel,
};
}
return _.deepMix({}, defaultStyle, _this.options.rectStyle);
},
},
label: this.extractLabel(),
};
this.setConfig('element', this.rect);
};
TreemapLayer.prototype.applyInteractions = function () {
var _this = this;
var interactionCfg = this.options.interactions;
var interactions = this.view.get('interactions');
_.each(interactionCfg, function (inter) {
var Ctr = interaction_1.INTERACTION_MAP[inter.type];
if (Ctr) {
var interaction = new Ctr(_.deepMix({}, {
view: _this.view,
plot: _this,
startEvent: 'polygon:click',
}, inter.cfg));
interactions[inter.type] = interaction;
}
});
};
TreemapLayer.prototype.animation = function () {
_super.prototype.animation.call(this);
if (this.isDrilldown) {
this.rect.animate = false;
}
};
TreemapLayer.prototype.parseEvents = function (eventParser) {
_super.prototype.parseEvents.call(this, EventParser);
};
TreemapLayer.prototype.extractLabel = function () {
var labelOptions = this.options.label;
// 不显示label的情况
if (!labelOptions.visible) {
return false;
}
var label = factory_1.getComponent('label', tslib_1.__assign({ labelType: 'treemapLabel', plot: this, top: true, fields: ['name'], maxLevel: this.options.maxLevel }, labelOptions));
return label;
};
TreemapLayer.prototype.recursive = function (rows, depth) {
var _this = this;
var colorField = this.options.colorField;
_.each(rows, function (r) {
_.each(r.children, function (c) {
c.depth = depth;
if (depth > 1)
c.parent = r;
if (!_.hasKey(c, colorField)) {
c[colorField] = r[colorField];
}
c.showLabel = true;
var leaf = _this.isLeaf(c);
if (!leaf) {
var cliperHeight = Math.abs(c.y1 - c.y0);
var labelHeight = _this.getLabelHeight();
var parentLabelOffset = cliperHeight / 2 > labelHeight ? labelHeight : BLOCK_MARGIN;
c.showLabel = parentLabelOffset === BLOCK_MARGIN ? false : true;
var c_rows = squarify_1.default(c, c.x0 + BLOCK_MARGIN, c.y0 + parentLabelOffset, c.x1 - BLOCK_MARGIN, c.y1 - BLOCK_MARGIN);
_this.fillColorField(c_rows, colorField, c[colorField]);
_this.recursive(c_rows, c.depth + 1);
}
});
});
};
TreemapLayer.prototype.getAllNodes = function (data, nodes, level) {
var _this = this;
var max = level ? level : this.options.maxLevel;
var viewRange = this.getViewRange();
_.each(data, function (d) {
if (_.hasKey(d, 'x0') && d.depth <= max) {
nodes.push(tslib_1.__assign(tslib_1.__assign({}, d), { x: [d.x0, d.x1, d.x1, d.x0], y: [viewRange.height - d.y1, viewRange.height - d.y1, viewRange.height - d.y0, viewRange.height - d.y0] }));
}
if (_.hasKey(d, 'children')) {
_this.getAllNodes(d.children, nodes);
}
});
};
TreemapLayer.prototype.fillColorField = function (rows, fieldName, value) {
_.each(rows, function (r) {
if (!_.hasKey(r, fieldName)) {
r[fieldName] = value;
}
});
};
TreemapLayer.prototype.getLabelHeight = function () {
var label = this.options.label;
var fontSize = this.getTheme().label.textStyle.fontSize;
var size = 0;
if (label && label.visible) {
var labelStyle = label.style;
size = labelStyle && labelStyle.fontSize ? labelStyle.fontSize : fontSize;
}
return size + PARENT_NODE_OFFSET * 2;
};
TreemapLayer.prototype.isLeaf = function (data) {
return !data.children || data.children.length === 0;
};
return TreemapLayer;
}(view_layer_1.default));
exports.default = TreemapLayer;
global_1.registerPlotType('treemap', TreemapLayer);
//# sourceMappingURL=layer.js.map