@qn-pandora/pandora-visualization/es/components/Charts/LineChart/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);
};
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;
};
import { computed } from 'mobx';
import { includes, merge, get, isUndefined, isArray, toString } from 'lodash';
import { colorMap } from '@qn-pandora/pandora-app-component/es/components/LegendColorPanel';
import bind from '../../../utils/bind';
import { EPoint, ILineMarkPointType } from '../../../constants/chart-style';
import { getSeriesFromDataset } from '../transforms/two-d';
import TwoDChartStore from '../stores/two-d';
import { updateSeriesData } from '../transforms/two-d';
import { toLineSeries, getBaseLineSeries, getBand, getMarkAreas, getPredict, updateEmphasizeAreas, updateSeriesByBand, updateCrossAxisMax, updateTagColors, updateSeriesDataByBound, getFollowMarkLineSeries } from './transform';
import defaultConfig from './defaultChatConfig';
var MAX_POINT_LENGTH = 6000;
var BaseLineChartStore = /** @class */ (function (_super) {
    __extends(BaseLineChartStore, _super);
    function BaseLineChartStore() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.lastMax = { current: undefined };
        return _this;
    }
    Object.defineProperty(BaseLineChartStore.prototype, "defaultBaselineColor", {
        get: function () {
            return get(this.themeOption, ['line', 'thresholdColor']);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseLineChartStore.prototype, "baseSeries", {
        get: function () {
            var dataset = this.dataset;
            var _a = this.chartStyleService, colorFields = _a.colors.fields, mainAxisField = _a.mainAxis.field, _b = _a.crossAxis1, crossAxisFields = _b.fields, displayFields = _b.displayFields, fieldsGetter = _b.fieldsGetter;
            var otherFields = (fieldsGetter === null || fieldsGetter === void 0 ? void 0 : fieldsGetter(dataset.fields)) || [];
            var allFields = __spread(crossAxisFields, otherFields);
            return getSeriesFromDataset(dataset, colorFields, mainAxisField, allFields, displayFields, this.showMetricInName);
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseLineChartStore.prototype, "notFormatSeries", {
        get: function () {
            var _a = this.chartStyleService, _b = _a.crossAxis1, y1EmptyValueMode = _b.yEmptyValueMode, yScale1 = _b.scale, mainAxisType = _a.mainAxis.type;
            var y1Series = toLineSeries(this.baseSeries, y1EmptyValueMode === "0" /* Zero */, mainAxisType === "time" /* Time */);
            if (yScale1 === "log" /* Log */) {
                this.processSeriesForLog(y1Series);
            }
            var series = __spread(y1Series);
            return { series: series };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseLineChartStore.prototype, "legendSeriesData", {
        get: function () {
            var _this = this;
            var _a = this.chartStyleService, bandList = _a.bandList, tagColors = _a.tagColors, colors = _a.displayColors;
            var colorMap = colors.reduce(function (pre, cur) {
                pre[toString(cur.name)] = cur;
                return pre;
            }, {});
            var legendSeriesData = [];
            var index = 0;
            this.series.forEach(function (series) {
                var _a, _b;
                if (isUndefined(series.markLine) && !series.isBaseLine) {
                    var displayColor = colorMap[toString(series.name || '')];
                    if (bandList && bandList.length) {
                        displayColor = (_a = series.itemStyle) === null || _a === void 0 ? void 0 : _a.normal;
                    }
                    if (tagColors) {
                        var aim = tagColors.find(function (item) { var _a; return (_a = series.name) === null || _a === void 0 ? void 0 : _a.startsWith(item.tag); });
                        if (aim) {
                            displayColor = (_b = series.itemStyle) === null || _b === void 0 ? void 0 : _b.normal;
                        }
                    }
                    var defaultColor = _this.lineColors[index % _this.lineColors.length];
                    legendSeriesData.push({
                        name: series.name,
                        metricName: series.metricName,
                        data: {
                            current: series.data.map(function (item) {
                                // 注意： 如果 x 轴为time 类型, 值是数组类型，[time,value]
                                if (isArray(item.value)) {
                                    return item.value.length === 2
                                        ? item.value[1]
                                        : null;
                                }
                                return item.value;
                            })
                        },
                        isOverlap: series.isOverlap,
                        color: displayColor ? displayColor.color : defaultColor,
                        fieldType: series.fieldType
                    });
                    index++;
                }
            });
            return legendSeriesData;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseLineChartStore.prototype, "lineColors", {
        get: function () {
            var colorMode = this.chartStyleService.colorMode;
            var _a = this.themeOption, line = _a.line, color = _a.color;
            var colorModeColors = get(colorMap, colorMode);
            var lineColor = get(line, color);
            return colorModeColors || lineColor || color;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseLineChartStore.prototype, "baseShowingSeries", {
        get: function () {
            var _this = this;
            var _a = this.notFormatSeries.series, series = _a === void 0 ? [] : _a;
            var _b = this.chartStyleService, _c = _b.crossAxis1, y1MetricFields = _c.fields, fieldsGetter = _c.fieldsGetter, yEmptyValueMode = _c.yEmptyValueMode, smoothLine = _b.smoothLine, point = _b.point, markPointType = _b.markPointType;
            var allFields = __spread(y1MetricFields, ((fieldsGetter === null || fieldsGetter === void 0 ? void 0 : fieldsGetter(this.originDataset.fields)) || []));
            var baseShowingSeries = series.filter(function (e) { return includes(allFields, e.metricName) || true; });
            baseShowingSeries.forEach(function (sery) {
                var lineThemeOption = get(_this.themeOption, 'line');
                var type = point.type, size = point.size;
                var pointType = type || get(lineThemeOption, 'showSymbol');
                // 设置active项icon样式
                if (pointType !== EPoint.None) {
                    sery['showSymbol'] = true;
                    sery['symbol'] = pointType;
                    sery['symbolSize'] =
                        size || size === 0 ? size : get(lineThemeOption, 'symbolSize');
                }
                else {
                    sery['showSymbol'] = false;
                    //默认给一个圆形
                    sery['symbol'] = EPoint.Circle;
                }
                sery['smooth'] = smoothLine;
                // 设置空值模式
                if (yEmptyValueMode === "line" /* Line */) {
                    sery['connectNulls'] = true;
                }
                var showLineLabel = markPointType === ILineMarkPointType.Show;
                sery['label'] = {
                    position: 'top',
                    distance: 0,
                    show: showLineLabel,
                    color: 'inherit'
                };
                // 显示最大值最小值
                sery['markPoint'] = {
                    label: {
                        show: markPointType === ILineMarkPointType.MinAndMax,
                        color: '#fff'
                    },
                    data: markPointType === ILineMarkPointType.MinAndMax
                        ? [{ type: 'min' }, { type: 'max' }]
                        : []
                };
                //设置鼠标样式
                sery['cursor'] = _this.chartCanClick ? 'pointer' : 'default';
                sery['silent'] = _this.chartCanClick ? false : true;
            });
            return baseShowingSeries;
        },
        enumerable: false,
        configurable: true
    });
    BaseLineChartStore.prototype.getMainAxisFormatter = function () {
        var _this = this;
        return function (params) {
            var _a;
            var value = _this.mainAxisFormatter(params);
            if ((_a = _this.chartStyleService.markLine) === null || _a === void 0 ? void 0 : _a.followClick) {
                if (value === _this.chartStyleService.markLine.xAxis) {
                    return ["{a|" + value + "}"];
                }
                else {
                    return value;
                }
            }
            else {
                return value;
            }
        };
    };
    Object.defineProperty(BaseLineChartStore.prototype, "series", {
        get: function () {
            var _a;
            var _b = this.chartStyleService, bandList = _b.bandList, tagColors = _b.tagColors, markAreas = _b.markAreas, emphasizeAreas = _b.emphasizeAreas, baseLine = _b.baseLine, chartType = _b.chartType, field = _b.mainAxis.field, mainAxis = _b.mainAxis, y1EmptyValueMode = _b.crossAxis1.yEmptyValueMode;
            if (baseLine.length !== 0) {
                var _c = getBaseLineSeries(baseLine, this.chartContainerService.chartConditionService.originDataset, get(this.themeOption, ['line', 'thresholdColor']), chartType, field, y1EmptyValueMode === "0" /* Zero */, mainAxis.type === "time" /* Time */), numberSeries = _c.numberSeries, dynamicSeries = _c.dynamicSeries;
                updateSeriesDataByBound(this.showingSeries, baseLine, dynamicSeries, function (data, matchLine) {
                    return __assign(__assign({}, data), { itemStyle: {
                            color: matchLine.color
                        } });
                });
                return __spread(this.showingSeries, [numberSeries], dynamicSeries);
            }
            if (tagColors) {
                updateTagColors(this.showingSeries, tagColors);
            }
            if (emphasizeAreas &&
                emphasizeAreas.length > 0 &&
                this.showingSeries.length > 0) {
                updateEmphasizeAreas(emphasizeAreas, this.showingSeries);
            }
            // 有bandlist配置时，生成条带series;
            if (bandList && bandList.length > 0) {
                // 如果有异常检测，则展示异常点
                updateSeriesByBand(this.showingSeries, bandList, this.chartContainerService.chartConditionService.originDataset);
                // 生成条带series;
                var bandSeries = getBand(bandList, this.hoveredSeries, this.chartContainerService.chartConditionService.originDataset, field, y1EmptyValueMode === "0" /* Zero */, mainAxis.type === "time" /* Time */);
                var predictSeries = getPredict(bandList, this.chartContainerService.chartConditionService.originDataset, this.showingSeries, y1EmptyValueMode === "0" /* Zero */, mainAxis.type === "time" /* Time */);
                return __spread(this.showingSeries, bandSeries, predictSeries);
            }
            if (markAreas && markAreas.length > 0) {
                var markAreaSery = getMarkAreas(markAreas);
                return __spread(this.showingSeries, [markAreaSery]);
            }
            if ((_a = this.chartStyleService.markLine) === null || _a === void 0 ? void 0 : _a.followClick) {
                var markLineSeries = [];
                var _d = getFollowMarkLineSeries(this.chartStyleService.markLine), serieX = _d.serieX, serieY = _d.serieY;
                serieX && markLineSeries.push(serieX);
                serieY && markLineSeries.push(serieY);
                return __spread(this.showingSeries, markLineSeries);
            }
            return this.showingSeries;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseLineChartStore.prototype, "yAxisLabelFormatter", {
        get: function () {
            return this.crossAxis1.unitTransformer;
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseLineChartStore.prototype, "crossAxisOptions", {
        get: function () {
            return {
                name: this.crossAxisName,
                type: this.crossAxis1.scale === "value" /* Value */ ? 'value' : 'log',
                axisLabel: {
                    showMinLabel: this.crossAxis1.scale === "value" /* Value */,
                    formatter: this.yAxisLabelFormatter,
                    hideOverlap: true
                },
                nameGap: this.crossAxisNameGap,
                min: this.crossAxis1Min,
                max: this.crossAxis1Max
            };
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseLineChartStore.prototype, "lineCrossAxisOptions", {
        get: function () {
            return merge({}, this.crossAxis1Options, {
                nameGap: this.crossAxisNameGap
            });
        },
        enumerable: false,
        configurable: true
    });
    Object.defineProperty(BaseLineChartStore.prototype, "lineMainAxisOptions", {
        get: function () {
            var _a, _b;
            return merge({}, this.mainAxisOptions, {
                name: this.mainAxisName,
                type: this.mainAxis.type,
                axisLabel: __assign(__assign({}, this.mainAxisLabelDisplayOption), { rotate: this.mainAxis.labelRotation, formatter: this.getMainAxisFormatter(), hideOverlap: true, rich: {
                        a: {
                            fontWeight: 'bolder',
                            color: ((_b = (_a = this.chartStyleService.markLine) === null || _a === void 0 ? void 0 : _a.line) === null || _b === void 0 ? void 0 : _b.labelColor) || '#2C6DD2'
                        }
                    } }),
                data: this.axisData,
                nameGap: this.mainAxisNameGap,
                min: this.mainAxisMin,
                max: this.mainAxisMax
            });
        },
        enumerable: false,
        configurable: true
    });
    BaseLineChartStore.prototype.getOptions = function () {
        var _this = this;
        var showToolBox = this.chartStyleService.showToolBox;
        var bandList = this.chartStyleService.bandList;
        var series = updateSeriesData(this.series, this.lineMainAxisOptions);
        // 数据量比较大的时候，做一些采样
        if (this.allSeriesLength > MAX_POINT_LENGTH) {
            series.map(function (sery) {
                sery.large = true;
                sery.sampling = 'lttb';
            });
        }
        var tooltipAppendToBody = this.chartStyleService.tooltipAppendToBody;
        // 预测的时候，增大 grid top
        var gridTop = bandList && bandList.length > 0 ? 20 : defaultConfig.grid.top;
        var options = merge({}, defaultConfig, {
            grid: __assign(__assign({}, this.getGrid()), { top: gridTop }),
            tooltip: {
                confine: false,
                appendToBody: tooltipAppendToBody === false ? false : true,
                position: function (_point, _params, dom, _rect, size) {
                    dom.style.transform = 'translateZ(0)';
                    var padding = 5;
                    var x = _point[0] + padding;
                    var y = _point[1] + padding;
                    if (_point[0] > size.viewSize[0] / 2) {
                        // 右侧，展示在左侧
                        x =
                            _point[0] - size.contentSize[0] < 0
                                ? padding
                                : _point[0] - size.contentSize[0];
                    }
                    if (_point[1] > size.viewSize[1] / 2) {
                        // 下侧，展示在上侧
                        y =
                            _point[1] - size.contentSize[1] < 0
                                ? padding
                                : _point[1] - size.contentSize[1];
                    }
                    return [x, y];
                },
                formatter: function (params) {
                    return _this.tooltipFormatter(params, _this.chartStyleService.colors.fields, get(_this.themeOption, ['line', 'symbol']));
                },
                trigger: 'axis'
            },
            xAxis: this.lineMainAxisOptions,
            yAxis: bandList && bandList.length > 0
                ? __assign(__assign({}, this.lineCrossAxisOptions), { max: updateCrossAxisMax(this.lastMax, this.hoveredSeries) }) : this.lineCrossAxisOptions,
            series: series,
            animation: this.isLowPerfDevice
                ? false
                : this.allSeriesLength <= MAX_POINT_LENGTH,
            brush: !showToolBox &&
                this.allSeriesLength <= MAX_POINT_LENGTH && [
                { xAxisIndex: [0], yAxisIndex: 'none', transformable: false }
            ],
            toolbox: {
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none',
                        xAxisIndex: [0]
                    }
                }
            }
        });
        return options;
    };
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseLineChartStore.prototype, "defaultBaselineColor", null);
    __decorate([
        computed,
        __metadata("design:type", Array),
        __metadata("design:paramtypes", [])
    ], BaseLineChartStore.prototype, "baseSeries", null);
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseLineChartStore.prototype, "notFormatSeries", null);
    __decorate([
        computed,
        __metadata("design:type", Array),
        __metadata("design:paramtypes", [])
    ], BaseLineChartStore.prototype, "legendSeriesData", null);
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseLineChartStore.prototype, "lineColors", null);
    __decorate([
        computed,
        __metadata("design:type", Array),
        __metadata("design:paramtypes", [])
    ], BaseLineChartStore.prototype, "baseShowingSeries", null);
    __decorate([
        bind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], BaseLineChartStore.prototype, "getMainAxisFormatter", null);
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseLineChartStore.prototype, "series", null);
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseLineChartStore.prototype, "yAxisLabelFormatter", null);
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseLineChartStore.prototype, "crossAxisOptions", null);
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseLineChartStore.prototype, "lineCrossAxisOptions", null);
    __decorate([
        computed,
        __metadata("design:type", Object),
        __metadata("design:paramtypes", [])
    ], BaseLineChartStore.prototype, "lineMainAxisOptions", null);
    return BaseLineChartStore;
}(TwoDChartStore));
export default BaseLineChartStore;