@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
326 lines (325 loc) • 15.2 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;
};
import { computed } from 'mobx';
import { get, findIndex, isNumber, isUndefined } from 'lodash';
import { utils } from '@qn-pandora/app-sdk';
import OneDChartStore from '../stores/one-d';
import { normalizeTimeFormat } from '../../../utils/normalizeTimeFormat';
import bind from '../../../utils/bind';
import { StatusPanelDrillDownService } from '../../../services/chart-drill-down';
import { StatusPanelActionService } from '../../../services/chart-common-action';
import { EColorMode, defaultProperty } from '../../../constants/metric-panel-style';
var getUnitTransformer = 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 = get(this.themeOption, 'statusPanel');
var fontSize = titleFontSize || defaultProperty.titleFontSize;
var titleHeight = titleFontSize
? titleFontSize * 1.6 + 'px'
: 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 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 findIndex(fields, function (f) { return f.key === b; }); })
.filter(function (num) { return num !== -1; });
var metricIndexs = currentMetrics
.map(function (m) { return 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(value);
}
// 如果是数值类型并且有单位
if (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 isNumber(sourceValue) && item.value >= sourceValue; });
levelKey_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 = 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(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 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 === EColorMode.INVERTED;
var statusPanelOpt = get(this.themeOption, 'statusPanel');
var defaultInverseBgColor = get(statusPanelOpt, ['inverseBgColor']);
var defaultInverseColor = get(statusPanelOpt, ['inverseColor']);
var panelColor = get(levels, [levelIndex, 'color']) || defaultInverseBgColor;
var borderStyle = 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 || defaultProperty.width,
height: height || 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 = get(this.themeOption, 'statusPanel');
var color = contentColor || get(statusPanel, ['itemStyle', 'fontColor']);
var statusPanelOpt = get(this.themeOption, 'statusPanel');
var fontSize = contentFontSize || defaultProperty.contentFontSize;
var order = metricAutoSort && contentLevelIndex !== -1
? contentLevelIndex
: levels.length;
var itemHeight = contentFontSize
? contentFontSize * 1.6 + 'px'
: 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
}, StatusPanelDrillDownService, StatusPanelActionService);
};
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object, Number]),
__metadata("design:returntype", void 0)
], StatusPanelChartStore.prototype, "transfromValue", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], StatusPanelChartStore.prototype, "titleStyle", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], StatusPanelChartStore.prototype, "chunkSize", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], StatusPanelChartStore.prototype, "autoplay", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], StatusPanelChartStore.prototype, "carouselSpeed", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], StatusPanelChartStore.prototype, "data", null);
__decorate([
computed,
__metadata("design:type", Array),
__metadata("design:paramtypes", [])
], StatusPanelChartStore.prototype, "series", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], StatusPanelChartStore.prototype, "showLabel", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Number]),
__metadata("design:returntype", void 0)
], StatusPanelChartStore.prototype, "getPanelStyle", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Number]),
__metadata("design:returntype", void 0)
], StatusPanelChartStore.prototype, "getContentStyle", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], StatusPanelChartStore.prototype, "handleDrillDown", null);
return StatusPanelChartStore;
}(OneDChartStore));
export default StatusPanelChartStore;