ze-react-component-library/es/ZECard/ZECard.js

ZeroETP React Component Library

import "antd/es/tabs/style";
import _Tabs from "antd/es/tabs";
import "antd/es/modal/style";
import _Modal from "antd/es/modal";
import "antd/es/divider/style";
import _Divider from "antd/es/divider";
import "antd/es/card/style";
import _Card from "antd/es/card";
import "antd/es/message/style";
import _message from "antd/es/message";
import "antd/es/input/style";
import _Input from "antd/es/input";
import "antd/es/spin/style";
import _Spin from "antd/es/spin";
import "antd/es/tag/style";
import _Tag from "antd/es/tag";
import "antd/es/space/style";
import _Space from "antd/es/space";
import "antd/es/menu/style";
import _Menu from "antd/es/menu";
import "antd/es/dropdown/style";
import _Dropdown from "antd/es/dropdown";
import "antd/es/empty/style";
import _Empty from "antd/es/empty";
import "antd/es/result/style";
import _Result from "antd/es/result";
import "antd/es/form/style";
import _Form from "antd/es/form";
import "antd/es/button/style";
import _Button from "antd/es/button";
import "antd/es/tooltip/style";
import _Tooltip from "antd/es/tooltip";

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);
};

var __awaiter = this && this.__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 = this && this.__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 = this && this.__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，展示复杂结果
 */


import { useRequest, useHistoryTravel, useSize } from "@umijs/hooks";
import { ErrorBoundary } from "react-error-boundary";
import React, { useState, useMemo, useEffect, useRef } from "react";
import _ from "underscore";
import { isDistinct, isEntity, isSimpleQuery } from "zeroetp-api-sdk";
import { requestGuess, requestLogicform, requestRecommend } from "../request";
import ZELogicformVisualizer from "../ZELogicformVisualizer";
import { EllipsisOutlined, CloseOutlined, ExclamationCircleOutlined, BugOutlined, EditOutlined, OrderedListOutlined } from "@ant-design/icons";
import RepresentationChanger from "./RepresentationChanger";
import "./ZECard.less";
import LogicFormTraveler from "./LogicFormTraveler";
import { ErrorFallBack, autoUnitForData, enableShowSubTotalsSetting } from "../util";
import GroupByMenu from "../components/GroupByMenu";
import CodeViewer from "../components/CodeViewer";
import ErrorDisplayer from "./ErrorDisplayer";
import MultiEntitySelector from "./MultiEntitySelector";
import ZEFeedback from "../ZEFeedback";
import { ThemeContext } from "../hooks/useTheme";
import useAsk from "../hooks/useAsk";
import { getDefaultRepresentation, representationMap, chartTypes } from "./representations";
import { drilldownLogicform, useDrillDownDbClick, formatLogicformForEditor } from "./util";
import useLocale from "../hooks/useLocale";
import LLMChatter from "./LLMChatter";
import { FrontConfigContext, useFrontConfig } from "../hooks/useFrontConfig";
import useCurrency, { CurrencySymbolContext } from "../hooks/useCurrency";
import ZESchemaForm from "../ZESchemaForm";
import LogicformEditor from "../components/LogicformEditor";

var CardCloseHandler = function CardCloseHandler(_a) {
  var close = _a.close;
  return close ? /*#__PURE__*/React.createElement(_Tooltip, {
    title: "\u5173\u95ED\u6B64\u5361\u7247"
  }, /*#__PURE__*/React.createElement(_Button, {
    className: "ze-card-closer",
    icon: /*#__PURE__*/React.createElement(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 = useState(_title),
      title = _1[0],
      setTitle = _1[1];

  var _2 = useState(_title),
      currentTitle = _2[0],
      setCurrentTitle = _2[1];

  var _3 = useState(false),
      titleEditing = _3[0],
      setTitleEditing = _3[1];

  var t = useLocale().t;
  var cardDivRef = useRef();
  var contentRef = useRef();
  var size = useSize(contentRef.current)[0];
  var cardFullSize = useSize(cardDivRef.current)[0];
  var currencyState = useCurrency(initialLogicform === null || initialLogicform === void 0 ? void 0 : initialLogicform.currency);

  var _4 = useState(_echartsSetting),
      echartsSetting = _4[0],
      setEchartsSetting = _4[1];

  var echartsSettingModalTrigger = useRef(null);

  var form = _Form.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 = useState(null),
      chartClickPos = _5[0],
      setChartClickPos = _5[1];

  var _6 = 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 = useState(),
      logicFormWithSkipAndSort = _7[0],
      setLogicFormWithSkipAndSort = _7[1];

  var _8 = useState(),
      errorMessage = _8[0],
      setErrorMessage = _8[1]; // 用来给前端修正logicform的，比较常见的用法是MultiEntity


  var _9 = useState(),
      errorLogicform = _9[0],
      setErrorLogicform = _9[1];

  var _10 = useRequest(function () {
    if (logicform) {
      var lf = logicFormWithSkipAndSort || logicform;
      return 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


      autoUnitForData(resData, t);
      return resData;
    }
  }),
      data = _10.data,
      dataLoading = _10.loading,
      fetchData = _10.run;

  var loading = _loading || dataLoading; // 图表设置是否展示显示小记的选项

  var enableShowSubTotals = enableShowSubTotalsSetting(data === null || data === void 0 ? void 0 : data.logicform); // 前端配置

  var frontConfig = useFrontConfig({
    logicform: logicform,
    echartsSetting: echartsSetting,
    cardResult: data,
    analyzer: analyzer
  });
  var recommendsWithGuess = useRequest(function () {
    if (!initialLogicform || !showRecommender) {
      return new Promise(function (resolve) {
        return resolve({
          data: []
        });
      });
    }

    return requestGuess(question);
  }, {
    initialData: [],
    formatResult: function formatResult(res) {
      return res.data;
    }
  }).data;
  var recommends = useRequest(function () {
    if (!initialLogicform || !showRecommender) {
      return new Promise(function (resolve) {
        return resolve({
          recommends: []
        });
      });
    }

    return requestRecommend(initialLogicform);
  }, {
    initialData: [],
    formatResult: function formatResult(res) {
      return res.recommends;
    }
  }).data;

  var _11 = useState(repr),
      representation = _11[0],
      setRepresentation = _11[1];

  var _12 = useState(),
      selectedItem = _12[0],
      setSelectedItem = _12[1];

  var _13 = useState(false),
      showSql = _13[0],
      setShowSql = _13[1];

  var finalRepresentation = useMemo(function () {
    var finalRep = representation;

    if (data) {
      finalRep = getDefaultRepresentation(data, pieThreshold, barFirst); // 用户指定的representation

      if (data.logicform.representation && representationMap[data.logicform.representation].valid(data)) {
        finalRep = data.logicform.representation;
      }

      if (representation && representationMap[representation].valid(data)) {
        finalRep = representation;
      }
    }

    return finalRep;
  }, [data, representation]);
  var onDbClick = 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 = 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 representationMap.table.component(finalTableProps);
  }, [data, tableProps, exportToExcel, title]);
  var content = 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.createElement(_Result, {
        status: "error",
        title: errorMessage
      });
    } // 如果没有自定义Content，则自动判断


    if (!component) {
      // console.log("finalRepresentation", finalRepresentation);
      if (askError) {
        component = /*#__PURE__*/React.createElement(ErrorDisplayer, {
          question: question,
          error: askError,
          // helperLink={askErrorHelperLink}
          // onChangeLogicform={(lf) => setLogicform(lf)}
          askMore: askMore,
          avatarSrc: chatAvatar
        });
      } else if (errorLogicform) {
        component = /*#__PURE__*/React.createElement(MultiEntitySelector, {
          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.createElement(ErrorDisplayer, {
          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 && isSimpleQuery(logicform)) {
        component = tableContent;
      } else if (finalRepresentation === "value") {
        component = 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.createElement(_Empty, {
            description: "\u6CA1\u6709\u6570\u636E"
          });
        } else if (chartTypes.includes(finalRepresentation)) {
          component = 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)
                    })
                  });

                  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 = 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 = 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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
      className: "ze-card-main-content",
      ref: contentRef,
      style: {
        marginTop: compact ? 5 : 10
      }
    }, component), additionalComponent, data && /*#__PURE__*/React.createElement(LLMChatter, __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.createElement(GroupByMenu, {
        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.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.createElement("div", {
      key: "default"
    }, extra));
  }

  if (backLength > 0) {
    extras.push( /*#__PURE__*/React.createElement(LogicFormTraveler, {
      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 && !isEntity(logicform) && !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.createElement(RepresentationChanger, {
        key: "RepresentationChanger",
        representationType: finalRepresentation,
        onChange: function onChange(v) {
          setRepresentation(v);
          setSelectedItem(undefined);
        },
        result: data
      })); // 下钻分析

      extras.push( /*#__PURE__*/React.createElement(GroupByMenu, {
        result: data,
        key: "groupBy",
        onChangeLogicform: _setLogicform,
        placement: "bottomRight",
        menuStyle: {
          maxHeight: 300,
          overflow: "auto"
        }
      }));
    }
  }

  var dropdownMenuItems = __spreadArray([debug && {
    label: "查看Sql",
    key: "sql",
    icon: /*#__PURE__*/React.createElement(BugOutlined, null),
    onClick: function onClick() {
      setShowSql(true);
    }
  }, enableEchartsSetting && {
    label: t("图表设置"),
    key: "echart",
    icon: /*#__PURE__*/React.createElement(EditOutlined, null),
    onClick: function onClick() {
      if (echartsSettingModalTrigger.current) {
        echartsSettingModalTrigger.current.click();
      }
    }
  }, {
    label: "显示数据明细",
    key: "list",
    icon: /*#__PURE__*/React.createElement(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.createElement(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.createElement(_Dropdown, {
      key: "more-drop",
      overlay: /*#__PURE__*/React.createElement(_Menu, {
        className: "ze-card-drop-menus",
        items: dropdownMenuItems
      }),
      trigger: ["click"]
    }, /*#__PURE__*/React.createElement(_Button, {
      icon: /*#__PURE__*/React.createElement(EllipsisOutlined, null)
    })));
  }

  extras.push( /*#__PURE__*/React.createElement(CardCloseHandler, {
    close: close,
    key: "close"
  })); // Recommends

  var totalRecommends = _.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.createElement("div", {
      className: "ze-card-recommends"
    }, /*#__PURE__*/React.createElement("div", {
      className: "ze-card-recommends-title"
    }, t("nlq.recommend")), /*#__PURE__*/React.createElement("div", {
      className: "ze-card-recommends-content"
    }, /*#__PURE__*/React.createElement(_Space, {
      wrap: true,
      className: "ze-card-recommends-items"
    }, totalRecommends.slice(0, 5).map(function (g) {
      return /*#__PURE__*/React.createElement(_Tooltip, {
        key: g,
        title: g,
        placement: "top"
      }, /*#__PURE__*/React.createElement(_Tag, {
        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.createElement(ZEFeedback, {
      size: "small",
      question: question,
      logicform: initialLogicform ? JSON.stringify(logicform) : null,
      style: showRecommender ? {
        marginLeft: 92
      } : {}
    });
  }

  useEffect(function () {
    setChartClickPos(null);
  }, [loading]);
  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.createElement(_Spin, {
      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.createElement("div", {
        style: {
          width: "100%",
          display: "flex",
          alignItems: "center",
          gap: 12,
          paddingRight: 12
        }
      }, /*#__PURE__*/React.createElement(_Input, {
        value: currentTitle,
        style: {
          flex: 1
        },
        allowClear: true,
        onChange: function onChange(e) {
          setCurrentTitle(e.target.value);
        }
      }), /*#__PURE__*/React.createElement(_Button, {
        onClick: function onClick() {
          setCurrentTitle(title);
          setTitleEditing(false);
        }
      }, "\u53D6\u6D88"), /*#__PURE__*/React.createElement(_Button, {
        type: "primary",
        onClick: function onClick() {
          var v = ("" + (currentTitle !== null && currentTitle !== void 0 ? currentTitle : "")).trim();

          if (v.length > 0) {
            setTitle(currentTitle);
            setTitleEditing(false);
          } else {
            _message.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);
  };

  useEffect(function () {
    resetForm();
  }, [echartsSetting]);
  useEffect(function () {
    if (logicformQuery) {
      _setLogicform(__assign(__assign({}, logicform), {
        query: __assign(__assign({}, logicform.query || {}), logicformQuery)
      }));
    }
  }, [logicformQuery]); // 有自动refresh的情况下，不要spin

  return /*#__PURE__*/React.createElement(ThemeContext.Provider, {
    value: {
      theme: theme
    }
  }, /*#__PURE__*/React.createElement(CurrencySymbolContext.Provider, {
    value: currencyState
  }, /*#__PURE__*/React.createElement(FrontConfigContext.Provider, {
    value: frontConfig
  }, /*#__PURE__*/React.createElement(_Spin, {
    spinning: refreshInterval ? false : loading
  }, /*#__PURE__*/React.createElement("div", {
    ref: cardDivRef,
    className: ["ze-card", theme].join(" ")
  }, /*#__PURE__*/React.createElement(_Card, {
    size: compact ? "small" : "default",
    title: /*#__PURE__*/React.createElement("div", {
      id: id,
      style: {
        color: theme === "light" ? undefined : "white"
      }
    }, renderTitleContent()),
    extra: showExtra ? /*#__PURE__*/React.createElement(_Space, 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.createElement(ZELogicformVisualizer, __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.createElement("div", {
    style: {
      margin: compact ? 5 : 10
    }
  }, /*#__PURE__*/React.createElement(ExclamationCircleOutlined, {
    className: "warningIcon"
  }), /*#__PURE__*/React.createElement("span", {
    style: {
      marginLeft: 5,
      color: "#525252"
    }
  }, warning)), content, (footer || recommendComponent || feedbackEl) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Divider, {
    className: "ze-card-divider"
  }), recommendComponent, typeof footer !== "function" && footer, typeof footer === "function" && footer(logicform), feedbackEl))), renderGroupByMenu(), /*#__PURE__*/React.createElement(_Modal, {
    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.createElement(_Tabs, null, /*#__PURE__*/React.createElement(_Tabs.TabPane, {
    tab: "SQL",
    key: "item-1"
  }, (data === null || data === void 0 ? void 0 : data.sqls) ? /*#__PURE__*/React.createElement(CodeViewer, {
    code: data === null || data === void 0 ? void 0 : data.sqls,
    language: "sql"
  }) : "-"), /*#__PURE__*/React.createElement(_Tabs.TabPane, {
    tab: "Logicform",
    key: "item-2"
  }, (data === null || data === void 0 ? void 0 : data.logicform) ? /*#__PURE__*/React.createElement(LogicformEditor, {
    value: formatLogicformForEditor(data.logicform),
    onChange: function onChange(v) {
      _setLogicform(v);

      setShowSql(false);
    }
  }) : "-"), /*#__PURE__*/React.createElement(_Tabs.TabPane, {
    tab: "\u5206\u8BCD",
    key: "item-3"
  }, askErrorPath || (initialLogicform === null || initialLogicform === void 0 ? void 0 : initialLogicform._path) ? /*#__PURE__*/React.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.createElement(_Tooltip, {
      title: tooltipTitle,
      key: i
    }, /*#__PURE__*/React.createElement(_Tag, {
      color: color
    }, text));
  })) : "-"))), /*#__PURE__*/React.createElement(ZESchemaForm, {
    layout: "inline",
    layoutType: "ModalForm",
    trigger: /*#__PURE__*/React.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 = useAsk(__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.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.createElement(ErrorBoundary, {
    fallbackRender: function fallbackRender(errorProps) {
      return /*#__PURE__*/React.createElement(ErrorFallBack, __assign({}, errorProps, {
        cardProps: {
          title: props.title,
          extra: /*#__PURE__*/React.createElement(CardCloseHandler, {
            close: props.close,
            key: "close"
          })
        }
      }));
    }
  }, /*#__PURE__*/React.createElement(ZECardWithAsk, __assign({}, props)));
};

export default ZECardWrapper;