@qn-pandora/pandora-visualization/lib/components/Charts/stores/base-scatter.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 __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;
};
var __spread = (this && this.__spread) || function () {
    for (var ar = [], i = 0; i < arguments.length; i++) ar = ar.concat(__read(arguments[i]));
    return ar;
};
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 app_sdk_1 = require("@qn-pandora/app-sdk");
var lodash_1 = require("lodash");
var bind_1 = __importDefault(require("../../../utils/bind"));
var two_d_1 = __importDefault(require("../stores/two-d"));
var chart_style_1 = require("../../../constants/chart-style");
var constant_1 = __importDefault(require("../ScatterChart/constant"));
var chart_drill_down_1 = require("../../../services/chart-drill-down");
var chart_common_action_1 = require("../../../services/chart-common-action");
var normalizeTimeFormat_1 = require("../../../utils/normalizeTimeFormat");
var chart_dataset_1 = require("../transforms/chart-dataset");
var transform_1 = require("../LineChart/transform");
var BaseScatterChartStore = /** @class */ (function (_super) {
    __extends(BaseScatterChartStore, _super);
    function BaseScatterChartStore(getProps) {
        var _this = _super.call(this, getProps) || this;
        _this.onEvents = {
            mouseover: _this.handleChartMouseover,
            mouseout: _this.handleChartMouseout,
            mousemove: _this.handleChartMousemove,
            click: _this.handleDrillDown,
            brush: _this.handleBrushStart,
            brushEnd: _this.handleBrushEnd
        };
        return _this;
    }
    Object.defineProperty(BaseScatterChartStore.prototype, "xField", {
        get: function () {
            return this.chartStyleService.mainAxis.field;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseScatterChartStore.prototype, "yField", {
        get: function () {
            var crossAxis1 = this.chartStyleService.crossAxis1;
            return crossAxis1.fields.length ? crossAxis1.fields[0] : '';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseScatterChartStore.prototype, "colorField", {
        get: function () {
            var colors = this.chartStyleService.colors;
            return colors.fields.length ? colors.fields[0] : '';
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseScatterChartStore.prototype, "colorFieldIndex", {
        get: function () {
            var _this = this;
            return lodash_1.findIndex(this.dataset.fields, function (f) { return f.key === _this.colorField; });
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseScatterChartStore.prototype, "chartDataset", {
        get: function () {
            var _this = this;
            var transformMap = {};
            var _a = this.mainAxis, mainField = _a.field, mainUT = _a.unitTransformer;
            var _b = this.crossAxis1, crossFields = _b.fields, crossUT = _b.unitTransformer;
            transformMap[mainField] = this.isDateField(mainField)
                ? normalizeTimeFormat_1.normalizeTimeFormat
                : mainUT;
            crossFields.forEach(function (field) {
                transformMap[field] = _this.isDateField(field)
                    ? normalizeTimeFormat_1.normalizeTimeFormat
                    : crossUT;
            });
            return chart_dataset_1.formatUnit(this.dataset, transformMap);
        },
        enumerable: false,
        configurable: true
    });
    BaseScatterChartStore.prototype.isNumberField = function (field) {
        var _a = this.dataset, fields = _a.fields, rows = _a.rows;
        if (this.isDateField(field)) {
            return false;
        }
        var index = lodash_1.findIndex(fields, function (f) { return f.key === field; });
        return rows.every(function (line) {
            return line[index] && lodash_1.isNumber(line[index][0]);
        });
    };
    BaseScatterChartStore.prototype.isDateField = function (field) {
        var originField = this.dataset.fields.find(function (f) { return f.key === field; });
        return originField && originField.fieldType === app_sdk_1.EChartFieldType.Time;
    };
    BaseScatterChartStore.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] : '';
        return [xValue, yValue, ''];
    };
    BaseScatterChartStore.prototype.toScatterSeries = function (series) {
        var _this = this;
        // 设置颜色
        var displayColors = this.chartStyleService.displayColors;
        var themeColor = lodash_1.get(this.themeOption, ['scatter', 'color']) || this.themeOption.color;
        return series.map(function (data, index) {
            var defaultColor = themeColor[index % themeColor.length];
            var displayColor = lodash_1.find(displayColors, function (color) {
                return color.name === data.name ||
                    (lodash_1.isUndefined(data.name) && color.name === '');
            });
            return {
                itemStyle: {
                    color: displayColor ? displayColor.color : defaultColor,
                    borderColor: 'none',
                    shadowBlur: 0
                },
                type: 'scatter',
                data: data.data,
                name: data.name,
                fieldType: data.fieldType,
                //设置鼠标样式
                cursor: _this.chartCanClick ? 'pointer' : 'default'
            };
        });
    };
    Object.defineProperty(BaseScatterChartStore.prototype, "legendSeriesData", {
        get: function () {
            var displayColors = this.chartStyleService.displayColors;
            var themeColor = lodash_1.get(this.themeOption, ['scatter', 'color']) || this.themeOption.color;
            return (this.series || []).map(function (item, index) {
                var defaultColor = themeColor[index % themeColor.length];
                var displayColor = lodash_1.find(displayColors, function (color) { return color.name === item.name; });
                return {
                    color: displayColor ? displayColor.color : defaultColor,
                    name: item.name,
                    fieldType: item.fieldType
                };
            });
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseScatterChartStore.prototype, "series", {
        get: function () {
            var _this = this;
            var _a = this.dataset, rows = _a.rows, fields = _a.fields;
            if (rows.length === 0 ||
                fields.length === 0 ||
                !this.xField ||
                !this.yField) {
                return [{ type: 'scatter', data: [] }];
            }
            if (!this.colorField) {
                return this.toScatterSeries([
                    {
                        fieldType: '',
                        data: lodash_1.uniqWith(rows.map(this.getPoint), lodash_1.isEqual)
                    }
                ]);
            }
            else {
                var groupedSeries_1 = lodash_1.groupBy(rows, function (line) { return line[_this.colorFieldIndex]; });
                var field_1 = fields[this.colorFieldIndex];
                return this.toScatterSeries(lodash_1.keys(groupedSeries_1).map(function (name) {
                    return {
                        name: name || '',
                        fieldType: field_1.fieldType || '',
                        data: lodash_1.uniqWith(groupedSeries_1[name].map(_this.getPoint), lodash_1.isEqual)
                    };
                }));
            }
        },
        enumerable: false,
        configurable: true
    });
    BaseScatterChartStore.prototype.getAxisDisplayName = function (name) {
        if (name.indexOf('(') > -1) {
            return name.slice(0, name.indexOf('(')) + "\n" + name.slice(name.indexOf('('));
        }
        return name;
    };
    Object.defineProperty(BaseScatterChartStore.prototype, "xAxisNameOffset", {
        get: function () {
            var _this = this;
            var xDisplayName = this.getAxisDisplayName(this.xField);
            var maxXWidth = lodash_1.max(xDisplayName
                .split('\n')
                .map(function (name) { return lodash_1.get(_this.measureText(name), 'width'); })) || 0;
            return maxXWidth + 10;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseScatterChartStore.prototype, "yAxisNameOffset", {
        get: function () {
            var _this = this;
            var yDisplayName = this.getAxisDisplayName(this.yField);
            var maxYWidth = lodash_1.max(yDisplayName
                .split('\n')
                .map(function (name) { return lodash_1.get(_this.measureText(name), 'width'); })) || 0;
            return maxYWidth + 10;
        },
        enumerable: false,
        configurable: true
    });
    BaseScatterChartStore.prototype.axisLabelFormat = function (params, field, unitTransformer) {
        if (!lodash_1.isUndefined(params)) {
            if (this.isDateField(field)) {
                var _a = __read(params.toString().split(' '), 2), time1 = _a[0], time2 = _a[1];
                return time2
                    ? normalizeTimeFormat_1.normalizeTimeFormat(time1) + '\n' + normalizeTimeFormat_1.normalizeTimeFormat(time2)
                    : ("" + normalizeTimeFormat_1.normalizeTimeFormat(params)).split(' ').join('\n');
            }
            else if (this.isNumberField(field)) {
                return unitTransformer(params);
            }
            else {
                var labelText = params.toString();
                return labelText.length > this.WRAP_CHAR_NUM
                    ? labelText.slice(0, this.WRAP_CHAR_NUM) + "..."
                    : labelText;
            }
        }
        return '';
    };
    Object.defineProperty(BaseScatterChartStore.prototype, "xAxisLabelFormatter", {
        get: function () {
            var _this = this;
            var unitTransformer = this.chartStyleService.mainAxis.unitTransformer;
            return function (params) {
                return _this.axisLabelFormat(params, _this.xField, unitTransformer);
            };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseScatterChartStore.prototype, "xAxisPointerFormatter", {
        get: function () {
            var _this = this;
            var unitTransformer = this.chartStyleService.mainAxis.unitTransformer;
            return function (params) {
                return _this.axisLabelFormat(params.value, _this.xField, unitTransformer);
            };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseScatterChartStore.prototype, "yAxisLabelFormatter", {
        get: function () {
            var _this = this;
            var unitTransformer = this.chartStyleService.crossAxis1.unitTransformer;
            return function (params) {
                return _this.axisLabelFormat(params, _this.yField, unitTransformer);
            };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseScatterChartStore.prototype, "yAxisPointerFormatter", {
        get: function () {
            var _this = this;
            var unitTransformer = this.chartStyleService.crossAxis1.unitTransformer;
            return function (params) {
                return _this.axisLabelFormat(params.value, _this.yField, unitTransformer);
            };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseScatterChartStore.prototype, "baseLineServices", {
        get: function () {
            var _a = this.chartStyleService, baseLine = _a.baseLine, chartType = _a.chartType, crossAxis1 = _a.crossAxis1, mainAxis = _a.mainAxis;
            var filterBaseLine = baseLine.filter(function (line) {
                return (line.mode === chart_style_1.EScatterMode.Horizontal &&
                    crossAxis1.scale === "value" /* Value */) ||
                    (line.mode === chart_style_1.EScatterMode.Vertical &&
                        mainAxis.type === "value" /* Value */);
            });
            if (filterBaseLine.length) {
                var numberSeries = transform_1.getBaseLineSeries(filterBaseLine, this.chartContainerService.chartConditionService.dataset, lodash_1.get(this.themeOption, ['scatter', 'thresholdColor']), chartType, mainAxis.field).numberSeries;
                return numberSeries;
            }
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseScatterChartStore.prototype, "baseOptions", {
        get: function () {
            var showToolBox = this.chartStyleService.showToolBox;
            var isYFieldNumber = this.isNumberField(this.yField);
            var _a = this.chartStyleService, scale = _a.crossAxis1.scale, xType = _a.mainAxis.type;
            var series = this.series;
            if (this.baseLineServices) {
                series = __spread(this.series, [this.baseLineServices]);
            }
            return lodash_1.merge({}, constant_1.default, {
                grid: this.getGrid(),
                series: series,
                xAxis: {
                    name: this.mainAxisName,
                    nameTextStyle: { padding: [0, 8, 0, 0] },
                    type: xType || "category" /* Category */,
                    nameGap: this.mainAxisNameGap,
                    axisLabel: __assign(__assign({}, this.mainAxisLabelDisplayOption), { rotate: this.mainAxis.labelRotation, formatter: this.xAxisLabelFormatter, hideOverlap: true }),
                    axisPointer: {
                        label: {
                            formatter: this.xAxisPointerFormatter
                        }
                    }
                },
                yAxis: {
                    name: this.crossAxisName,
                    type: scale || "category" /* Category */,
                    axisLabel: __assign(__assign({}, this.mainAxisLabelDisplayOption), { formatter: this.yAxisLabelFormatter, hideOverlap: true }),
                    nameGap: this.crossAxisNameGap,
                    min: isYFieldNumber ? this.crossAxis1Min : null,
                    max: isYFieldNumber ? this.crossAxis1Max : null,
                    axisPointer: {
                        label: {
                            formatter: this.yAxisPointerFormatter
                        }
                    }
                },
                tooltip: {
                    formatter: this.tooltipFormat
                },
                brush: !showToolBox && [
                    { xAxisIndex: 0, yAxisIndex: 'none', transformable: false }
                ]
            });
        },
        enumerable: false,
        configurable: true
    });
    BaseScatterChartStore.prototype.getDataViaSeriesName = function (dataIndex, seriesName) {
        if (seriesName.startsWith('series')) {
            var item = this.series || [];
            if (!item) {
                return undefined;
            }
            return item.length > 0 && item[0].data.length > dataIndex
                ? item[0].data[dataIndex]
                : [];
        }
        else {
            var item = (this.series || []).find(function (item) { return item.name === seriesName; });
            if (!item) {
                return undefined;
            }
            return item.data && item.data.length > dataIndex
                ? item.data[dataIndex]
                : [];
        }
    };
    BaseScatterChartStore.prototype.tooltipFormat = function (params) {
        var _this = this;
        var tooltipParams = lodash_1.isArray(params) ? params : [params];
        return tooltipParams
            .map(function (param) {
            var color = param.color, dataIndex = param.dataIndex, seriesName = param.seriesName;
            var item = _this.getDataViaSeriesName(dataIndex, seriesName);
            if (!item) {
                return '';
            }
            var legend = "\n      <span style=\"background-color: " + color + ";\n        display: inline-block; border-radius: 6px;\n        width: 12px; height: 12px;\"\n      ></span>\n    ";
            var markField = _this.chartStyleService.colors.fields.length
                ? "<span>" + legend + " <span>" + _this.colorField + ": " + seriesName + "</span>"
                : '';
            var fields = _this.dataset.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) {
                    if (_this.isDateField(_this.xField)) {
                        value = normalizeTimeFormat_1.normalizeTimeFormat(value);
                    }
                    else if (_this.isNumberField(_this.xField)) {
                        value = _this.chartStyleService.mainAxis.unitTransformer(value);
                    }
                }
                else if (field.key === _this.yField) {
                    if (_this.isDateField(_this.yField)) {
                        value = normalizeTimeFormat_1.normalizeTimeFormat(value);
                    }
                    else if (_this.isNumberField(_this.yField)) {
                        value = _this.chartStyleService.crossAxis1.unitTransformer(value);
                    }
                }
                return "<span style=\"margin: 0 14px;\">\n          <span>" + field.key + ": </span>" + value + "</span>";
            });
            return (markField ? [markField].concat(rest) : rest).join('<br/>');
        })
            .join('<br/>');
    };
    BaseScatterChartStore.prototype.handleDrillDown = function (params) {
        if (params.componentType !== 'series') {
            return;
        }
        this.onAction({
            xField: this.xField,
            yField: this.yField,
            colorField: this.colorField,
            xFieldValue: lodash_1.get(params, ['data', 0]),
            yFieldValue: lodash_1.get(params, ['data', 1]),
            colorFieldValue: lodash_1.get(params, 'seriesName'),
            fields: this.fields
        }, chart_drill_down_1.ScatterChartDrillDownService, chart_common_action_1.ScatterChartActionService);
    };
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseScatterChartStore.prototype, "xField", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseScatterChartStore.prototype, "yField", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseScatterChartStore.prototype, "colorField", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseScatterChartStore.prototype, "colorFieldIndex", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseScatterChartStore.prototype, "chartDataset", null);
    __decorate([
        bind_1.default,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [String]),
        __metadata("design:returntype", void 0)
    ], BaseScatterChartStore.prototype, "isNumberField", null);
    __decorate([
        bind_1.default,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [String]),
        __metadata("design:returntype", void 0)
    ], BaseScatterChartStore.prototype, "isDateField", null);
    __decorate([
        bind_1.default,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", Array)
    ], BaseScatterChartStore.prototype, "getPoint", null);
    __decorate([
        bind_1.default,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Array]),
        __metadata("design:returntype", void 0)
    ], BaseScatterChartStore.prototype, "toScatterSeries", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseScatterChartStore.prototype, "legendSeriesData", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseScatterChartStore.prototype, "series", null);
    __decorate([
        bind_1.default,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [String]),
        __metadata("design:returntype", void 0)
    ], BaseScatterChartStore.prototype, "getAxisDisplayName", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseScatterChartStore.prototype, "xAxisNameOffset", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseScatterChartStore.prototype, "yAxisNameOffset", null);
    __decorate([
        bind_1.default,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object, String, Object]),
        __metadata("design:returntype", void 0)
    ], BaseScatterChartStore.prototype, "axisLabelFormat", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseScatterChartStore.prototype, "xAxisLabelFormatter", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseScatterChartStore.prototype, "xAxisPointerFormatter", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseScatterChartStore.prototype, "yAxisLabelFormatter", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseScatterChartStore.prototype, "yAxisPointerFormatter", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseScatterChartStore.prototype, "baseLineServices", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseScatterChartStore.prototype, "baseOptions", null);
    __decorate([
        bind_1.default,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Number, String]),
        __metadata("design:returntype", void 0)
    ], BaseScatterChartStore.prototype, "getDataViaSeriesName", null);
    __decorate([
        bind_1.default,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", void 0)
    ], BaseScatterChartStore.prototype, "tooltipFormat", null);
    __decorate([
        bind_1.default,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Object]),
        __metadata("design:returntype", void 0)
    ], BaseScatterChartStore.prototype, "handleDrillDown", null);
    return BaseScatterChartStore;
}(two_d_1.default));
exports.default = BaseScatterChartStore;