@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
258 lines (257 loc) • 13 kB
JavaScript
;
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var mobx_1 = require("mobx");
var lodash_1 = require("lodash");
var pandora_component_1 = require("@qn-pandora/pandora-component");
var base_1 = __importDefault(require("../stores/base"));
var utils_1 = require("./utils");
var bind_1 = __importDefault(require("../../../utils/bind"));
var theme_interface_1 = require("../../../constants/theme-interface");
var chart_drill_down_1 = require("../../../services/chart-drill-down");
var chart_common_action_1 = require("../../../services/chart-common-action");
var TopologyChartStore = /** @class */ (function (_super) {
__extends(TopologyChartStore, _super);
function TopologyChartStore(getProps) {
var _this = _super.call(this, getProps) || this;
_this.getProps = getProps;
return _this;
}
Object.defineProperty(TopologyChartStore.prototype, "chartDataset", {
get: function () {
return this.dataset;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TopologyChartStore.prototype, "theme", {
get: function () {
return this.chartContainerService.themeService.theme;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TopologyChartStore.prototype, "fieldMap", {
get: function () {
var fields = this.chartDataset.fields;
var fieldMap = {};
fields.forEach(function (field, index) {
fieldMap[field.key] = index;
});
return fieldMap;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TopologyChartStore.prototype, "data", {
get: function () {
var _this = this;
var _a = this.chartDataset, fields = _a.fields, rows = _a.rows;
var _b = this.chartStyleService, from = _b.from, to = _b.to, nodeCount = _b.nodeCount, _c = _b.showLabel, showLabel = _c === void 0 ? false : _c, nodeRules = _b.nodeRules, edgeRules = _b.edgeRules, levels = _b.levels;
var data = {
edges: [],
nodes: []
};
var fieldMap = this.fieldMap;
var fromFieldIndex = from.idField ? lodash_1.get(fieldMap, from.idField, -1) : -1;
var toFieldIndex = to.idField ? lodash_1.get(fieldMap, to.idField, -1) : -1;
var fromTitleIndex = from.titleField
? lodash_1.get(fieldMap, from.titleField, -1)
: -1;
var toTitleIndex = to.titleField ? lodash_1.get(fieldMap, to.titleField, -1) : -1;
var fromShapeFieldIndex = from.shapeField
? lodash_1.get(fieldMap, from.shapeField, -1)
: -1;
var toShapeFieldIndex = to.shapeField
? lodash_1.get(fieldMap, to.shapeField, -1)
: -1;
var fromIconFieldIndex = from.iconField
? lodash_1.get(fieldMap, from.iconField, -1)
: -1;
var toIconFieldIndex = to.iconField ? lodash_1.get(fieldMap, to.iconField, -1) : -1;
rows.forEach(function (row) {
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
var fromId = lodash_1.toString((_a = row[fromFieldIndex]) === null || _a === void 0 ? void 0 : _a[0]);
var toId = lodash_1.toString((_b = row[toFieldIndex]) === null || _b === void 0 ? void 0 : _b[0]);
var fromShape = _this.isCurrentShape((_c = row[fromShapeFieldIndex]) === null || _c === void 0 ? void 0 : _c[0])
? (_d = row[fromShapeFieldIndex]) === null || _d === void 0 ? void 0 : _d[0]
: pandora_component_1.ENodeShape.Circle;
var toShape = _this.isCurrentShape((_e = row[toShapeFieldIndex]) === null || _e === void 0 ? void 0 : _e[0])
? (_f = row[fromShapeFieldIndex]) === null || _f === void 0 ? void 0 : _f[0]
: pandora_component_1.ENodeShape.Circle;
var fromIconType = utils_1.getServiceTypeIcon((_g = row[fromIconFieldIndex]) === null || _g === void 0 ? void 0 : _g[0]);
var toIconType = utils_1.getServiceTypeIcon((_h = row[toIconFieldIndex]) === null || _h === void 0 ? void 0 : _h[0]);
var maxNodeLevelColor = utils_1.getColorByRules(nodeRules, fields, row, levels)
.maxLevelColor; // 节点颜色
var maxEdgeLevelColor = utils_1.getColorByRules(edgeRules, fields, row, levels)
.maxLevelColor; // 线条颜色
if (fromId) {
data.nodes.push(utils_1.transformNodeToChatNode({
row: row,
id: fromId,
showLabel: showLabel,
shape: fromShape,
icon: fromIconType,
label: lodash_1.toString((_j = row[fromTitleIndex]) === null || _j === void 0 ? void 0 : _j[0]) || fromId,
name: fromId,
dataType: 'from'
}, maxNodeLevelColor));
}
if (toId) {
data.nodes.push(utils_1.transformNodeToChatNode({
row: row,
id: toId,
shape: toShape,
showLabel: showLabel,
icon: toIconType,
label: lodash_1.toString((_k = row[toTitleIndex]) === null || _k === void 0 ? void 0 : _k[0]) || toId,
name: fromId,
dataType: 'to'
}, maxNodeLevelColor));
}
if (toId && fromId) {
data.edges.push(utils_1.transformEdgeToGraphEdge({
source: fromId,
target: toId,
row: row
}, maxEdgeLevelColor));
}
});
var nodes = lodash_1.uniqBy(data.nodes, 'id').slice(0, nodeCount);
var nodeIds = nodes.map(function (node) { return node.id; });
return {
nodes: nodes,
edges: data.edges.filter(function (edge) { return nodeIds.includes(edge.source) && nodeIds.includes(edge.target); })
};
},
enumerable: false,
configurable: true
});
TopologyChartStore.prototype.isCurrentShape = function (shape) {
return Object.values(pandora_component_1.ENodeShape).includes(shape);
};
TopologyChartStore.prototype.getNodeToolTip = function (row, dataType) {
var _a;
var fields = this.chartDataset.fields;
var _b = this.chartStyleService, from = _b.from, to = _b.to, nodeRules = _b.nodeRules, levels = _b.levels;
var typeField = dataType === 'from' ? from.typeField : to.typeField;
var typeFieldIndex = fields.findIndex(function (field) { return field.key === typeField; });
var type = lodash_1.toString((_a = row[typeFieldIndex]) === null || _a === void 0 ? void 0 : _a[0]);
var maxNodeLevelInfo = utils_1.getColorByRules(nodeRules, fields, row, levels); // 节点颜色
var tooltips = utils_1.getTooltipByRules(nodeRules, fields, row, maxNodeLevelInfo, true, type);
return "<table class=\"topo-tooltip-table\">\n <tbody>\n" + tooltips.map(function (tooltip) {
return "<tr>" + tooltip
.map(function (item) {
return "<td> <div>" + item.key + "</div>\n <div style=\"font-size:14px;color:" + item.color + "\">" + item.value + "</div>\n </td>";
})
.join(' ') + "\n </tr>";
}) + "\n </tbody>\n </table>";
};
TopologyChartStore.prototype.getEdgeToolTip = function (row) {
var fields = this.chartDataset.fields;
var _a = this.chartStyleService, edgeRules = _a.edgeRules, levels = _a.levels;
var maxEdgeLevelInfo = utils_1.getColorByRules(edgeRules, fields, row, levels); // 节点颜色
var tooltips = utils_1.getTooltipByRules(edgeRules, fields, row, maxEdgeLevelInfo, false);
return "<table class=\"topo-tooltip-table\">\n <tbody>\n" + tooltips.map(function (tooltip) {
return "<tr>" + tooltip
.map(function (item) {
return "<td> <div>" + item.key + "</div>\n <div style=\"font-size:14px;color:" + item.color + "\">" + item.value + "</div>\n </td>";
})
.join(' ') + "\n </tr>";
}) + "\n </tbody>\n </table>";
};
TopologyChartStore.prototype.getTooltipContent = function (e) {
// 节点
if (e.type === 'custom-node') {
return this.getNodeToolTip(e.row, e.dataType);
}
return this.getEdgeToolTip(e.row);
};
TopologyChartStore.prototype.handleDrillDown = function (node) {
var _a = this.chartStyleService, from = _a.from, to = _a.to;
this.onAction({
fromField: from.idField || '',
fromFieldValue: '',
toField: to.idField || '',
toFieldValue: '',
fields: this.fields,
row: node
}, chart_drill_down_1.TopologyDrillDownService, chart_common_action_1.TopologyActionService);
};
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], TopologyChartStore.prototype, "chartDataset", null);
__decorate([
mobx_1.computed,
__metadata("design:type", String),
__metadata("design:paramtypes", [])
], TopologyChartStore.prototype, "theme", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], TopologyChartStore.prototype, "fieldMap", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], TopologyChartStore.prototype, "data", null);
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], TopologyChartStore.prototype, "isCurrentShape", null);
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Array, String]),
__metadata("design:returntype", void 0)
], TopologyChartStore.prototype, "getNodeToolTip", null);
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Array]),
__metadata("design:returntype", void 0)
], TopologyChartStore.prototype, "getEdgeToolTip", null);
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], TopologyChartStore.prototype, "getTooltipContent", null);
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], TopologyChartStore.prototype, "handleDrillDown", null);
return TopologyChartStore;
}(base_1.default));
exports.default = TopologyChartStore;