@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
252 lines (251 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 { find, get, includes } from 'lodash';
import { EPoint, ILineMarkPointType } from '../../../../constants/chart-style';
import bind from '../../../../utils/bind';
import BaseLineChartStore from '../../LineChart/store';
import { toLineSeries } from '../../LineChart/transform';
import { getSerieItemStyle } from '../../LineChart/optionConfig';
import { getSeriesFromDataset } from '../../transforms/two-d';
import { updateSeriesDataByBound, getBaseLineBar2Series } from '../../LineChart/transform';
var LineY2ChartStore = /** @class */ (function (_super) {
__extends(LineY2ChartStore, _super);
function LineY2ChartStore() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(LineY2ChartStore.prototype, "baseShowingSeries", {
get: function () {
var _this = this;
var _a = this.notFormatSeries.series, series = _a === void 0 ? [] : _a;
var _b = this.chartStyleService, _c = _b.crossAxis1, y1MetricFields = _c.fields, y1FieldsGetter = _c.fieldsGetter, y1EmptyValueMode = _c.yEmptyValueMode, unitTransformer = _c.unitTransformer, _d = _b.crossAxis2, y2MetricFields = _d.fields, y2FieldsGetter = _d.fieldsGetter, y2EmptyValueMode = _d.yEmptyValueMode, y2UnitTransformer = _d.unitTransformer, smoothLine = _b.smoothLine, point = _b.point, markPointType = _b.markPointType;
var leftFields = __spread(y1MetricFields, ((y1FieldsGetter === null || y1FieldsGetter === void 0 ? void 0 : y1FieldsGetter(this.originDataset.fields)) || []));
var rightFields = __spread(y2MetricFields, ((y2FieldsGetter === null || y2FieldsGetter === void 0 ? void 0 : y2FieldsGetter(this.originDataset.fields)) || []));
var allFields = __spread(leftFields, rightFields);
var baseShowingSeries = series.filter(function (e) { return includes(allFields, e.metricName) || true; });
baseShowingSeries.forEach(function (sery) {
var lineThemeOption = get(_this.themeOption, 'line');
var type = point.type, size = point.size;
var pointType = type || get(lineThemeOption, 'showSymbol');
// 设置active项icon样式
if (pointType !== EPoint.None) {
sery['showSymbol'] = true;
sery['symbol'] = pointType;
sery['symbolSize'] =
size || size === 0 ? size : get(lineThemeOption, 'symbolSize');
}
else {
sery['showSymbol'] = false;
//默认给一个圆形
sery['symbol'] = EPoint.Circle;
}
sery['smooth'] = smoothLine;
// 设置空值模式
// 左y轴
if (includes(leftFields, sery.metricName) &&
y1EmptyValueMode === "line" /* Line */) {
sery['connectNulls'] = true;
}
// 右y轴
if (includes(rightFields, sery.metricName) &&
y2EmptyValueMode === "line" /* Line */) {
sery['connectNulls'] = true;
}
// 设置yAxisIndex
if (includes(rightFields, sery.metricName)) {
sery['yAxisIndex'] = 1;
}
var showLineLabel = markPointType === ILineMarkPointType.Show;
sery['label'] = {
position: 'top',
distance: 0,
show: showLineLabel,
color: 'inherit',
formatter: function (params) {
return includes(rightFields, sery.metricName)
? y2UnitTransformer(params.value)
: unitTransformer(params.value);
}
};
// 显示最大值最小值
sery['markPoint'] = {
label: {
show: markPointType === ILineMarkPointType.MinAndMax,
color: '#fff'
},
data: markPointType === ILineMarkPointType.MinAndMax
? [{ type: 'min' }, { type: 'max' }]
: []
};
//设置鼠标样式
sery['cursor'] = _this.chartCanClick ? 'pointer' : 'default';
sery['silent'] = _this.chartCanClick ? false : true;
});
return baseShowingSeries;
},
enumerable: false,
configurable: true
});
Object.defineProperty(LineY2ChartStore.prototype, "showingSeries", {
get: function () {
var _this = this;
var series = __spread(this.baseShowingSeries);
series.forEach(function (sery, index) {
var _a = _this.chartStyleService, point = _a.point, displayColors = _a.displayColors;
var displayColor = find(displayColors, function (displayColor) { return displayColor.name === sery.name; });
var defaultColor = _this.lineColors[index % _this.lineColors.length];
var finalColor = displayColor ? displayColor.color : defaultColor;
sery['itemStyle'] = getSerieItemStyle(point, finalColor);
});
return series;
},
enumerable: false,
configurable: true
});
Object.defineProperty(LineY2ChartStore.prototype, "baseSeries", {
// 不需要自动获取y轴，
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 getSeriesFromDataset(dataset, colorFields, mainAxisField, crossAxisFields, displayFields, this.showMetricInName);
},
enumerable: false,
configurable: true
});
Object.defineProperty(LineY2ChartStore.prototype, "notFormatSeries", {
get: function () {
var _a = this.chartStyleService, _b = _a.crossAxis1, y1Scale = _b.scale, y1EmptyValueMode = _b.yEmptyValueMode, _c = _a.crossAxis2, y2EmptyValueMode = _c.yEmptyValueMode, y2Scale = _c.scale;
var data = this.baseSeries;
var data2 = this.rightLineSeries;
var leftLineSeries = toLineSeries(data, y1EmptyValueMode === "0" /* Zero */);
var rightLineSeries = toLineSeries(data2.current, y2EmptyValueMode === "0" /* Zero */);
if (y1Scale === "log" /* Log */) {
this.processSeriesForLog(leftLineSeries);
}
if (y2Scale === "log" /* Log */) {
this.processSeriesForLog(rightLineSeries);
}
var series = __spread(leftLineSeries, rightLineSeries);
return { series: series };
},
enumerable: false,
configurable: true
});
Object.defineProperty(LineY2ChartStore.prototype, "series", {
get: function () {
var _a = this.chartStyleService, baseLine = _a.baseLine, _b = _a.mainAxis, field = _b.field, type = _b.type, y1EmptyValueMode = _a.crossAxis1.yEmptyValueMode, y2EmptyValueMode = _a.crossAxis2.yEmptyValueMode;
if (baseLine.length !== 0) {
var _c = getBaseLineBar2Series(baseLine, this.chartContainerService.chartConditionService.originDataset, get(this.themeOption, ['line', 'thresholdColor']),
// chartType,
field, y1EmptyValueMode === "0" /* Zero */, y2EmptyValueMode === "0" /* Zero */, type === "time" /* Time */), numberRightSeries = _c.numberRightSeries, numberLeftSeries = _c.numberLeftSeries, dynamicSeries = _c.dynamicSeries;
updateSeriesDataByBound(this.showingSeries, baseLine, dynamicSeries, function (data, matchLine) {
return __assign(__assign({}, data), { itemStyle: {
color: matchLine.color
} });
});
var currentLineMetrics = this.chartStyleService.crossAxis2.fields;
return currentLineMetrics.length > 0
? __spread(this.showingSeries, [
numberLeftSeries,
numberRightSeries
], dynamicSeries) : __spread(this.showingSeries, [numberLeftSeries], dynamicSeries);
}
return this.showingSeries;
},
enumerable: false,
configurable: true
});
LineY2ChartStore.prototype.getOptions = function () {
var baseLineOption = _super.prototype.getOptions.call(this);
var currentLineMetrics = this.chartStyleService.crossAxis2.fields;
var crossAxisOptions = __spread([
this.lineCrossAxisOptions
], (currentLineMetrics.length > 0 ? [this.crossAxis2Options] : []));
var option = __assign(__assign({}, baseLineOption), { yAxis: crossAxisOptions });
return option;
};
__decorate([
computed,
__metadata("design:type", Array),
__metadata("design:paramtypes", [])
], LineY2ChartStore.prototype, "baseShowingSeries", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], LineY2ChartStore.prototype, "showingSeries", null);
__decorate([
computed,
__metadata("design:type", Array),
__metadata("design:paramtypes", [])
], LineY2ChartStore.prototype, "baseSeries", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], LineY2ChartStore.prototype, "notFormatSeries", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], LineY2ChartStore.prototype, "series", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], LineY2ChartStore.prototype, "getOptions", null);
return LineY2ChartStore;
}(BaseLineChartStore));
export default LineY2ChartStore;