ze-react-component-library/es/ZECard/representations/treemap/index.js

ZeroETP React Component Library

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 __rest = this && this.__rest || function (s, e) {
  var t = {};

  for (var p in s) {
    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
  }

  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
  }
  return t;
};

import React, { memo } from "react";
import { getNameProperty } from "zeroetp-api-sdk"; // @ts-ignore

import TreeSvg from "./treemap.svg";
import { isPredsValid } from "../common/util";
import Chart from "../../../components/Chart";
import { formatWithProperty } from "../../../util";

var getName = function getName(item, property) {
  var _a, _b;

  if (property.type === "object") {
    var nameProp = getNameProperty(property.schema);

    if (nameProp) {
      return (_a = item === null || item === void 0 ? void 0 : item[property.name]) === null || _a === void 0 ? void 0 : _a[nameProp.name];
    }

    return (_b = item === null || item === void 0 ? void 0 : item[property.name]) === null || _b === void 0 ? void 0 : _b["_id"];
  }

  return item === null || item === void 0 ? void 0 : item[property.name];
}; // 将api获取的数据转换成treemap的数据


var getTreemapData = function getTreemapData(data) {
  if (!data) return [];
  var groupby = data.logicform.groupby,
      result = data.result,
      columnProperties = data.columnProperties; // 一层的情况

  if (groupby.length === 1) {
    return result.map(function (r) {
      var name = getName(r, columnProperties[0]);
      return __assign(__assign({}, r), {
        name: name,
        labelName: name,
        value: r[columnProperties[groupby.length].name]
      });
    });
  } // 2层的情况


  if (groupby.length === 2) {
    var retData_1 = [];
    result.forEach(function (r) {
      var firstLevelName = getName(r, columnProperties[0]);
      var firstLevelItem;

      if (!(firstLevelItem = retData_1.find(function (i) {
        return i.name === firstLevelName;
      }))) {
        firstLevelItem = {
          name: firstLevelName,
          labelName: firstLevelName,
          children: []
        };
        retData_1.push(firstLevelItem);
      }

      var childName = getName(r, columnProperties[1]);
      firstLevelItem.children.push(__assign(__assign({}, r), {
        name: childName,
        labelName: [childName, firstLevelName].join("\n"),
        value: r[columnProperties[groupby.length].name]
      }));
    }); // console.log("retData", retData);

    return retData_1;
  }

  return [];
};

var TreemapChart = /*#__PURE__*/memo(function (props) {
  var result = props.result,
      option = props.option,
      rest = __rest(props, ["result", "option"]);

  var chartOption = {
    tooltip: {
      trigger: "item"
    },
    series: [{
      type: "treemap",
      data: getTreemapData(result),
      breadcrumb: {
        show: false
      },
      roam: false,
      label: {
        lineHeight: 16,
        rich: {},
        formatter: function formatter(params) {
          var _a, _b; // 如果是1层groupby，第一行显示name，剩下显示指标。
          // 如果是2层groupby，第一行显示第二层groupbyItem的name，第二行显示第一层groupbyItem的name，剩下显示指标。
          // 显示所有preds里面的指标（风格和tooltip一样，圆点可以不要）。


          var data = params.data;
          var indicators = (result === null || result === void 0 ? void 0 : result.columnProperties.slice((_b = (_a = result === null || result === void 0 ? void 0 : result.logicform) === null || _a === void 0 ? void 0 : _a.groupby) === null || _b === void 0 ? void 0 : _b.length).map(function (d) {
            return "" + d.name + (d.unit ? "(" + d.unit + ")" : "") + "  " + formatWithProperty(d, data[d.name]);
          })) || [];
          var arr = [data.labelName].concat(indicators);
          return arr.join("\n");
        }
      }
    }]
  };
  return /*#__PURE__*/React.createElement(Chart, __assign({}, rest, {
    result: result,
    userOption: option,
    chartOption: chartOption
  }));
});
var treemap = {
  key: "treemap",
  title: "矩形树图",
  icon: TreeSvg,
  tip: "搜索结果中至少一个属性列和一个数值列",
  type: "basic",
  component: function component(props) {
    return /*#__PURE__*/React.createElement(TreemapChart, __assign({}, props));
  },
  valid: function valid(result) {
    var _a;

    if (!result) return false;
    var logicform = result.logicform;
    var predsValid = isPredsValid(logicform);

    if (predsValid && ((_a = logicform.groupby) === null || _a === void 0 ? void 0 : _a.length) <= 2) {
      return true;
    }

    return false;
  }
};
export default treemap;