ze-react-component-library
Version:
ZeroETP React Component Library
259 lines (216 loc) • 9.08 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/result/style");
var _result = _interopRequireDefault(require("antd/lib/result"));
var _StatisticForValue = _interopRequireDefault(require("../components/StatisticForValue"));
var _react = _interopRequireDefault(require("react"));
var _Analyzer = _interopRequireDefault(require("../Analyzer"));
var _reactSizeme = require("react-sizeme");
var _useYoyMom = _interopRequireDefault(require("./useYoyMom"));
require("./index.less");
var _reactErrorBoundary = require("react-error-boundary");
var _icons = require("@ant-design/icons");
var _useLocale = _interopRequireDefault(require("../hooks/useLocale"));
var _useFrontConfig = require("../hooks/useFrontConfig");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(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 ZEValueDisplayer2 = function ZEValueDisplayer2(_a) {
var _b, _c;
var result = _a.result,
upColor = _a.upColor,
downColor = _a.downColor,
rootClassName = _a.rootClassName,
_d = _a.showYoyAndMom,
showYoyAndMom = _d === void 0 ? true : _d,
onChangeLogicform = _a.onChangeLogicform,
exportTitle = _a.exportTitle,
_e = _a.analzyerProps,
analzyerProps = _e === void 0 ? {} : _e;
var t = (0, _useLocale.default)().t;
var _f = (0, _useYoyMom.default)({
data: result,
showYoyAndMom: showYoyAndMom,
upColor: upColor,
downColor: downColor
}),
getYoyMom = _f.getYoyMom,
colors = _f.colors,
lyTip = _f.lyTip,
lyLF = _f.lyLF,
lmTip = _f.lmTip,
lmLF = _f.lmLF,
hideMom = _f.hideMom; // 判断智能归因
var analyzerDefaultOperator;
if (result && ((_b = result.logicform.preds) === null || _b === void 0 ? void 0 : _b.length) <= 3 && ((_c = result.logicform.preds[0]) === null || _c === void 0 ? void 0 : _c.operator) === "$sum") {
var hasMom = result.logicform.preds.find(function (p) {
return p.operator === "$mom" && p.pred === result.logicform.preds[0].pred;
});
var hasYoy = result.logicform.preds.find(function (p) {
return p.operator === "$yoy" && p.pred === result.logicform.preds[0].pred;
});
if (hasMom) {
analyzerDefaultOperator = "$mom";
} else if (hasYoy) {
analyzerDefaultOperator = "$yoy";
} else {
analyzerDefaultOperator = "$mom";
}
}
var showAnalyzer = (0, _useFrontConfig.useAnalyzer)();
if (!result || !result.logicform) return /*#__PURE__*/_react.default.createElement("div", null);
if (result.result.length === 0) {
return /*#__PURE__*/_react.default.createElement(_result.default, {
status: "info",
title: t("未查到数据")
});
}
if (result.logicform.groupby) return /*#__PURE__*/_react.default.createElement(_result.default, {
status: "error",
title: t("程序出错了"),
subTitle: t("此数据无法用KPI组件展示")
});
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
className: ["ze-multi-values", rootClassName].filter(function (f) {
return f;
}).join(" ")
}, result.columnProperties.map(function (property, i) {
var _a, _b, _c;
var predItem = (_b = (_a = result.logicform) === null || _a === void 0 ? void 0 : _a.preds) === null || _b === void 0 ? void 0 : _b.find(function (f) {
return _typeof(f) === "object" && f.name === (property === null || property === void 0 ? void 0 : property.name);
});
var value = result.result[0][property.name];
var _d = getYoyMom(property, i),
mom = _d.mom,
yoy = _d.yoy;
var subItems = [{
title: t("$mom"),
item: mom,
tip: lmTip,
logicform: lmLF,
hide: hideMom
}, {
title: t("$yoy"),
item: yoy,
tip: lyTip,
logicform: lyLF
}].filter(function (d) {
return !d.hide && d.item;
});
return /*#__PURE__*/_react.default.createElement("div", {
className: ["ze-value-item-block", i === 0 ? "ze-value-item-block-highlight" : "", subItems.length > 0 ? "ze-value-item-multi" : ""].filter(function (d) {
return d;
}).join(" "),
key: property.name
}, /*#__PURE__*/_react.default.createElement("div", {
className: ["ze-value-item", i == 0 ? "ze-value-item-highlight" : ""].filter(function (f) {
return f;
}).join(" ")
}, /*#__PURE__*/_react.default.createElement(_StatisticForValue.default, __assign({}, {
property: property,
value: value,
logicform: {
schema: (predItem === null || predItem === void 0 ? void 0 : predItem.schema) || ((_c = result.logicform) === null || _c === void 0 ? void 0 : _c.schema),
query: (predItem === null || predItem === void 0 ? void 0 : predItem.query) || {},
preds: [__assign(__assign({}, predItem), {
query: undefined
})]
},
upColor: colors.up,
downColor: colors.down
}))), /*#__PURE__*/_react.default.createElement("div", {
className: "ze-value-sub-items"
}, subItems.map(function (_a) {
var item = _a.item,
title = _a.title,
tip = _a.tip,
logicform = _a.logicform;
return /*#__PURE__*/_react.default.createElement("div", {
className: "ze-value-sub-item ze-value-item",
key: title,
style: {
width: "calc((100% - 2*" + (subItems.length - 1) + "px) / " + subItems.length + ")"
}
}, /*#__PURE__*/_react.default.createElement(_StatisticForValue.default, __assign({}, {
property: property,
value: item === null || item === void 0 ? void 0 : item.lastPeriod,
title: title,
tip: tip,
subTitle: /*#__PURE__*/_react.default.createElement("div", {
className: "ze-value-sub-item-trend-content"
}, /*#__PURE__*/_react.default.createElement(_StatisticForValue.default, __assign({}, {
property: {
type: "percentage"
},
value: item === null || item === void 0 ? void 0 : item.value,
trend: item === null || item === void 0 ? void 0 : item.trend,
upColor: colors.up,
downColor: colors.down,
showArrow: true
})))
})));
})));
})), analyzerDefaultOperator && 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("div", {
style: {
marginTop: 10
}
}, /*#__PURE__*/_react.default.createElement(_Analyzer.default, __assign({
result: result,
upColor: upColor,
downColor: downColor,
onChangeLogicform: onChangeLogicform,
defaultOperator: analyzerDefaultOperator
}, analzyerProps, {
title: exportTitle
})))));
};
var padding = 48;
var screenXL = 1200 - padding;
var screenSM = 576 - padding;
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(ZEValueDisplayer2, __assign({
rootClassName: className
}, props)));
});
};
var _default = ZEValueDisplayerWrapper;
exports.default = _default;