@qn-pandora/pandora-visualization/lib/components/Charts/BubbleChart/store.js

Pandora 通用可视化库

"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 chart_style_1 = require("../../../constants/chart-style");
var base_scatter_1 = __importDefault(require("../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 lodash_1.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 = lodash_1.findIndex(fields, function (field) {
            return field.key === _this.xField;
        });
        var indexY = lodash_1.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 lodash_1.get(line, [_this.sizeFieldIndex, 0]); })
                .filter(function (item) { return lodash_1.isNumber(item); });
            var maxItemValue = lodash_1.max(data) || 0;
            var minItemValue = lodash_1.min(data) || 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 = (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 === '' ? lodash_1.toNumber(lodash_1.get(item, 1)) : lodash_1.toNumber(lodash_1.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 = lodash_1.get(_this.themeOption, ['bubble', 'color']) ||
                lodash_1.get(_this.themeOption, 'color');
            var defaultColor = lodash_1.get(themeColor, index % themeColor.length);
            var displayColor = !data.name && displayColors.length === 1 && displayColors[0].name === ''
                ? displayColors[0]
                : lodash_1.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 = lodash_1.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 = lodash_1.findIndex(fields, function (f) { return f.key === field.key; });
            var value = lodash_1.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([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BubbleChartStore.prototype, "sizeField", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BubbleChartStore.prototype, "sizeFieldIndex", null);
    __decorate([
        bind_1.default,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", Array)
    ], BubbleChartStore.prototype, "getPoint", null);
    __decorate([
        bind_1.default,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Number, Number, Number, String, Number, Number]),
        __metadata("design:returntype", void 0)
    ], BubbleChartStore.prototype, "measureSymbolSize", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BubbleChartStore.prototype, "symbolSize", null);
    __decorate([
        bind_1.default,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Array]),
        __metadata("design:returntype", void 0)
    ], BubbleChartStore.prototype, "toScatterSeries", null);
    __decorate([
        bind_1.default,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], BubbleChartStore.prototype, "getOptions", null);
    __decorate([
        bind_1.default,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", void 0)
    ], BubbleChartStore.prototype, "tooltipFormat", null);
    return BubbleChartStore;
}(base_scatter_1.default));
exports.default = BubbleChartStore;