@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
363 lines (362 loc) • 16.2 kB
JavaScript
"use strict";
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 __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var mobx_1 = require("mobx");
var lodash_1 = require("lodash");
var bind_1 = __importDefault(require("../../../../utils/bind"));
var type_1 = require("../../../../constants/language/base/type");
var type_2 = require("../../../../constants/language/map/type");
var map_style_1 = require("../../../../constants/map-style");
var language_1 = require("../../../../services/language");
var chart_style_1 = require("../../../../constants/chart-style");
var coordMap_1 = require("../../constants/map/coordMap");
var one_d_legend_1 = __importDefault(require("../../stores/one-d-legend"));
var map_chart_1 = require("../../transforms/map-chart");
var map_1 = require("../../constants/map/map");
var tramsfrom_1 = require("../tramsfrom");
var MapBubbleChartStore = /** @class */ (function (_super) {
__extends(MapBubbleChartStore, _super);
function MapBubbleChartStore() {
return _super !== null && _super.apply(this, arguments) || this;
}
Object.defineProperty(MapBubbleChartStore.prototype, "nameMap", {
get: function () {
return this.mapType === map_1.MapType.World
? tramsfrom_1.getWorldNameMap(this.seriesData)
: undefined;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MapBubbleChartStore.prototype, "containCitySansha", {
get: function () {
var geoLevel = this.chartStyleService.geoLevel;
return (this.mapType === map_1.MapType.China &&
geoLevel === map_style_1.EGeoLevel.CITY &&
!!this.baseData.filter(function (data) { return data.name === language_1.formatString(type_2.MapLocale.city.sansha); }).length);
},
enumerable: false,
configurable: true
});
Object.defineProperty(MapBubbleChartStore.prototype, "geoLevalType", {
get: function () {
var geoLevel = this.chartStyleService.geoLevel;
switch (this.mapType) {
case map_1.MapType.China:
switch (geoLevel) {
case map_style_1.EGeoLevel.AREA:
return "area" /* AREA */;
case map_style_1.EGeoLevel.CITY:
return "city" /* CITY */;
default:
return "province" /* PROVINCE */;
}
default:
return "world" /* WORLD */;
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(MapBubbleChartStore.prototype, "chartOptions", {
get: function () {
return __assign(__assign({}, this.baseOptions), { series: this.series });
},
enumerable: false,
configurable: true
});
Object.defineProperty(MapBubbleChartStore.prototype, "validMapNameData", {
get: function () {
var _this = this;
var validMapNameData = this.baseData.filter(function (item) {
return _this.getIsValidMapData([item.name]);
});
// 注意， 相同的国家的数据要合并，否则会有多个气泡重叠
var mergeData = [];
validMapNameData.forEach(function (item) {
var index = mergeData.findIndex(function (f) { return f.name === item.name; });
if (index > -1) {
mergeData[index].value += item.value || 0;
}
else {
mergeData.push(item);
}
});
return lodash_1.sortBy(mergeData, 'value');
},
enumerable: false,
configurable: true
});
Object.defineProperty(MapBubbleChartStore.prototype, "series", {
get: function () {
return this.toMapSeries(this.validMapNameData);
},
enumerable: false,
configurable: true
});
Object.defineProperty(MapBubbleChartStore.prototype, "baseOptions", {
// 地图options选项
get: function () {
var unitTransformer = this.chartStyleService.unitTransformer;
var option = {
tooltip: {
trigger: 'item',
padding: [4, 8],
position: function (_point, _params, dom) {
dom.style.transform = 'translateZ(0)';
},
formatter: function (params) {
if (params.data === undefined) {
return language_1.formatString(type_1.BaseLocale.status.empty);
}
return "\n <span style=\"font-size: 14px; display: inline-block; margin-bottom: 3px;\">" + params.name + "</span> <br/>\n <span style=\"font-size: 12px;\">\n <span >" + params.seriesName + " :</span> " + unitTransformer(params.data.size) + "\n </span>";
}
},
geo: {
map: this.geoLevalType === "province" /* PROVINCE */
? map_1.MapType.China
: this.geoLevalType === "city" /* CITY */ && this.containCitySansha
? map_style_1.EGeoLevel.CITYMax
: this.geoLevalType,
label: {
emphasis: {
show: false
}
},
scaleLimit: { min: 1, max: 4 },
silent: true,
roam: true,
nameMap: this.nameMap
},
position: this.mapPositionWithLegend,
legend: { show: false },
series: this.series
};
return option;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MapBubbleChartStore.prototype, "mapPositionWithLegend", {
get: function () {
return map_chart_1.getMapPosition(this.mapType, this.chartHeight, this.chartWidth);
},
enumerable: false,
configurable: true
});
Object.defineProperty(MapBubbleChartStore.prototype, "legendSeriesData", {
get: function () {
var _this = this;
var dataMetrics = this.validMapNameData.map(function (item) {
return {
name: item.name,
data: {
current: item.value ? [item.value] : []
},
metricName: lodash_1.get(_this.currentMetrics, [0, 'name'])
};
});
var validData = dataMetrics.filter(function (item) {
return _this.getIsValidMapData([item.name]);
});
return validData;
},
enumerable: false,
configurable: true
});
Object.defineProperty(MapBubbleChartStore.prototype, "symbolSize", {
get: function () {
var _a = this.chartStyleService, minSize = _a.minSize, maxSize = _a.maxSize, minDiameter = _a.minDiameter, maxDiameter = _a.maxDiameter, sizeType = _a.sizeType;
var data = this.validMapNameData;
var maxItem = lodash_1.maxBy(data, 'value');
var minItem = lodash_1.minBy(data, 'value');
var maxItemValue = maxItem ? maxItem.value : 0;
var minItemValue = minItem ? minItem.value : 0;
var maxDiameterValue = maxDiameter || maxDiameter === 0 ? maxDiameter : minDiameter || 0;
var minDiameterValue = minDiameter || minDiameter === 0 ? minDiameter : maxDiameter || 0;
var maxVal = sizeType === chart_style_1.ESizeType.Dynamic ? maxItemValue : maxDiameterValue;
var minVal = sizeType === chart_style_1.ESizeType.Dynamic ? minItemValue : minDiameterValue;
if (maxVal - minVal) {
var interval_1 = (maxSize - minSize) / (maxVal - minVal);
return data.map(function (item) {
return minSize + (item.value - minVal) * interval_1;
});
}
else {
return data.map(function () {
return minSize;
});
}
},
enumerable: false,
configurable: true
});
Object.defineProperty(MapBubbleChartStore.prototype, "seriesData", {
get: function () {
var _this = this;
var sortedData = this.validMapNameData;
var geoCoordMap = coordMap_1.geolevalCoorMapOptions[this.geoLevalType];
var seriesData = sortedData
.map(function (item, index) {
var name = item.name ? item.name.toString() : '';
var size = item.value || 0;
if (!tramsfrom_1.getGeoCoor(geoCoordMap, name)) {
return null;
}
var city = tramsfrom_1.getGeoCoor(geoCoordMap, name);
var legendNameShow = _this.legendState[name];
return {
name: name,
value: city && city.concat(size),
metric: item.bucketName,
size: !legendNameShow && !lodash_1.isUndefined(legendNameShow) ? 0 : size,
symbolSize: !legendNameShow && !lodash_1.isUndefined(legendNameShow)
? 0
: _this.symbolSize[index]
};
})
.filter(function (e) { return !!e; });
return seriesData;
},
enumerable: false,
configurable: true
});
MapBubbleChartStore.prototype.toMapSeries = function (data) {
var _a = this.chartStyleService, threshold = _a.threshold, mapBubbleColor = _a.mapBubbleColor, labelValueType = _a.labelValueType, labelLayoutType = _a.labelLayoutType;
var bukcetName = lodash_1.get(data, [0, 'bucketName']);
var seriesData = this.seriesData;
var colorItem = mapBubbleColor
? {
itemStyle: {
color: mapBubbleColor,
borderColor: mapBubbleColor
}
}
: {};
return [
__assign({ type: 'scatter', coordinateSystem: 'geo', name: bukcetName, data: seriesData }, colorItem),
__assign({ type: 'effectScatter', coordinateSystem: 'geo', name: bukcetName, data: seriesData.filter(function (e) { return !!e && e.size > (threshold || 0); }), hoverAnimation: true, rippleEffect: {
brushType: 'stroke'
}, label: {
show: labelLayoutType,
formatter: function (params) {
var name = params.name;
var data = params.data;
if (!data) {
return '';
}
else {
return data.size
? labelValueType.includes(map_style_1.ELabelValueType.FIELD) &&
labelValueType.includes(map_style_1.ELabelValueType.VALUE)
? name + ": " + data.size
: labelValueType.includes(map_style_1.ELabelValueType.FIELD)
? name
: labelValueType.includes(map_style_1.ELabelValueType.VALUE)
? data.size
: ''
: '';
}
}
} }, colorItem)
];
};
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], MapBubbleChartStore.prototype, "nameMap", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], MapBubbleChartStore.prototype, "containCitySansha", null);
__decorate([
mobx_1.computed,
__metadata("design:type", String),
__metadata("design:paramtypes", [])
], MapBubbleChartStore.prototype, "geoLevalType", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], MapBubbleChartStore.prototype, "chartOptions", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], MapBubbleChartStore.prototype, "validMapNameData", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], MapBubbleChartStore.prototype, "series", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], MapBubbleChartStore.prototype, "baseOptions", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], MapBubbleChartStore.prototype, "mapPositionWithLegend", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], MapBubbleChartStore.prototype, "legendSeriesData", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], MapBubbleChartStore.prototype, "symbolSize", null);
__decorate([
mobx_1.computed,
__metadata("design:type", Object),
__metadata("design:paramtypes", [])
], MapBubbleChartStore.prototype, "seriesData", null);
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Array]),
__metadata("design:returntype", void 0)
], MapBubbleChartStore.prototype, "toMapSeries", null);
return MapBubbleChartStore;
}(one_d_legend_1.default));
exports.default = MapBubbleChartStore;