@qn-pandora/pandora-visualization/lib/components/Charts/BarChart/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 __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
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 __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
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 lodash_1 = require("lodash");
var LegendColorPanel_1 = require("@qn-pandora/pandora-app-component/es/components/LegendColorPanel");
var env_1 = require("../../../utils/env");
var chart_style_1 = require("../../../constants/chart-style");
var two_d_1 = __importDefault(require("../stores/two-d"));
var transform_1 = require("../LineChart/transform");
var two_d_2 = require("../transforms/two-d");
var defaultChartConfig_1 = __importStar(require("./defaultChartConfig"));
var transform_2 = require("./transform");
var BaseBarChartStore = /** @class */ (function (_super) {
    __extends(BaseBarChartStore, _super);
    function BaseBarChartStore(getProps) {
        var _this = _super.call(this, getProps) || this;
        _this.trigger = defaultChartConfig_1.TriggerType.Axis;
        return _this;
    }
    Object.defineProperty(BaseBarChartStore.prototype, "defaultBaselineColor", {
        get: function () {
            return lodash_1.get(this.themeOption, ['bar', 'thresholdColor']);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseBarChartStore.prototype, "notFormatSeries", {
        get: function () {
            var _a = this.chartStyleService, y1Scale = _a.crossAxis1.scale, mainAxisType = _a.mainAxis.type, isCompareEnable = _a.compare.isCompareEnable, stack = _a.stack;
            var data = this.baseSeries;
            var barSeries = transform_2.toBarSeries(data, mainAxisType === "time" /* Time */);
            if (y1Scale === "log" /* Log */) {
                this.processSeriesForLog(barSeries);
            }
            if (stack) {
                barSeries.forEach(function (sery, index) {
                    // 设置堆叠模式
                    if (isCompareEnable) {
                        sery['stack'] = index % 2 === 0 ? 'current' : 'compare';
                    }
                    else {
                        sery['stack'] = 'stacked';
                    }
                });
            }
            return { series: __spread(barSeries) };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseBarChartStore.prototype, "barMainAxisOptions", {
        get: function () {
            return lodash_1.merge({}, defaultChartConfig_1.mainAxis, this.mainAxisOptions, {
                name: this.mainAxisName,
                type: this.mainAxis.type,
                axisLabel: __assign(__assign({}, this.mainAxisLabelDisplayOption), { rotate: this.mainAxis.labelRotation, formatter: this.getMainAxisFormatter(), hideOverlap: true }),
                inverse: false,
                data: this.axisData,
                nameGap: this.barMainAxisNameGap,
                min: this.mainAxisMin,
                max: this.mainAxisMax
            });
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseBarChartStore.prototype, "commonOptions", {
        get: function () {
            var _this = this;
            var _a = this.chartStyleService, tooltipAppendToBody = _a.tooltipAppendToBody, fields = _a.colors.fields;
            var option = lodash_1.merge({}, defaultChartConfig_1.default, {
                grid: this.getGrid(),
                tooltip: {
                    confine: false,
                    transitionDuration: 0,
                    appendToBody: tooltipAppendToBody === false ? false : true,
                    formatter: function (params) {
                        return _this.tooltipFormatter(params, fields, lodash_1.get(_this.themeOption, ['bar', 'symbol']));
                    },
                    position: function (_point, _params, dom, _, size) {
                        dom.style.transform = 'translateZ(0)';
                        var x = _point[0] + 10;
                        var y = _point[1] + 10;
                        if (_point[0] > size.viewSize[0] / 2) {
                            // 右侧，展示在左侧
                            x =
                                _point[0] - size.contentSize[0] < 0
                                    ? 5
                                    : _point[0] - size.contentSize[0];
                        }
                        if (_point[1] > size.viewSize[1] / 2) {
                            // 下侧，展示在上侧
                            y =
                                _point[1] - size.contentSize[1] < 0
                                    ? 5
                                    : _point[1] - size.contentSize[1];
                        }
                        return [x, y];
                    }
                },
                series: two_d_2.updateSeriesData(this.series, this.barMainAxisOptions),
                animation: this.isLowPerfDevice ? false : this.allSeriesLength <= 1000
            });
            return option;
        },
        enumerable: false,
        configurable: true
    });
    BaseBarChartStore.prototype.getOptions = function () {
        var showToolBox = this.chartStyleService.showToolBox;
        var option = lodash_1.merge({}, this.commonOptions, {
            xAxis: this.barMainAxisOptions,
            yAxis: this.barCrossAxis1Options,
            dataZoom: !env_1.isMobileDevice() &&
                showToolBox && [{ xAxisIndex: 0, yAxisIndex: 'none' }],
            brush: !showToolBox && [
                { xAxisIndex: 0, yAxisIndex: 'none', transformable: false }
            ]
        });
        return option;
    };
    Object.defineProperty(BaseBarChartStore.prototype, "barCrossAxis1Options", {
        get: function () {
            return lodash_1.merge({}, this.crossAxis1Options, {
                nameGap: this.barCrossAxis1NameGap
            });
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseBarChartStore.prototype, "series", {
        get: function () {
            var _this = this;
            var _a = this.chartStyleService, _b = _a.crossAxis1, unitTransformer = _b.unitTransformer, y1EmptyValueMode = _b.yEmptyValueMode, showBarLabel = _a.showBarLabel, baseLine = _a.baseLine, chartType = _a.chartType, mainAxis = _a.mainAxis, colorMode = _a.colorMode;
            var showingSeries = this.showingSeries;
            var themeColors = lodash_1.get(this.themeOption, 'color');
            var typeColors = lodash_1.get(this.themeOption, ['bar', 'color']);
            var colorModeColors = lodash_1.get(LegendColorPanel_1.colorMap, colorMode);
            var displayColors = this.chartStyleService.displayColors;
            showingSeries.forEach(function (sery, index) {
                var displayColor = lodash_1.find(displayColors, function (displayColor) { return displayColor.name === sery.name; });
                var defaultColors = colorModeColors || typeColors || themeColors;
                sery['itemStyle'] = {
                    normal: {
                        color: displayColor
                            ? displayColor.color
                            : defaultColors[index % defaultColors.length]
                    }
                };
                // 设置label
                var labelPosition = showBarLabel === true ? 'inside' : showBarLabel;
                sery['label'] = {
                    position: labelPosition,
                    distance: 0,
                    show: !!showBarLabel,
                    color: labelPosition === 'inside' ? '#fff' : 'inherit',
                    formatter: function (params) { return unitTransformer(params.value); }
                };
                // 设置柱状图最大宽度
                sery['barMaxWidth'] = 40;
                // 设置active项icon样式
                sery['symbol'] = 'circle';
                sery['symbolSize'] = 4;
                sery['showSymbol'] = true;
                //设置鼠标样式
                sery['cursor'] = _this.chartCanClick ? 'pointer' : 'default';
                sery['silent'] = _this.chartCanClick ? false : true;
            });
            if (baseLine.length) {
                var yBaseLine = chartType !== chart_style_1.ChartType.VerticalBar &&
                    chartType !== chart_style_1.ChartType.StackVerticalBar &&
                    chartType !== chart_style_1.ChartType.PercentageVerticalBar;
                var _c = transform_1.getBaseLineSeries(baseLine, this.chartContainerService.chartConditionService.originDataset, lodash_1.get(this.themeOption, ['bar', 'thresholdColor']), chartType, mainAxis.field, y1EmptyValueMode === "0" /* Zero */, mainAxis.type === "time" /* Time */, yBaseLine), numberSeries = _c.numberSeries, dynamicSeries = _c.dynamicSeries;
                transform_1.updateSeriesDataByBound(showingSeries, baseLine, dynamicSeries, function (data, matchLine) {
                    return __assign(__assign({}, data), { itemStyle: {
                            color: matchLine.color
                        } });
                });
                return __spread(showingSeries, [numberSeries], dynamicSeries);
            }
            return __spread(showingSeries);
        },
        enumerable: false,
        configurable: true
    });
    BaseBarChartStore.prototype.pushToChartData = function (data, currentMetrics, chartData) {
        if (data.current) {
            data.current.forEach(function (sery, index) {
                var metricName = sery.length ? sery[0].metric.metricName : '';
                if (metricName && currentMetrics.indexOf(metricName) !== -1) {
                    chartData.current.push(sery);
                    if (data.compare && data.compare[index]) {
                        chartData.compare.push(data.compare[index]);
                    }
                }
            });
        }
    };
    Object.defineProperty(BaseBarChartStore.prototype, "normalLegendSeriesData", {
        get: function () {
            var _this = this;
            var displayColors = this.chartStyleService.displayColors;
            return this.series
                .filter(function (item) { return lodash_1.isUndefined(item.markLine); })
                .map(function (series, index) {
                // 设置颜色
                var displayColor = lodash_1.find(displayColors, function (displayColor) { return displayColor.name === series.name; });
                var defaultColorArr = lodash_1.get(_this.themeOption, ['bar', 'color']) ||
                    lodash_1.get(_this.themeOption, 'color');
                var defaultColor = defaultColorArr[index % defaultColorArr.length];
                return {
                    name: series.name,
                    metricName: series.metricName,
                    isOverlap: series.isOverlap,
                    color: displayColor ? displayColor.color : defaultColor,
                    data: {
                        current: series.data.map(function (item) {
                            // 注意： 如果 x 轴为time 类型, 值是数组类型，[time,value]
                            if (lodash_1.isArray(item.value)) {
                                return item.value.length === 2
                                    ? item.value[1]
                                    : null;
                            }
                            return item.value;
                        })
                    },
                    fieldType: series.fieldType
                };
            });
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseBarChartStore.prototype, "legendSeriesData", {
        get: function () {
            return this.normalLegendSeriesData;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseBarChartStore.prototype, "barMainAxisNameGap", {
        get: function () {
            return this.mainAxisNameGap;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseBarChartStore.prototype, "barCrossAxis1NameGap", {
        get: function () {
            return this.crossAxisNameGap;
        },
        enumerable: false,
        configurable: true
    });
    __decorate([
        mobx_1.observable,
        __metadata("design:type", Object)
    ], BaseBarChartStore.prototype, "trigger", void 0);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseBarChartStore.prototype, "defaultBaselineColor", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseBarChartStore.prototype, "notFormatSeries", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseBarChartStore.prototype, "barMainAxisOptions", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseBarChartStore.prototype, "commonOptions", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseBarChartStore.prototype, "barCrossAxis1Options", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseBarChartStore.prototype, "series", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Array),
        __metadata("design:paramtypes", [])
    ], BaseBarChartStore.prototype, "normalLegendSeriesData", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Array),
        __metadata("design:paramtypes", [])
    ], BaseBarChartStore.prototype, "legendSeriesData", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseBarChartStore.prototype, "barMainAxisNameGap", null);
    __decorate([
        mobx_1.computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseBarChartStore.prototype, "barCrossAxis1NameGap", null);
    return BaseBarChartStore;
}(two_d_1.default));
exports.default = BaseBarChartStore;