ze-react-component-library
Version:
ZeroETP React Component Library
1,381 lines (1,173 loc) • 46 kB
JavaScript
"use strict";
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); }
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
require("antd/lib/tabs/style");
var _tabs = _interopRequireDefault(require("antd/lib/tabs"));
require("antd/lib/modal/style");
var _modal = _interopRequireDefault(require("antd/lib/modal"));
require("antd/lib/divider/style");
var _divider = _interopRequireDefault(require("antd/lib/divider"));
require("antd/lib/card/style");
var _card = _interopRequireDefault(require("antd/lib/card"));
require("antd/lib/message/style");
var _message2 = _interopRequireDefault(require("antd/lib/message"));
require("antd/lib/input/style");
var _input = _interopRequireDefault(require("antd/lib/input"));
require("antd/lib/spin/style");
var _spin = _interopRequireDefault(require("antd/lib/spin"));
require("antd/lib/tag/style");
var _tag = _interopRequireDefault(require("antd/lib/tag"));
require("antd/lib/space/style");
var _space = _interopRequireDefault(require("antd/lib/space"));
require("antd/lib/menu/style");
var _menu = _interopRequireDefault(require("antd/lib/menu"));
require("antd/lib/dropdown/style");
var _dropdown = _interopRequireDefault(require("antd/lib/dropdown"));
require("antd/lib/empty/style");
var _empty = _interopRequireDefault(require("antd/lib/empty"));
require("antd/lib/result/style");
var _result = _interopRequireDefault(require("antd/lib/result"));
require("antd/lib/form/style");
var _form = _interopRequireDefault(require("antd/lib/form"));
require("antd/lib/button/style");
var _button = _interopRequireDefault(require("antd/lib/button"));
require("antd/lib/tooltip/style");
var _tooltip = _interopRequireDefault(require("antd/lib/tooltip"));
var _hooks = require("@umijs/hooks");
var _reactErrorBoundary = require("react-error-boundary");
var _react = _interopRequireWildcard(require("react"));
var _underscore = _interopRequireDefault(require("underscore"));
var _zeroetpApiSdk = require("zeroetp-api-sdk");
var _request = require("../request");
var _ZELogicformVisualizer = _interopRequireDefault(require("../ZELogicformVisualizer"));
var _icons = require("@ant-design/icons");
var _RepresentationChanger = _interopRequireDefault(require("./RepresentationChanger"));
require("./ZECard.less");
var _LogicFormTraveler = _interopRequireDefault(require("./LogicFormTraveler"));
var _util = require("../util");
var _GroupByMenu = _interopRequireDefault(require("../components/GroupByMenu"));
var _CodeViewer = _interopRequireDefault(require("../components/CodeViewer"));
var _ErrorDisplayer = _interopRequireDefault(require("./ErrorDisplayer"));
var _MultiEntitySelector = _interopRequireDefault(require("./MultiEntitySelector"));
var _ZEFeedback = _interopRequireDefault(require("../ZEFeedback"));
var _useTheme = require("../hooks/useTheme");
var _useAsk = _interopRequireDefault(require("../hooks/useAsk"));
var _representations = require("./representations");
var _util2 = require("./util");
var _useLocale = _interopRequireDefault(require("../hooks/useLocale"));
var _LLMChatter = _interopRequireDefault(require("./LLMChatter"));
var _useFrontConfig = require("../hooks/useFrontConfig");
var _useCurrency = _interopRequireWildcard(require("../hooks/useCurrency"));
var _ZESchemaForm = _interopRequireDefault(require("../ZESchemaForm"));
var _LogicformEditor = _interopRequireDefault(require("../components/LogicformEditor"));
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
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 __awaiter = void 0 && (void 0).__awaiter || function (thisArg, _arguments, P, generator) {
function adopt(value) {
return value instanceof P ? value : new P(function (resolve) {
resolve(value);
});
}
return new (P || (P = Promise))(function (resolve, reject) {
function fulfilled(value) {
try {
step(generator.next(value));
} catch (e) {
reject(e);
}
}
function rejected(value) {
try {
step(generator["throw"](value));
} catch (e) {
reject(e);
}
}
function step(result) {
result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
}
step((generator = generator.apply(thisArg, _arguments || [])).next());
});
};
var __generator = void 0 && (void 0).__generator || function (thisArg, body) {
var _ = {
label: 0,
sent: function sent() {
if (t[0] & 1) throw t[1];
return t[1];
},
trys: [],
ops: []
},
f,
y,
t,
g;
return g = {
next: verb(0),
"throw": verb(1),
"return": verb(2)
}, typeof Symbol === "function" && (g[Symbol.iterator] = function () {
return this;
}), g;
function verb(n) {
return function (v) {
return step([n, v]);
};
}
function step(op) {
if (f) throw new TypeError("Generator is already executing.");
while (_) {
try {
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
if (y = 0, t) op = [op[0] & 2, t.value];
switch (op[0]) {
case 0:
case 1:
t = op;
break;
case 4:
_.label++;
return {
value: op[1],
done: false
};
case 5:
_.label++;
y = op[1];
op = [0];
continue;
case 7:
op = _.ops.pop();
_.trys.pop();
continue;
default:
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
_ = 0;
continue;
}
if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
_.label = op[1];
break;
}
if (op[0] === 6 && _.label < t[1]) {
_.label = t[1];
t = op;
break;
}
if (t && _.label < t[2]) {
_.label = t[2];
_.ops.push(op);
break;
}
if (t[2]) _.ops.pop();
_.trys.pop();
continue;
}
op = body.call(thisArg, _);
} catch (e) {
op = [6, e];
y = 0;
} finally {
f = t = 0;
}
}
if (op[0] & 5) throw op[1];
return {
value: op[0] ? op[1] : void 0,
done: true
};
}
};
var __spreadArray = void 0 && (void 0).__spreadArray || function (to, from) {
for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) {
to[j] = from[i];
}
return to;
};
/**
* 这个控件通过接受Logicform，展示复杂结果
*/
var CardCloseHandler = function CardCloseHandler(_a) {
var close = _a.close;
return close ? /*#__PURE__*/_react.default.createElement(_tooltip.default, {
title: "\u5173\u95ED\u6B64\u5361\u7247"
}, /*#__PURE__*/_react.default.createElement(_button.default, {
className: "ze-card-closer",
icon: /*#__PURE__*/_react.default.createElement(_icons.CloseOutlined, null),
onClick: function onClick() {
return close();
}
})) : null;
};
var ZECard = function ZECard(_a) {
var _b;
var id = _a.id,
_loading = _a.loading,
showFeedback = _a.showFeedback,
initialLogicform = _a.logicform,
logicformQuery = _a.logicformQuery,
_formatResult = _a.formatResult,
_title = _a.title,
showTitleEditor = _a.showTitleEditor,
_question = _a.question,
titleRender = _a.titleRender,
warning = _a.warning,
mainContent = _a.mainContent,
additionalContent = _a.additionalContent,
extra = _a.extra,
_c = _a.extraMenus,
extraMenus = _c === void 0 ? [] : _c,
footer = _a.footer,
_d = _a.bodyStyle,
bodyStyle = _d === void 0 ? {} : _d,
_e = _a.headStyle,
headStyle = _e === void 0 ? {} : _e,
repr = _a.representation,
getResult = _a.getResult,
exportToExcel = _a.exportToExcel,
xlsx = _a.xlsx,
_f = _a.debug,
debug = _f === void 0 ? false : _f,
_g = _a.showRecommender,
showRecommender = _g === void 0 ? false : _g,
_h = _a.showRepresentationChanger,
showRepresentationChanger = _h === void 0 ? true : _h,
askMore = _a.askMore,
onChangeQuestion = _a.onChangeQuestion,
showMainContentOnly = _a.showMainContentOnly,
_j = _a.tableProps,
tableProps = _j === void 0 ? {} : _j,
_k = _a.sheetProps,
sheetProps = _k === void 0 ? {} : _k,
_l = _a.detailProps,
detailProps = _l === void 0 ? {} : _l,
_m = _a.showVisualizer,
showVisualizer = _m === void 0 ? true : _m,
_o = _a.visualizerProps,
visualizerProps = _o === void 0 ? {} : _o,
_p = _a.chartProps,
chartProps = _p === void 0 ? {} : _p,
_q = _a.compact,
compact = _q === void 0 ? false : _q,
pieThreshold = _a.pieThreshold,
barFirst = _a.barFirst,
_r = _a.valueDisplayerProps,
valueDisplayerProps = _r === void 0 ? {} : _r,
close = _a.close,
_s = _a.enableGroupByMenu,
enableGroupByMenu = _s === void 0 ? true : _s,
_onChange = _a.onChange,
askError = _a.askError,
askErrorPath = _a.askErrorPath,
_t = _a.useSheet,
useSheet = _t === void 0 ? true : _t,
_u = _a.allowDrillDown,
allowDrillDown = _u === void 0 ? true : _u,
preprocessDrilldownLogicform = _a.preprocessDrilldownLogicform,
_v = _a.useLLM,
useLLM = _v === void 0 ? false : _v,
refreshInterval = _a.refreshInterval,
_w = _a.theme,
theme = _w === void 0 ? "light" : _w,
style = _a.style,
_x = _a.showExtra,
showExtra = _x === void 0 ? true : _x,
chatAvatar = _a.chatAvatar,
promptTemplate = _a.promptTemplate,
llmMaxRows = _a.llmMaxRows,
llmProps = _a.llmProps,
_y = _a.echartsSetting,
_echartsSetting = _y === void 0 ? {
seriesLabel: {
show: true
},
averageLine: {
show: false
},
sheet: {
showSubTotals: true
}
} : _y,
_z = _a.enableEchartsSetting,
enableEchartsSetting = _z === void 0 ? true : _z,
analyzer = _a.analyzer,
_0 = _a.menuFilter,
menuFilter = _0 === void 0 ? function () {
return true;
} : _0;
var _1 = (0, _react.useState)(_title),
title = _1[0],
setTitle = _1[1];
var _2 = (0, _react.useState)(_title),
currentTitle = _2[0],
setCurrentTitle = _2[1];
var _3 = (0, _react.useState)(false),
titleEditing = _3[0],
setTitleEditing = _3[1];
var t = (0, _useLocale.default)().t;
var cardDivRef = (0, _react.useRef)();
var contentRef = (0, _react.useRef)();
var size = (0, _hooks.useSize)(contentRef.current)[0];
var cardFullSize = (0, _hooks.useSize)(cardDivRef.current)[0];
var currencyState = (0, _useCurrency.default)(initialLogicform === null || initialLogicform === void 0 ? void 0 : initialLogicform.currency);
var _4 = (0, _react.useState)(_echartsSetting),
echartsSetting = _4[0],
setEchartsSetting = _4[1];
var echartsSettingModalTrigger = (0, _react.useRef)(null);
var form = _form.default.useForm()[0]; // iframe: post message
if (window.top && window.top !== window) {
window.top.postMessage({
app: "chatbi",
action: "card/sizechange",
size: cardFullSize
}, "*");
} // question默认为title
var question = _question;
if (!_question) {
question = _title;
} // 手机最大宽度，适配charts
var isMobile = size.width && size.width <= 750;
var _5 = (0, _react.useState)(null),
chartClickPos = _5[0],
setChartClickPos = _5[1];
var _6 = (0, _hooks.useHistoryTravel)(initialLogicform),
logicform = _6.value,
_setLogicform = _6.setValue,
backLength = _6.backLength,
forwardLength = _6.forwardLength,
_go = _6.go,
_back = _6.back,
_forward = _6.forward;
var _7 = (0, _react.useState)(),
logicFormWithSkipAndSort = _7[0],
setLogicFormWithSkipAndSort = _7[1];
var _8 = (0, _react.useState)(),
errorMessage = _8[0],
setErrorMessage = _8[1]; // 用来给前端修正logicform的，比较常见的用法是MultiEntity
var _9 = (0, _react.useState)(),
errorLogicform = _9[0],
setErrorLogicform = _9[1];
var _10 = (0, _hooks.useRequest)(function () {
if (logicform) {
var lf = logicFormWithSkipAndSort || logicform;
return (0, _request.requestLogicform)(__assign(__assign({}, lf), tableProps.dragSortable ? {
sort: __assign(__assign({}, lf.sort || {}), {
order: -1
})
} : {}));
} else {
return new Promise(function (resolve) {
return resolve(null);
});
}
}, {
pollingInterval: refreshInterval > 0 ? refreshInterval : undefined,
refreshDeps: [logicform, logicFormWithSkipAndSort, refreshInterval],
onSuccess: function onSuccess(res) {
getResult === null || getResult === void 0 ? void 0 : getResult(res);
setErrorMessage(undefined);
},
onError: function onError(e) {
// iframe: post message
if (window.top && window.top !== window) {
window.top.postMessage({
app: "chatbi",
action: "card/data",
error: e.message === "没有此数据权限" ? "noauth" : e.message
}, "*");
}
setErrorMessage(e.message);
},
formatResult: function formatResult(res) {
if (!res) return null; // iframe: post message
if (window.top && window.top !== window) {
window.top.postMessage({
app: "chatbi",
action: "data",
res: res
}, "*");
}
if (res.error) {
if (res.logicform) {
if (res.errorCode) {
return res;
} else {
setErrorLogicform(res);
}
}
return null;
}
var resData = res;
if (_formatResult) {
resData = _formatResult(res);
} // Feat: auto unit
(0, _util.autoUnitForData)(resData, t);
return resData;
}
}),
data = _10.data,
dataLoading = _10.loading,
fetchData = _10.run;
var loading = _loading || dataLoading; // 图表设置是否展示显示小记的选项
var enableShowSubTotals = (0, _util.enableShowSubTotalsSetting)(data === null || data === void 0 ? void 0 : data.logicform); // 前端配置
var frontConfig = (0, _useFrontConfig.useFrontConfig)({
logicform: logicform,
echartsSetting: echartsSetting,
cardResult: data,
analyzer: analyzer
});
var recommendsWithGuess = (0, _hooks.useRequest)(function () {
if (!initialLogicform || !showRecommender) {
return new Promise(function (resolve) {
return resolve({
data: []
});
});
}
return (0, _request.requestGuess)(question);
}, {
initialData: [],
formatResult: function formatResult(res) {
return res.data;
}
}).data;
var recommends = (0, _hooks.useRequest)(function () {
if (!initialLogicform || !showRecommender) {
return new Promise(function (resolve) {
return resolve({
recommends: []
});
});
}
return (0, _request.requestRecommend)(initialLogicform);
}, {
initialData: [],
formatResult: function formatResult(res) {
return res.recommends;
}
}).data;
var _11 = (0, _react.useState)(repr),
representation = _11[0],
setRepresentation = _11[1];
var _12 = (0, _react.useState)(),
selectedItem = _12[0],
setSelectedItem = _12[1];
var _13 = (0, _react.useState)(false),
showSql = _13[0],
setShowSql = _13[1];
var finalRepresentation = (0, _react.useMemo)(function () {
var finalRep = representation;
if (data) {
finalRep = (0, _representations.getDefaultRepresentation)(data, pieThreshold, barFirst); // 用户指定的representation
if (data.logicform.representation && _representations.representationMap[data.logicform.representation].valid(data)) {
finalRep = data.logicform.representation;
}
if (representation && _representations.representationMap[representation].valid(data)) {
finalRep = representation;
}
}
return finalRep;
}, [data, representation]);
var onDbClick = (0, _util2.useDrillDownDbClick)({
logicform: logicform,
onChangeLogicform: function onChangeLogicform(logicform) {
if (allowDrillDown) {
preprocessDrilldownLogicform === null || preprocessDrilldownLogicform === void 0 ? void 0 : preprocessDrilldownLogicform(logicform);
_setLogicform(logicform);
}
},
back: _back
}).onDbClick;
var tableContent = (0, _react.useMemo)(function () {
var finalTableProps = __assign(__assign({
logicform: logicform,
setLogicform: function setLogicform(val, valWithSkipAndSorter) {
if (val) {
_setLogicform(val);
}
setLogicFormWithSkipAndSort(valWithSkipAndSorter);
},
xlsx: xlsx,
exportToExcel: exportToExcel,
onRow: function onRow(record) {
return {
onClick: function onClick(e) {
onDbClick(record, data);
}
};
},
result: data,
reload: fetchData
}, tableProps), {
title: tableProps.title || title
});
return _representations.representationMap.table.component(finalTableProps);
}, [data, tableProps, exportToExcel, title]);
var content = (0, _react.useMemo)(function () {
var _a, _b; // LLM
var showLLMChatter = data && useLLM;
var component;
var additionalComponent = null; // 自定义Content
if (mainContent) {
component = mainContent((data === null || data === void 0 ? void 0 : data.logicform) || logicform, data, _setLogicform);
}
if (additionalContent) {
additionalComponent = additionalContent((data === null || data === void 0 ? void 0 : data.logicform) || logicform, data, _setLogicform);
} // Error
if (errorMessage) {
console.log("errorMessage", errorMessage);
component = /*#__PURE__*/_react.default.createElement(_result.default, {
status: "error",
title: errorMessage
});
} // 如果没有自定义Content，则自动判断
if (!component) {
// console.log("finalRepresentation", finalRepresentation);
if (askError) {
component = /*#__PURE__*/_react.default.createElement(_ErrorDisplayer.default, {
question: question,
error: askError,
// helperLink={askErrorHelperLink}
// onChangeLogicform={(lf) => setLogicform(lf)}
askMore: askMore,
avatarSrc: chatAvatar
});
} else if (errorLogicform) {
component = /*#__PURE__*/_react.default.createElement(_MultiEntitySelector.default, {
logicform: logicform,
errorLogicform: errorLogicform,
onSelectEntity: function onSelectEntity(newLF) {
_setLogicform(newLF);
setErrorLogicform(null);
}
});
} else if (data === null || data === void 0 ? void 0 : data.errorCode) {
component = /*#__PURE__*/_react.default.createElement(_ErrorDisplayer.default, {
error: "\u62B1\u6B49\uFF0C\u4F3C\u4E4E\u9047\u5230\u4E86\u4E9B\u95EE\u9898\uFF0C\u4EE5\u4E0B\u662F\u62A5\u9519\u4FE1\u606F\uFF0C\u8BF7\u8054\u7CFB\u6280\u672F\u652F\u6301\u3002\n\n ````" + data.error + "````"
});
} else if (finalRepresentation === "table" && logicform && (0, _zeroetpApiSdk.isSimpleQuery)(logicform)) {
component = tableContent;
} else if (finalRepresentation === "value") {
component = _representations.representationMap.value.component(__assign(__assign({
data: data,
onChangeLogicform: _setLogicform
}, valueDisplayerProps), {
exportTitle: valueDisplayerProps.exportTitle || title
}));
} else if (data) {
if (!data.result || ((_a = data.result) === null || _a === void 0 ? void 0 : _a.length) === 0) {
component = /*#__PURE__*/_react.default.createElement(_empty.default, {
description: "\u6CA1\u6709\u6570\u636E"
});
} else if (_representations.chartTypes.includes(finalRepresentation)) {
component = _representations.representationMap[finalRepresentation].component(__assign(__assign({
result: data,
isMobile: isMobile,
eventsDict: {
click: function click(params, _item) {
// 20221223: 点击图表后出来的下钻菜单比较不舒服，暂时去掉
if (!params) {
setSelectedItem(null);
return;
}
var dataIndex = params.dataIndex;
var item = _item || (data === null || data === void 0 ? void 0 : data.result[dataIndex]);
if (item && JSON.stringify(item) === JSON.stringify(selectedItem)) {
// 重复点击，取消选中
setSelectedItem(null);
setChartClickPos(undefined);
return;
}
setChartClickPos(params === null || params === void 0 ? void 0 : params.event);
setSelectedItem(item);
},
dblclick: function dblclick(params, _item) {
var _a; // console.log("dblclick", params);
var dataIndex = params.dataIndex;
var item = _item || (data === null || data === void 0 ? void 0 : data.result[dataIndex]);
if (item) {
var drilldownData = __assign(__assign({}, data), {
logicform: __assign(__assign({}, data.logicform), {
// 图表数据处理后使用的groupby
groupby: item.groupby || ((_a = data.logicform) === null || _a === void 0 ? void 0 : _a.groupby)
})
});
(0, _util2.drilldownLogicform)(item, drilldownData, _setLogicform);
}
}
}
}, chartProps), {
title: chartProps.title || title
}));
} else if (finalRepresentation === "entity" && ((_b = data.result) === null || _b === void 0 ? void 0 : _b.length) === 1) {
component = _representations.representationMap.entity.component({
data: data,
tableProps: tableProps,
detailProps: detailProps
});
} else if (data && useSheet && data.logicform.groupby && data.columnProperties.find(function (p) {
return p.primal_type === "number";
}) // 这个条件是说没value的不要进来，例如$distinct
) {
component = _representations.representationMap.sheet.component(__assign(__assign({
logicform: logicform,
setLogicform: _setLogicform,
result: data,
xlsx: xlsx,
onChange: function onChange(v) {
_onChange === null || _onChange === void 0 ? void 0 : _onChange({
sheetProps: {
s2DataConfig: v
}
});
},
height: size.height,
onRow: function onRow(record) {
onDbClick(record, data);
}
}, sheetProps), {
title: sheetProps.title || title
}));
} else {
component = tableContent;
}
}
}
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
className: "ze-card-main-content",
ref: contentRef,
style: {
marginTop: compact ? 5 : 10
}
}, component), additionalComponent, data && /*#__PURE__*/_react.default.createElement(_LLMChatter.default, __assign({
hide: !showLLMChatter,
question: question,
data: data,
avatarSrc: chatAvatar,
promptTemplate: promptTemplate
}, llmProps, {
bodyStyle: llmMaxRows ? {
maxHeight: llmMaxRows * 22,
overflowY: "auto"
} : {}
})));
}, [data, logicform, finalRepresentation, errorLogicform, isMobile, compact, tableProps, errorMessage, useLLM, selectedItem, promptTemplate, mainContent]);
var renderGroupByMenu = function renderGroupByMenu() {
var _a, _b, _c, _d, _e;
if ((finalRepresentation === "value" || selectedItem) && enableGroupByMenu && chartClickPos) {
var maxHeight = 150;
return /*#__PURE__*/_react.default.createElement(_GroupByMenu.default, {
key: JSON.stringify(selectedItem),
result: data,
placement: "bottom",
onChangeLogicform: function onChangeLogicform(newLF) {
_setLogicform(newLF);
setSelectedItem(undefined);
},
selectedItem: selectedItem,
open: true,
onClose: function onClose() {
setSelectedItem(null);
setChartClickPos(undefined);
},
overlayClassName: "ze-card-group-by-menu-drop-down",
menuStyle: {
maxHeight: maxHeight > window.innerHeight / 2 ? window.innerHeight / 2 : maxHeight,
overflow: "auto"
}
}, /*#__PURE__*/_react.default.createElement("div", {
style: {
position: "absolute",
left: ((_a = chartClickPos.event) === null || _a === void 0 ? void 0 : _a.clientX) - ((_d = (_c = (_b = cardDivRef.current) === null || _b === void 0 ? void 0 : _b.getBoundingClientRect()) === null || _c === void 0 ? void 0 : _c.x) !== null && _d !== void 0 ? _d : 0),
top: ((_e = chartClickPos.event) === null || _e === void 0 ? void 0 : _e.zrY) + maxHeight / 2,
width: 1,
height: 1
}
}));
}
return null;
}; // extra + default extra
var extras = [];
if (extra) {
extras.push( /*#__PURE__*/_react.default.createElement("div", {
key: "default"
}, extra));
}
if (backLength > 0) {
extras.push( /*#__PURE__*/_react.default.createElement(_LogicFormTraveler.default, {
key: "traveler",
go: function go(step) {
_go(step);
setSelectedItem(undefined);
},
back: function back() {
_back();
setSelectedItem(undefined);
},
forward: function forward() {
_forward();
setSelectedItem(undefined);
},
backLength: backLength,
forwardLength: forwardLength
}));
}
if (logicform && showRepresentationChanger && !(0, _zeroetpApiSdk.isEntity)(logicform) && !(0, _zeroetpApiSdk.isDistinct)(logicform)) {
var showEntityCard = false;
if (((_b = data === null || data === void 0 ? void 0 : data.schema) === null || _b === void 0 ? void 0 : _b.type) === "entity" && data.result.length === 1 && !logicform.groupby) {
showEntityCard = true;
}
if (!showEntityCard) {
extras.push( /*#__PURE__*/_react.default.createElement(_RepresentationChanger.default, {
key: "RepresentationChanger",
representationType: finalRepresentation,
onChange: function onChange(v) {
setRepresentation(v);
setSelectedItem(undefined);
},
result: data
})); // 下钻分析
extras.push( /*#__PURE__*/_react.default.createElement(_GroupByMenu.default, {
result: data,
key: "groupBy",
onChangeLogicform: _setLogicform,
placement: "bottomRight",
menuStyle: {
maxHeight: 300,
overflow: "auto"
}
}));
}
}
var dropdownMenuItems = __spreadArray([debug && {
label: "查看Sql",
key: "sql",
icon: /*#__PURE__*/_react.default.createElement(_icons.BugOutlined, null),
onClick: function onClick() {
setShowSql(true);
}
}, enableEchartsSetting && {
label: t("图表设置"),
key: "echart",
icon: /*#__PURE__*/_react.default.createElement(_icons.EditOutlined, null),
onClick: function onClick() {
if (echartsSettingModalTrigger.current) {
echartsSettingModalTrigger.current.click();
}
}
}, {
label: "显示数据明细",
key: "list",
icon: /*#__PURE__*/_react.default.createElement(_icons.OrderedListOutlined, null),
onClick: function onClick() {
_setLogicform(__assign(__assign({}, logicform), {
preds: undefined,
groupby: undefined,
limit: undefined,
sort: undefined,
having: undefined,
skip: undefined
}));
}
}, showTitleEditor && {
label: "修改卡片标题",
key: "title",
icon: /*#__PURE__*/_react.default.createElement(_icons.EditOutlined, null),
onClick: function onClick() {
setTitleEditing(true);
}
}], extraMenus).filter(function (f) {
return f && menuFilter(String(f.key));
});
if (dropdownMenuItems.length > 0) {
extras.push( /*#__PURE__*/_react.default.createElement(_dropdown.default, {
key: "more-drop",
overlay: /*#__PURE__*/_react.default.createElement(_menu.default, {
className: "ze-card-drop-menus",
items: dropdownMenuItems
}),
trigger: ["click"]
}, /*#__PURE__*/_react.default.createElement(_button.default, {
icon: /*#__PURE__*/_react.default.createElement(_icons.EllipsisOutlined, null)
})));
}
extras.push( /*#__PURE__*/_react.default.createElement(CardCloseHandler, {
close: close,
key: "close"
})); // Recommends
var totalRecommends = _underscore.default.uniq(__spreadArray(__spreadArray([], (recommends || []).map(function (row) {
return row.question;
})), (recommendsWithGuess || []).map(function (row) {
return row.target;
}))); // console.log("totalRecommends", totalRecommends);
var recommendComponent;
var feedbackEl;
if ((totalRecommends === null || totalRecommends === void 0 ? void 0 : totalRecommends.length) > 0) {
recommendComponent = /*#__PURE__*/_react.default.createElement("div", {
className: "ze-card-recommends"
}, /*#__PURE__*/_react.default.createElement("div", {
className: "ze-card-recommends-title"
}, t("nlq.recommend")), /*#__PURE__*/_react.default.createElement("div", {
className: "ze-card-recommends-content"
}, /*#__PURE__*/_react.default.createElement(_space.default, {
wrap: true,
className: "ze-card-recommends-items"
}, totalRecommends.slice(0, 5).map(function (g) {
return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
key: g,
title: g,
placement: "top"
}, /*#__PURE__*/_react.default.createElement(_tag.default, {
className: "ze-tag-primary",
onClick: function onClick(e) {
e.preventDefault();
askMore === null || askMore === void 0 ? void 0 : askMore(g);
}
}, g));
}))));
}
if (showFeedback) {
feedbackEl = /*#__PURE__*/_react.default.createElement(_ZEFeedback.default, {
size: "small",
question: question,
logicform: initialLogicform ? JSON.stringify(logicform) : null,
style: showRecommender ? {
marginLeft: 92
} : {}
});
}
(0, _react.useEffect)(function () {
setChartClickPos(null);
}, [loading]);
(0, _react.useEffect)(function () {
_onChange === null || _onChange === void 0 ? void 0 : _onChange({
logicform: logicform,
title: title,
question: question,
representation: finalRepresentation,
echartsSetting: echartsSetting
});
}, [logicform, finalRepresentation, title, question, echartsSetting]);
if (showMainContentOnly) {
// 有自动refresh的情况下，不要spin
return /*#__PURE__*/_react.default.createElement(_spin.default, {
spinning: refreshInterval ? false : loading
}, content);
}
if (!warning || warning.length === 0) {
if (data === null || data === void 0 ? void 0 : data.columnProperties) {
warning = data.columnProperties.filter(function (property) {
var _a;
return ((_a = property.warning) === null || _a === void 0 ? void 0 : _a.length) > 0;
}).map(function (property) {
return property.name + "\uFF1A" + property.warning;
}).join("\n");
}
}
var renderTitleContent = function renderTitleContent() {
if (titleEditing) {
return /*#__PURE__*/_react.default.createElement("div", {
style: {
width: "100%",
display: "flex",
alignItems: "center",
gap: 12,
paddingRight: 12
}
}, /*#__PURE__*/_react.default.createElement(_input.default, {
value: currentTitle,
style: {
flex: 1
},
allowClear: true,
onChange: function onChange(e) {
setCurrentTitle(e.target.value);
}
}), /*#__PURE__*/_react.default.createElement(_button.default, {
onClick: function onClick() {
setCurrentTitle(title);
setTitleEditing(false);
}
}, "\u53D6\u6D88"), /*#__PURE__*/_react.default.createElement(_button.default, {
type: "primary",
onClick: function onClick() {
var v = ("" + (currentTitle !== null && currentTitle !== void 0 ? currentTitle : "")).trim();
if (v.length > 0) {
setTitle(currentTitle);
setTitleEditing(false);
} else {
_message2.default.error("卡片标题不能为空");
}
}
}, "\u786E\u5B9A"));
}
return titleRender ? titleRender(title) : title;
};
var resetForm = function resetForm() {
var _a, _b, _c;
var initialValues = {
是否显示图表标签: (_a = echartsSetting === null || echartsSetting === void 0 ? void 0 : echartsSetting.seriesLabel) === null || _a === void 0 ? void 0 : _a.show,
是否显示平均线: (_b = echartsSetting === null || echartsSetting === void 0 ? void 0 : echartsSetting.averageLine) === null || _b === void 0 ? void 0 : _b.show,
是否显示小计: enableShowSubTotals && ((_c = echartsSetting === null || echartsSetting === void 0 ? void 0 : echartsSetting.sheet) === null || _c === void 0 ? void 0 : _c.showSubTotals)
};
form.setFieldsValue(initialValues);
};
(0, _react.useEffect)(function () {
resetForm();
}, [echartsSetting]);
(0, _react.useEffect)(function () {
if (logicformQuery) {
_setLogicform(__assign(__assign({}, logicform), {
query: __assign(__assign({}, logicform.query || {}), logicformQuery)
}));
}
}, [logicformQuery]); // 有自动refresh的情况下，不要spin
return /*#__PURE__*/_react.default.createElement(_useTheme.ThemeContext.Provider, {
value: {
theme: theme
}
}, /*#__PURE__*/_react.default.createElement(_useCurrency.CurrencySymbolContext.Provider, {
value: currencyState
}, /*#__PURE__*/_react.default.createElement(_useFrontConfig.FrontConfigContext.Provider, {
value: frontConfig
}, /*#__PURE__*/_react.default.createElement(_spin.default, {
spinning: refreshInterval ? false : loading
}, /*#__PURE__*/_react.default.createElement("div", {
ref: cardDivRef,
className: ["ze-card", theme].join(" ")
}, /*#__PURE__*/_react.default.createElement(_card.default, {
size: compact ? "small" : "default",
title: /*#__PURE__*/_react.default.createElement("div", {
id: id,
style: {
color: theme === "light" ? undefined : "white"
}
}, renderTitleContent()),
extra: showExtra ? /*#__PURE__*/_react.default.createElement(_space.default, null, extras) : undefined,
bodyStyle: __assign(__assign({}, bodyStyle), {
display: "flex",
flexDirection: "column"
}),
headStyle: headStyle,
style: __assign({
background: theme === "light" ? "white" : "transparent"
}, style)
}, showVisualizer && (data === null || data === void 0 ? void 0 : data.schema) && /*#__PURE__*/_react.default.createElement(_ZELogicformVisualizer.default, __assign({
mode: "compact"
}, visualizerProps, {
logicform: __assign(__assign({}, data.logicform), {
schemaName: data.schema.name
}),
onChange: function onChange(newLLF) {
_setLogicform(__assign(__assign({}, logicform), newLLF));
},
onQueryChange: function onQueryChange(query) {
_setLogicform(__assign(__assign({}, logicform), {
query: query,
// 重置entity_id
entity_id: undefined
}));
},
onChangeWord: function onChangeWord(word, subsitute) {
return __awaiter(void 0, void 0, void 0, function () {
var newQuestion;
return __generator(this, function (_a) {
newQuestion = question.replace(new RegExp(word, "gi"), subsitute);
onChangeQuestion === null || onChangeQuestion === void 0 ? void 0 : onChangeQuestion(newQuestion);
return [2
/*return*/
];
});
});
}
})), (warning === null || warning === void 0 ? void 0 : warning.length) > 0 && /*#__PURE__*/_react.default.createElement("div", {
style: {
margin: compact ? 5 : 10
}
}, /*#__PURE__*/_react.default.createElement(_icons.ExclamationCircleOutlined, {
className: "warningIcon"
}), /*#__PURE__*/_react.default.createElement("span", {
style: {
marginLeft: 5,
color: "#525252"
}
}, warning)), content, (footer || recommendComponent || feedbackEl) && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_divider.default, {
className: "ze-card-divider"
}), recommendComponent, typeof footer !== "function" && footer, typeof footer === "function" && footer(logicform), feedbackEl))), renderGroupByMenu(), /*#__PURE__*/_react.default.createElement(_modal.default, {
centered: true,
title: null,
open: showSql,
closable: true,
width: "calc(100% - 48px)",
bodyStyle: {
height: "70vh",
padding: 0
},
className: "ze-card-sql-viewer",
footer: false,
onCancel: function onCancel() {
setShowSql(false);
}
}, /*#__PURE__*/_react.default.createElement(_tabs.default, null, /*#__PURE__*/_react.default.createElement(_tabs.default.TabPane, {
tab: "SQL",
key: "item-1"
}, (data === null || data === void 0 ? void 0 : data.sqls) ? /*#__PURE__*/_react.default.createElement(_CodeViewer.default, {
code: data === null || data === void 0 ? void 0 : data.sqls,
language: "sql"
}) : "-"), /*#__PURE__*/_react.default.createElement(_tabs.default.TabPane, {
tab: "Logicform",
key: "item-2"
}, (data === null || data === void 0 ? void 0 : data.logicform) ? /*#__PURE__*/_react.default.createElement(_LogicformEditor.default, {
value: (0, _util2.formatLogicformForEditor)(data.logicform),
onChange: function onChange(v) {
_setLogicform(v);
setShowSql(false);
}
}) : "-"), /*#__PURE__*/_react.default.createElement(_tabs.default.TabPane, {
tab: "\u5206\u8BCD",
key: "item-3"
}, askErrorPath || (initialLogicform === null || initialLogicform === void 0 ? void 0 : initialLogicform._path) ? /*#__PURE__*/_react.default.createElement("div", null, (askErrorPath || (initialLogicform === null || initialLogicform === void 0 ? void 0 : initialLogicform._path)).map(function (pathItem, i) {
var text = pathItem.n;
if (pathItem.norm && pathItem.norm !== pathItem.n && !pathItem.norm.startsWith("$")) {
text += "(" + pathItem.norm + ")";
}
var tooltipTitle = "";
if (pathItem.s) {
tooltipTitle = "schema: " + pathItem.s;
}
var color = "success";
if (pathItem.t === "unknown") {
color = "error";
tooltipTitle = "无法理解";
}
return /*#__PURE__*/_react.default.createElement(_tooltip.default, {
title: tooltipTitle,
key: i
}, /*#__PURE__*/_react.default.createElement(_tag.default, {
color: color
}, text));
})) : "-"))), /*#__PURE__*/_react.default.createElement(_ZESchemaForm.default, {
layout: "inline",
layoutType: "ModalForm",
trigger: /*#__PURE__*/_react.default.createElement("div", {
ref: echartsSettingModalTrigger,
style: {
opacity: 0,
position: "fixed",
top: "-100vh",
left: "-100vw"
}
}),
form: form,
modalProps: {
title: t("图表设置"),
width: 600,
centered: true,
maskClosable: false,
onCancel: function onCancel() {
resetForm();
}
},
onFinish: function onFinish(v) {
return __awaiter(void 0, void 0, void 0, function () {
return __generator(this, function (_a) {
setEchartsSetting(function (p) {
return __assign(__assign({}, p), {
seriesLabel: __assign(__assign({}, p.seriesLabel), {
show: v.是否显示图表标签
}),
averageLine: __assign(__assign({}, p.averageLine), {
show: v.是否显示平均线
}),
sheet: {
showSubTotals: enableShowSubTotals && v.是否显示小计
}
});
});
return [2
/*return*/
, true];
});
});
},
schema: {
name: "echarts",
_id: "echarts",
type: "entity",
properties: [{
_id: "是否显示图表标签",
name: "是否显示图表标签",
type: "boolean",
primal_type: "boolean"
}, {
_id: "是否显示平均线",
name: "是否显示平均线",
type: "boolean",
primal_type: "boolean"
}, enableShowSubTotals ? {
_id: "是否显示小计",
name: "是否显示小计",
type: "boolean",
primal_type: "boolean"
} : null].filter(function (f) {
return f;
})
}
})))));
};
var ZECardWithAsk = function ZECardWithAsk(props) {
var enableAsk = props.question && !props.logicform; // 传入了question，未传入logicform时，触发ask请求
var _a = (0, _useAsk.default)(__assign({
question: enableAsk ? props.question : undefined
}, props.askProps)),
answer = _a.answer,
logicformsToChoose = _a.logicformsToChoose,
render = _a.render,
loading = _a.loading;
var logicform = props.logicform || (answer === null || answer === void 0 ? void 0 : answer.logicform);
return /*#__PURE__*/_react.default.createElement(ZECard, __assign({}, props, {
// ask接管过程中，报错的话要用card包裹
showMainContentOnly: logicform ? props.showMainContentOnly : false,
key: JSON.stringify(answer),
title: props.title || (answer === null || answer === void 0 ? void 0 : answer.question) || props.question,
loading: props.loading || loading,
mainContent: logicformsToChoose.length > 0 ? render : props.mainContent,
logicform: logicform,
askError: enableAsk ? (answer === null || answer === void 0 ? void 0 : answer.suggestion) || (answer === null || answer === void 0 ? void 0 : answer.error) : undefined,
askErrorPath: enableAsk ? answer === null || answer === void 0 ? void 0 : answer._path : undefined
}));
};
var ZECardWrapper = function ZECardWrapper(props) {
return /*#__PURE__*/_react.default.createElement(_reactErrorBoundary.ErrorBoundary, {
fallbackRender: function fallbackRender(errorProps) {
return /*#__PURE__*/_react.default.createElement(_util.ErrorFallBack, __assign({}, errorProps, {
cardProps: {
title: props.title,
extra: /*#__PURE__*/_react.default.createElement(CardCloseHandler, {
close: props.close,
key: "close"
})
}
}));
}
}, /*#__PURE__*/_react.default.createElement(ZECardWithAsk, __assign({}, props)));
};
var _default = ZECardWrapper;
exports.default = _default;