@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
376 lines (375 loc) • 15.7 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;
};
import { computed, observable, action } from 'mobx';
import { min, get, merge, isNumber, find, isNull } from 'lodash';
import { EChartConditionType } from '@qn-pandora/app-sdk';
import bind from '../../../utils/bind';
import { ChartType, ELabelType } from '../../../constants/chart-style';
import { normalizeTimeFormat } from '../../../utils/normalizeTimeFormat';
import OneDLegendChartStore from '../stores/one-d-legend';
import { defaultConfig } from './constants';
var PieChartStore = /** @class */ (function (_super) {
__extends(PieChartStore, _super);
function PieChartStore() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.currentPlaySlice = null;
_this.playIndex = -1;
return _this;
}
Object.defineProperty(PieChartStore.prototype, "isBucketPie", {
get: function () {
return ([
ChartType.PieBucket,
ChartType.PieRingBucket,
ChartType.PieRoseBucket
].indexOf(this.chartStyleService.chartType) > -1);
},
enumerable: false,
configurable: true
});
Object.defineProperty(PieChartStore.prototype, "legendSeriesData", {
get: function () {
var _this = this;
var data = get(this.series, [0, 'data']) || [];
var colors = this.chartStyleService.displayColors;
var defaultColor = get(this.themeOption, ['pie', 'color']) || this.themeOption.color;
var ret = data.map(function (item, index) {
var resColor = find(colors, function (color) { return color.name === item.name; });
var color = (resColor === null || resColor === void 0 ? void 0 : resColor.color) ||
get(item, ['itemStyle', 'normal', 'color']) ||
defaultColor[index % defaultColor.length];
return {
title: get(_this.series, [0, 'name']),
name: item.name,
data: {
current: item.value ? [item.value] : []
},
metricName: _this.isBucketPie
? get(_this.currentMetrics, [0, 'name'])
: '',
color: color
};
});
return ret;
},
enumerable: false,
configurable: true
});
Object.defineProperty(PieChartStore.prototype, "normalPieCenter", {
get: function () {
var adjustedSeries = this.adjustChartPosition(this.series);
return get(adjustedSeries, [0, 'center']) || [];
},
enumerable: false,
configurable: true
});
Object.defineProperty(PieChartStore.prototype, "totalOfCurrentData", {
get: function () {
var currentData = get(this.series, [0, 'data']) || [];
return this.getTotalValue(currentData.map(function (item) { return item.value; }));
},
enumerable: false,
configurable: true
});
PieChartStore.prototype.getTotalValue = function (values) {
return values.reduce(function (sum, current) { return sum + current; }, 0);
};
PieChartStore.prototype.setCurrentPlaySlice = function (currentPlaySlice) {
this.currentPlaySlice = currentPlaySlice;
};
PieChartStore.prototype.setPlayIndex = function (index) {
this.playIndex = index;
};
PieChartStore.prototype.transformSeriesTooltipName = function (name) {
return this.isDateSeries && name !== '其他'
? normalizeTimeFormat(name)
: name.length > 30
? name.slice(0, 30) + "..."
: name;
};
PieChartStore.prototype.transformLabel = function (params, labelTypes) {
var name = this.isDateSeries && params.name !== '其他'
? normalizeTimeFormat(params.name)
: params.name.length > 30
? params.name.slice(0, 30) + "..."
: params.name;
var value = this.chartStyleService.unitTransformer(params.value);
var percent = params.percent;
var fieldStr = labelTypes.includes(ELabelType.Field) ? "" + name : '';
var hasNumber = labelTypes.includes(ELabelType.Number);
var valueStr = hasNumber ? "" + value : '';
var percentStr = labelTypes.includes(ELabelType.Percent)
? hasNumber
? "(" + percent + "%)"
: percent + "%"
: '';
return "" + fieldStr + ((hasNumber || percentStr) && fieldStr ? ':' : '') + " " + valueStr + " " + percentStr;
};
Object.defineProperty(PieChartStore.prototype, "tooltip", {
get: function () {
var _this = this;
var tooltipAppendToBody = this.chartStyleService.tooltipAppendToBody;
return {
show: true,
confine: false,
appendToBody: tooltipAppendToBody === false ? false : true,
transitionDuration: 0,
position: function (point, _params, dom, _rect, size) {
dom.style.transform = 'translateZ(0)';
var position = _this.getToolTipPosition(point, size.contentSize);
if (!isNull(position)) {
return position;
}
},
formatter: function (params) {
if (params) {
var otherItem = '';
var compareDelta = '';
var seriesNameTitle = params.seriesName || compareDelta
? "\n <span style=\"font-size: 14px; display: inline-block; margin-bottom: 3px;lineHeight:22px;\">" + params.seriesName + compareDelta + "</span><br />"
: '';
return "\n " + seriesNameTitle + "\n <span style=\"font-size: 12px;lineHeight:18px;\">\n <span>" + params.name + ":</span> " + _this.chartStyleService.unitTransformer(params.value) + " (" + params.percent + "%)\n </span><br />\n " + otherItem + "\n ";
}
}
};
},
enumerable: false,
configurable: true
});
Object.defineProperty(PieChartStore.prototype, "metrics", {
get: function () {
var _this = this;
var currentMetrics = this.chartStyleService.currentMetrics;
if (currentMetrics.length) {
return currentMetrics.filter(function (metric) {
return _this.fields.find(function (field) { return field.key === metric; });
});
}
return this.fields
.filter(function (field) { return field.type === EChartConditionType.Metric; })
.map(function (field) { return field.key; });
},
enumerable: false,
configurable: true
});
PieChartStore.prototype.adjustChartPosition = function (series) {
var labelTypes = this.chartStyleService.labelTypes;
var MAX_RADIUS = 120;
var HOVER_SPACE = 9;
var minRadius = 0;
var positionX = ['50%', '50%'];
var positionY = ['50%', '50%'];
var maxRadius = '50%';
if (!this.chartWidth || !this.chartHeight) {
return series.map(function (item, i) {
return __assign(__assign({}, item), { radius: [minRadius, maxRadius], center: [positionX[i], positionY[i]] });
});
}
if (this.echartInst) {
var scaleY = 0.95;
var availableHeight_1 = this.chartHeight;
positionY = positionY.map(function () { return availableHeight_1 * 0.5; });
// 标签状态开启显示时
if (labelTypes.length) {
positionY = positionY.map(function (y) { return y + 10; });
scaleY = 0.6;
}
maxRadius = min([
(this.chartHeight - positionY[0]) * scaleY,
this.chartWidth * 0.5 * (1 / series.length) - HOVER_SPACE
]);
}
// 饼图外环的半径大小
maxRadius =
maxRadius > MAX_RADIUS || !isNumber(maxRadius) ? MAX_RADIUS : maxRadius;
return series.map(function (item, i) {
return __assign(__assign({}, item), { radius: [minRadius, maxRadius], center: [positionX[i], positionY[i]] });
});
};
Object.defineProperty(PieChartStore.prototype, "chartOptions", {
get: function () {
return merge({}, defaultConfig, {
tooltip: this.tooltip,
series: this.series
});
},
enumerable: false,
configurable: true
});
/**
* @point 当前鼠标的位置，相对于echarts图表
* @contentSize 弹窗的size
*/
PieChartStore.prototype.getToolTipPosition = function (point, contentSize) {
var currentRect = this.getCurrentDomRect();
var padding = 5;
if (!currentRect)
return currentRect;
var left = currentRect.left, top = currentRect.top;
var currentX = left + point[0];
var currentY = top + point[1];
var screenWidth = window.screen.width;
var screenHeight = window.screen.height;
var _a = __read(contentSize, 2), contentWidth = _a[0], contentHeight = _a[1];
var x;
var y;
// 计算x, 优先左侧
if (contentWidth + padding > currentX) {
if (contentWidth <= screenWidth - contentWidth - padding) {
x = currentX + padding;
}
else {
x = currentX - contentWidth / 2;
}
}
else {
x = currentX - padding - contentWidth;
}
// 计算y , 优先底部
if (currentY + contentHeight + padding > screenHeight) {
if (currentY - padding - contentHeight > 0) {
y = currentY - padding - contentHeight / 2;
}
else {
y = currentY - contentHeight / 2;
}
}
else {
y = currentY + padding;
}
if (!x || !y) {
return null;
}
return [x - left, y - top];
};
__decorate([
observable.ref,
__metadata("design:type", Object)
], PieChartStore.prototype, "currentPlaySlice", void 0);
__decorate([
observable,
__metadata("design:type", Number)
], PieChartStore.prototype, "playIndex", void 0);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], PieChartStore.prototype, "isBucketPie", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], PieChartStore.prototype, "legendSeriesData", null);
__decorate([
computed,
__metadata("design:type", Array),
__metadata("design:paramtypes", [])
], PieChartStore.prototype, "normalPieCenter", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], PieChartStore.prototype, "totalOfCurrentData", null);
__decorate([
bind,
action,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], PieChartStore.prototype, "setCurrentPlaySlice", null);
__decorate([
bind,
action,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Number]),
__metadata("design:returntype", void 0)
], PieChartStore.prototype, "setPlayIndex", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [String]),
__metadata("design:returntype", void 0)
], PieChartStore.prototype, "transformSeriesTooltipName", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object, Array]),
__metadata("design:returntype", void 0)
], PieChartStore.prototype, "transformLabel", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], PieChartStore.prototype, "tooltip", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], PieChartStore.prototype, "metrics", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Array]),
__metadata("design:returntype", void 0)
], PieChartStore.prototype, "adjustChartPosition", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], PieChartStore.prototype, "chartOptions", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Array, Array]),
__metadata("design:returntype", void 0)
], PieChartStore.prototype, "getToolTipPosition", null);
return PieChartStore;
}(OneDLegendChartStore));
export default PieChartStore;