@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
243 lines (242 loc) • 11.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);
};
import { computed } from 'mobx';
import { findIndex, get, max, isNumber, min, toNumber, find, uniq } from 'lodash';
import bind from '../../../utils/bind';
import { ESizeType } from '../../../constants/chart-style';
import BaseScatterChartStore from '../stores/base-scatter';
var BubbleChartStore = /** @class */ (function (_super) {
__extends(BubbleChartStore, _super);
function BubbleChartStore() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(BubbleChartStore.prototype, "sizeField", {
get: function () {
var sizeField = this.chartStyleService.sizeField;
return sizeField.length ? sizeField[0] : '';
},
enumerable: false,
configurable: true
});
Object.defineProperty(BubbleChartStore.prototype, "sizeFieldIndex", {
get: function () {
var _this = this;
return findIndex(this.dataset.fields, function (field) { return field.key === _this.sizeField; });
},
enumerable: false,
configurable: true
});
BubbleChartStore.prototype.getPoint = function (line) {
var _this = this;
var fields = this.dataset.fields;
var indexX = findIndex(fields, function (field) {
return field.key === _this.xField;
});
var indexY = findIndex(fields, function (field) { return field.key === _this.yField; });
var xValue = indexX !== -1 ? line[indexX][0] : '';
var yValue = indexY !== -1 ? line[indexY][0] : '';
var sizeFieldValue = this.sizeFieldIndex !== -1 ? line[this.sizeFieldIndex][0] : '';
return [xValue, yValue, sizeFieldValue];
};
BubbleChartStore.prototype.measureSymbolSize = function (value, minSize, maxSize, sizeType, minDiameter, maxDiameter) {
var _this = this;
if (this.sizeField) {
var data = this.dataset.rows
.map(function (line) { return get(line, [_this.sizeFieldIndex, 0]); })
.filter(function (item) { return isNumber(item); });
var maxItemValue = max(data) || 0;
var minItemValue = min(data) || 0;
var maxDiameterValue = maxDiameter || maxDiameter === 0 ? maxDiameter : minDiameter || 0;
var minDiameterValue = minDiameter || minDiameter === 0 ? minDiameter : maxDiameter || 0;
var maxVal = sizeType === ESizeType.Dynamic ? maxItemValue : maxDiameterValue;
var minVal = sizeType === ESizeType.Dynamic ? minItemValue : minDiameterValue;
if (maxVal - minVal) {
var interval = (maxSize - minSize) / (maxVal - minVal);
return minSize + (value - minVal) * interval;
}
else {
return minSize;
}
}
else {
return minSize;
}
};
Object.defineProperty(BubbleChartStore.prototype, "symbolSize", {
get: function () {
var _this = this;
var _a = this.chartStyleService, minSize = _a.minSize, maxSize = _a.maxSize, showZero = _a.showZero, minDiameter = _a.minDiameter, maxDiameter = _a.maxDiameter, sizeType = _a.sizeType;
return function (_, params) {
var dataIndex = params.dataIndex, seriesName = params.seriesName;
var item = _this.getDataViaSeriesName(dataIndex, seriesName);
var value = _this.sizeField === '' ? toNumber(get(item, 1)) : toNumber(get(item, 2));
var symbolSize = _this.measureSymbolSize(value, minSize, maxSize, sizeType, minDiameter, maxDiameter);
return value === 0 && showZero === "off" /* Off */ ? 0 : symbolSize;
};
},
enumerable: false,
configurable: true
});
BubbleChartStore.prototype.toScatterSeries = function (series) {
var _this = this;
var displayColors = this.chartStyleService.displayColors;
return series.map(function (data, index) {
var themeColor = get(_this.themeOption, ['bubble', 'color']) ||
get(_this.themeOption, 'color');
var defaultColor = get(themeColor, index % themeColor.length);
var displayColor = !data.name && displayColors.length === 1 && displayColors[0].name === ''
? displayColors[0]
: find(displayColors, function (color) { return color.name === data.name; });
// 当颜色是rgba形式,变成rgb
var regex = /^rgba\((\d+),\s*(\d+),\s*(\d+),\s*(\d+\.\d+)\)$/;
var rgb = displayColor && displayColor.color.indexOf('rgba') !== -1
? displayColor.color.replace(regex, 'rgb($1,$2,$3)')
: '';
return {
fieldType: data.fieldType,
type: 'scatter',
data: data.data,
name: data.name,
itemStyle: {
color: displayColor ? displayColor.color : defaultColor,
borderColor: rgb
? rgb
: displayColor
? displayColor.color
: defaultColor,
borderWidth: 1,
shadowBlur: 0
},
symbolSize: _this.symbolSize,
//设置鼠标样式
cursor: _this.chartCanClick ? 'pointer' : 'default'
};
});
};
BubbleChartStore.prototype.getOptions = function () {
return __assign(__assign({}, this.baseOptions), { xAxis: __assign(__assign({}, this.baseOptions.xAxis), { axisPointer: {
show: false
} }), yAxis: __assign(__assign({}, this.baseOptions.yAxis), { axisPointer: {
show: false
} }) });
};
BubbleChartStore.prototype.tooltipFormat = function (params) {
var _this = this;
var color = params.color, dataIndex = params.dataIndex, seriesName = params.seriesName;
var unitTransformer = this.chartStyleService.unitTransformer;
var item = this.getDataViaSeriesName(dataIndex, seriesName);
if (!item) {
return '';
}
var sizeFieldValue = item.length === 3 ? item[2] : '';
sizeFieldValue = unitTransformer(sizeFieldValue);
var legend = "\n <span style=\"background-color: " + color + ";\n display: inline-block; border-radius: 6px;\n width: 12px; height: 12px;\"\n ></span>";
var markField = this.colorField
? "<span>" + legend + " <span>" + this.colorField + ": " + seriesName + "</span>"
: '';
var sizeField = this.chartStyleService.sizeField.length > 0
? "<span style=\"margin: 0 14px\";>\n <span>" + this.chartStyleService.sizeField[0] + ": </span>" + sizeFieldValue + "</span>"
: '';
var fields = uniq(this.fields
.filter(function (field) { return field.key !== _this.colorField; })
.filter(function (field) { return field.key === _this.xField || field.key === _this.yField; }));
var rest = fields.map(function (field) {
var index = findIndex(fields, function (f) { return f.key === field.key; });
var value = get(item, index);
if (field.key === _this.xField && _this.isNumberField(_this.xField)) {
value = _this.chartStyleService.mainAxis.unitTransformer(value);
}
else if (field.key === _this.yField && _this.isNumberField(_this.yField)) {
value = _this.chartStyleService.crossAxis1.unitTransformer(value);
}
else if (field.key === _this.sizeField &&
_this.isNumberField(_this.sizeField)) {
value = unitTransformer(value);
}
return "<span style=\"margin: 0 14px\";>\n <span>" + field.key + ": </span>" + value + "</span>";
});
var ret = markField ? [markField].concat(rest) : rest;
if (sizeField) {
ret.push(sizeField);
}
return ret.join('<br/>');
};
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], BubbleChartStore.prototype, "sizeField", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], BubbleChartStore.prototype, "sizeFieldIndex", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", Array)
], BubbleChartStore.prototype, "getPoint", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Number, Number, Number, String, Number, Number]),
__metadata("design:returntype", void 0)
], BubbleChartStore.prototype, "measureSymbolSize", null);
__decorate([
computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], BubbleChartStore.prototype, "symbolSize", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Array]),
__metadata("design:returntype", void 0)
], BubbleChartStore.prototype, "toScatterSeries", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", []),
__metadata("design:returntype", void 0)
], BubbleChartStore.prototype, "getOptions", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", void 0)
], BubbleChartStore.prototype, "tooltipFormat", null);
return BubbleChartStore;
}(BaseScatterChartStore));
export default BubbleChartStore;