@qn-pandora/pandora-visualization
Version:
Pandora 通用可视化库
319 lines (318 loc) • 18.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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ChartWrapper = void 0;
var react_1 = __importDefault(require("react"));
var uuid_1 = require("uuid");
var lodash_1 = require("lodash");
var mobx_1 = require("mobx");
var mobx_react_1 = require("mobx-react");
var prop_types_1 = __importDefault(require("prop-types"));
var classnames_1 = __importDefault(require("classnames"));
var icons_1 = require("@ant-design/icons");
var antd_1 = require("antd");
var zh_CN_1 = __importDefault(require("antd/es/locale-provider/zh_CN"));
var en_US_1 = __importDefault(require("antd/es/locale-provider/en_US"));
var pandora_component_1 = require("@qn-pandora/pandora-component");
var pandora_app_component_1 = require("@qn-pandora/pandora-app-component");
var type_1 = require("../../constants/language/dashboard/type");
var language_1 = require("../../services/language");
var reactionWithOldValue_1 = require("../../utils/reactionWithOldValue");
var constants_1 = require("../../constants");
var BasicComponent_1 = __importDefault(require("../../components/Base/BasicComponent"));
var Charts_1 = __importDefault(require("../../components/Charts"));
var time_1 = require("../../constants/time");
var drill_down_1 = require("../../constants/drill-down");
var errorBoundary_1 = __importDefault(require("../../hocs/errorBoundary"));
var search_condition_1 = require("../../services/search-condition");
var language_2 = __importDefault(require("../../services/language"));
var bind_1 = __importDefault(require("../../utils/bind"));
var constants_2 = require("../constants");
var store_1 = __importDefault(require("./store"));
var Title_1 = __importDefault(require("./Title"));
var ActionBar_1 = __importDefault(require("./ActionBar"));
var ViewPortWatcher_1 = __importDefault(require("./ViewPortWatcher"));
var styles = __importStar(require("./style.mless"));
var ChartWrapper = /** @class */ (function (_super) {
__extends(ChartWrapper, _super);
function ChartWrapper() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.uuid = uuid_1.v4();
_this.store = new store_1.default(_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 ? constants_1.initialTheme : _a, _b = props.refresh, refresh = _b === void 0 ? 0 : _b, search = props.search, _c = props.chartType, chartType = _c === void 0 ? constants_1.ChartType.Line : _c, chartStyle = props.chartStyle, chartAction = props.chartAction;
var _d = search || {}, _e = _d.time, time = _e === void 0 ? search_condition_1.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 (!lodash_1.isEqual(diffObj.chartType, nextDiffObj.chartType) ||
!lodash_1.isEqual(diffObj.chartStyle, nextDiffObj.chartStyle) ||
!lodash_1.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 === drill_down_1.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_1.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: lodash_1.isEqual
}), mobx_1.reaction(function () { return _this.props.search; }, lodash_1.debounce(function () { return _this.store.run(); }, 500), {
equals: lodash_1.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 (!lodash_1.isEqual(diffObj.theme, nextDiffObj.theme)) {
setTheme(nextDiffObj.theme);
}
if (!lodash_1.isEqual(diffObj.refresh, nextDiffObj.refresh)) {
this.store.setRefreshInterval(nextDiffObj.refresh);
}
if (!lodash_1.isEqual(diffObj.query, nextDiffObj.query)) {
searchConditionService.setOriginQueryString(nextDiffObj.query);
}
if (!lodash_1.isEqual(diffObj.queries, nextDiffObj.queries)) {
searchConditionService.setQueries(nextDiffObj.queries || []);
}
if (!lodash_1.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 (!lodash_1.isEqual(diffObj.format, nextDiffObj.format)) {
searchConditionService.setFormat(nextDiffObj.format);
}
if (!lodash_1.isEqual(diffObj.chartType, nextDiffObj.chartType)) {
setChartType(nextDiffObj.chartType);
}
if (!lodash_1.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;
}
};
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 ? constants_1.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 pandora_component_1.Time(search_condition_1.transformToTime(time)).getDisplayText(time_1.timeFormat, language_2.default.locale === zh_CN_1.default.locale ? zh_CN_1.default : en_US_1.default);
var showTopbar = Boolean(title || actionbar);
var showTimeOffset = Boolean(!hideCustomTime && !time.global);
var showTimeShift = Boolean(!hideCustomTime && hasTimeShift);
var ChartComponent = CustomChart || Charts_1.default;
var lackMl = errorMessage.endsWith(constants_2.LACK_ML_MESSAGE);
var customChartClass = "custom-chart-style-" + this.uuid;
return (react_1.default.createElement(ViewPortWatcher_1.default, { className: styles.root, onChange: this.handleInViewPortChange },
errorMessage && !lackMl && (react_1.default.createElement(antd_1.Tooltip, { overlayClassName: styles.errorTooltip, getPopupContainer: this.context.getPopupContainer, title: errorMessage },
react_1.default.createElement("span", { className: styles.chartErrorCorner },
react_1.default.createElement(icons_1.ExclamationOutlined, { className: styles.errorIcon }),
react_1.default.createElement("span", { className: styles.innerError })))),
showTopbar && (react_1.default.createElement("div", { className: classnames_1.default(styles.titleBar, styles[theme]), role: pandora_component_1.SDK_PREFIX + "-chart-title", style: { height: titleHeight + "px" } },
react_1.default.createElement("div", { className: styles.titleContainter }, title),
react_1.default.createElement("div", { className: styles.moreOption },
isAnalysising && react_1.default.createElement(icons_1.LoadingOutlined, null),
actionbar))),
drillDownHistoryBtn,
showTopbar && (react_1.default.createElement("div", { className: styles.timeRangeContext, style: {
paddingBottom: time.timeShift ? '6px' : '0',
lineHeight: 20 + (time.timeShift ? 6 : 0) + 'px'
} },
showTimeOffset && (react_1.default.createElement("div", { className: "single-line" }, displayTimeRange)),
showTimeShift && (react_1.default.createElement("div", { className: "single-line" }, "\u504F\u79FB\u65F6\u95F4: " + time.timeShift)))),
extra && react_1.default.createElement("div", { className: styles.chartExtra }, extra),
react_1.default.createElement("div", { className: classnames_1.default(styles.chartContainer, customChartClass), role: pandora_component_1.SDK_PREFIX + "-chart" },
lackMl && (react_1.default.createElement("div", { className: styles.lackMlBox },
react_1.default.createElement(pandora_app_component_1.DataStatus, { status: "noData2", message: language_1.formatString(type_1.DashboardLocale.edit.chart.lack_ml_message) }))),
!lackMl && (react_1.default.createElement(react_1.default.Fragment, null, customChartStyle === null || customChartStyle === void 0 ? void 0 :
customChartStyle(customChartClass),
react_1.default.createElement(ChartComponent, { isEditing: this.props.isEditing, className: styles.chartStyle, chartContainerService: chartContainerService, VisualizationStore: VisualizationStore, staticPath: staticPath, showLoading: showLoading, onBrushAction: onBrushAction, onLegendSelectChangedAction: onLegendSelectChangedAction }))))));
};
ChartWrapper.ActionBar = ActionBar_1.default;
ChartWrapper.Title = Title_1.default;
ChartWrapper.contextTypes = {
getPopupContainer: prop_types_1.default.func,
replaceVariable: prop_types_1.default.func
};
ChartWrapper.childContextTypes = {
chartContainerService: prop_types_1.default.object
};
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object]),
__metadata("design:returntype", Object)
], ChartWrapper.prototype, "getChartDiffInfo", null);
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Object, Object]),
__metadata("design:returntype", void 0)
], ChartWrapper.prototype, "clearDrillDown", null);
__decorate([
bind_1.default,
__metadata("design:type", Function),
__metadata("design:paramtypes", [Boolean]),
__metadata("design:returntype", void 0)
], ChartWrapper.prototype, "handleInViewPortChange", null);
ChartWrapper = __decorate([
mobx_react_1.observer
], ChartWrapper);
return ChartWrapper;
}(BasicComponent_1.default));
exports.ChartWrapper = ChartWrapper;
exports.default = errorBoundary_1.default(ChartWrapper);