ze-react-component-library/es/Analyzer/index.js

ZeroETP React Component Library

import "antd/es/select/style";
import _Select from "antd/es/select";
import "antd/es/skeleton/style";
import _Skeleton from "antd/es/skeleton";
import "antd/es/tooltip/style";
import _Tooltip from "antd/es/tooltip";
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/tag/style";
import _Tag from "antd/es/tag";
import "antd/es/typography/style";
import _Typography from "antd/es/typography";

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 = 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 __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;
};

import React, { Suspense, lazy, useState, useEffect } from "react";
import { execLogicform } from "zeroetp-api-sdk";
import { useRequest } from "@umijs/hooks";
import { analyze } from "../request";
import { basicValueDisplay, formatWithProperty, autoUnitForData } from "../util";
import numeral from "numeral";
import _ from "underscore";
import { AimOutlined, MinusCircleOutlined, PlusCircleOutlined, QuestionCircleOutlined } from "@ant-design/icons";
import { useTheme } from "../hooks/useTheme";
import useLocale from "../hooks/useLocale";
import "./index.less";
import ZETemplateRender from "../ZETemplateRender";
var ZEGrid = /*#__PURE__*/lazy(function () {
  return import("../ZEGrid/ZEGrid");
});
var Title = _Typography.Title;

var getDefaultMeasurement = function getDefaultMeasurement(logicform) {
  var m = _typeof(logicform.preds[0]) === "object" ? logicform.preds[0].name : logicform.preds[0];
  return m;
};

var fakePercentageProperty = {
  type: "percentage",
  _id: "dummy",
  name: "dummy",
  primal_type: "number"
};

var Analyzer = function Analyzer(_a) {
  var _b, _d, _e, _f, _g, _h;

  var result = _a.result,
      upColor = _a.upColor,
      downColor = _a.downColor,
      _onChangeLogicform = _a.onChangeLogicform,
      defaultOperator = _a.defaultOperator,
      customSummary = _a.customSummary,
      title = _a.title,
      xlsx = _a.xlsx;
  if (!result) return /*#__PURE__*/React.createElement(React.Fragment, null);
  var logicform = result.logicform;
  var theme = useTheme().theme;
  var t = useLocale().t;

  var _j = useState(getDefaultMeasurement(logicform)),
      measurement = _j[0],
      setMeasurement = _j[1];

  var _k = useState(0),
      selectedDrilldownIndex = _k[0],
      setDrilldownIndex = _k[1];

  var _l = useState(defaultOperator || "$mom"),
      selectedAnalyzeOperator = _l[0],
      setAnalyzeOperator = _l[1];

  var _m = useState([]),
      impactFactors = _m[0],
      setImpactFactors = _m[1];

  var colors = {
    up: upColor || "#1BCC42",
    down: downColor || "#FF4F7A",
    eq: "black"
  };
  var trendTitles = {
    up: t("增长"),
    down: t("下降"),
    eq: t("不变")
  };
  var isAchvivementOperator = false;
  var predItemProperty = result.columnProperties.find(function (p) {
    return p.name == measurement;
  });

  if (predItemProperty.components && predItemProperty.components.length === 2) {
    if (predItemProperty.components.find(function (c) {
      return c.is_arch;
    }) && predItemProperty.components.find(function (c) {
      return c.is_target;
    })) {
      isAchvivementOperator = true;
    }
  } // 如果preds里面有同比，且同比不在环比后面。那么默认归因operator填同比。 这个逻辑优先于全局配置项里面配置的默认归因operator


  useEffect(function () {
    var _a, _b;

    if (result === null || result === void 0 ? void 0 : result.logicform) {
      var momIndex = (_a = result.logicform.preds) === null || _a === void 0 ? void 0 : _a.findIndex(function (f) {
        return _typeof(f) === "object" && f.operator === '$mom';
      });
      var yoyIndex = (_b = result.logicform.preds) === null || _b === void 0 ? void 0 : _b.findIndex(function (f) {
        return _typeof(f) === "object" && f.operator === '$yoy';
      });

      if (momIndex > -1 && yoyIndex > -1 && yoyIndex < momIndex) {
        setAnalyzeOperator('$yoy');
      }
    }
  }, [result]);

  var renderValue = function renderValue(value) {
    var trend = value > 0 ? "up" : value < 0 ? "down" : "eq";
    var s = numeral(value).format("0.0%");

    if (trend === "eq") {
      return " " + s + " ";
    }

    return /*#__PURE__*/React.createElement("strong", {
      style: {
        color: colors[trend]
      }
    }, s);
  };

  var onChangeLogicform = function onChangeLogicform(v) {
    var _a, _b;

    var predSchema = (_b = (_a = v.preds) === null || _a === void 0 ? void 0 : _a.find(function (d) {
      return _typeof(d) === "object" && d.schema;
    })) === null || _b === void 0 ? void 0 : _b.schema;

    var newLf = __assign({}, v);

    if (predSchema) {
      newLf.schema = predSchema;
    }

    _onChangeLogicform === null || _onChangeLogicform === void 0 ? void 0 : _onChangeLogicform(newLf);
  };

  var writeExplainForOneDimensionValue = function writeExplainForOneDimensionValue(dimensionValue, mom, contrib) {
    var trend = mom > 0 ? "up" : mom === 0 ? "eq" : "down";
    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, dimensionValue), t(selectedAnalyzeOperator), " ", trendTitles[trend], trend !== "eq" && /*#__PURE__*/React.createElement(React.Fragment, null, renderValue(mom)), "\uFF0C ", t("智能归因.对"), /*#__PURE__*/React.createElement("strong", null, t("整体"), " ", t(selectedAnalyzeOperator)), t("智能归因.造成了"), renderValue(contrib), t("智能归因.的影响"), "\u3002");
  };

  var writeExplainForOneDimension = function writeExplainForOneDimension(dimension, value) {
    return writeExplainForOneDimensionValue(dimension.dimension.nameKey ? value[dimension.dimension.name][dimension.dimension.nameKey] : value[dimension.dimension.name], value.mom, value.contrib);
  };

  var getExplain = function getExplain(data, logicform, impactFactorsData) {
    var _a, _b, _d;

    if (!data) return /*#__PURE__*/React.createElement("div", null);

    if (isAchvivementOperator) {
      var targetAchvieved = data.total.gap >= 0; // 先前端计算吧，稳定后再做决定
      // 计算

      var results = data.drilldown.map(function (d) {
        return d.result;
      }).flat();
      var maxThreeAchieved = results.slice().sort(function (a, b) {
        return b.gap - a.gap;
      }).slice(0, 3).filter(function (i) {
        return i.gap > 0;
      });
      var minThreeAchieved = results.slice().sort(function (a, b) {
        return a.gap - b.gap;
      }).slice(0, 3).filter(function (i) {
        return i.gap < 0;
      });
      console.log("maxThreeAchieved", maxThreeAchieved);

      var genAchvComponent = function genAchvComponent(achievedArray, type) {
        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, type === "unachieved" ? "未" : "", "\u8FBE\u6807\u5206\u6790\uFF1A"), /*#__PURE__*/React.createElement("br", null), achievedArray.length === 0 && /*#__PURE__*/React.createElement("div", null, "\u65E0", type === "unachieved" ? "未" : "", "\u8FBE\u6807\u7684\u7EF4\u5EA6"), /*#__PURE__*/React.createElement("ol", null, achievedArray.map(function (item, index) {
          var dimensionName = Object.keys(item)[1];
          var dimension = data.drilldown.find(function (d) {
            return d.dimension.name === dimensionName;
          });
          return /*#__PURE__*/React.createElement("li", {
            key: index
          }, /*#__PURE__*/React.createElement("span", null, t((type === "unachieved" ? "未达" : "超出") + "\u9884\u671Fxx\u7684\u662F", {
            rank: t("rank" + (index + 1))
          })), /*#__PURE__*/React.createElement("strong", null, dimensionName), /*#__PURE__*/React.createElement("span", null, "\u4E2D\u7684"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(_Tag, {
            color: "processing"
          }, dimension.dimension.nameKey ? item[dimension.dimension.name][dimension.dimension.nameKey] : item[dimension.dimension.name]), "\u3002"), /*#__PURE__*/React.createElement("strong", null, t("达成"), ": "), /*#__PURE__*/React.createElement("span", null, formatWithProperty(data.columnProperties[1], item.arch), "\uFF0C"), /*#__PURE__*/React.createElement("strong", null, t("目标"), ": "), /*#__PURE__*/React.createElement("span", null, formatWithProperty(data.columnProperties[1], item.kpi), "\uFF0C"), /*#__PURE__*/React.createElement("strong", null, t("达成率"), ": "), /*#__PURE__*/React.createElement("span", {
            style: {
              color: item.gap < 0 ? colors.down : colors.up
            }
          }, formatWithProperty(fakePercentageProperty, item.kpi === 0 ? 1 : item.arch / item.kpi)), " ", "\uFF0C", /*#__PURE__*/React.createElement("strong", null, t(type === "unachieved" ? "缺口" : "超额完成"), ":", " "), /*#__PURE__*/React.createElement("span", {
            style: {
              color: item.gap < 0 ? colors.down : colors.up
            }
          }, formatWithProperty(data.columnProperties[1], item.gap)), type === 'unachieved' && /*#__PURE__*/React.createElement(React.Fragment, null, " \uFF0C", formatWithProperty(fakePercentageProperty, data.total.kpi === 0 ? 1 : Math.abs(item.gap) / data.total.kpi), "\u6765\u81EA\u4E8E\u8FD9\u4E2A\u539F\u56E0\u3002"), type === 'achieved' && '。');
        })));
      };

      var achievedNode = genAchvComponent(maxThreeAchieved, "achieved");
      var unachievedNode = genAchvComponent(minThreeAchieved, "unachieved");
      return /*#__PURE__*/React.createElement("div", {
        className: "ze-analyzer-block"
      }, customSummary && /*#__PURE__*/React.createElement(ZETemplateRender, {
        reportTemplate: customSummary
      }), !customSummary && ((_a = data === null || data === void 0 ? void 0 : data.total) === null || _a === void 0 ? void 0 : _a.gap) >= 0 && /*#__PURE__*/React.createElement(React.Fragment, null, achievedNode, unachievedNode), !customSummary && ((_b = data === null || data === void 0 ? void 0 : data.total) === null || _b === void 0 ? void 0 : _b.gap) < 0 && /*#__PURE__*/React.createElement(React.Fragment, null, unachievedNode, achievedNode), /*#__PURE__*/React.createElement("div", {
        style: {
          marginTop: 5
        }
      }, t("点击下方下拉菜单，查看各维度的具体影响值"), "\u3002", t("点击具体维度值，可按照该维度进一步分析达标/未达标原因"), "\u3002"));
      var largestDim_1;
      var largestDimFirst_1;
      var secondDim_1;
      var secondDimFirst_1;
      var thirdDim_1;
      var thirdDimFirst_1;

      if (data.drilldown.length > 0) {
        largestDim_1 = data.drilldown[0];

        if (largestDim_1.result.length > 0) {
          largestDimFirst_1 = largestDim_1.result[0];
        }
      }

      if (data.drilldown.length > 1) {
        secondDim_1 = data.drilldown[1];

        if (secondDim_1.result.length > 0) {
          secondDimFirst_1 = secondDim_1.result[0];
        }
      }

      if (data.drilldown.length > 2) {
        thirdDim_1 = data.drilldown[2];

        if (thirdDim_1.result.length > 0) {
          thirdDimFirst_1 = thirdDim_1.result[0];
        }
      }

      var writeAchvExplainForOneDimension = function writeAchvExplainForOneDimension(dimension, value) {
        var dimensionValue = dimension.dimension.nameKey ? value[dimension.dimension.name][dimension.dimension.nameKey] : value[dimension.dimension.name];
        return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("strong", null, dimensionValue), "\u7F3A\u53E3\u4E3A\uFF1A", /*#__PURE__*/React.createElement("span", {
          style: {
            color: value.gap < 0 ? colors.down : colors.up
          }
        }, value.gap));
      };

      return /*#__PURE__*/React.createElement("div", {
        className: "ze-analyzer-block"
      }, customSummary && /*#__PURE__*/React.createElement(ZETemplateRender, {
        reportTemplate: customSummary
      }), !customSummary && /*#__PURE__*/React.createElement(React.Fragment, null, achievedNode), /*#__PURE__*/React.createElement("div", {
        style: {
          marginTop: 5
        }
      }, t("点击下方下拉菜单，查看各维度的具体影响值"), "\u3002"));
    }

    var mom = data.total.mom;
    var trend = mom > 0 ? "up" : mom === 0 ? "eq" : "down";
    var largestDim;
    var largestDimFirst;
    var largestDimSecond;
    var secondDim;
    var secondDimFirst;
    var secondDimSecond;
    var thirdDim;
    var thirdDimFirst;
    var thirdDimSecond;

    if (data.drilldown.length > 0) {
      largestDim = data.drilldown[0];

      var sorted = _.sortBy(largestDim.result, function (i) {
        return -Math.abs(i.contrib);
      });

      if (sorted.length > 0) {
        largestDimFirst = sorted[0];
      }

      if (sorted.length > 1 && sorted[1].contrib > 0.1) {
        largestDimSecond = sorted[1];
      }
    }

    if (data.drilldown.length > 1) {
      secondDim = data.drilldown[1];

      var sorted = _.sortBy(secondDim.result, function (i) {
        return -Math.abs(i.contrib);
      });

      if (sorted.length > 0) {
        secondDimFirst = sorted[0];
      }

      if (sorted.length > 1 && sorted[1].contrib > 0.1) {
        secondDimSecond = sorted[1];
      }
    }

    if (data.drilldown.length > 2) {
      thirdDim = data.drilldown[2];

      var sorted = _.sortBy(thirdDim.result, function (i) {
        return -Math.abs(i.contrib);
      });

      if (sorted.length > 0) {
        thirdDimFirst = sorted[0];
      }

      if (sorted.length > 1 && sorted[1].contrib > 0.1) {
        thirdDimSecond = sorted[1];
      }
    }

    return /*#__PURE__*/React.createElement("div", {
      className: "ze-analyzer-block"
    }, customSummary && /*#__PURE__*/React.createElement(ZETemplateRender, {
      reportTemplate: customSummary
    }), !customSummary && /*#__PURE__*/React.createElement("div", null, basicValueDisplay(data.dates.tpDate, t) + " ", measurement, " ", t(selectedAnalyzeOperator), " ", trendTitles[trend], trend !== "eq" && /*#__PURE__*/React.createElement(React.Fragment, null, renderValue(mom), "\u3002"), ((_d = impactFactorsData === null || impactFactorsData === void 0 ? void 0 : impactFactorsData.result) === null || _d === void 0 ? void 0 : _d.length) > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, t("波动主要影响因素"), "\uFF1A", impactFactorsData.columnProperties.map(function (property) {
      return /*#__PURE__*/React.createElement("span", {
        key: property.name
      }, property.name, ":", renderValue(impactFactorsData.result[0][property.name]));
    })), largestDim && /*#__PURE__*/React.createElement("div", null, "1. ", t("影响xx的维度是", {
      rank: t("rank1")
    }), /*#__PURE__*/React.createElement(_Tag, {
      color: "processing"
    }, largestDim.dimension.name), "\u3002", largestDimFirst && writeExplainForOneDimension(largestDim, largestDimFirst), largestDimSecond && writeExplainForOneDimension(largestDim, largestDimSecond)), data.drilldown.length > 1 && /*#__PURE__*/React.createElement("div", null, "2. ", t("影响xx的维度是", {
      rank: t("rank2")
    }), /*#__PURE__*/React.createElement(_Tag, {
      color: "processing"
    }, secondDim.dimension.name), "\u3002", secondDimFirst && writeExplainForOneDimension(secondDim, secondDimFirst), secondDimSecond && writeExplainForOneDimension(secondDim, secondDimSecond)), data.drilldown.length > 2 && /*#__PURE__*/React.createElement("div", null, "3. ", t("影响xx的维度是", {
      rank: t("rank3")
    }), /*#__PURE__*/React.createElement(_Tag, {
      color: "processing"
    }, thirdDim.dimension.name), "\u3002", thirdDimFirst && writeExplainForOneDimension(thirdDim, thirdDimFirst), thirdDimSecond && writeExplainForOneDimension(thirdDim, thirdDimSecond))), /*#__PURE__*/React.createElement("div", {
      style: {
        marginTop: 5
      }
    }, t("点击下方下拉菜单，查看各维度的具体影响值"), "\u3002"));
  }; // 可能用减法，可能用除法。 TODO：直接用接口的


  var getMomValue = function getMomValue(value, property) {
    var tp;
    var lp;

    if ("lpCompound" in value) {
      tp = value.tpCompound || 0;
      lp = value.lpCompound || 0;
    } else {
      tp = value.tp || 0;
      lp = value.lp || 0;
    }

    if (property.use_minus_on_mom) {
      return tp - lp;
    }

    if (!lp) {
      return tp;
    }

    return tp / lp - 1;
  };

  var _o = useRequest(function () {
    var analyzeLF = JSON.parse(JSON.stringify(__assign(__assign({}, logicform), {
      preds: __spreadArray([], logicform.preds.filter(function (f) {
        if (_typeof(f) === "object") {
          return f.name === measurement;
        }

        return f === measurement;
      }))
    })));

    if (_typeof(analyzeLF.preds[0]) === 'object' && analyzeLF.preds[0].query) {
      analyzeLF.query = __assign(__assign({}, analyzeLF.query || {}), analyzeLF.preds[0].query);
      delete analyzeLF.preds[0].query;
    }

    if (_typeof(analyzeLF.preds[0]) === 'object' && analyzeLF.preds[0].schema) {
      analyzeLF.schema = analyzeLF.preds[0].schema;
    }

    return analyze(analyzeLF, selectedAnalyzeOperator);
  }, {
    formatResult: function formatResult(res) {
      return res;
    },
    refreshDeps: [JSON.stringify(logicform), selectedAnalyzeOperator, measurement]
  }),
      loading = _o.loading,
      data = _o.data;

  var finalData = data;
  var impactFactorsData = useRequest(function () {
    // impactFactors
    if (finalData === null || finalData === void 0 ? void 0 : finalData.columnProperties) {
      var realValueProperty = finalData.columnProperties.find(function (p) {
        return p.name === (finalData.basePredProperty ? "tpCompound" : "tp");
      });

      if (realValueProperty === null || realValueProperty === void 0 ? void 0 : realValueProperty.impactFactors) {
        var impactFactorsInner = realValueProperty.impactFactors;
        var isImpactFactorFunc_1 = false; // 要判断下是不是函数的

        if (typeof realValueProperty.impactFactors === "string") {
          try {
            var func = new Function("return " + realValueProperty.impactFactors)();
            impactFactorsInner = func(finalData.logicform) || [];
            isImpactFactorFunc_1 = true;
          } catch (error) {
            console.error("error in genImpactFactors");
            console.error(error);
          }
        }

        setImpactFactors(impactFactorsInner);
        return execLogicform(__assign(__assign({}, logicform), {
          preds: impactFactorsInner.map(function (impactFactor) {
            return impactFactor.operator === "$sum" ? __assign(__assign({}, impactFactor), {
              operator: selectedAnalyzeOperator,
              name: isImpactFactorFunc_1 ? impactFactor.name : undefined
            }) : __assign(__assign({}, impactFactor), {
              operator: selectedAnalyzeOperator,
              pred: impactFactor,
              name: isImpactFactorFunc_1 ? impactFactor.name : undefined
            });
          })
        }));
      }
    }

    return Promise.resolve(null);
  }, {
    refreshDeps: [finalData]
  }).data;
  var impactFactorsDataForGroupby = useRequest(function () {
    // impactFactors
    if ((finalData === null || finalData === void 0 ? void 0 : finalData.columnProperties) && finalData.drilldown && selectedDrilldownIndex >= 0) {
      var realValueProperty = finalData.columnProperties.find(function (p) {
        return p.name === (finalData.basePredProperty ? "tpCompound" : "tp");
      });

      if (realValueProperty === null || realValueProperty === void 0 ? void 0 : realValueProperty.impactFactors) {
        var impactFactors_1 = realValueProperty.impactFactors;
        var isImpactFactorFunc_2 = false; // 要判断下是不是函数的

        if (typeof realValueProperty.impactFactors === "string") {
          try {
            var func = new Function("return " + realValueProperty.impactFactors)();
            impactFactors_1 = func(finalData.logicform) || [];
            isImpactFactorFunc_2 = true;
          } catch (error) {
            console.error("error in genImpactFactors");
            console.error(error);
          }
        }

        setImpactFactors(impactFactors_1);
        var drilldown = data.drilldown[selectedDrilldownIndex];
        return execLogicform(__assign(__assign({}, logicform), {
          preds: impactFactors_1.map(function (impactFactor) {
            return impactFactor.operator === "$sum" ? __assign(__assign({}, impactFactor), {
              operator: selectedAnalyzeOperator,
              name: isImpactFactorFunc_2 ? impactFactor.name : undefined
            }) : __assign(__assign({}, impactFactor), {
              operator: selectedAnalyzeOperator,
              pred: impactFactor,
              name: isImpactFactorFunc_2 ? impactFactor.name : undefined
            });
          }),
          groupby: {
            _id: drilldown.dimension.name,
            level: drilldown.dimension.level
          }
        }));
      }
    }

    return Promise.resolve(null);
  }, {
    refreshDeps: [finalData, selectedDrilldownIndex]
  }).data;
  var gridData = [];

  if (((_b = data === null || data === void 0 ? void 0 : data.drilldown) === null || _b === void 0 ? void 0 : _b.length) > 0) {
    var firstDrilldown_1 = data.drilldown[selectedDrilldownIndex];

    if (isAchvivementOperator) {
      if (firstDrilldown_1) {
        gridData.push([firstDrilldown_1.dimension.name, t("达成"), t("目标"), t("达成率"), t("缺口"), t("缺口占目标比值")]);
        var realValueProperty_1 = finalData.columnProperties[1];
        gridData.push(["全部", formatWithProperty(realValueProperty_1, data.total.arch), formatWithProperty(realValueProperty_1, data.total.kpi), formatWithProperty(fakePercentageProperty, data.total.kpi === 0 ? 1 : data.total.arch / data.total.kpi), formatWithProperty(realValueProperty_1, data.total.gap), formatWithProperty(fakePercentageProperty, data.total.kpi === 0 ? 0 : Math.abs(data.total.gap) / data.total.kpi)]);
        firstDrilldown_1.result.forEach(function (row) {
          var dimemsionName = firstDrilldown_1.dimension.nameKey ? row[firstDrilldown_1.dimension.name][firstDrilldown_1.dimension.nameKey] : row._id; // boolean dimemsionName

          if (!firstDrilldown_1.dimension.nameKey && typeof row[firstDrilldown_1.dimension.name] === "boolean") {
            dimemsionName = row[firstDrilldown_1.dimension.name] ? t("是") : t("否");
          }

          var key = firstDrilldown_1.dimension._id;
          var value = row[firstDrilldown_1.dimension.name];

          if (_typeof(value) === "object" && "_id" in value) {
            value = value._id;
          }

          var gridRow = [{
            v: dimemsionName,
            node: /*#__PURE__*/React.createElement(_Dropdown, {
              overlay: /*#__PURE__*/React.createElement(_Menu, {
                onClick: function onClick() {
                  var _a;

                  onChangeLogicform(__assign(__assign({}, logicform), {
                    query: __assign(__assign({}, logicform.query || {}), (_a = {}, _a[key] = value, _a))
                  }));
                  setDrilldownIndex(0);
                },
                items: [{
                  key: "1",
                  label: /*#__PURE__*/React.createElement(_Space, null, /*#__PURE__*/React.createElement(AimOutlined, null), " ", t("进一步分析"))
                }]
              })
            }, /*#__PURE__*/React.createElement("a", {
              onClick: function onClick(e) {
                return e.preventDefault();
              }
            }, dimemsionName))
          }, formatWithProperty(realValueProperty_1, row.arch), formatWithProperty(realValueProperty_1, row.kpi), formatWithProperty(fakePercentageProperty, row.kpi === 0 ? 1 : row.arch / row.kpi), formatWithProperty(realValueProperty_1, row.gap), formatWithProperty(fakePercentageProperty, data.total.kpi === 0 ? 0 : Math.abs(row.gap) / data.total.kpi)];
          gridData.push(gridRow);
        });
      }
    } else {
      if (firstDrilldown_1) {
        var columnProperties = JSON.parse(JSON.stringify(data.columnProperties));

        var newData = __assign(__assign({}, data), {
          columnProperties: columnProperties,
          drilldown: [firstDrilldown_1]
        });

        autoUnitForData(newData, t);
        finalData = newData;
      } // 标题


      var titleGrid = [firstDrilldown_1.dimension.name, basicValueDisplay(finalData.dates.tpDate, t), undefined, basicValueDisplay(finalData.dates.lpDate, t), undefined, t(selectedAnalyzeOperator), t("归因")]; // hasBasePred

      if (finalData.basePredProperty) {
        titleGrid.push(undefined, undefined);
      } // impact factors


      if (((_d = impactFactorsData === null || impactFactorsData === void 0 ? void 0 : impactFactorsData.result) === null || _d === void 0 ? void 0 : _d.length) > 0) {
        // console.log("impactFactorsData", impactFactorsData);
        titleGrid.push.apply(titleGrid, impactFactorsData.columnProperties.map(function (_c, index) {
          return index === 0 ? t("影响因素") : undefined;
        }));
      }

      gridData.push(titleGrid); // 如果是复合类型的指标，tp，lp里面保存的值是basePred的值，tpCompound里面才是真实的值

      var realValueProperty_2 = finalData.columnProperties.find(function (p) {
        return p.name === (finalData.basePredProperty ? "tpCompound" : "tp");
      });
      var measurementWithUnit = measurement + ((realValueProperty_2 === null || realValueProperty_2 === void 0 ? void 0 : realValueProperty_2.unit) ? "(" + realValueProperty_2.unit + ")" : ""); // 标题2

      var title2Grid = [firstDrilldown_1.dimension.name, measurementWithUnit, (finalData.basePredProperty || measurement) + " " + t("占比"), measurementWithUnit, (finalData.basePredProperty || measurement) + " " + t("占比"), t(selectedAnalyzeOperator), {
        v: finalData.basePredProperty ? measurement : measurement + " " + t(selectedAnalyzeOperator) + " " + t("贡献"),
        node: /*#__PURE__*/React.createElement(_Tooltip, {
          title: t("绝对值对name的贡献度。绝对值越大代表影响越大。正数为正面影响，负数为负面影响", {
            name: t(selectedAnalyzeOperator)
          }) + "\u3002"
        }, finalData.basePredProperty ? measurement : measurement + " " + t(selectedAnalyzeOperator) + " " + t("贡献"), /*#__PURE__*/React.createElement(QuestionCircleOutlined, null))
      }]; // hasBasePred

      if (finalData.basePredProperty) {
        title2Grid.push({
          v: t("属性结构", {
            property: finalData.basePredProperty
          }),
          node: /*#__PURE__*/React.createElement(_Tooltip, {
            title: t("属性占比对指标的贡献度。绝对值越大代表影响越大。正数为正面影响，负数为负面影响", {
              property: finalData.basePredProperty,
              indicator: t(selectedAnalyzeOperator)
            })
          }, t("属性结构", {
            property: finalData.basePredProperty
          }), /*#__PURE__*/React.createElement(QuestionCircleOutlined, null))
        }, "和");
      } // impact factors


      if (((_e = impactFactorsData === null || impactFactorsData === void 0 ? void 0 : impactFactorsData.result) === null || _e === void 0 ? void 0 : _e.length) > 0) {
        title2Grid.push.apply(title2Grid, impactFactorsData.columnProperties.map(function (p, index) {
          var title = p.name;
          var impactFactor = impactFactors[index];

          if (impactFactor.direction === 1) {
            return {
              v: title,
              node: /*#__PURE__*/React.createElement(_Tooltip, {
                title: t("和指标正相关")
              }, /*#__PURE__*/React.createElement(PlusCircleOutlined, {
                style: {
                  marginRight: 5
                }
              }), title)
            };
          } else if (impactFactor.direction === -1) {
            return {
              v: title,
              node: /*#__PURE__*/React.createElement(_Tooltip, {
                title: t("和指标负相关")
              }, /*#__PURE__*/React.createElement(MinusCircleOutlined, {
                style: {
                  marginRight: 5
                }
              }), title)
            };
          }

          return title;
        }));
      }

      gridData.push(title2Grid);

      var renderImpactFactorNode_1 = function renderImpactFactorNode_1(_a) {
        var p = _a.p,
            v = _a.v,
            extraQuery = _a.extraQuery,
            iLogicform = _a.iLogicform;
        return {
          v: v,
          node: /*#__PURE__*/React.createElement(_Dropdown, {
            overlay: /*#__PURE__*/React.createElement(_Menu, {
              onClick: function onClick() {
                var _a;

                var target = (_a = iLogicform.preds) === null || _a === void 0 ? void 0 : _a.find(function (f) {
                  if (_typeof(f) === "object") {
                    return f.name === p.name;
                  }

                  return f === p.name;
                });

                if (target && _typeof(target) === "object") {
                  if (_typeof(target.pred) === "object") {
                    target = __assign(__assign({}, target), {
                      pred: undefined,
                      name: undefined,
                      operator: target.pred.operator
                    });
                  } else {
                    target = __assign(__assign({}, target), {
                      name: undefined,
                      operator: "$sum"
                    });
                  }
                }

                onChangeLogicform(__assign(__assign({}, logicform), {
                  preds: [target],
                  query: __assign(__assign({}, logicform.query || {}), extraQuery)
                }));
                setDrilldownIndex(0);
              },
              items: [{
                key: "1",
                label: /*#__PURE__*/React.createElement(_Space, null, /*#__PURE__*/React.createElement(AimOutlined, null), " ", t("进一步分析"))
              }]
            })
          }, /*#__PURE__*/React.createElement("span", null, numeral(v).format("0.0%")))
        };
      }; // total


      var totalGrid = [t("全部"), formatWithProperty(realValueProperty_2, finalData.basePredProperty ? finalData.total.tpCompound : finalData.total.tp), "100%", formatWithProperty(realValueProperty_2, finalData.basePredProperty ? finalData.total.lpCompound : finalData.total.lp), "100%", {
        v: getMomValue(finalData.total, realValueProperty_2),
        formatter: "0.0%"
      }, {
        v: getMomValue(finalData.total, realValueProperty_2),
        formatter: "0.0%"
      }]; // hasBasePred

      if (finalData.basePredProperty) {
        totalGrid.push("0.0%", {
          v: getMomValue(finalData.total, realValueProperty_2),
          formatter: "0.0%"
        });
      } // impact factors


      if (((_f = impactFactorsData === null || impactFactorsData === void 0 ? void 0 : impactFactorsData.result) === null || _f === void 0 ? void 0 : _f.length) > 0) {
        totalGrid.push.apply(totalGrid, impactFactorsData.columnProperties.map(function (p) {
          return renderImpactFactorNode_1({
            v: impactFactorsData.result[0][p.name],
            p: p,
            iLogicform: impactFactorsData.logicform
          });
        }));
      }

      gridData.push(totalGrid);
      firstDrilldown_1.result.forEach(function (row) {
        var _a;

        var dimemsionName = firstDrilldown_1.dimension.nameKey ? row[firstDrilldown_1.dimension.name][firstDrilldown_1.dimension.nameKey] : row._id; // boolean dimemsionName

        if (!firstDrilldown_1.dimension.nameKey && typeof row[firstDrilldown_1.dimension.name] === "boolean") {
          dimemsionName = row[firstDrilldown_1.dimension.name] ? t("是") : t("否");
        }

        var key = firstDrilldown_1.dimension._id;
        var value = row[firstDrilldown_1.dimension.name];

        if (_typeof(value) === "object" && "_id" in value) {
          value = value._id;
        }

        var gridRow = [{
          v: dimemsionName,
          node: /*#__PURE__*/React.createElement(_Dropdown, {
            overlay: /*#__PURE__*/React.createElement(_Menu, {
              onClick: function onClick() {
                var _a;

                onChangeLogicform(__assign(__assign({}, logicform), {
                  query: __assign(__assign({}, logicform.query || {}), (_a = {}, _a[key] = value, _a))
                }));
                setDrilldownIndex(0);
              },
              items: [{
                key: "1",
                label: /*#__PURE__*/React.createElement(_Space, null, /*#__PURE__*/React.createElement(AimOutlined, null), " ", t("进一步分析"))
              }]
            })
          }, /*#__PURE__*/React.createElement("a", {
            onClick: function onClick(e) {
              return e.preventDefault();
            }
          }, dimemsionName))
        }, formatWithProperty(realValueProperty_2, finalData.basePredProperty ? row.tpCompound : row.tp), {
          v: row.tp / data.total.tp,
          formatter: "0.0%"
        }, formatWithProperty(realValueProperty_2, finalData.basePredProperty ? row.lpCompound : row.lp), {
          v: row.lp / data.total.lp,
          formatter: "0.0%"
        }, {
          v: getMomValue(row, realValueProperty_2),
          formatter: "0.0%"
        }]; // hasBasePred

        if (finalData.basePredProperty) {
          gridRow.push({
            v: row.contrib1,
            formatter: "0.0%"
          });
          gridRow.push({
            v: row.contrib2,
            formatter: "0.0%"
          });
        }

        gridRow.push({
          v: row.contrib,
          formatter: "0.0%"
        }); // impact factors

        if (((_a = impactFactorsDataForGroupby === null || impactFactorsDataForGroupby === void 0 ? void 0 : impactFactorsDataForGroupby.result) === null || _a === void 0 ? void 0 : _a.length) > 0) {
          var impactFactorResult_1 = impactFactorsDataForGroupby.result.find(function (i) {
            return row._id === i._id;
          });

          if (impactFactorResult_1) {
            gridRow.push.apply(gridRow, impactFactorsDataForGroupby.columnProperties.slice(1).map(function (p) {
              var _a;

              return renderImpactFactorNode_1({
                v: impactFactorResult_1[p.name],
                p: p,
                extraQuery: (_a = {}, _a[key] = value, _a),
                iLogicform: impactFactorsDataForGroupby.logicform
              });
            }));
          }
        }

        gridData.push(gridRow);
      });
    }
  }

  useEffect(function () {
    setMeasurement(getDefaultMeasurement(logicform));
  }, [logicform]);
  var isMultiValue = ((_g = logicform.preds) === null || _g === void 0 ? void 0 : _g.length) > 1;
  var dataValid = ((_h = data === null || data === void 0 ? void 0 : data.drilldown) === null || _h === void 0 ? void 0 : _h.length) > 0;
  var showContent = !isMultiValue ? (data === null || data === void 0 ? void 0 : data.total) && dataValid : isMultiValue;

  if (!loading && !data) {
    return /*#__PURE__*/React.createElement("div", null);
  }

  return /*#__PURE__*/React.createElement("div", {
    className: "ze-analyzer"
  }, /*#__PURE__*/React.createElement(_Skeleton, {
    loading: loading
  }, showContent && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Title, {
    style: {
      marginTop: 5
    },
    level: 5
  }, t("智能归因")), dataValid && getExplain(data, logicform, impactFactorsData), /*#__PURE__*/React.createElement("span", {
    style: xlsx ? {} : {
      marginBottom: 16,
      display: "inline-block"
    }
  }, t("按"), isMultiValue && /*#__PURE__*/React.createElement(_Select, {
    value: measurement,
    options: logicform.preds.map(function (d) {
      if (_typeof(d) === "object") {
        return {
          label: d.name,
          value: d.name
        };
      }

      return {
        label: d,
        value: d
      };
    }),
    style: {
      minWidth: 150
    },
    className: "ze-analyzer-selector",
    dropdownMatchSelectWidth: false,
    onChange: function onChange(v) {
      setMeasurement(v);
      setDrilldownIndex(0);
    }
  }), dataValid && /*#__PURE__*/React.createElement(_Select, {
    style: {
      minWidth: 150
    },
    value: selectedDrilldownIndex,
    className: "ze-analyzer-selector",
    dropdownMatchSelectWidth: false,
    options: (data === null || data === void 0 ? void 0 : data.drilldown) ? data === null || data === void 0 ? void 0 : data.drilldown.map(function (row, index) {
      return {
        value: index,
        label: row.dimension.name
      };
    }) : [],
    onChange: function onChange(value) {
      setTimeout(function () {
        setDrilldownIndex(value);
      }, 100);
    }
  }), !isAchvivementOperator && dataValid && /*#__PURE__*/React.createElement(_Select, {
    style: {
      minWidth: 100
    },
    value: selectedAnalyzeOperator,
    className: "ze-analyzer-selector",
    dropdownMatchSelectWidth: false,
    options: [{
      value: "$mom",
      label: t("$mom")
    }, {
      value: "$yoy",
      label: t("$yoy")
    }],
    onChange: function onChange(value) {
      setAnalyzeOperator(value);
    }
  }), t("智能归因.查看")), dataValid && /*#__PURE__*/React.createElement(Suspense, {
    fallback: /*#__PURE__*/React.createElement("strong", null, " ", t("加载中"), "...")
  }, /*#__PURE__*/React.createElement(ZEGrid, {
    xlsx: xlsx,
    data: gridData,
    autoMergeForIndex: function autoMergeForIndex(i) {
      return isAchvivementOperator ? false : i < 2;
    },
    fix: {
      col: 0
    },
    bordered: false,
    exportFileName: title,
    getColumnProps: function getColumnProps(colIndex) {
      if (colIndex === 0) {
        return {
          align: "center"
        };
      }

      return {
        align: "right"
      };
    },
    getCellStyle: function getCellStyle(_a) {
      var rowIndex = _a.rowIndex,
          colIndex = _a.colIndex,
          value = _a.value;
      var cellStyle = {
        padding: 16
      };
      var textColor = theme === "dark" ? "white" : "#343434";

      if (rowIndex % 2 !== 0) {
        cellStyle.background = "#F8F8F8";
      }

      if (rowIndex <= (isAchvivementOperator ? 0 : 1)) {
        cellStyle.fontWeight = "bolder";
        cellStyle.background = "#F2F2F2";
        cellStyle.borderRight = "1px solid #DADBDB";
        cellStyle.borderBottom = [0, 5].includes(colIndex) || rowIndex === 1 ? "none" : "1px solid #DADBDB";
      } else {
        cellStyle.borderBottom = "none";
      }

      if (rowIndex <= 2) {
        cellStyle.color = textColor;
      }

      if (isAchvivementOperator) {
        if (rowIndex === 1) {
          cellStyle.fontWeight = "bolder";
        }

        if (colIndex === 4 && rowIndex > 0) {
          cellStyle.color = parseFloat(value) < 0 ? colors.down : colors.up;
        } else if (colIndex === 3 && rowIndex > 0) {
          cellStyle.color = parseFloat(value) < 100 ? colors.down : colors.up;
        }
      } else {
        if (colIndex === 5) {
          cellStyle.color = rowIndex === 0 || !("" + value).startsWith("-") ? colors.up : colors.down;
        }

        if (rowIndex === 2 || colIndex === 5) {
          cellStyle.fontWeight = "bolder";
        }
      }

      return cellStyle;
    }
  })), !dataValid && isMultiValue && /*#__PURE__*/React.createElement("div", {
    style: {
      padding: 24
    }
  }, t("哎呀，该指标暂时不支持归因功能！")))));
};

export default Analyzer;