@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
1,109 lines • 92.5 kB
JavaScript
"use strict";
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 __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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 __values = (this && this.__values) || function(o) {
var s = typeof Symbol === "function" && Symbol.iterator, m = s && o[s], i = 0;
if (m) return m.call(o);
if (o && typeof o.length === "number") return {
next: function () {
if (o && i >= o.length) o = void 0;
return { value: o && o[i++], done: !o };
}
};
throw new TypeError(s ? "Object is not iterable." : "Symbol.iterator is not defined.");
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.NAME_LABEL_MARIN = exports.FORTY_FIVE_DEGREE_RATIO = exports.DEFAULT_AXIS_NAME_HEIGHT = void 0;
var mobx_1 = require("mobx");
var lodash_1 = require("lodash");
var moment_1 = __importDefault(require("moment"));
var pandora_app_component_1 = require("@qn-pandora/pandora-app-component");
var bind_1 = __importDefault(require("../../../utils/bind"));
var main_axis_1 = __importDefault(require("../../../base-pandora-visualization/services/chart-style/components/main-axis"));
var chart_style_1 = require("../../../constants/chart-style");
var type_1 = require("../../../constants/language/two_dimension/type");
var two_d_1 = require("../transforms/two-d");
var normalizeTimeFormat_1 = require("../../../utils/normalizeTimeFormat");
var dom_1 = require("../../../utils/dom");
var constants_1 = require("../../../constants");
var app_sdk_1 = require("@qn-pandora/app-sdk");
var chart_drill_down_1 = require("../../../services/chart-drill-down");
var chart_common_action_1 = require("../../../services/chart-common-action");
var services_1 = require("../../../services");
var legend_chart_1 = __importDefault(require("./legend-chart"));
var two_d_2 = require("../constants/two-d");
var chart_dataset_1 = require("../transforms/chart-dataset");
var chart_style_2 = require("../../../constants/chart-style");
var constant_1 = require("../constant");
exports.DEFAULT_AXIS_NAME_HEIGHT = 20;
exports.FORTY_FIVE_DEGREE_RATIO = 1 / Math.sqrt(2);
exports.NAME_LABEL_MARIN = 12;
var FONT_HEIGHT = 12;
var DEFAULT_CROSS_AXIS_NAME_GAP = 30;
var DEFAULT_MAIN_AXIS_NAME_GAP = 20;
var DEFAULT_SPLITER_NUMBER = 5;
var TwoDChartStore = /** @class */ (function (_super) {
__extends(TwoDChartStore, _super);
// 双y轴相关------------------------
function TwoDChartStore(getProps) {
var _this = _super.call(this, getProps) || this;
// 当鼠标滑过某个series, 记录该series name, 用以tooltip加强显示
_this.hoveredSeries = null;
_this.yAxisLabels = [];
_this.yAxis2Labels = [];
_this.xAxisLabels = [];
_this.hoveredLabel = null;
_this.WRAP_CHAR_NUM = 15;
_this.onEvents = {
mouseover: _this.handleChartMouseover,
mouseout: _this.handleChartMouseout,
mousemove: _this.handleChartMousemove,
click: _this.handleDrillDown,
brush: _this.handleBrushStart,
brushEnd: _this.handleBrushEnd,
globalcursortaken: lodash_1.noop
};
// 重置y轴labels
_this.addDisposer(mobx_1.reaction(function () { return _this.yAxisLabelChangeFactors; }, function () {
setTimeout(function () {
var yAxisLabels = _this.getYAxisLabels();
if (yAxisLabels) {
_this.setYAxisLabels(yAxisLabels);
}
}, 0);
}));
// 重置x轴labels
_this.addDisposer(mobx_1.reaction(function () { return _this.xAxisLabelChangeFactors; }, function () {
setTimeout(function () {
var xAxisLabels = _this.getXAxisLabels();
if (xAxisLabels) {
_this.setXAxisLabels(xAxisLabels);
}
}, 0);
}));
// 重置y轴labels
_this.addDisposer(mobx_1.reaction(function () { return _this.yAxis2LabelChangeFactors; }, function () {
if (_this.chartStyleService.useCrossAxis2) {
setTimeout(function () {
var yAxis2Labels = _this.getYAxis2Labels();
if (yAxis2Labels) {
_this.setYAxis2Labels(yAxis2Labels);
}
}, 0);
}
}));
_this.addDisposer(mobx_1.reaction(function () { return _this.legendState; }, function () {
if (_this.legendState) {
setTimeout(function () {
_this.handleLegendSelectChanged(_this.legendState);
}, 0);
}
}));
// 重新发送框选事件
_this.addDisposer(mobx_1.reaction(function () { return _this.brushChangeFactors; }, function () {
setTimeout(function () {
if (!_this.chartStyleService.showToolBox) {
if (!_this.echartInst.isDisposed() &&
_this.isDateSeries &&
_this.onBrushAction) {
_this.echartInst.dispatchAction({
type: 'takeGlobalCursor',
key: 'brush',
brushOption: {
brushType: _this.isVerticalChart ? 'lineY' : 'lineX'
}
});
}
}
}, 500);
}));
return _this;
}
Object.defineProperty(TwoDChartStore.prototype, "labelUnitTransformer", {
get: function () {
return this.mainAxis.unitTransformer;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "isDateSeries", {
get: function () {
var _this = this;
var mainAxisField = this.fields.find(function (field) { return field.key === _this.mainAxis.field; });
return ((!!mainAxisField && mainAxisField.fieldType === app_sdk_1.EChartFieldType.Time) ||
this.mainAxis.type === "time" /* Time */);
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "showMetricInName", {
get: function () {
var _a = this.chartStyleService, _b = _a.crossAxis1, y1MainFields = _b.fields, y1SubFields = _b.subFields, fieldsGetter = _b.fieldsGetter, y2Fields = _a.crossAxis2.fields, useCrossAxis2 = _a.useCrossAxis2 // 是否显示右y轴
;
var otherFields = (fieldsGetter === null || fieldsGetter === void 0 ? void 0 : fieldsGetter(this.dataset.fields)) || [];
var allFields = __spread(y1MainFields, otherFields);
// 只有一个指标时, legend 不显示指标名
return (__spread(lodash_1.uniq(allFields), (useCrossAxis2 ? lodash_1.uniq(y2Fields) : []), y1SubFields).length > 1);
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "baseSeries", {
get: function () {
var dataset = this.dataset;
var _a = this.chartStyleService, colorFields = _a.colors.fields, mainAxisField = _a.mainAxis.field, _b = _a.crossAxis1, crossAxisFields = _b.fields, displayFields = _b.displayFields;
return two_d_1.getSeriesFromDataset(dataset, colorFields, mainAxisField, crossAxisFields, displayFields, this.showMetricInName);
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "chartOptions", {
get: function () {
var baseOptions = this.getOptions();
return lodash_1.merge({}, { toolbox: this.baseToolBox }, baseOptions);
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "mainAxisOptions", {
get: function () {
var intervalOption = {};
var _a = this.mainAxis, intervalType = _a.intervalType, splitNumber = _a.splitNumber, interval = _a.interval;
if (intervalType === "split" /* Split */ && splitNumber) {
intervalOption['splitNumber'] = splitNumber;
}
// echarts 4 splitNumber默认是 5， echarts 5 splitNumber默认是 6 。为了按照以往的方式。如果没有设置，默认5
if (this.mainAxis.type === "time" /* Time */ && !splitNumber) {
intervalOption['splitNumber'] = DEFAULT_SPLITER_NUMBER;
}
if (intervalType === "fixed" /* Fixed */ && interval) {
intervalOption['interval'] = interval;
// echarts 5.3.3 轴类型为time 的时候，interval 不生效。先使用minInterval、maxInterval 来绕开这个问题
// https://github.com/apache/echarts/issues/16927
if (this.mainAxis.type === "time" /* Time */) {
intervalOption['minInterval'] = interval;
intervalOption['maxInterval'] = interval;
}
}
return lodash_1.merge({}, intervalOption);
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "isPercentageChart", {
get: function () {
return lodash_1.includes(constant_1.percentageCharts, this.chartStyleService.chartType);
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "isVerticalChart", {
get: function () {
return lodash_1.includes(constant_1.verticalCharts, this.chartStyleService.chartType);
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "crossAxis1Options", {
get: function () {
var intervalOption = {};
var _a = this.crossAxis1, intervalType = _a.intervalType, splitNumber = _a.splitNumber, interval = _a.interval, scale = _a.scale;
if (intervalType === "split" /* Split */ && splitNumber) {
intervalOption['splitNumber'] = splitNumber;
}
// echarts 4 splitNumber默认是 5， echarts 5 splitNumber默认是 6 。为了按照以往的方式。如果没有设置，默认5
if (this.mainAxis.type === "time" /* Time */ && !splitNumber) {
intervalOption['splitNumber'] = DEFAULT_SPLITER_NUMBER;
}
if (intervalType === "fixed" /* Fixed */ && interval) {
intervalOption['interval'] = interval;
// echarts 5.3.3 轴类型为time 的时候，interval 不生效。先使用minInterval、maxInterval 来绕开这个问题
// https://github.com/apache/echarts/issues/16927
if (this.mainAxis.type === "time" /* Time */) {
intervalOption['minInterval'] = interval;
intervalOption['maxInterval'] = interval;
}
}
return lodash_1.merge({}, two_d_2.crossAxis, intervalOption, {
name: this.crossAxisName,
type: scale,
axisLabel: {
showMinLabel: scale === "value" /* Value */,
formatter: scale === "category" /* Category */
? null
: this.isPercentageChart
? this.percentageChartUnitTransformer
: this.crossAxis1.unitTransformer,
hideOverlap: true
},
min: this.crossAxis1Min,
max: this.crossAxis1Max
});
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "chartDataset", {
get: function () {
var _this = this;
var mainAxisField = this.fields.find(function (e) { return e.key === _this.mainAxis.field; });
if (!mainAxisField) {
return { fields: [], rows: [] };
}
var otherFields = [];
var rows = [];
this.baseSeries.forEach(function (list) {
var name = list[0].name;
otherFields.push({
key: name,
name: name,
type: app_sdk_1.EChartConditionType.Metric
});
list.forEach(function (item, itemIndex) {
if (!rows[itemIndex]) {
rows[itemIndex] = [
[
item[mainAxisField.key === 'name'
? mainAxisField.key + "_1"
: mainAxisField.key]
]
];
}
rows[itemIndex].push([item.metricValue]);
});
});
var resDataset = {
fields: __spread([mainAxisField], otherFields),
rows: rows
};
return chart_dataset_1.formatUnit(resDataset, otherFields.reduce(function (res, field) {
res[field.key] = _this.crossAxis1.unitTransformer;
return res;
}, {}));
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "crossAxis1", {
get: function () {
return this.chartStyleService.crossAxis1;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "mainAxis", {
get: function () {
return this.chartStyleService.mainAxis;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "colors", {
get: function () {
return this.chartStyleService.colors;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "yAxisLabelChangeFactors", {
/**
* 可能会影响y轴变化的因子
*/
get: function () {
return [this.series, this.crossAxis1.unitTransformer, this.crossAxis1.scale];
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "xAxisLabelChangeFactors", {
/**
* 可能会影响x轴变化的因子
*/
get: function () {
return [
this.series,
this.mainAxis.labelShowMode,
this.mainAxis.labelRotation
];
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "mainAxisLabelDisplayOption", {
get: function () {
var labelShowMode = this.mainAxis.labelShowMode;
return {
show: labelShowMode !== "hide" /* Hide */,
interval: labelShowMode === "showall" /* ShowAll */ ? 0 : 'auto'
};
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "mainAxisName", {
get: function () {
var _a = this.mainAxis, nameMode = _a.nameMode, name = _a.name, field = _a.field;
if (nameMode !== "off" /* Off */) {
return name || field;
}
else {
return null;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "mainAxisMin", {
get: function () {
return this.getMainAxisBoundary(this.mainAxis, 'min');
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "mainAxisMax", {
get: function () {
return this.getMainAxisBoundary(this.mainAxis, 'max');
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "crossAxis1Min", {
get: function () {
return this.getCrossAxisBoundary(this.crossAxis1, 'min');
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "crossAxis1Max", {
get: function () {
return this.getCrossAxisBoundary(this.crossAxis1, 'max');
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "crossAxisName", {
get: function () {
var _a = this.crossAxis1, nameMode = _a.nameMode, name = _a.name, fields = _a.fields;
if (nameMode !== "off" /* Off */) {
var metricName = fields[0] || '';
return name || metricName;
}
return '';
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "axisData", {
get: function () {
var field = this.mainAxis.field;
var colorFields = this.chartStyleService.colors.fields;
var currentMainAxisData = colorFields.length > 0
? two_d_1.getMainAxisUniqValues(this.dataset, field)
: two_d_1.getMainAxisValues(this.dataset, field);
var compareMainAxisData = two_d_1.getMainAxisUniqValues(this.dataset, field, true);
var result = [];
if (this.isDateSeries && compareMainAxisData) {
for (var index = 0; index < currentMainAxisData.length; index++) {
var axisLabel = (lodash_1.get(currentMainAxisData, index) || '').toString();
var compareAxisLabel = lodash_1.get(compareMainAxisData, index);
if (!lodash_1.isNil(compareAxisLabel)) {
axisLabel += " " + compareAxisLabel;
}
result.push(axisLabel);
}
return result;
}
else {
return currentMainAxisData.map(function (item) {
return (!lodash_1.isNil(item) ? item : '').toString();
});
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "timeFormater", {
// 跨小时 HH:mm:ss 如10:23:12
// 跨天+跨月： MM-DD HH:mm:ss 如7-10 10:23:12
// 跨年 YYYY-MM-DD HH:mm:ss 如2023-7-10 10:23:12
// 获取时间轴的formater格式
get: function () {
if (this.axisData.length < 2) {
return 'YYYY-MM-DD HH:mm:ss';
}
var startTime = lodash_1.get(this.axisData, 0);
var endTime = lodash_1.get(this.axisData, this.axisData.length - 1);
var startMonent = null;
var endMonent = null;
if (moment_1.default(new Date(startTime)).isValid()) {
startMonent = moment_1.default(new Date(startTime));
}
if (moment_1.default(new Date(+startTime)).isValid()) {
startMonent = moment_1.default(new Date(+startTime));
}
if (moment_1.default(new Date(endTime)).isValid()) {
endMonent = moment_1.default(new Date(endTime));
}
if (moment_1.default(new Date(+endTime)).isValid()) {
endMonent = moment_1.default(new Date(+endTime));
}
if (!startMonent || !endMonent) {
return 'YYYY-MM-DD HH:mm:ss';
}
if (startMonent.year() !== endMonent.year()) {
return 'YYYY-MM-DD HH:mm:ss';
}
if (endMonent.date() !== startMonent.date()) {
return 'MM-DD HH:mm:ss';
}
return 'HH:mm:ss';
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "allSeriesLength", {
// TODO
get: function () {
var firstSery = (lodash_1.get(this.series, [0, 'data']) || []);
return firstSery.length * this.series.length;
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "crossAxisNameGap", {
get: function () {
return this.getCrossAxisNameGap(this.yAxisLabels);
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "crossAxis2NameGap", {
get: function () {
return this.getCrossAxisNameGap(this.yAxis2Labels);
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "mainAxisNameGap", {
get: function () {
var _a = this.mainAxis, labelShowMode = _a.labelShowMode, labelRotation = _a.labelRotation;
if (labelShowMode === "hide" /* Hide */) {
return DEFAULT_MAIN_AXIS_NAME_GAP;
}
switch (labelRotation) {
case "0" /* Zero */:
return this.xLabelMaxHeight + exports.NAME_LABEL_MARIN;
case "-90" /* Rotate90 */:
case "90" /* RotateM90 */:
return this.xLabelMaxWidth + exports.NAME_LABEL_MARIN;
case "45" /* RotateM45 */:
case "-45" /* Rotate45 */:
return this.xLabelMaxLengthWith45Deg + exports.NAME_LABEL_MARIN;
default:
return this.xLabelMaxWidth + exports.NAME_LABEL_MARIN;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "xLabelMaxWidth", {
// x轴label的最大长度
get: function () {
var labelsArray = this.toLabelsArray(this.xAxisLabels);
return this.getLabelMaxWidth(labelsArray);
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "xLabelMaxHeight", {
// x轴label的最大高度（因为Label会换行显示）
get: function () {
var labelsArray = this.toLabelsArray(this.xAxisLabels);
return this.getLabelMaxHeight(labelsArray);
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "xLabelMaxLengthWith45Deg", {
// x轴label 45度显示时，垂直方向上的最大高度
get: function () {
var labelsArray = this.toLabelsArray(this.xAxisLabels);
return this.getXLabelMaxLengthWith45Deg(labelsArray);
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "yLabelMaxWidth", {
// y轴label的最大长度
get: function () {
var labelsArray = this.toLabelsArray(this.yAxisLabels);
return this.getLabelMaxWidth(labelsArray);
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "yLabelMaxHeight", {
// y轴label的最大高度（因为Label会换行显示）
get: function () {
var labelsArray = this.toLabelsArray(this.yAxisLabels);
return this.getLabelMaxHeight(labelsArray);
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "yLabelMaxLengthWith45Deg", {
// y轴label 45度显示时，垂直方向上的最大高度
get: function () {
var labelsArray = this.toLabelsArray(this.yAxisLabels);
return this.getXLabelMaxLengthWith45Deg(labelsArray);
},
enumerable: false,
configurable: true
});
Object.defineProperty(TwoDChartStore.prototype, "tooltipItemIsRevese", {
get: function () {
var needReveseChartType = [
chart_style_1.ChartType.PercentageVerticalBar,
chart_style_1.ChartType.PercentageBar,
chart_style_1.ChartType.StackBar,
chart_style_1.ChartType.StackVerticalBar,
chart_style_1.ChartType.PercentageLine,
chart_style_1.ChartType.StackLine,
chart_style_1.ChartType.StackArea,
chart_style_1.ChartType.PercentageArea
];
return lodash_1.includes(needReveseChartType, this.chartStyleService.chartType);
},
enumerable: false,
configurable: true
});
TwoDChartStore.prototype.setHoveredLabel = function (hoveredLabel) {
this.hoveredLabel = hoveredLabel;
};
TwoDChartStore.prototype.getAxisOriginBoundary = function (boundType, mode, bound) {
if (mode === void 0) { mode = chart_style_1.EAxisMinMaxMode.Auto; }
var defaultBoundValue = boundType === 'min' ? chart_style_1.EAxisMinMaxValue.Min : chart_style_1.EAxisMinMaxValue.Max;
var value = bound;
if (mode === chart_style_1.EAxisMinMaxMode.Auto) {
value = null;
}
else if (mode === chart_style_1.EAxisMinMaxMode.Custom) {
value = !lodash_1.isNil(bound) ? bound : defaultBoundValue;
}
return value;
};
TwoDChartStore.prototype.getMainAxisBoundary = function (mainAxis, type) {
return this.getCrossAxisBoundary(mainAxis, type);
};
TwoDChartStore.prototype.getCrossAxisBoundary = function (crossAxis, type) {
var min = crossAxis.min, minMode = crossAxis.minMode, max = crossAxis.max, maxMode = crossAxis.maxMode;
if (type === 'min') {
var minBoundary = this.getAxisOriginBoundary('min', minMode, min);
return this.getAxisBoundary(minBoundary);
}
var maxBoundary = this.getAxisOriginBoundary('max', maxMode, max);
return this.getAxisBoundary(maxBoundary);
};
TwoDChartStore.prototype.getAxisBoundary = function (originBoundary) {
if (originBoundary === chart_style_1.EAxisMinMaxValue.Min ||
originBoundary === chart_style_1.EAxisMinMaxValue.Max) {
return originBoundary;
}
return lodash_1.isNil(originBoundary) ||
isNaN(+originBoundary) ||
originBoundary === ''
? null
: originBoundary;
};
TwoDChartStore.prototype.getXLabelMaxLengthWith45Deg = function (labelsArray) {
var e_1, _a, e_2, _b;
var maxLength = 0;
try {
for (var labelsArray_1 = __values(labelsArray), labelsArray_1_1 = labelsArray_1.next(); !labelsArray_1_1.done; labelsArray_1_1 = labelsArray_1.next()) {
var labels = labelsArray_1_1.value;
var labelHeight = labels.length * FONT_HEIGHT;
try {
for (var labels_1 = (e_2 = void 0, __values(labels)), labels_1_1 = labels_1.next(); !labels_1_1.done; labels_1_1 = labels_1.next()) {
var label = labels_1_1.value;
var measured = this.measureText(label);
var labelWidth = (measured && measured.width) || 0;
var currentLength = labelWidth * exports.FORTY_FIVE_DEGREE_RATIO +
0.5 * labelHeight * exports.FORTY_FIVE_DEGREE_RATIO;
if (currentLength > maxLength) {
maxLength = currentLength;
}
}
}
catch (e_2_1) { e_2 = { error: e_2_1 }; }
finally {
try {
if (labels_1_1 && !labels_1_1.done && (_b = labels_1.return)) _b.call(labels_1);
}
finally { if (e_2) throw e_2.error; }
}
}
}
catch (e_1_1) { e_1 = { error: e_1_1 }; }
finally {
try {
if (labelsArray_1_1 && !labelsArray_1_1.done && (_a = labelsArray_1.return)) _a.call(labelsArray_1);
}
finally { if (e_1) throw e_1.error; }
}
return maxLength;
};
TwoDChartStore.prototype.toLabelsArray = function (axisLabels) {
return axisLabels
? axisLabels.map(function (label) {
return !lodash_1.isNil(label) ? label.toString().split('\n') : [];
})
: [];
};
TwoDChartStore.prototype.getLabelMaxWidth = function (labelsArray) {
var e_3, _a, e_4, _b;
// 所有label中的最大宽度
var maxWidth = 0;
try {
for (var labelsArray_2 = __values(labelsArray), labelsArray_2_1 = labelsArray_2.next(); !labelsArray_2_1.done; labelsArray_2_1 = labelsArray_2.next()) {
var labels = labelsArray_2_1.value;
try {
for (var labels_2 = (e_4 = void 0, __values(labels)), labels_2_1 = labels_2.next(); !labels_2_1.done; labels_2_1 = labels_2.next()) {
var label = labels_2_1.value;
var measured = this.measureText(label);
var labelWidth = (measured && measured.width) || 0;
if (labelWidth > maxWidth) {
maxWidth = labelWidth;
}
}
}
catch (e_4_1) { e_4 = { error: e_4_1 }; }
finally {
try {
if (labels_2_1 && !labels_2_1.done && (_b = labels_2.return)) _b.call(labels_2);
}
finally { if (e_4) throw e_4.error; }
}
}
}
catch (e_3_1) { e_3 = { error: e_3_1 }; }
finally {
try {
if (labelsArray_2_1 && !labelsArray_2_1.done && (_a = labelsArray_2.return)) _a.call(labelsArray_2);
}
finally { if (e_3) throw e_3.error; }
}
return maxWidth;
};
TwoDChartStore.prototype.getLabelMaxHeight = function (labelsArray) {
var e_5, _a;
// 所有label中的最大行数
var maxHeightNumber = 0;
try {
for (var labelsArray_3 = __values(labelsArray), labelsArray_3_1 = labelsArray_3.next(); !labelsArray_3_1.done; labelsArray_3_1 = labelsArray_3.next()) {
var labels = labelsArray_3_1.value;
if (labels.length > maxHeightNumber) {
maxHeightNumber = labels.length;
}
}
}
catch (e_5_1) { e_5 = { error: e_5_1 }; }
finally {
try {
if (labelsArray_3_1 && !labelsArray_3_1.done && (_a = labelsArray_3.return)) _a.call(labelsArray_3);
}
finally { if (e_5) throw e_5.error; }
}
return FONT_HEIGHT * maxHeightNumber;
};
TwoDChartStore.prototype.setYAxisLabels = function (yAxisLabels) {
this.yAxisLabels = yAxisLabels;
};
TwoDChartStore.prototype.setYAxis2Labels = function (yAxisLabels) {
this.yAxis2Labels = yAxisLabels;
};
TwoDChartStore.prototype.setXAxisLabels = function (xAxisLabels) {
this.xAxisLabels = xAxisLabels;
};
TwoDChartStore.prototype.setHoverSeries = function (series) {
this.hoveredSeries = series;
};
TwoDChartStore.prototype.getYAxisLabels = function () {
return this.getAxisLabels('yAxis', 0) || [];
};
TwoDChartStore.prototype.getYAxis2Labels = function () {
return this.getAxisLabels('yAxis', 1) || [];
};
TwoDChartStore.prototype.getXAxisLabels = function () {
return this.getAxisLabels('xAxis', 0) || [];
};
/**
* 从echart对象上获取坐标轴的labels
* @param type x轴 or y轴：xAxis、yAxis
*/
TwoDChartStore.prototype.getAxisLabels = function (type, index) {
if (index === void 0) { index = 0; }
if (this.echartInst) {
var componentsViews = this.echartInst._componentsViews;
// 直接使用 _componentsViews， 导致基线会莫名奇妙消失，cloneDeep 性能有问题。
// 打印下 this.echartInst.getModal() ，基线正常。原因未知。暂时先这么做，解决性能问题 ？？
console.info(this.echartInst.getModel());
var yAxisComponentView = componentsViews &&
componentsViews.filter(function (componentsView) {
var _a;
return componentsView.type === 'xAxis' &&
((_a = componentsView.__model) === null || _a === void 0 ? void 0 : _a.mainType) === type;
});
var labelEls = lodash_1.get(yAxisComponentView, index + ".group._children[0]._children[0]._children");
return (labelEls &&
labelEls
.filter(function (labelEl) { return /^label_/gi.test(labelEl.anid); })
.map(function (labelEl) { return labelEl.style.text; }));
}
};
TwoDChartStore.prototype.getCrossAxisNameGap = function (labels) {
var _this = this;
if (labels) {
var labelWidth = labels.map(function (label) {
var measured = _this.measureText(label);
return (measured && measured.width) || 0;
});
return (lodash_1.max(labelWidth) || 0) + exports.NAME_LABEL_MARIN;
}
return DEFAULT_CROSS_AXIS_NAME_GAP;
};
TwoDChartStore.prototype.getTooltipItem = function (legend, metric, value, compareDelta, unitTransformer) {
return "<span style=\"font-size: 12px;\">\n " + legend + " <span >" + metric + ":</span> " + unitTransformer(value) + " " + compareDelta + "</span>";
};
TwoDChartStore.prototype.percentageChartUnitTransformer = function (value) {
return value + " %";
};
TwoDChartStore.prototype.sortTooltipParams = function (params) {
var tooltipType = this.chartStyleService.tooltipType;
if (tooltipType === chart_style_1.ETooltipType.Legend) {
return params;
}
var res = params.filter(function (param) { return param.value !== null; });
return lodash_1.sortBy(res, function (item1) {
return tooltipType === chart_style_1.ETooltipType.NumberAsc ? item1.value : -item1.value;
});
};
// 提示框字段 tooltip
TwoDChartStore.prototype.tooltipDisplays = function (params, buckets) {
var displays = [];
if (buckets.length > 0) {
params
.filter(function (param) { return param.value !== null; })
.forEach(function (item) {
Object.keys(item.data.display || {}).forEach(function (key) {
displays.push("<span style=\"font-size: 12px;margin-left:14px\">\n <span >" + (params.length > 1 ? item.seriesName + "_" : '') + key + ":</span> " + item.data.display[key] + "</span>");
});
});
}
else if (params.length > 0) {
var result_1 = []; // 双y轴可能几个params有自己独有的displayKey
params
.filter(function (param) { return param.value !== null; })
.forEach(function (item) {
Object.keys(item.data.display || {}).forEach(function (key) {
result_1.push({
value: key + "_" + item.data.display[key],
content: "<span style=\"font-size: 12px;margin-left:14px\">\n <span >" + key + ":</span> " + item.data.display[key] + "</span>"
});
});
});
displays = lodash_1.uniqBy(result_1, 'value').map(function (item) { return item.content; });
}
return displays;
};
// 获取tooltip 中的图例icon
TwoDChartStore.prototype.tooltipLegendIcon = function (color, shape, isOverlap) {
var configShape = lodash_1.get(this.chartStyleService, ['point', 'type']);
var point = { type: configShape || shape };
var realShape = isOverlap
? constants_1.EShape.line
: point && point.type === constants_1.EShape.circle
? point.type
: constants_1.EShape.square;
return dom_1.getReactDOMString(pandora_app_component_1.MetricIcon, {
shape: realShape,
color: color
});
};
//
TwoDChartStore.prototype.getTooltipTableCell = function (v, isName, color) {
var borderColor = this.theme === constants_1.EThemeTypes.Light ? '#e3e3e3' : 'rgba(227, 227, 227, 0.25)';
var padding = isName ? '8px' : '8px 16px';
var content = isName
? v
: v.legend + "<span style=\"margin-left: 4px;\">" + v.value + "</span>";
return "<div style=\"display:table-cell;border:1px solid " + borderColor + ";padding: " + padding + "; color: " + color + ";\">" + content + "</div>";
};
// 获取tooltip width height
TwoDChartStore.prototype.tooltipSize = function () {
var height = 400;
var width = window.innerWidth * 0.7;
if (this.echartInst) {
var dom = this.echartInst.getDom();
var canvas = dom.querySelector('canvas');
if (canvas) {
height = (canvas.height / window.devicePixelRatio) * 0.7;
}
}
return { width: width, height: height };
};
// tooltip 的时候。指标应该的单位转换函数
TwoDChartStore.prototype.getRealUnitTransfrom = function (metric) {
var unitTransformer = this.crossAxis1.unitTransformer;
var _a = this.crossAxis2, y2UnitTransformer = _a.unitTransformer, y2Fields = _a.fields;
return this.isPercentageChart
? this.percentageChartUnitTransformer
: lodash_1.includes(y2Fields, metric)
? y2UnitTransformer
: unitTransformer;
};
// 使用tabel的形式展示
TwoDChartStore.prototype.tooltipTableFormatter = function (params, buckets, shape) {
var _this = this;
var chartType = this.chartStyleService.chartType;
var isCombination = chartType === chart_style_1.ChartType.LineBar || chartType === chart_style_1.ChartType.LineBarY2;
// 获取title
var axisValue = lodash_1.get(params[0], 'axisValue');
var name = lodash_1.get(params[0], 'name');
var title = axisValue || name;
if (this.isDateSeries) {
if (axisValue) {
var _a = __read(axisValue.toString().split(' '), 2), time1 = _a[0], time2 = _a[1];
title = time2
? normalizeTimeFormat_1.normalizeTimeFormat(time1) + ' / ' + normalizeTimeFormat_1.normalizeTimeFormat(time2)
: normalizeTimeFormat_1.normalizeTimeFormat(time1);
}
else {
title = normalizeTimeFormat_1.normalizeTimeFormat(name);
}
}
// 分组、y轴数据
var _b = this.tooltipSize(), width = _b.width, height = _b.height;
var res = [];
var fields = __spread([''], this.crossAxis1.fields);
// 获取叠加折线
var overlapTooltip = '';
params.forEach(function (param) {
var data = param.data, color = param.color;
var value = param.value instanceof Array ? param.value[1] : param.value;
// 优先使用originValue
// 例如：对数展示时，需要将虚拟最小值重新转化为0
value = lodash_1.isNil(data.originValue) ? value : data.originValue;
var metric = data.metric || param.seriesName;
var currentUnitTransformer = _this.getRealUnitTransfrom(metric);
var legend = _this.tooltipLegendIcon(color, shape, data.isOverlap);
//叠加折线，单独展示
if (isCombination && param.seriesType === 'line') {
metric = two_d_1.getLineDisplayName(metric, true);
if (chartType === chart_style_1.ChartType.LineBarY2) {
currentUnitTransformer = _this.crossAxis2.unitTransformer;
}
overlapTooltip = _this.getTooltipItem(legend, metric, value, '', currentUnitTransformer);
}
else {
// 分组名称
var groupName_1 = buckets.map(function (item) { return data[item]; }).join(' ');
var metricName_1 = data.metricName;
var metricIndex = fields.findIndex(function (item) { return item === metricName_1; });
var index = res.findIndex(function (item) { return item[0] === groupName_1; });
if (index === -1) {
var array = new Array(fields.length);
array[0] = groupName_1;
array[metricIndex] = { value: currentUnitTransformer(value), legend: legend };
res.push(array);
}
else {
res[index][metricIndex] = {
value: currentUnitTransformer(value),
legend: legend
};
}
}
});
var titleColor = this.theme === constants_1.EThemeTypes.Dark
? '#9BB0D5'
: this.theme === constants_1.EThemeTypes.EleganceGreen
? '#CEDCE2'
: '#8c8c8c';
var nameColor = this.theme === constants_1.EThemeTypes.Dark
? '#9BB0D5'
: this.theme === constants_1.EThemeTypes.EleganceGreen
? '#CEDCE2'
: '#595959';
var valueColor = this.theme === constants_1.EThemeTypes.Dark
? '#E3EDFF'
: this.theme === constants_1.EThemeTypes.EleganceGreen
? '#E3EDFF'
: '#262626';
var displays = this.tooltipDisplays(params, buckets).map(function (item) { return "<span style=\"margin-right: 20px;\">" + item + "</span>"; });
var titles = "<div style=\"display: table-row;\">\n " + fields
.map(function (item) {
return _this.getTooltipTableCell(item, true, nameColor);
})
.join('') + "\n </div>";
var tooltips = res.map(function (item) {
return "<div style=\"display: table-row;\">\n " + item
.map(function (v, index) {
return _this.getTooltipTableCell(v, index === 0, index === 0 ? nameColor : valueColor);
})
.join('') + "\n </div>";
});
return "<div style=\"padding:5px 8px;max-height:" + height + "px;max-width:" + width + "px;overFlow:auto\" class=\"echarts-tooltip\">\n <span style=\"font-size: 12px; display: inline-block; margin-bottom: 8px; color: " + titleColor + ";\">" + title + "</span><br/>\n <div style=\"display: table; border-collapse: collapse; margin-bottom: 8px;\">\n " + titles + "\n " + tooltips.join('') + "\n </div> \n " + overlapTooltip + "\n <br /> \n " + displays.join(' <br /> ') + "\n </div>";
};
TwoDChartStore.prototype.tooltipFormatter = function (params, buckets, shape) {
var _this = this;
var isCompareEnable = this.chartStyleService.compare.isCompareEnable;
params = params instanceof Array ? params : [params];
var chartType = this.chartStyleService.chartType;
var isCombination = chartType === chart_style_1.ChartType.LineBar ||
chartType === chart_style_1.ChartType.LineBarY2 ||
chartType === chart_style_1.ChartType.LineY2;
// 获取tooltip 的宽高
var _a = this.tooltipSize(), width = _a.width, height = _a.height;
// 获取title
var _b = params[0], axisValue = _b.axisValue, name = _b.name;
var title = axisValue || name;
if (this.isDateSeries) {
if (axisValue) {
var _c = __read(axisValue.toString().split(' '), 2), time1 = _c[0], time2 = _c[1];
title = time2
? normalizeTimeFormat_1.normalizeTimeFormat(time1) + ' / ' + normalizeTimeFormat_1.normalizeTimeFormat(time2)
: normalizeTimeFormat_1.normalizeTimeFormat(time1);
}
else {
title = normalizeTimeFormat_1.normalizeTimeFormat(name);
}
}
// 组合图中，忽略相同的提示框内容
if (isCombination) {
var temp_1 = [];
params.forEach(function (item) {
var name = item.seriesName;
if (!name) {
temp_1.push(item);
}
else {
name =
item.seriesType === 'line'
? name.replace(/(.*)_line/, '$1')
: name;
var index = temp_1.findIndex(function (item) { return item.seriesName === name; });
if (index === -1) {
temp_1.push(item);
}
}
});
params = temp_1;
}
params = this.sortTooltipParams(params);
// const configShape = get(this.chartStyleService, ['point', 'type'])
// const point = { type: configShape || shape }
var isReverse = this.tooltipItemIsRevese;
// 如果y轴字段选择超过一个并且存在分组。tooltip 使用列表形式展示
// 注意，此方式会忽略hover的series 效果以及 compare
if (this.crossAxis1.fields.length > 1 && buckets.length > 0) {
return this.tooltipTableFormatter(params, buckets, shape);
}
var tooltips = params
.filter(function (param) { return param.value !== null; })
.map(function (param, index) {
var data = param.data, color = param.color;
var metric = data.metric || param.seriesName;
var currentUnitTransformer = _this.getRealUnitTransfrom(metric);
var value = param.value instanceof Array ? param.value[1] : param.value;
// 优先使用originValue
// 例如：对数展示时，需要将虚拟最小值重新转化为0
value = lodash_1.isNil(data.originValue) ? value : data.originValue;
var legend = _this.tooltipLegendIcon(color, shape, data.isOverlap);
var compareDelta = '';
if (isCompareEnable && params.length > 1 && index % 2 === 0) {
var compareParam = params[index + 1];
var compareValue = compareParam.value instanceof Array
? compareParam.value[1]
: compareParam.value;
// 优先使用originValue
// 例如：对数展示时，需要将虚拟最小值重新转化为0
compareValue = lodash_1.isNil(compareParam.data.originValue)
? value
: compareParam.data.originValue;
if (!lodash_1.isNil(compareValue)) {
var duration = value - compareValue;
var delta = compareValue !== 0
? ((duration * 1000) / compareValue / 10).toFixed(1) + '%'
: currentUnitTransformer(duration);
compareDelta =
duration >= 0
? "<span style=\" font-size: 12px;\">+" + delta + "</span>"
: "<span style=\" font-size: 12px;\">" + delta + "</span>";
}
}
//叠加折线(需要特殊处理，名称后面加了_line 后缀)
if (isCombination && param.seriesType === 'line') {
metric = two_d_1.getLineDisplayName(metric, true);
if (chartType === chart_style_1.ChartType.LineBarY2) {
currentUnitTransformer = _this.crossAxis2.unitTransformer;
}
}
if (!_this.hoveredSeries) {
return _this.getTooltipItem(legend, metric, value, compareDelta, currentUnitTransformer);
}
return param.seriesName === lodash_1.get(_this.hoveredSeries, 'seriesName')
? _this.getTooltipItem(legend, data.metric || param.seriesName, value, compareDelta