ze-react-component-library
Version:
ZeroETP React Component Library
342 lines (293 loc) • 11.7 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("antd/lib/message/style");
var _message2 = _interopRequireDefault(require("antd/lib/message"));
require("antd/lib/button/style");
var _button = _interopRequireDefault(require("antd/lib/button"));
require("antd/lib/space/style");
var _space = _interopRequireDefault(require("antd/lib/space"));
var _react = _interopRequireDefault(require("react"));
var _icons = require("@ant-design/icons");
var _GroupByMenu = _interopRequireDefault(require("../components/GroupByMenu"));
var _StatisticForValue = _interopRequireDefault(require("../components/StatisticForValue"));
var _Analyzer = _interopRequireDefault(require("../Analyzer"));
var _reactErrorBoundary = require("react-error-boundary");
var _ZECard = _interopRequireDefault(require("../ZECard"));
var _reactSizeme = require("react-sizeme");
var _useYoyMom = _interopRequireDefault(require("./useYoyMom"));
require("./index.less");
var _ZELogicform = _interopRequireDefault(require("../ZELogicform"));
var _useLocale = _interopRequireDefault(require("../hooks/useLocale"));
var _useFrontConfig = require("../hooks/useFrontConfig");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
var __assign = void 0 && (void 0).__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 padding = 48;
var screenXL = 1200 - padding;
var screenSM = 576 - padding;
var ZEValueDisplayer = function ZEValueDisplayer(_a) {
var _b, _c, _d;
var data = _a.data,
logicform = _a.logicform,
onChangeLogicform = _a.onChangeLogicform,
children = _a.children,
_e = _a.showYoyAndMom,
showYoyAndMom = _e === void 0 ? false : _e,
trend = _a.trend,
title = _a.title,
exportTitle = _a.exportTitle,
_tip = _a.tip,
upColor = _a.upColor,
downColor = _a.downColor,
_f = _a.highlight,
highlight = _f === void 0 ? true : _f,
noWrapper = _a.noWrapper,
rootClassName = _a.rootClassName,
_g = _a.analzyerProps,
analzyerProps = _g === void 0 ? {} : _g,
showArrow = _a.showArrow;
var t = (0, _useLocale.default)().t;
var invalid = !data || data.error;
var tip = _tip;
var showRecommendKPIs = false;
if (((_c = (_b = data === null || data === void 0 ? void 0 : data.columnProperties) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.recommend_kpis) && data.logicform.preds[0].operator === "$sum" && // @ts-ignore
!data.logicform.preds[0].by) {
showRecommendKPIs = true;
}
var showYoyAndMomFinal = showYoyAndMom && !showRecommendKPIs;
var showAnalyzer = (0, _useFrontConfig.useAnalyzer)();
var _h = (0, _useYoyMom.default)({
data: data,
showYoyAndMom: showYoyAndMomFinal,
upColor: upColor,
downColor: downColor
}),
shouldSplitByYear = _h.shouldSplitByYear,
timestampProperty = _h.timestampProperty,
yoyData = _h.yoyData,
momData = _h.momData,
lmTip = _h.lmTip,
lmLF = _h.lmLF,
lyTip = _h.lyTip,
lyLF = _h.lyLF,
getYoyMom = _h.getYoyMom,
colors = _h.colors,
hideMom = _h.hideMom;
var _j = getYoyMom(),
mom = _j.mom,
yoy = _j.yoy; // feat: 如果timestamp prop区间超过1年，那么给个分组
var groupbyYearComponent = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null);
if (shouldSplitByYear) {
groupbyYearComponent = /*#__PURE__*/_react.default.createElement(_ZECard.default, {
logicform: __assign(__assign({}, data.logicform), {
groupby: [{
_id: timestampProperty.name,
level: "year"
}]
}),
chartProps: {
style: {
height: 300
}
},
showMainContentOnly: true
});
} // 如果没有Children的话，采用默认的statistic来表现
var defaultStatistics;
if (!invalid && !children) {
defaultStatistics = /*#__PURE__*/_react.default.createElement(_space.default, {
size: "large"
}, data.columnProperties.length > 0 ? data.columnProperties.map(function (property) {
var _a, _b;
return /*#__PURE__*/_react.default.createElement(_StatisticForValue.default, __assign({}, {
property: property,
title: title,
tip: tip,
logicform: logicform || data.logicform,
trend: trend,
key: property.name,
value: (_b = (_a = data === null || data === void 0 ? void 0 : data.result) === null || _a === void 0 ? void 0 : _a[0]) === null || _b === void 0 ? void 0 : _b[property.name],
upColor: colors.up,
downColor: colors.down,
showArrow: showArrow
}));
}) : /*#__PURE__*/_react.default.createElement(_StatisticForValue.default, __assign({}, {
property: undefined,
title: title,
tip: tip,
logicform: logicform || data.logicform,
trend: trend,
value: undefined,
upColor: colors.up,
downColor: colors.down,
showArrow: showArrow
})));
}
var recommendKpis = (showRecommendKPIs ? data.columnProperties[0].recommend_kpis : []).map(function (kpi) {
return /*#__PURE__*/_react.default.createElement(_ZELogicform.default, {
content: function content(_v, _l, res) {
return /*#__PURE__*/_react.default.createElement(ZEValueDisplayer, {
data: res,
onChangeLogicform: onChangeLogicform,
showYoyAndMom: false,
upColor: upColor,
downColor: downColor,
highlight: false,
noWrapper: true
});
},
logicform: __assign(__assign({}, data.logicform), {
preds: [kpi]
})
});
});
var renderContent = function renderContent() {
var _a, _b;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
className: "ze-value-item " + (highlight ? "ze-value-item-highlight" : "")
}, (data === null || data === void 0 ? void 0 : data.logicform) ? /*#__PURE__*/_react.default.createElement(_GroupByMenu.default, {
title: t("深入分析"),
result: data,
onChangeLogicform: onChangeLogicform,
selectedItem: null,
menuStyle: {
width: 200,
height: 200,
overflow: "auto"
}
}, /*#__PURE__*/_react.default.createElement("div", {
onClick: function onClick(e) {
return e.preventDefault();
}
}, children || defaultStatistics)) : /*#__PURE__*/_react.default.createElement("div", {
onClick: function onClick(e) {
return e.preventDefault();
}
}, children || defaultStatistics)), lyLF && yoyData && showYoyAndMomFinal ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ZEValueDisplayer, {
data: yoyData,
onChangeLogicform: onChangeLogicform,
showYoyAndMom: false,
title: t("去年同期"),
tip: lyTip,
logicform: lyLF,
upColor: upColor,
downColor: downColor,
highlight: false,
noWrapper: true
}), /*#__PURE__*/_react.default.createElement(ZEValueDisplayer, {
data: __assign(__assign({}, yoyData), {
result: [{
_id: "0",
同比: yoy === null || yoy === void 0 ? void 0 : yoy.value
}],
columnProperties: [__assign(__assign({}, (_a = yoyData === null || yoyData === void 0 ? void 0 : yoyData.columnProperties) === null || _a === void 0 ? void 0 : _a[0]), {
type: "percentage",
name: "同比",
ui: {},
unit: undefined
})]
}),
onChangeLogicform: onChangeLogicform,
showYoyAndMom: false,
trend: yoy === null || yoy === void 0 ? void 0 : yoy.trend,
tip: lyTip,
logicform: lyLF,
title: t("$yoy"),
upColor: upColor,
downColor: downColor,
highlight: false,
noWrapper: true,
showArrow: true
})) : null, lmLF && momData && showYoyAndMomFinal && !hideMom ? /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(ZEValueDisplayer, {
data: momData,
onChangeLogicform: onChangeLogicform,
showYoyAndMom: false,
title: t("上一期"),
tip: lmTip,
logicform: lmLF,
upColor: upColor,
downColor: downColor,
highlight: false,
noWrapper: true
}), /*#__PURE__*/_react.default.createElement(ZEValueDisplayer, {
data: __assign(__assign({}, momData), {
result: [{
_id: "0",
环比: mom === null || mom === void 0 ? void 0 : mom.value
}],
columnProperties: [__assign(__assign({}, (_b = momData === null || momData === void 0 ? void 0 : momData.columnProperties) === null || _b === void 0 ? void 0 : _b[0]), {
type: "percentage",
name: "环比",
ui: {},
unit: undefined
})]
}),
onChangeLogicform: onChangeLogicform,
showYoyAndMom: false,
trend: mom === null || mom === void 0 ? void 0 : mom.trend,
tip: lmTip,
logicform: lmLF,
title: t("$mom"),
upColor: upColor,
downColor: downColor,
highlight: false,
noWrapper: true,
showArrow: true
})) : null, recommendKpis);
};
if (invalid) return null;
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, noWrapper ? renderContent() : /*#__PURE__*/_react.default.createElement("div", {
className: ["ze-value-items", rootClassName].join(" ")
}, renderContent()), groupbyYearComponent, !shouldSplitByYear && (data === null || data === void 0 ? void 0 : data.logicform) && showYoyAndMom && showAnalyzer && /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
fallbackRender: function fallbackRender(_a) {
var error = _a.error;
return /*#__PURE__*/_react.default.createElement("div", null, t("智能归因出错啦，请联系技术支持。复制错误信息"), /*#__PURE__*/_react.default.createElement(_button.default, {
type: "link",
icon: /*#__PURE__*/_react.default.createElement(_icons.CopyOutlined, null),
onClick: function onClick() {
navigator.clipboard.writeText(error.message);
_message2.default.info(t("已复制错误信息"));
}
}));
}
}, /*#__PURE__*/_react.default.createElement(_Analyzer.default, __assign({
result: data,
upColor: upColor,
downColor: downColor,
onChangeLogicform: onChangeLogicform,
// @ts-ignore
customSummary: (_d = data.columnProperties[0].analyzer) === null || _d === void 0 ? void 0 : _d.customSummary
}, analzyerProps, {
title: exportTitle
}))));
};
var ZEValueDisplayerWrapper = function ZEValueDisplayerWrapper(props) {
return /*#__PURE__*/_react.default.createElement(_reactSizeme.SizeMe, null, function (_a) {
var size = _a.size;
var className = "";
if (size.width < screenXL) {
className = "screen-xl";
}
if (size.width < screenSM) {
className = "screen-sm";
}
return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(ZEValueDisplayer, __assign({
rootClassName: className
}, props)));
});
};
var _default = ZEValueDisplayerWrapper;
exports.default = _default;