@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
363 lines (362 loc) • 16.4 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, observable } from 'mobx';
import { merge, find, get, isUndefined, isArray } from 'lodash';
import { colorMap } from '@qn-pandora/pandora-app-component/es/components/LegendColorPanel';
import { isMobileDevice } from '../../../utils/env';
import { ChartType } from '../../../constants/chart-style';
import TwoDChartStore from '../stores/two-d';
import { getBaseLineSeries, updateSeriesDataByBound } from '../LineChart/transform';
import { updateSeriesData } from '../transforms/two-d';
import defaultConfig, { mainAxis, TriggerType } from './defaultChartConfig';
import { toBarSeries } from './transform';
var BaseBarChartStore = /** @class */ (function (_super) {
__extends(BaseBarChartStore, _super);
function BaseBarChartStore(getProps) {
var _this = _super.call(this, getProps) || this;
_this.trigger = TriggerType.Axis;
return _this;
}
Object.defineProperty(BaseBarChartStore.prototype, "defaultBaselineColor", {
get: function () {
return get(this.themeOption, ['bar', 'thresholdColor']);
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseBarChartStore.prototype, "notFormatSeries", {
get: function () {
var _a = this.chartStyleService, y1Scale = _a.crossAxis1.scale, mainAxisType = _a.mainAxis.type, isCompareEnable = _a.compare.isCompareEnable, stack = _a.stack;
var data = this.baseSeries;
var barSeries = toBarSeries(data, mainAxisType === "time" /* Time */);
if (y1Scale === "log" /* Log */) {
this.processSeriesForLog(barSeries);
}
if (stack) {
barSeries.forEach(function (sery, index) {
// 设置堆叠模式
if (isCompareEnable) {
sery['stack'] = index % 2 === 0 ? 'current' : 'compare';
}
else {
sery['stack'] = 'stacked';
}
});
}
return { series: __spread(barSeries) };
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseBarChartStore.prototype, "barMainAxisOptions", {
get: function () {
return merge({}, mainAxis, this.mainAxisOptions, {
name: this.mainAxisName,
type: this.mainAxis.type,
axisLabel: __assign(__assign({}, this.mainAxisLabelDisplayOption), { rotate: this.mainAxis.labelRotation, formatter: this.getMainAxisFormatter(), hideOverlap: true }),
inverse: false,
data: this.axisData,
nameGap: this.barMainAxisNameGap,
min: this.mainAxisMin,
max: this.mainAxisMax
});
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseBarChartStore.prototype, "commonOptions", {
get: function () {
var _this = this;
var _a = this.chartStyleService, tooltipAppendToBody = _a.tooltipAppendToBody, fields = _a.colors.fields;
var option = merge({}, defaultConfig, {
grid: this.getGrid(),
tooltip: {
confine: false,
transitionDuration: 0,
appendToBody: tooltipAppendToBody === false ? false : true,
formatter: function (params) {
return _this.tooltipFormatter(params, fields, get(_this.themeOption, ['bar', 'symbol']));
},
position: function (_point, _params, dom, _, size) {
dom.style.transform = 'translateZ(0)';
var x = _point[0] + 10;
var y = _point[1] + 10;
if (_point[0] > size.viewSize[0] / 2) {
// 右侧，展示在左侧
x =
_point[0] - size.contentSize[0] < 0
? 5
: _point[0] - size.contentSize[0];
}
if (_point[1] > size.viewSize[1] / 2) {
// 下侧，展示在上侧
y =
_point[1] - size.contentSize[1] < 0
? 5
: _point[1] - size.contentSize[1];
}
return [x, y];
}
},
series: updateSeriesData(this.series, this.barMainAxisOptions),
animation: this.isLowPerfDevice ? false : this.allSeriesLength <= 1000
});
return option;
},
enumerable: false,
configurable: true
});
BaseBarChartStore.prototype.getOptions = function () {
var showToolBox = this.chartStyleService.showToolBox;
var option = merge({}, this.commonOptions, {
xAxis: this.barMainAxisOptions,
yAxis: this.barCrossAxis1Options,
dataZoom: !isMobileDevice() &&
showToolBox && [{ xAxisIndex: 0, yAxisIndex: 'none' }],
brush: !showToolBox && [
{ xAxisIndex: 0, yAxisIndex: 'none', transformable: false }
]
});
return option;
};
Object.defineProperty(BaseBarChartStore.prototype, "barCrossAxis1Options", {
get: function () {
return merge({}, this.crossAxis1Options, {
nameGap: this.barCrossAxis1NameGap
});
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseBarChartStore.prototype, "series", {
get: function () {
var _this = this;
var _a = this.chartStyleService, _b = _a.crossAxis1, unitTransformer = _b.unitTransformer, y1EmptyValueMode = _b.yEmptyValueMode, showBarLabel = _a.showBarLabel, baseLine = _a.baseLine, chartType = _a.chartType, mainAxis = _a.mainAxis, colorMode = _a.colorMode;
var showingSeries = this.showingSeries;
var themeColors = get(this.themeOption, 'color');
var typeColors = get(this.themeOption, ['bar', 'color']);
var colorModeColors = get(colorMap, colorMode);
var displayColors = this.chartStyleService.displayColors;
showingSeries.forEach(function (sery, index) {
var displayColor = find(displayColors, function (displayColor) { return displayColor.name === sery.name; });
var defaultColors = colorModeColors || typeColors || themeColors;
sery['itemStyle'] = {
normal: {
color: displayColor
? displayColor.color
: defaultColors[index % defaultColors.length]
}
};
// 设置label
var labelPosition = showBarLabel === true ? 'inside' : showBarLabel;
sery['label'] = {
position: labelPosition,
distance: 0,
show: !!showBarLabel,
color: labelPosition === 'inside' ? '#fff' : 'inherit',
formatter: function (params) { return unitTransformer(params.value); }
};
// 设置柱状图最大宽度
sery['barMaxWidth'] = 40;
// 设置active项icon样式
sery['symbol'] = 'circle';
sery['symbolSize'] = 4;
sery['showSymbol'] = true;
//设置鼠标样式
sery['cursor'] = _this.chartCanClick ? 'pointer' : 'default';
sery['silent'] = _this.chartCanClick ? false : true;
});
if (baseLine.length) {
var yBaseLine = chartType !== ChartType.VerticalBar &&
chartType !== ChartType.StackVerticalBar &&
chartType !== ChartType.PercentageVerticalBar;
var _c = getBaseLineSeries(baseLine, this.chartContainerService.chartConditionService.originDataset, get(this.themeOption, ['bar', 'thresholdColor']), chartType, mainAxis.field, y1EmptyValueMode === "0" /* Zero */, mainAxis.type === "time" /* Time */, yBaseLine), numberSeries = _c.numberSeries, dynamicSeries = _c.dynamicSeries;
updateSeriesDataByBound(showingSeries, baseLine, dynamicSeries, function (data, matchLine) {
return __assign(__assign({}, data), { itemStyle: {
color: matchLine.color
} });
});
return __spread(showingSeries, [numberSeries], dynamicSeries);
}
return __spread(showingSeries);
},
enumerable: false,
configurable: true
});
BaseBarChartStore.prototype.pushToChartData = function (data, currentMetrics, chartData) {
if (data.current) {
data.current.forEach(function (sery, index) {
var metricName = sery.length ? sery[0].metric.metricName : '';
if (metricName && currentMetrics.indexOf(metricName) !== -1) {
chartData.current.push(sery);
if (data.compare && data.compare[index]) {
chartData.compare.push(data.compare[index]);
}
}
});
}
};
Object.defineProperty(BaseBarChartStore.prototype, "normalLegendSeriesData", {
get: function () {
var _this = this;
var displayColors = this.chartStyleService.displayColors;
return this.series
.filter(function (item) { return isUndefined(item.markLine); })
.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) {
// 注意： 如果 x 轴为time 类型, 值是数组类型，[time,value]
if (isArray(item.value)) {
return item.value.length === 2
? item.value[1]
: null;
}
return item.value;
})
},
fieldType: series.fieldType
};
});
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseBarChartStore.prototype, "legendSeriesData", {
get: function () {
return this.normalLegendSeriesData;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseBarChartStore.prototype, "barMainAxisNameGap", {
get: function () {
return this.mainAxisNameGap;
},
enumerable: false,
configurable: true
});
Object.defineProperty(BaseBarChartStore.prototype, "barCrossAxis1NameGap", {
get: function () {
return this.crossAxisNameGap;
},
enumerable: false,
configurable: true
});
__decorate([
observable,
__metadata("design:type", Object)
], BaseBarChartStore.prototype, "trigger", void 0);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], BaseBarChartStore.prototype, "defaultBaselineColor", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], BaseBarChartStore.prototype, "notFormatSeries", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], BaseBarChartStore.prototype, "barMainAxisOptions", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], BaseBarChartStore.prototype, "commonOptions", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], BaseBarChartStore.prototype, "barCrossAxis1Options", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], BaseBarChartStore.prototype, "series", null);
__decorate([
computed,
__metadata("design:type", Array),
__metadata("design:paramtypes", [])
], BaseBarChartStore.prototype, "normalLegendSeriesData", null);
__decorate([
computed,
__metadata("design:type", Array),
__metadata("design:paramtypes", [])
], BaseBarChartStore.prototype, "legendSeriesData", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], BaseBarChartStore.prototype, "barMainAxisNameGap", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], BaseBarChartStore.prototype, "barCrossAxis1NameGap", null);
return BaseBarChartStore;
}(TwoDChartStore));
export default BaseBarChartStore;