@qn-pandora/pandora-visualization/es/components/Charts/MapChart/MapBubble/store.js

Pandora 通用可视化库

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 { get, sortBy, maxBy, minBy, isUndefined } from 'lodash';
import bind from '../../../../utils/bind';
import { BaseLocale } from '../../../../constants/language/base/type';
import { MapLocale } from '../../../../constants/language/map/type';
import { ELabelValueType, EGeoLevel } from '../../../../constants/map-style';
import { formatString } from '../../../../services/language';
import { ESizeType } from '../../../../constants/chart-style';
import { geolevalCoorMapOptions } from '../../constants/map/coordMap';
import OneDLegendChartStore from '../../stores/one-d-legend';
import { getMapPosition } from '../../transforms/map-chart';
import { MapType } from '../../constants/map/map';
import { getGeoCoor, getWorldNameMap } from '../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 === MapType.World
                ? getWorldNameMap(this.seriesData)
                : undefined;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MapBubbleChartStore.prototype, "containCitySansha", {
        get: function () {
            var geoLevel = this.chartStyleService.geoLevel;
            return (this.mapType === MapType.China &&
                geoLevel === EGeoLevel.CITY &&
                !!this.baseData.filter(function (data) { return data.name === formatString(MapLocale.city.sansha); }).length);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(MapBubbleChartStore.prototype, "geoLevalType", {
        get: function () {
            var geoLevel = this.chartStyleService.geoLevel;
            switch (this.mapType) {
                case MapType.China:
                    switch (geoLevel) {
                        case EGeoLevel.AREA:
                            return "area" /* AREA */;
                        case 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 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 formatString(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 */
                        ? MapType.China
                        : this.geoLevalType === "city" /* CITY */ && this.containCitySansha
                            ? 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 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: 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 = maxBy(data, 'value');
            var minItem = 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 === ESizeType.Dynamic ? maxItemValue : maxDiameterValue;
            var minVal = sizeType === 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 = geolevalCoorMapOptions[this.geoLevalType];
            var seriesData = sortedData
                .map(function (item, index) {
                var name = item.name ? item.name.toString() : '';
                var size = item.value || 0;
                if (!getGeoCoor(geoCoordMap, name)) {
                    return null;
                }
                var city = getGeoCoor(geoCoordMap, name);
                var legendNameShow = _this.legendState[name];
                return {
                    name: name,
                    value: city && city.concat(size),
                    metric: item.bucketName,
                    size: !legendNameShow && !isUndefined(legendNameShow) ? 0 : size,
                    symbolSize: !legendNameShow && !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 = 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(ELabelValueType.FIELD) &&
                                    labelValueType.includes(ELabelValueType.VALUE)
                                    ? name + ": " + data.size
                                    : labelValueType.includes(ELabelValueType.FIELD)
                                        ? name
                                        : labelValueType.includes(ELabelValueType.VALUE)
                                            ? data.size
                                            : ''
                                : '';
                        }
                    }
                } }, colorItem)
        ];
    };
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], MapBubbleChartStore.prototype, "nameMap", null);
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], MapBubbleChartStore.prototype, "containCitySansha", null);
    __decorate([
        computed,
        __metadata("design:type", String),
        __metadata("design:paramtypes", [])
    ], MapBubbleChartStore.prototype, "geoLevalType", null);
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], MapBubbleChartStore.prototype, "chartOptions", null);
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], MapBubbleChartStore.prototype, "validMapNameData", null);
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], MapBubbleChartStore.prototype, "series", null);
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], MapBubbleChartStore.prototype, "baseOptions", null);
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], MapBubbleChartStore.prototype, "mapPositionWithLegend", null);
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], MapBubbleChartStore.prototype, "legendSeriesData", null);
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], MapBubbleChartStore.prototype, "symbolSize", null);
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], MapBubbleChartStore.prototype, "seriesData", null);
    __decorate([
        bind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Array]),
        __metadata("design:returntype", void 0)
    ], MapBubbleChartStore.prototype, "toMapSeries", null);
    return MapBubbleChartStore;
}(OneDLegendChartStore));
export default MapBubbleChartStore;