@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
297 lines (296 loc) • 16.7 kB
JavaScript
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 __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;
};
import React from 'react';
import { v4 } from 'uuid';
import { debounce, isEqual } from 'lodash';
import { reaction } from 'mobx';
import { observer } from 'mobx-react';
import PropTypes from 'prop-types';
import classnames from 'classnames';
import { ExclamationOutlined, LoadingOutlined } from '@ant-design/icons';
import { Tooltip } from 'antd';
import zhCN from 'antd/es/locale-provider/zh_CN';
import enUS from 'antd/es/locale-provider/en_US';
import { Time, SDK_PREFIX } from '@qn-pandora/pandora-component';
import { DataStatus } from '@qn-pandora/pandora-app-component';
import { DashboardLocale } from '../../constants/language/dashboard/type';
import { formatString } from '../../services/language';
import { reactionWithOldValue } from '../../utils/reactionWithOldValue';
import { ChartType, initialTheme } from '../../constants';
import BasicComponent from '../../components/Base/BasicComponent';
import Chart from '../../components/Charts';
import { timeFormat } from '../../constants/time';
import { DrillDownType } from '../../constants/drill-down';
import errorBoundary from '../../hocs/errorBoundary';
import { defaultTimeRange, transformToTime } from '../../services/search-condition';
import languageService from '../../services/language';
import bind from '../../utils/bind';
import { LACK_ML_MESSAGE } from '../constants';
import ChartWrapperStore from './store';
import Title from './Title';
import ActionBar from './ActionBar';
import ViewPortWatcher from './ViewPortWatcher';
import * as styles from './style.mless';
var ChartWrapper = /** @class */ (function (_super) {
__extends(ChartWrapper, _super);
function ChartWrapper() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.uuid = v4();
_this.store = new ChartWrapperStore(_this.props.chartContainerService);
return _this;
}
ChartWrapper.prototype.getChildContext = function () {
return {
chartContainerService: this.props.chartContainerService
};
};
ChartWrapper.prototype.getChartDiffInfo = function (props) {
var _a = props.theme, theme = _a === void 0 ? initialTheme : _a, _b = props.refresh, refresh = _b === void 0 ? 0 : _b, search = props.search, _c = props.chartType, chartType = _c === void 0 ? ChartType.Line : _c, chartStyle = props.chartStyle, chartAction = props.chartAction;
var _d = search || {}, _e = _d.time, time = _e === void 0 ? defaultTimeRange : _e, _f = _d.query, query = _f === void 0 ? '' : _f, queries = _d.queries, _g = _d.collectSize, collectSize = _g === void 0 ? -1 : _g, format = _d.format;
return {
theme: theme,
refresh: refresh,
time: time,
query: query,
chartType: chartType,
chartStyle: chartStyle,
chartAction: chartAction,
queries: queries,
collectSize: collectSize,
format: format
};
};
ChartWrapper.prototype.clearDrillDown = function (diffObj, nextDiffObj) {
var _a;
if (!isEqual(diffObj.chartType, nextDiffObj.chartType) ||
!isEqual(diffObj.chartStyle, nextDiffObj.chartStyle) ||
!isEqual(diffObj.query, nextDiffObj.query)) {
var chartConditionService = this.props.chartContainerService.chartConditionService;
var drillDownActionService = (_a = chartConditionService.chartActionService) === null || _a === void 0 ? void 0 : _a.drillDownActionService;
if (drillDownActionService &&
drillDownActionService.drillDownType === DrillDownType.ToChartCustom &&
drillDownActionService.clear) {
drillDownActionService.clear();
}
}
};
ChartWrapper.prototype.handleInViewPortChange = function (isInViewPort) {
this.store.setDisabled(!isInViewPort);
};
ChartWrapper.prototype.componentWillMount = function () {
var _this = this;
var _a;
var disableDatasetReaction = this.props.disableDatasetReaction;
var diffObj = this.getChartDiffInfo(this.props);
var _b = this.props.chartContainerService, searchConditionService = _b.searchConditionService, chartConditionService = _b.chartConditionService, setTheme = _b.setTheme;
var chartActionService = chartConditionService.chartActionService;
if (chartActionService) {
chartActionService.setEnable(!!this.props.enableChartAction);
chartActionService.refreshChart = this.store.run;
chartActionService.setConfig(diffObj.chartAction);
}
searchConditionService.replaceVariable = this.context.replaceVariable;
setTheme(diffObj.theme);
this.store.setRefreshInterval(diffObj.refresh);
searchConditionService.setOriginQueryString(diffObj.query);
searchConditionService.setTime(diffObj.time);
if (diffObj.queries) {
searchConditionService.setQueries(diffObj.queries);
}
if (diffObj.format) {
searchConditionService.setFormat(diffObj.format);
}
(_a = searchConditionService.setDataLimit) === null || _a === void 0 ? void 0 : _a.call(searchConditionService, diffObj.collectSize);
this.addDisposer(
// 监听props lastRefreshTime
reactionWithOldValue(function () { return [
_this.props.lastRefreshTime,
// TODO 后期将searchConditionService replaceVariable逻辑全部抽离到chartWrapper组件外
// 使得chartWrapper中不存在replaceVariable相关逻辑
searchConditionService.originQueryString,
searchConditionService.queryString,
searchConditionService.sorts
]; }, function (newValue, oldValue) {
if (!oldValue) {
_this.store.run();
return;
}
var _a = __read(newValue, 2), newTime = _a[0], newOriginQueryString = _a[1];
var _b = __read(oldValue, 2), oldTime = _b[0], oldOriginQueryString = _b[1];
// 由originQueryString的改变触发的reaction不在这里执行搜索
if (newTime === oldTime &&
newOriginQueryString !== oldOriginQueryString) {
return;
}
_this.store.run();
}, {
ignoreFirst: false,
fireImmediately: true,
equals: isEqual
}), reaction(function () { return _this.props.search; }, debounce(function () { return _this.store.run(); }, 500), {
equals: isEqual
}));
// 在props状态同步后再激活store中的reaction
if (!disableDatasetReaction) {
this.store.enableReaction();
}
};
ChartWrapper.prototype.UNSAFE_componentWillReceiveProps = function (nextProps, nextContext) {
var _a;
var _b = nextProps.chartContainerService, searchConditionService = _b.searchConditionService, chartConditionService = _b.chartConditionService, setTheme = _b.setTheme;
var chartActionService = chartConditionService.chartActionService, chartStyleService = chartConditionService.chartStyleService, setChartType = chartConditionService.setChartType;
if (!!nextProps.enableChartAction !== (chartActionService === null || chartActionService === void 0 ? void 0 : chartActionService.enable)) {
chartActionService === null || chartActionService === void 0 ? void 0 : chartActionService.setEnable(!!nextProps.enableChartAction);
}
var diffObj = this.getChartDiffInfo(this.props);
var nextDiffObj = this.getChartDiffInfo(nextProps);
this.clearDrillDown(diffObj, nextDiffObj);
if (!isEqual(diffObj.theme, nextDiffObj.theme)) {
setTheme(nextDiffObj.theme);
}
if (!isEqual(diffObj.refresh, nextDiffObj.refresh)) {
this.store.setRefreshInterval(nextDiffObj.refresh);
}
if (!isEqual(diffObj.query, nextDiffObj.query)) {
searchConditionService.setOriginQueryString(nextDiffObj.query);
}
if (!isEqual(diffObj.queries, nextDiffObj.queries)) {
searchConditionService.setQueries(nextDiffObj.queries || []);
}
if (!isEqual(diffObj.time, nextDiffObj.time)) {
searchConditionService.setTime(nextDiffObj.time);
}
if (diffObj.collectSize !== nextDiffObj.collectSize) {
(_a = searchConditionService.setDataLimit) === null || _a === void 0 ? void 0 : _a.call(searchConditionService, nextDiffObj.collectSize);
}
if (!isEqual(diffObj.format, nextDiffObj.format)) {
searchConditionService.setFormat(nextDiffObj.format);
}
if (!isEqual(diffObj.chartType, nextDiffObj.chartType)) {
setChartType(nextDiffObj.chartType);
}
if (!isEqual(diffObj.chartStyle, nextDiffObj.chartStyle)) {
chartStyleService.set(nextDiffObj.chartStyle);
}
if (diffObj.chartAction !== nextProps.chartAction) {
chartActionService === null || chartActionService === void 0 ? void 0 : chartActionService.setConfig(nextProps.chartAction);
}
if (this.context.replaceVariable !== nextContext.replaceVariable) {
searchConditionService.replaceVariable = nextContext.replaceVariable;
}
if (this.props.documentHidden !== nextProps.documentHidden) {
this.store.setDisabled(!!nextProps.documentHidden);
}
};
ChartWrapper.prototype.componentWillUnmount = function () {
_super.prototype.componentWillUnmount.call(this);
this.store.dispose();
};
ChartWrapper.prototype.render = function () {
var _a = this.props, _b = _a.theme, theme = _b === void 0 ? initialTheme : _b, title = _a.title, actionbar = _a.actionbar, extra = _a.extra, chartContainerService = _a.chartContainerService, VisualizationStore = _a.VisualizationStore, CustomChart = _a.Chart, customChartStyle = _a.customChartStyle, staticPath = _a.staticPath, hideCustomTime = _a.hideCustomTime, showLoading = _a.showLoading, titleHeight = _a.titleHeight, onBrushAction = _a.onBrushAction, onLegendSelectChangedAction = _a.onLegendSelectChangedAction, drillDownHistoryBtn = _a.drillDownHistoryBtn;
var errorMessage = this.store.errorMessage;
var isAnalysising = chartContainerService.chartConditionService.isAnalysising;
var time = chartContainerService.searchConditionService.time;
var hasTimeShift = !!parseFloat(time.timeShift || '');
var displayTimeRange = new Time(transformToTime(time)).getDisplayText(timeFormat, languageService.locale === zhCN.locale ? zhCN : enUS);
var showTopbar = Boolean(title || actionbar);
var showTimeOffset = Boolean(!hideCustomTime && !time.global);
var showTimeShift = Boolean(!hideCustomTime && hasTimeShift);
var ChartComponent = CustomChart || Chart;
var lackMl = errorMessage.endsWith(LACK_ML_MESSAGE);
var customChartClass = "custom-chart-style-" + this.uuid;
return (React.createElement(ViewPortWatcher, { className: styles.root, onChange: this.handleInViewPortChange },
errorMessage && !lackMl && (React.createElement(Tooltip, { overlayClassName: styles.errorTooltip, getPopupContainer: this.context.getPopupContainer, title: errorMessage },
React.createElement("span", { className: styles.chartErrorCorner },
React.createElement(ExclamationOutlined, { className: styles.errorIcon }),
React.createElement("span", { className: styles.innerError })))),
showTopbar && (React.createElement("div", { className: classnames(styles.titleBar, styles[theme]), role: SDK_PREFIX + "-chart-title", style: { height: titleHeight + "px" } },
React.createElement("div", { className: styles.titleContainter }, title),
React.createElement("div", { className: styles.moreOption },
isAnalysising && React.createElement(LoadingOutlined, null),
actionbar))),
drillDownHistoryBtn,
showTopbar && (React.createElement("div", { className: styles.timeRangeContext, style: {
paddingBottom: time.timeShift ? '6px' : '0',
lineHeight: 20 + (time.timeShift ? 6 : 0) + 'px'
} },
showTimeOffset && (React.createElement("div", { className: "single-line" }, displayTimeRange)),
showTimeShift && (React.createElement("div", { className: "single-line" }, "\u504F\u79FB\u65F6\u95F4: " + time.timeShift)))),
extra && React.createElement("div", { className: styles.chartExtra }, extra),
React.createElement("div", { className: classnames(styles.chartContainer, customChartClass), role: SDK_PREFIX + "-chart" },
lackMl && (React.createElement("div", { className: styles.lackMlBox },
React.createElement(DataStatus, { status: "noData2", message: formatString(DashboardLocale.edit.chart.lack_ml_message) }))),
!lackMl && (React.createElement(React.Fragment, null, customChartStyle === null || customChartStyle === void 0 ? void 0 :
customChartStyle(customChartClass),
React.createElement(ChartComponent, { isEditing: this.props.isEditing, className: styles.chartStyle, chartContainerService: chartContainerService, VisualizationStore: VisualizationStore, staticPath: staticPath, showLoading: showLoading, onBrushAction: onBrushAction, onLegendSelectChangedAction: onLegendSelectChangedAction }))))));
};
ChartWrapper.ActionBar = ActionBar;
ChartWrapper.Title = Title;
ChartWrapper.contextTypes = {
getPopupContainer: PropTypes.func,
replaceVariable: PropTypes.func
};
ChartWrapper.childContextTypes = {
chartContainerService: PropTypes.object
};
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", Object)
], ChartWrapper.prototype, "getChartDiffInfo", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object, Object]),
__metadata("design:returntype", void 0)
], ChartWrapper.prototype, "clearDrillDown", null);
__decorate([
bind,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Boolean]),
__metadata("design:returntype", void 0)
], ChartWrapper.prototype, "handleInViewPortChange", null);
ChartWrapper = __decorate([
observer
], ChartWrapper);
return ChartWrapper;
}(BasicComponent));
export { ChartWrapper };
export default errorBoundary(ChartWrapper);