@qn-pandora/pandora-visualization/es/components/Charts/index.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 _a;
import React from 'react';
import { observer } from 'mobx-react';
import { Spin } from 'antd';
import classnames from 'classnames';
import { formatString } from '../../services/language';
import { BaseLocale } from '../../constants/language/base/type';
import DataStatus from '../Base/DataStatus';
import { ChartType } from '../../constants';
import errorBoundary from '../../hocs/errorBoundary';
import CustomChart from './CustomChart';
import bind from '../../utils/bind';
import * as styles from './style.mless';
var chartsMap = (_a = {},
    _a[ChartType.Line] = React.lazy(function () { return import('./LineChart/Line/Line'); }),
    _a[ChartType.StackLine] = React.lazy(function () { return import('./LineChart/Line/StackLine'); }),
    _a[ChartType.PercentageLine] = React.lazy(function () {
        return import('./LineChart/Line/PercentageLine');
    }),
    _a[ChartType.Area] = React.lazy(function () { return import('./LineChart/Area/Area'); }),
    _a[ChartType.StackArea] = React.lazy(function () { return import('./LineChart/Area/Stack'); }),
    _a[ChartType.PercentageArea] = React.lazy(function () {
        return import('./LineChart/Area/Percentage');
    }),
    _a[ChartType.Bar] = React.lazy(function () { return import('./BarChart/Normal/Bar'); }),
    _a[ChartType.StackBar] = React.lazy(function () { return import('./BarChart/Normal/Stack'); }),
    _a[ChartType.PercentageBar] = React.lazy(function () {
        return import('./BarChart/Normal/Percentage');
    }),
    _a[ChartType.VerticalBar] = React.lazy(function () { return import('./BarChart/Vertical/Bar'); }),
    _a[ChartType.StackVerticalBar] = React.lazy(function () {
        return import('./BarChart/Vertical/Stack');
    }),
    _a[ChartType.PercentageVerticalBar] = React.lazy(function () {
        return import('./BarChart/Vertical/Percentage');
    }),
    _a[ChartType.LineBar] = React.lazy(function () { return import('./Combination/LineBarChart'); }),
    _a[ChartType.LineBarY2] = React.lazy(function () {
        return import('./Combination/LineBarY2Chart');
    }),
    _a[ChartType.LineY2] = React.lazy(function () { return import('./Combination/LineY2Chart'); }),
    _a[ChartType.PieMetric] = React.lazy(function () { return import('./PieChart/PieMetric'); }),
    _a[ChartType.PieRingMetric] = React.lazy(function () {
        return import('./PieChart/PieRingMetric');
    }),
    _a[ChartType.PieRoseMetric] = React.lazy(function () {
        return import('./PieChart/PieRoseMetric');
    }),
    _a[ChartType.PieBucket] = React.lazy(function () { return import('./PieChart/PieBucket'); }),
    _a[ChartType.PieRingBucket] = React.lazy(function () {
        return import('./PieChart/PieRingBucket');
    }),
    _a[ChartType.PieRoseBucket] = React.lazy(function () {
        return import('./PieChart/PieRoseBucket');
    }),
    _a[ChartType.SingleGauge] = React.lazy(function () {
        return import('./SingleChart/SingleGaugeChart');
    }),
    _a[ChartType.SingleValue] = React.lazy(function () {
        return import('./SingleChart/SingleValue');
    }),
    _a[ChartType.SinglePercent] = React.lazy(function () {
        return import('./SingleChart/SinglePercentChart');
    }),
    _a[ChartType.MapColorChina] = React.lazy(function () {
        return import('./MapChart/MapColor/ColorChina');
    }),
    _a[ChartType.MapColorWorld] = React.lazy(function () {
        return import('./MapChart/MapColor/ColorWorld');
    }),
    _a[ChartType.MapBubbleChina] = React.lazy(function () {
        return import('./MapChart/MapBubble/BubbleChina');
    }),
    _a[ChartType.MapBubbleWorld] = React.lazy(function () {
        return import('./MapChart/MapBubble/BubbleWorld');
    }),
    _a[ChartType.MigrationChina] = React.lazy(function () {
        return import('./MigrationChart/China');
    }),
    _a[ChartType.MigrationWorld] = React.lazy(function () {
        return import('./MigrationChart/World');
    }),
    _a[ChartType.RelationHorizontal] = React.lazy(function () {
        return import('./RelationChart/Horizontal');
    }),
    _a[ChartType.RelationCircular] = React.lazy(function () {
        return import('./RelationChart/Circular');
    }),
    _a[ChartType.Sankey] = React.lazy(function () { return import('./SankeyChart'); }),
    _a[ChartType.RadarMetric] = React.lazy(function () { return import('./Radar/RadarMetric'); }),
    _a[ChartType.RadarBucket] = React.lazy(function () { return import('./Radar/RadarBucket'); }),
    _a[ChartType.Scatter] = React.lazy(function () { return import('./ScatterChart'); }),
    _a[ChartType.Bubble] = React.lazy(function () { return import('./BubbleChart'); }),
    _a[ChartType.TreeTable] = React.lazy(function () { return import('./TableChart/TreeTable'); }),
    _a[ChartType.GridTable] = React.lazy(function () { return import('./TableChart/GridTable'); }),
    _a[ChartType.Sunburst] = React.lazy(function () { return import('./SunburstChart'); }),
    _a[ChartType.Editor] = React.lazy(function () { return import('./EditorChart'); }),
    _a[ChartType.Outlier] = React.lazy(function () { return import('./OutlierChart'); }),
    _a[ChartType.TimeLine] = React.lazy(function () { return import('./TimeLineChart'); }),
    _a[ChartType.StatusPanel] = React.lazy(function () { return import('./StatusPanelChart'); }),
    _a[ChartType.MetricPanel] = React.lazy(function () { return import('./MetricPanelChart'); }),
    _a[ChartType.CapsuleBar] = React.lazy(function () { return import('./CapsuleBarChart'); }),
    _a[ChartType.MapboxBubble] = React.lazy(function () { return import('./MapboxChart/Bubble'); }),
    _a[ChartType.MapboxPath] = React.lazy(function () { return import('./MapboxChart/Path'); }),
    _a[ChartType.Honeycomb] = React.lazy(function () { return import('./Honeycomb'); }),
    _a[ChartType.TopoLogy] = React.lazy(function () { return import('./Topology'); }),
    _a);
var AnalysisChart = /** @class */ (function (_super) {
    __extends(AnalysisChart, _super);
    function AnalysisChart() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    AnalysisChart.prototype.getChartDataStatus = function () {
        var chartConditionService = this.props.chartContainerService.chartConditionService;
        var hasData = chartConditionService.hasData, isInitAnalysising = chartConditionService.isInitAnalysising, isAnalysising = chartConditionService.isAnalysising, hasDataLoaded = chartConditionService.hasDataLoaded, isUnauth = chartConditionService.isUnauth, isElement = chartConditionService.isElement, chartType = chartConditionService.chartType;
        if (isElement) {
            return null;
        }
        if ((isInitAnalysising && !hasDataLoaded) || (isAnalysising && !hasData)) {
            return { status: 'loading' };
        }
        if (isUnauth) {
            return {
                status: 'unauthorized',
                message: formatString(BaseLocale.message)
            };
        }
        // 强制渲染数据状态，此项为true时会忽略noData
        var isForceShowData = [
            ChartType.SingleGauge,
            ChartType.SinglePercent,
            ChartType.SingleValue
        ].indexOf(chartType) > -1;
        if (!hasData && !isForceShowData) {
            return { status: 'noData' };
        }
        return null;
    };
    AnalysisChart.prototype.render = function () {
        var _a;
        var _b = this.props, chartContainerService = _b.chartContainerService, className = _b.className, style = _b.style, disabled = _b.disabled, getChartStore = _b.getChartStore, VisualizationStore = _b.VisualizationStore, staticPath = _b.staticPath, showLoading = _b.showLoading, isEditing = _b.isEditing, onBrushAction = _b.onBrushAction, onLegendSelectChangedAction = _b.onLegendSelectChangedAction;
        var _c = chartContainerService.chartConditionService, chartType = _c.chartType, isExtendsChart = _c.isExtendsChart;
        var theme = chartContainerService.themeService.theme;
        var Chart = chartsMap[chartType];
        if (isExtendsChart) {
            Chart = CustomChart;
        }
        if (!Chart) {
            return null;
        }
        var SpecifiedTypeChart = React.createElement(Chart, {
            chartContainerService: chartContainerService,
            getChartStore: getChartStore,
            VisualizationStore: VisualizationStore,
            staticPath: staticPath,
            isEditing: isEditing,
            onBrushAction: onBrushAction,
            onLegendSelectChangedAction: onLegendSelectChangedAction
            // renderChildren:
            //   mode !== ChartMode.Dashboard &&
            //   ((store: any) => (
            //     <div className="legend-select-container">
            //       <LegendSelector store={store} />
            //     </div>
            //   ))
        });
        var rootCls = classnames(className, styles.chart, styles[theme], (_a = {},
            _a[styles.disabled] = disabled,
            _a));
        var dataStatus = this.getChartDataStatus();
        var chartMain = (React.createElement("div", { className: styles.realChartContainer },
            React.createElement(React.Suspense, { fallback: React.createElement(DataStatus, { className: styles.dataStatus, status: "loading" }) }, SpecifiedTypeChart)));
        var _d = this.props.chartContainerService.chartConditionService, isInitAnalysising = _d.isInitAnalysising, isAnalysising = _d.isAnalysising;
        var loading = isInitAnalysising || isAnalysising;
        return (React.createElement("div", { className: rootCls, style: style }, dataStatus ? (React.createElement(DataStatus, __assign({ className: styles.dataStatus }, dataStatus))) : showLoading ? (React.createElement(Spin, { wrapperClassName: styles.loadingContainer, spinning: loading }, chartMain)) : (chartMain)));
    };
    __decorate([
        bind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", []),
        __metadata("design:returntype", void 0)
    ], AnalysisChart.prototype, "getChartDataStatus", null);
    AnalysisChart = __decorate([
        observer
    ], AnalysisChart);
    return AnalysisChart;
}(React.Component));
export { AnalysisChart };
export default errorBoundary(AnalysisChart);