290 lines
9.7 KiB
Java
290 lines
9.7 KiB
Java
|
import { __assign, __extends } from "tslib";
|
|||
|
|
/**
|
|||
|
|
* Create By Bruce Too
|
|||
|
|
* On 2020-02-10
|
|||
|
|
*/
|
|||
|
|
import { assign, deepMix, each } from '@antv/util';
|
|||
|
|
import { DIRECTION, VIEW_LIFE_CIRCLE } from '../constant';
|
|||
|
|
import { getFactTitleConfig } from '../util/facet';
|
|||
|
|
import { Facet } from './facet';
|
|||
|
|
/**
|
|||
|
|
* @ignore
|
|||
|
|
* Tree Facet
|
|||
|
|
*/
|
|||
|
|
var Tree = /** @class */ (function (_super) {
|
|||
|
|
__extends(Tree, _super);
|
|||
|
|
function Tree() {
|
|||
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|||
|
|
_this.afterChartRender = function () {
|
|||
|
|
if (_this.facets && _this.cfg.line) {
|
|||
|
|
_this.container.clear();
|
|||
|
|
_this.drawLines(_this.facets);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
return _this;
|
|||
|
|
}
|
|||
|
|
Tree.prototype.afterEachView = function (view, facet) {
|
|||
|
|
this.processAxis(view, facet);
|
|||
|
|
};
|
|||
|
|
Tree.prototype.beforeEachView = function (view, facet) {
|
|||
|
|
};
|
|||
|
|
Tree.prototype.init = function () {
|
|||
|
|
_super.prototype.init.call(this);
|
|||
|
|
this.view.on(VIEW_LIFE_CIRCLE.AFTER_RENDER, this.afterChartRender);
|
|||
|
|
};
|
|||
|
|
Tree.prototype.getDefaultCfg = function () {
|
|||
|
|
return deepMix({}, _super.prototype.getDefaultCfg.call(this), {
|
|||
|
|
type: 'tree',
|
|||
|
|
line: {
|
|||
|
|
style: {
|
|||
|
|
lineWidth: 1,
|
|||
|
|
stroke: '#ddd'
|
|||
|
|
},
|
|||
|
|
smooth: false,
|
|||
|
|
},
|
|||
|
|
showTitle: true,
|
|||
|
|
title: _super.prototype.getDefaultTitleCfg.call(this),
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
Tree.prototype.generateFacets = function (data) {
|
|||
|
|
var fields = this.cfg.fields;
|
|||
|
|
if (!fields.length) {
|
|||
|
|
throw new Error('Please specify for the fields for rootFacet!');
|
|||
|
|
}
|
|||
|
|
var rst = [];
|
|||
|
|
var rootFacet = {
|
|||
|
|
type: this.cfg.type,
|
|||
|
|
data: data,
|
|||
|
|
region: null,
|
|||
|
|
rowValuesLength: this.getRows(),
|
|||
|
|
columnValuesLength: 1,
|
|||
|
|
rowIndex: 0,
|
|||
|
|
columnIndex: 0,
|
|||
|
|
rowField: '',
|
|||
|
|
columnField: '',
|
|||
|
|
rowValue: '',
|
|||
|
|
columnValue: '',
|
|||
|
|
};
|
|||
|
|
rst.push(rootFacet);
|
|||
|
|
rootFacet.children = this.getChildFacets(data, 1, rst);
|
|||
|
|
this.setRegion(rst);
|
|||
|
|
return rst;
|
|||
|
|
};
|
|||
|
|
Tree.prototype.setRegion = function (facets) {
|
|||
|
|
var _this = this;
|
|||
|
|
this.forceColIndex(facets);
|
|||
|
|
facets.forEach(function (facet) {
|
|||
|
|
// @ts-ignore 允许调整
|
|||
|
|
facet.region = _this.getRegion(facet.rowValuesLength, facet.columnValuesLength, facet.columnIndex, facet.rowIndex);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
Tree.prototype.getRegion = function (rows, cols, xIndex, yIndex) {
|
|||
|
|
var xWidth = 1 / cols; // x轴方向的每个分面的偏移
|
|||
|
|
var yWidth = 1 / rows; // y轴方向的每个分面的偏移
|
|||
|
|
var start = {
|
|||
|
|
x: xWidth * xIndex,
|
|||
|
|
y: yWidth * yIndex
|
|||
|
|
};
|
|||
|
|
var end = {
|
|||
|
|
x: start.x + xWidth,
|
|||
|
|
y: start.y + yWidth * 2 / 3 // 预留1/3的空隙，方便添加连接线
|
|||
|
|
};
|
|||
|
|
return {
|
|||
|
|
start: start,
|
|||
|
|
end: end
|
|||
|
|
};
|
|||
|
|
};
|
|||
|
|
Tree.prototype.forceColIndex = function (facets) {
|
|||
|
|
var _this = this;
|
|||
|
|
var leafs = [];
|
|||
|
|
var index = 0;
|
|||
|
|
facets.forEach(function (facet) {
|
|||
|
|
if (_this.isLeaf(facet)) {
|
|||
|
|
leafs.push(facet);
|
|||
|
|
// @ts-ignore 允许调整
|
|||
|
|
facet.columnIndex = index;
|
|||
|
|
index++;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
leafs.forEach(function (facet) {
|
|||
|
|
// @ts-ignore
|
|||
|
|
facet.columnValuesLength = leafs.length;
|
|||
|
|
});
|
|||
|
|
var maxLevel = this.cfg.fields.length;
|
|||
|
|
for (var i = maxLevel - 1; i >= 0; i--) {
|
|||
|
|
var levelFacets = this.getFacetsByLevel(facets, i);
|
|||
|
|
// var yIndex = maxLevel - i;
|
|||
|
|
for (var _i = 0, levelFacets_1 = levelFacets; _i < levelFacets_1.length; _i++) {
|
|||
|
|
var facet = levelFacets_1[_i];
|
|||
|
|
if (!this.isLeaf(facet)) {
|
|||
|
|
facet.originColIndex = facet.columnIndex;
|
|||
|
|
// @ts-ignore
|
|||
|
|
facet.columnIndex = this.getRegionIndex(facet.children);
|
|||
|
|
// @ts-ignore
|
|||
|
|
facet.columnValuesLength = leafs.length;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
// get facet use level
|
|||
|
|
Tree.prototype.getFacetsByLevel = function (facets, level) {
|
|||
|
|
var rst = [];
|
|||
|
|
facets.forEach(function (facet) {
|
|||
|
|
if (facet.rowIndex === level) {
|
|||
|
|
rst.push(facet);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return rst;
|
|||
|
|
};
|
|||
|
|
// if the facet has children , make it's column index in the middle of it's children
|
|||
|
|
Tree.prototype.getRegionIndex = function (children) {
|
|||
|
|
var first = children[0];
|
|||
|
|
var last = children[children.length - 1];
|
|||
|
|
return (last.columnIndex - first.columnIndex) / 2 + first.columnIndex;
|
|||
|
|
};
|
|||
|
|
// is a leaf without children
|
|||
|
|
Tree.prototype.isLeaf = function (facet) {
|
|||
|
|
return !facet.children || !facet.children.length;
|
|||
|
|
};
|
|||
|
|
Tree.prototype.getRows = function () {
|
|||
|
|
return this.cfg.fields.length + 1;
|
|||
|
|
};
|
|||
|
|
// get child
|
|||
|
|
Tree.prototype.getChildFacets = function (data, level, arr) {
|
|||
|
|
var _this = this;
|
|||
|
|
// [ 'grade', 'class' ]
|
|||
|
|
var fields = this.cfg.fields;
|
|||
|
|
var length = fields.length;
|
|||
|
|
if (length < level) {
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
var rst = [];
|
|||
|
|
// get fist level except root node
|
|||
|
|
var field = fields[level - 1];
|
|||
|
|
// get field value
|
|||
|
|
var values = this.getFieldValues(data, field);
|
|||
|
|
values.forEach(function (value, index) {
|
|||
|
|
var conditions = [
|
|||
|
|
{ field: field, value: value, values: values }
|
|||
|
|
];
|
|||
|
|
var subData = data.filter(_this.getFacetDataFilter(conditions));
|
|||
|
|
if (subData.length) {
|
|||
|
|
var facet = {
|
|||
|
|
type: _this.cfg.type,
|
|||
|
|
data: subData,
|
|||
|
|
region: null,
|
|||
|
|
columnValue: value,
|
|||
|
|
rowValue: '',
|
|||
|
|
columnField: field,
|
|||
|
|
rowField: '',
|
|||
|
|
columnIndex: index,
|
|||
|
|
rowValuesLength: _this.getRows(),
|
|||
|
|
columnValuesLength: 1,
|
|||
|
|
rowIndex: level,
|
|||
|
|
children: _this.getChildFacets(subData, level + 1, arr)
|
|||
|
|
};
|
|||
|
|
rst.push(facet);
|
|||
|
|
arr.push(facet);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return rst;
|
|||
|
|
};
|
|||
|
|
Tree.prototype.render = function () {
|
|||
|
|
_super.prototype.render.call(this);
|
|||
|
|
if (this.cfg.showTitle) {
|
|||
|
|
this.renderTitle();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
Tree.prototype.renderTitle = function () {
|
|||
|
|
var _this = this;
|
|||
|
|
each(this.facets, function (facet) {
|
|||
|
|
var columnValue = facet.columnValue, view = facet.view;
|
|||
|
|
var config = deepMix({
|
|||
|
|
position: ['50%', '0%'],
|
|||
|
|
content: columnValue,
|
|||
|
|
}, getFactTitleConfig(DIRECTION.TOP), _this.cfg.title);
|
|||
|
|
view.annotation().text(config);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
Tree.prototype.drawLines = function (facets) {
|
|||
|
|
var _this = this;
|
|||
|
|
facets.forEach(function (facet) {
|
|||
|
|
if (!_this.isLeaf(facet)) {
|
|||
|
|
var children = facet.children;
|
|||
|
|
_this.addFacetLines(facet, children);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
// add lines with it's children
|
|||
|
|
Tree.prototype.addFacetLines = function (facet, children) {
|
|||
|
|
var _this = this;
|
|||
|
|
var view = facet.view;
|
|||
|
|
var region = view.coordinateBBox;
|
|||
|
|
// top, right, bottom, left
|
|||
|
|
var start = {
|
|||
|
|
x: region.x + region.width / 2,
|
|||
|
|
y: region.y + region.height
|
|||
|
|
};
|
|||
|
|
children.forEach(function (subFacet) {
|
|||
|
|
var subRegion = subFacet.view.coordinateBBox;
|
|||
|
|
var end = {
|
|||
|
|
x: subRegion.bl.x + (subRegion.tr.x - subRegion.bl.x) / 2,
|
|||
|
|
y: subRegion.tr.y
|
|||
|
|
};
|
|||
|
|
var middle1 = {
|
|||
|
|
x: start.x,
|
|||
|
|
y: start.y + (end.y - start.y) / 2
|
|||
|
|
};
|
|||
|
|
var middle2 = {
|
|||
|
|
x: end.x,
|
|||
|
|
y: middle1.y
|
|||
|
|
};
|
|||
|
|
_this.drawLine([start, middle1, middle2, end]);
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
Tree.prototype.getPath = function (points) {
|
|||
|
|
var path = [];
|
|||
|
|
var smooth = this.cfg.line.smooth;
|
|||
|
|
if (smooth) {
|
|||
|
|
path.push(['M', points[0].x, points[0].y]);
|
|||
|
|
path.push(['C', points[1].x, points[1].y, points[2].x, points[2].y, points[3].x, points[3].y]);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
points.forEach(function (point, index) {
|
|||
|
|
if (index === 0) {
|
|||
|
|
path.push(['M', point.x, point.y]);
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
path.push(['L', point.x, point.y]);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
return path;
|
|||
|
|
};
|
|||
|
|
// draw line width points
|
|||
|
|
Tree.prototype.drawLine = function (points) {
|
|||
|
|
var path = this.getPath(points);
|
|||
|
|
var line = this.cfg.line.style;
|
|||
|
|
this.container.addShape('path', {
|
|||
|
|
attrs: assign({
|
|||
|
|
// @ts-ignore
|
|||
|
|
path: path
|
|||
|
|
}, line),
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
Tree.prototype.getXAxisOption = function (x, axes, option, facet) {
|
|||
|
|
if (facet.rowIndex !== facet.rowValuesLength - 1) {
|
|||
|
|
return __assign(__assign({}, option), { title: null, label: null });
|
|||
|
|
}
|
|||
|
|
return option;
|
|||
|
|
};
|
|||
|
|
Tree.prototype.getYAxisOption = function (y, axes, option, facet) {
|
|||
|
|
if (facet.originColIndex !== 0 && facet.columnIndex !== 0) {
|
|||
|
|
return __assign(__assign({}, option), { title: null, label: null });
|
|||
|
|
}
|
|||
|
|
return option;
|
|||
|
|
};
|
|||
|
|
return Tree;
|
|||
|
|
}(Facet));
|
|||
|
|
export default Tree;
|
|||
|
|
//# sourceMappingURL=tree.js.map
|