ze-react-component-library
Version:
ZeroETP React Component Library
314 lines (286 loc) • 10.7 kB
JavaScript
import "antd/es/message/style";
import _message from "antd/es/message";
import "antd/es/button/style";
import _Button from "antd/es/button";
import "antd/es/space/style";
import _Space from "antd/es/space";
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);
};
import React from "react";
import { CopyOutlined } from "@ant-design/icons";
import GroupByMenu from "../components/GroupByMenu";
import StatisticForValue from "../components/StatisticForValue";
import Analyzer from "../Analyzer";
import { ErrorBoundary } from "react-error-boundary";
import ZECard from "../ZECard";
import { SizeMe } from "react-sizeme";
import useYoyMom from "./useYoyMom";
import "./index.less";
import ZELogicform from "../ZELogicform";
import useLocale from "../hooks/useLocale";
import { useAnalyzer } from "../hooks/useFrontConfig";
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 = useLocale().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 = useAnalyzer();
var _h = useYoyMom({
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.createElement(React.Fragment, null);
if (shouldSplitByYear) {
groupbyYearComponent = /*#__PURE__*/React.createElement(ZECard, {
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.createElement(_Space, {
size: "large"
}, data.columnProperties.length > 0 ? data.columnProperties.map(function (property) {
var _a, _b;
return /*#__PURE__*/React.createElement(StatisticForValue, __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.createElement(StatisticForValue, __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.createElement(ZELogicform, {
content: function content(_v, _l, res) {
return /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
className: "ze-value-item " + (highlight ? "ze-value-item-highlight" : "")
}, (data === null || data === void 0 ? void 0 : data.logicform) ? /*#__PURE__*/React.createElement(GroupByMenu, {
title: t("深入分析"),
result: data,
onChangeLogicform: onChangeLogicform,
selectedItem: null,
menuStyle: {
width: 200,
height: 200,
overflow: "auto"
}
}, /*#__PURE__*/React.createElement("div", {
onClick: function onClick(e) {
return e.preventDefault();
}
}, children || defaultStatistics)) : /*#__PURE__*/React.createElement("div", {
onClick: function onClick(e) {
return e.preventDefault();
}
}, children || defaultStatistics)), lyLF && yoyData && showYoyAndMomFinal ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ZEValueDisplayer, {
data: yoyData,
onChangeLogicform: onChangeLogicform,
showYoyAndMom: false,
title: t("去年同期"),
tip: lyTip,
logicform: lyLF,
upColor: upColor,
downColor: downColor,
highlight: false,
noWrapper: true
}), /*#__PURE__*/React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ZEValueDisplayer, {
data: momData,
onChangeLogicform: onChangeLogicform,
showYoyAndMom: false,
title: t("上一期"),
tip: lmTip,
logicform: lmLF,
upColor: upColor,
downColor: downColor,
highlight: false,
noWrapper: true
}), /*#__PURE__*/React.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.createElement(React.Fragment, null, noWrapper ? renderContent() : /*#__PURE__*/React.createElement("div", {
className: ["ze-value-items", rootClassName].join(" ")
}, renderContent()), groupbyYearComponent, !shouldSplitByYear && (data === null || data === void 0 ? void 0 : data.logicform) && showYoyAndMom && showAnalyzer && /*#__PURE__*/React.createElement(ErrorBoundary, {
fallbackRender: function fallbackRender(_a) {
var error = _a.error;
return /*#__PURE__*/React.createElement("div", null, t("智能归因出错啦，请联系技术支持。复制错误信息"), /*#__PURE__*/React.createElement(_Button, {
type: "link",
icon: /*#__PURE__*/React.createElement(CopyOutlined, null),
onClick: function onClick() {
navigator.clipboard.writeText(error.message);
_message.info(t("已复制错误信息"));
}
}));
}
}, /*#__PURE__*/React.createElement(Analyzer, __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.createElement(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.createElement("div", null, /*#__PURE__*/React.createElement(ZEValueDisplayer, __assign({
rootClassName: className
}, props)));
});
};
export default ZEValueDisplayerWrapper;