@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
278 lines (277 loc) • 12.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 __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;
};
import { computed } from 'mobx';
import { includes, merge, get, find } from 'lodash';
import { colorMap } from '@qn-pandora/pandora-app-component/es/components/LegendColorPanel';
import bind from '../../../utils/bind';
import { BoundType } from '../../../constants/outlier';
import TwoDChartStore from '../stores/two-d';
import { toLineSeries } from '../LineChart/transform';
import { getSeriesFromDataset } from '../transforms/two-d';
import { getBoundSeries, updateSeriesDataByBound } from './transform';
import { config } from './constant';
var OutlierChartStore = /** @class */ (function (_super) {
__extends(OutlierChartStore, _super);
function OutlierChartStore() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(OutlierChartStore.prototype, "chartDataset", {
get: function () {
return this.dataset;
},
enumerable: false,
configurable: true
});
Object.defineProperty(OutlierChartStore.prototype, "baseSeries", {
get: function () {
var dataset = this.dataset;
var _a = this.chartStyleService, mainAxisField = _a.mainAxis.field, crossAxisFields = _a.crossAxis1.fields, lowerBound = _a.lowerBound, lowerBoundType = _a.lowerBoundType, upperBound = _a.upperBound, upperBoundType = _a.upperBoundType;
var newCrossAxisFields = __spread(crossAxisFields);
if (lowerBoundType === BoundType.Field && lowerBound.toString()) {
newCrossAxisFields.push(lowerBound.toString());
}
if (upperBoundType === BoundType.Field && upperBound.toString()) {
newCrossAxisFields.push(upperBound.toString());
}
return getSeriesFromDataset(dataset, [], mainAxisField, newCrossAxisFields);
},
enumerable: false,
configurable: true
});
Object.defineProperty(OutlierChartStore.prototype, "originSeryList", {
get: function () {
var _this = this;
var _a = this.chartStyleService, _b = _a.crossAxis1, fields = _b.fields, yEmptyValueMode = _b.yEmptyValueMode, scale = _b.scale, lowerBound = _a.lowerBound, lowerBoundType = _a.lowerBoundType, upperBound = _a.upperBound, upperBoundType = _a.upperBoundType, displayColors = _a.displayColors, boundFields = _a.boundFields;
var data = this.baseSeries;
var isZeroEmptyValueMode = yEmptyValueMode === "0" /* Zero */;
var series = toLineSeries(data, isZeroEmptyValueMode);
if (scale === "log" /* Log */) {
this.processSeriesForLog(series);
}
var newSeries = series.filter(function (sery) { return includes(fields, sery.name); });
if (!newSeries.length) {
return {};
}
newSeries = newSeries.map(function (sery, index) {
sery['showSymbol'] = true;
sery['showAllSymbol'] = true;
sery['symbolSize'] = 0;
// 设置空值模式
if (yEmptyValueMode === "line" /* Line */) {
sery['connectNulls'] = true;
}
var displayColor = find(displayColors, function (displayColor) { return displayColor.name === sery.name; });
var defaultColor = _this.lineColors[index % _this.lineColors.length];
sery['itemStyle'] = {
normal: { color: displayColor ? displayColor.color : defaultColor }
};
return sery;
});
var _c = getBoundSeries(lowerBound, lowerBoundType, upperBound, upperBoundType, series), lowerSery = _c.lowerSery, upperSery = _c.upperSery;
//受控的series
var boundSeries = series.filter(function (sery) { return includes(boundFields, sery.name); });
var barSery = updateSeriesDataByBound(this.themeOption, boundSeries, lowerSery, upperSery);
return { series: newSeries, lowerSery: lowerSery, upperSery: upperSery, barSery: barSery };
},
enumerable: false,
configurable: true
});
Object.defineProperty(OutlierChartStore.prototype, "lineColors", {
get: function () {
var colorMode = this.chartStyleService.colorMode;
var _a = this.themeOption, line = _a.line, color = _a.color;
var lineColor = get(line, color);
return get(colorMap, colorMode) || lineColor || color;
},
enumerable: false,
configurable: true
});
Object.defineProperty(OutlierChartStore.prototype, "series", {
get: function () {
var _this = this;
var _a = this.originSeryList, _b = _a.series, series = _b === void 0 ? [] : _b, lowerSery = _a.lowerSery, upperSery = _a.upperSery, barSery = _a.barSery;
return __spread(series, [lowerSery, upperSery, barSery]).filter(function (e) { return !!e; })
.map(function (item) {
return __assign(__assign({}, item), { silent: true, cursor: _this.chartCanClick ? 'pointer' : 'default' });
});
},
enumerable: false,
configurable: true
});
Object.defineProperty(OutlierChartStore.prototype, "legendSeriesData", {
get: function () {
var _this = this;
var displayColors = this.chartStyleService.displayColors;
var fields = this.chartStyleService.crossAxis1.fields;
return this.series
.filter(function (item) { return includes(fields, item.name); })
.map(function (series, index) {
// 设置颜色
var displayColor = find(displayColors, function (displayColor) { return displayColor.name === series.name; });
var defaultColorArr = get(_this.themeOption, ['bar', 'color']) ||
get(_this.themeOption, 'color');
var defaultColor = defaultColorArr[index % defaultColorArr.length];
return {
name: series.name,
metricName: series.metricName,
isOverlap: series.isOverlap,
color: displayColor ? displayColor.color : defaultColor,
data: {
current: series.data.map(function (item) { return item.value; })
},
fieldType: series.fieldType
};
});
},
enumerable: false,
configurable: true
});
OutlierChartStore.prototype.yAxisLabelFormatter = function (value) {
return this.crossAxis1.unitTransformer(value);
};
OutlierChartStore.prototype.getOptions = function () {
var _this = this;
var option = merge({}, config, {
grid: this.getGrid(),
tooltip: {
padding: [4, 8],
formatter: function (params) {
return _this.tooltipFormatter(params, _this.chartStyleService.colors.fields, get(_this.themeOption, ['line', 'symbol']));
},
position: function (_point, _params, dom) {
dom.style.transform = 'translateZ(0)';
}
},
xAxis: {
name: this.mainAxisName,
type: 'category',
axisLabel: __assign(__assign({}, this.mainAxisLabelDisplayOption), { rotate: this.mainAxis.labelRotation, formatter: this.getMainAxisFormatter() }),
data: this.axisData,
nameGap: this.mainAxisNameGap
},
yAxis: {
name: this.crossAxisName,
type: this.crossAxis1.scale === "value" /* Value */ ? 'value' : 'log',
axisLabel: {
showMinLabel: this.crossAxis1.scale === "value" /* Value */,
formatter: this.yAxisLabelFormatter,
// 监听unit改变
unit: this.crossAxis1.unit
},
nameGap: this.crossAxisNameGap,
min: this.crossAxis1Min,
max: this.crossAxis1Max
},
series: this.series,
animation: this.isLowPerfDevice ? false : this.allSeriesLength <= 6000
});
option.yAxis = [
option.yAxis,
// 添加额外一个y轴用来绘制异常柱子
{
max: 1,
min: 0,
axisLabel: { show: false },
splitLine: { show: false },
axisLine: { show: false },
axisTick: { show: false }
}
];
return option;
};
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], OutlierChartStore.prototype, "chartDataset", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], OutlierChartStore.prototype, "baseSeries", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], OutlierChartStore.prototype, "originSeryList", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], OutlierChartStore.prototype, "lineColors", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], OutlierChartStore.prototype, "series", null);
__decorate([
computed,
__metadata("design:type", Array),
__metadata("design:paramtypes", [])
], OutlierChartStore.prototype, "legendSeriesData", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Number]),
__metadata("design:returntype", void 0)
], OutlierChartStore.prototype, "yAxisLabelFormatter", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], OutlierChartStore.prototype, "getOptions", null);
return OutlierChartStore;
}(TwoDChartStore));
export default OutlierChartStore;