@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
331 lines (330 loc) • 15.8 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 __read = (this && this.__read) || function (o, n) {
var m = typeof Symbol === "function" && o[Symbol.iterator];
if (!m) return o;
var i = m.call(o), r, ar = [], e;
try {
while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
}
catch (error) { e = { error: error }; }
finally {
try {
if (r && !r.done && (m = i["return"])) m.call(i);
}
finally { if (e) throw e.error; }
}
return ar;
};
var __spread = (this && this.__spread) || function () {
for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
return ar;
};
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 app_sdk_1 = require("@qn-pandora/app-sdk");
var one_d_1 = __importDefault(require("../stores/one-d"));
var normalizeTimeFormat_1 = require("../../../utils/normalizeTimeFormat");
var bind_1 = __importDefault(require("../../../utils/bind"));
var chart_drill_down_1 = require("../../../services/chart-drill-down");
var chart_common_action_1 = require("../../../services/chart-common-action");
var metric_panel_style_1 = require("../../../constants/metric-panel-style");
var getUnitTransformer = app_sdk_1.utils.unit.getUnitTransformer;
var StatusPanelChartStore = /** @class */ (function (_super) {
__extends(StatusPanelChartStore, _super);
function StatusPanelChartStore() {
return _super !== null && _super.apply(this, arguments) || this;
}
StatusPanelChartStore.prototype.transfromValue = function (value, index) {
var metricDataConfigs = this.chartStyleService.metricDataConfigs;
var dataConfig = metricDataConfigs[index];
var unitTransformer = getUnitTransformer(dataConfig.unit[1]);
return unitTransformer(value || 0, dataConfig.precision);
};
Object.defineProperty(StatusPanelChartStore.prototype, "titleStyle", {
get: function () {
var titleFontSize = this.chartStyleService.titleFontSize;
var statusPanelOpt = lodash_1.get(this.themeOption, 'statusPanel');
var fontSize = titleFontSize || metric_panel_style_1.defaultProperty.titleFontSize;
var titleHeight = titleFontSize
? titleFontSize * 1.6 + 'px'
: lodash_1.get(statusPanelOpt, ['title', 'lineHeight']) + 'px';
return {
fontSize: fontSize,
lineHeight: titleHeight,
height: titleHeight
};
},
enumerable: false,
configurable: true
});
Object.defineProperty(StatusPanelChartStore.prototype, "chunkSize", {
get: function () {
var pageSize = this.chartStyleService.pageSize;
return pageSize * 1 > 0 ? pageSize : Infinity;
},
enumerable: false,
configurable: true
});
Object.defineProperty(StatusPanelChartStore.prototype, "autoplay", {
get: function () {
var pageSize = this.chartStyleService.pageSize;
return pageSize > 0 && this.series.length > pageSize && !!this.carouselSpeed;
},
enumerable: false,
configurable: true
});
Object.defineProperty(StatusPanelChartStore.prototype, "carouselSpeed", {
get: function () {
var autoplaySpeed = this.chartStyleService.autoplaySpeed;
return autoplaySpeed * 1 > 0 ? autoplaySpeed * 1000 : undefined;
},
enumerable: false,
configurable: true
});
Object.defineProperty(StatusPanelChartStore.prototype, "data", {
get: function () {
var currentBuckets = this.chartStyleService.currentBuckets;
var _a = this.dataset, fields = _a.fields, rows = _a.rows;
var bucketIndexs = currentBuckets
.map(function (b) { return lodash_1.findIndex(fields, function (f) { return f.key === b; }); })
.filter(function (num) { return num !== -1; });
return bucketIndexs.length === 0 && rows.length > 0 ? [rows[0]] : rows;
},
enumerable: false,
configurable: true
});
Object.defineProperty(StatusPanelChartStore.prototype, "series", {
get: function () {
var _this = this;
var _a = this.chartStyleService, currentBuckets = _a.currentBuckets, currentMetrics = _a.currentMetrics, levels = _a.levels, rules = _a.rules, panelAutoSort = _a.panelAutoSort;
var fields = this.dataset.fields;
var bucketIndexs = currentBuckets
.map(function (b) { return lodash_1.findIndex(fields, function (f) { return f.key === b; }); })
.filter(function (num) { return num !== -1; });
var metricIndexs = currentMetrics
.map(function (m) { return lodash_1.findIndex(fields, function (f) { return f.key === m; }); })
.filter(function (num) { return num !== -1; });
var panels = this.data.map(function (item, index) {
var indexes = __spread(metricIndexs, bucketIndexs);
var contents = indexes.map(function (metricIndex, index) {
var label = fields[metricIndex].key;
var levelIndex = -1;
var sourceValue = item[metricIndex][0];
var value = item[metricIndex][0];
if (fields[metricIndex].fieldType === 'Time') {
// 将时间转换为显示用的格式
value = normalizeTimeFormat_1.normalizeTimeFormat(value);
}
// 如果是数值类型并且有单位
if (lodash_1.isNumber(value)) {
value = _this.transfromValue(value, index);
}
var rule = rules.find(function (e) { return e.fieldKey === label; });
if (rule) {
// 比较原始数值
var levelKey_1 = '';
if (rule.type === 'number') {
var threshold = rule.thresholds.find(function (item) { return lodash_1.isNumber(sourceValue) && item.value >= sourceValue; });
levelKey_1 = lodash_1.get(threshold, 'level', '');
}
else {
var threshold = rule.thresholds.find(function (threshold) {
return threshold.value.toString() === (sourceValue === null || sourceValue === void 0 ? void 0 : sourceValue.toString());
});
levelKey_1 = lodash_1.get(threshold, 'level', '');
}
levelIndex = levels.findIndex(function (level) { return level.key === levelKey_1; });
}
return {
label: label,
value: value,
levelIndex: levelIndex,
contentStyle: _this.getContentStyle(levelIndex) || {}
};
});
var resLevelIndex = contents.reduce(function (resLevel, content) {
var contentLevel = content.levelIndex;
if (resLevel === -1) {
return contentLevel;
}
if (contentLevel === -1) {
return resLevel;
}
return Math.min(resLevel, contentLevel);
}, -1);
return {
key: String(index),
titles: bucketIndexs.map(function (index) {
var value = item[index][0];
if (fields[index].fieldType === 'Time') {
// 将时间转换为显示用的格式
value = normalizeTimeFormat_1.normalizeTimeFormat(value);
}
return String(value);
}),
contents: contents.splice(0, metricIndexs.length),
levelIndex: resLevelIndex,
originRow: item,
panelStyle: _this.getPanelStyle(resLevelIndex)
};
});
if (panelAutoSort) {
// 面板严重程度排序
panels.sort(function (a, b) {
if (a.levelIndex === -1) {
return 1;
}
if (b.levelIndex === -1) {
return -1;
}
return a.levelIndex - b.levelIndex;
});
}
return panels;
},
enumerable: false,
configurable: true
});
Object.defineProperty(StatusPanelChartStore.prototype, "showLabel", {
get: function () {
var showMetricName = this.chartStyleService.showMetricName;
return lodash_1.isUndefined(showMetricName) ? true : showMetricName;
},
enumerable: false,
configurable: true
});
StatusPanelChartStore.prototype.getPanelStyle = function (levelIndex) {
var _a = this.chartStyleService, width = _a.width, height = _a.height, colorMode = _a.colorMode, levels = _a.levels;
var isInvertedMode = colorMode === metric_panel_style_1.EColorMode.INVERTED;
var statusPanelOpt = lodash_1.get(this.themeOption, 'statusPanel');
var defaultInverseBgColor = lodash_1.get(statusPanelOpt, ['inverseBgColor']);
var defaultInverseColor = lodash_1.get(statusPanelOpt, ['inverseColor']);
var panelColor = lodash_1.get(levels, [levelIndex, 'color']) || defaultInverseBgColor;
var borderStyle = lodash_1.get(statusPanelOpt, ['borderStyle']);
return {
background: isInvertedMode ? panelColor : 'transparent',
color: isInvertedMode ? defaultInverseColor : panelColor,
borderColor: isInvertedMode ? panelColor : borderStyle.color,
borderRadius: borderStyle.radius,
borderWidth: borderStyle.width,
width: width || metric_panel_style_1.defaultProperty.width,
height: height || metric_panel_style_1.defaultProperty.height
};
};
StatusPanelChartStore.prototype.getContentStyle = function (contentLevelIndex) {
var _a = this.chartStyleService, metricAutoSort = _a.metricAutoSort, contentFontSize = _a.contentFontSize, contentColor = _a.contentColor, levels = _a.levels;
var statusPanel = lodash_1.get(this.themeOption, 'statusPanel');
var color = contentColor || lodash_1.get(statusPanel, ['itemStyle', 'fontColor']);
var statusPanelOpt = lodash_1.get(this.themeOption, 'statusPanel');
var fontSize = contentFontSize || metric_panel_style_1.defaultProperty.contentFontSize;
var order = metricAutoSort && contentLevelIndex !== -1
? contentLevelIndex
: levels.length;
var itemHeight = contentFontSize
? contentFontSize * 1.6 + 'px'
: lodash_1.get(statusPanelOpt, ['item', 'lineHeight']) + 'px';
return {
fontSize: fontSize,
order: order,
color: color,
lineHeight: itemHeight,
height: itemHeight
};
};
StatusPanelChartStore.prototype.handleDrillDown = function (params) {
this.onAction({
titles: params.titles,
contents: params.contents,
currentBuckets: this.chartStyleService.currentBuckets,
fields: this.fields,
originRow: params.originRow
}, chart_drill_down_1.StatusPanelDrillDownService, chart_common_action_1.StatusPanelActionService);
};
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object, Number]),
__metadata("design:returntype", void 0)
], StatusPanelChartStore.prototype, "transfromValue", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], StatusPanelChartStore.prototype, "titleStyle", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], StatusPanelChartStore.prototype, "chunkSize", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], StatusPanelChartStore.prototype, "autoplay", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], StatusPanelChartStore.prototype, "carouselSpeed", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], StatusPanelChartStore.prototype, "data", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Array),
__metadata("design:paramtypes", [])
], StatusPanelChartStore.prototype, "series", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], StatusPanelChartStore.prototype, "showLabel", null);
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Number]),
__metadata("design:returntype", void 0)
], StatusPanelChartStore.prototype, "getPanelStyle", null);
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Number]),
__metadata("design:returntype", void 0)
], StatusPanelChartStore.prototype, "getContentStyle", null);
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], StatusPanelChartStore.prototype, "handleDrillDown", null);
return StatusPanelChartStore;
}(one_d_1.default));
exports.default = StatusPanelChartStore;