@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
343 lines (342 loc) • 14.9 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);
};
import { computed } from 'mobx';
import { findIndex, first, sum, max, get, isArray } from 'lodash';
import OneDChartStore from '../stores/one-d';
import bind from '../../../utils/bind';
import { SubtotalType, ValueType, BarShape, LabelPosition } from '../../../constants/capsule-bar-style';
import { normalizeTimeFormat } from '../../../utils/normalizeTimeFormat';
import { OneDChartDrillDownService } from '../../../services/chart-drill-down';
import { OneDChartActionService } from '../../../services/chart-common-action';
import { yAxis, defaultBarWidth } from './constant';
var CapsuleBarChartStore = /** @class */ (function (_super) {
__extends(CapsuleBarChartStore, _super);
function CapsuleBarChartStore() {
return _super !== null && _super.apply(this, arguments) || this;
}
CapsuleBarChartStore.prototype.mainAxisFormatter = function (value) {
return this.isDateSeries ? normalizeTimeFormat(value) : value;
};
CapsuleBarChartStore.prototype.tooltipFormatter = function (params) {
var unitTransformer = this.chartStyleService.unitTransformer;
if (isArray(params)) {
var data = first(params);
var title = this.isDateSeries
? normalizeTimeFormat(data.name)
: data.name;
var detail = unitTransformer(data.value);
return ("<span style=\"font-size: 14px; display: inline-block; margin-bottom: 3px;\">" + title + "</span><br/>" +
("<span style=\"font-size: 14px;\">" + data.seriesName + ": " + detail + "</span>"));
}
};
Object.defineProperty(CapsuleBarChartStore.prototype, "bucketsValue", {
get: function () {
var bucket = this.currentBuckets.length
? first(this.currentBuckets).key
: '';
var bucketIndex = findIndex(this.fields, function (field) { return field.key === bucket; });
if (bucketIndex === -1) {
return [];
}
return this.dataset.rows.map(function (row) { return row[bucketIndex][0]; });
},
enumerable: false,
configurable: true
});
Object.defineProperty(CapsuleBarChartStore.prototype, "metricsData", {
get: function () {
var metric = this.currentMetrics.length
? first(this.currentMetrics).key
: '';
var metricIndex = findIndex(this.fields, function (field) { return field.key === metric; });
if (metricIndex === -1) {
return [];
}
return this.dataset.rows.map(function (row) { return row[metricIndex][0]; });
},
enumerable: false,
configurable: true
});
Object.defineProperty(CapsuleBarChartStore.prototype, "totalData", {
get: function () {
var _a = this.chartStyleService, subtotalType = _a.subtotalType, constantValue = _a.constantValue;
if (subtotalType === SubtotalType.Sum) {
return Array(this.metricsData.length).fill(sum(this.metricsData));
}
if (subtotalType === SubtotalType.Max) {
return Array(this.metricsData.length).fill(max(this.metricsData));
}
return Array(this.metricsData.length).fill(constantValue);
},
enumerable: false,
configurable: true
});
Object.defineProperty(CapsuleBarChartStore.prototype, "y2Data", {
get: function () {
var _this = this;
var _a = this.chartStyleService, valueTypes = _a.valueTypes, unitTransformer = _a.unitTransformer;
if (!this.metricsData.length || valueTypes.length === 0) {
return [];
}
return this.metricsData.map(function (data) {
var arr = [];
if (valueTypes.includes(ValueType.Current)) {
arr.push(unitTransformer(data));
}
if (valueTypes.includes(ValueType.Rate)) {
arr.push("(" + ((data * 100) / _this.totalData[0]).toFixed(2) + "%)");
}
return arr.join(' ');
});
},
enumerable: false,
configurable: true
});
Object.defineProperty(CapsuleBarChartStore.prototype, "yAxis", {
get: function () {
var _a = this.chartStyleService, valueTypes = _a.valueTypes, _b = _a.dataFont, fontSize = _b.fontSize, color = _b.color, _c = _a.labelFont, labelFontSize = _c.fontSize, labelColor = _c.color, labelPosition = _a.labelPosition;
var yAxisStyle = get(this.themeOption, [
'categoryAxis',
'axisLabel',
'textStyle'
]);
return [
__assign(__assign({}, yAxis), { type: 'category', data: this.bucketsValue, triggerEvent: true, axisLabel: {
show: labelPosition === LabelPosition.Left,
inside: false,
fontFamily: yAxisStyle.fontFamily,
fontSize: labelFontSize || yAxisStyle.fontSize,
color: labelColor || yAxisStyle.color,
margin: 10,
interval: 0,
formatter: this.mainAxisFormatter
} }),
__assign(__assign({}, yAxis), { show: valueTypes.length > 0, data: this.y2Data, axisLabel: {
fontFamily: yAxisStyle.fontFamily,
fontSize: fontSize || yAxisStyle.fontSize,
color: color || yAxisStyle.color,
margin: 10
} })
];
},
enumerable: false,
configurable: true
});
Object.defineProperty(CapsuleBarChartStore.prototype, "data", {
get: function () {
var _this = this;
return this.bucketsValue.map(function (bucket, index) { return ({
name: bucket,
value: _this.metricsData[index]
}); });
},
enumerable: false,
configurable: true
});
Object.defineProperty(CapsuleBarChartStore.prototype, "series", {
get: function () {
var _this = this;
var _a = this.chartStyleService, barColor = _a.barColor, barShape = _a.barShape, labelPosition = _a.labelPosition, _b = _a.labelFont, fontSize = _b.fontSize, color = _b.color;
var showLabel = labelPosition === LabelPosition.Top;
var isCapsule = barShape === BarShape.Capsule;
var shadowColor = get(this.themeOption, [
'bar',
'capsuleBar',
'backgroundBarColor'
]);
var itemStyle = {
color: shadowColor,
borderColor: shadowColor,
borderWidth: 0,
barBorderRadius: isCapsule ? 100 : 0
};
return [
{
name: 'base',
type: 'bar',
yAxisIndex: 1,
barGap: '-100%',
barWidth: defaultBarWidth + 2,
barCategoryGap: '20%',
data: this.totalData,
itemStyle: {
normal: itemStyle,
emphasis: itemStyle // 不加的话hover时亮色主题背景色会没掉
},
//设置鼠标样式
cursor: this.chartCanClick ? 'pointer' : 'default',
silent: this.chartCanClick ? false : true
},
{
name: get(first(this.currentMetrics), 'key') || '',
type: 'bar',
yAxisIndex: 0,
barWidth: defaultBarWidth,
data: this.data,
itemStyle: {
normal: {
barBorderRadius: isCapsule ? 100 : 0,
color: barColor ||
get(this.themeOption, ['bar', 'color', 0]) ||
get(this.themeOption, ['color', 0])
}
},
label: {
normal: {
show: showLabel,
color: color,
position: [10, -15],
textStyle: {
fontSize: fontSize
},
formatter: function (series) {
return _this.isDateSeries
? normalizeTimeFormat(series.name)
: series.name;
}
}
},
//设置鼠标样式
cursor: this.chartCanClick ? 'pointer' : 'default',
silent: this.chartCanClick ? false : true
}
];
},
enumerable: false,
configurable: true
});
Object.defineProperty(CapsuleBarChartStore.prototype, "options", {
get: function () {
var _a = this.chartStyleService, labelPosition = _a.labelPosition, valueTypes = _a.valueTypes, labelWidth = _a.labelWidth, valueWidth = _a.valueWidth;
return {
grid: {
left: labelPosition === LabelPosition.Left ? labelWidth + "%" : '5px',
right: valueTypes.length === 0 ? 0 : valueWidth + "%",
top: 0,
bottom: 0
},
xAxis: {
show: false,
max: 'dataMax'
},
yAxis: this.yAxis,
series: this.series,
tooltip: {
position: function (_point, _params, dom) {
dom.style.transform = 'translateZ(0)';
},
trigger: 'axis',
axisPointer: {
type: 'none'
},
formatter: this.tooltipFormatter
}
};
},
enumerable: false,
configurable: true
});
CapsuleBarChartStore.prototype.handleDrillDown = function (params) {
if (params.seriesName === 'base') {
return;
}
this.onAction({
mainAxisValue: params.name,
mainAxisField: get(this.currentBuckets, [0, 'key']),
metricValue: params.data && params.data.value,
metricField: get(this.currentMetrics, [0, 'key']),
fields: this.fields
}, OneDChartDrillDownService, OneDChartActionService);
};
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], CapsuleBarChartStore.prototype, "mainAxisFormatter", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], CapsuleBarChartStore.prototype, "tooltipFormatter", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], CapsuleBarChartStore.prototype, "bucketsValue", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], CapsuleBarChartStore.prototype, "metricsData", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], CapsuleBarChartStore.prototype, "totalData", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], CapsuleBarChartStore.prototype, "y2Data", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], CapsuleBarChartStore.prototype, "yAxis", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], CapsuleBarChartStore.prototype, "data", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], CapsuleBarChartStore.prototype, "series", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], CapsuleBarChartStore.prototype, "options", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], CapsuleBarChartStore.prototype, "handleDrillDown", null);
return CapsuleBarChartStore;
}(OneDChartStore));
export default CapsuleBarChartStore;