@alicloud/cloud-charts/lib/aop/controller/legend.js


"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports["default"] = void 0;
var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));
var _legend = _interopRequireDefault(require("@antv/g2/esm/chart/controller/legend"));
var _dependents = require("@antv/g2/esm/dependents");
var _reactLegend = _interopRequireDefault(require("../component/reactLegend"));
var _constants = require("../../constants");
var _common = require("../../common/common");
var _chartRefs = require("../../common/chartRefs");
var _omit = _interopRequireDefault(require("lodash/omit"));
// 引入自定义的图例组件
// @ts-ignore
var WidgetsLegendController = /*#__PURE__*/function (_RawLegendController) {
  (0, _inheritsLoose2["default"])(WidgetsLegendController, _RawLegendController);
  function WidgetsLegendController(view) {
    var _this;
    _this = _RawLegendController.call(this, view) || this;
    _this.parentDom = void 0;
    _this.legendContainer = void 0;
    _this.parentDom = _this.view.getCanvas().get('el').parentNode.parentNode.parentNode;
    _this.legendContainer = document.createElement('div');
    _this.legendContainer.className = _constants.FullCrossName + " widgets-legend";
    _this.parentDom.appendChild(_this.legendContainer);
    return _this;
  }
  var _proto = WidgetsLegendController.prototype;
  _proto.layout = function layout() {
    var _this$view,
      _widgetsCtx$context,
      _widgetsCtx$context$d,
      _widgetsCtx$context$d2,
      _widgetsCtx$context2,
      _widgetsCtx$context2$,
      _widgetsCtx$defaultCo,
      _widgetsCtx$defaultCo2,
      _globalBaseConfig$leg,
      _globalComsConfig$leg,
      _widgetsCtx$finalConf,
      _widgetsCtx$finalConf2,
      _widgetsCtx$props,
      _widgetsCtx$props2,
      _this2 = this;
    var widgetsCtx = (_this$view = this.view) === null || _this$view === void 0 ? void 0 : _this$view.widgetsCtx;
    if (!(widgetsCtx !== null && widgetsCtx !== void 0 && widgetsCtx.size)) {
      return;
    }
    var _widgetsCtx$size = widgetsCtx === null || widgetsCtx === void 0 ? void 0 : widgetsCtx.size,
      w = _widgetsCtx$size[0],
      h = _widgetsCtx$size[1];
    var legendConfig = {};
    var globalBaseConfig = widgetsCtx === null || widgetsCtx === void 0 ? void 0 : (_widgetsCtx$context = widgetsCtx.context) === null || _widgetsCtx$context === void 0 ? void 0 : (_widgetsCtx$context$d = _widgetsCtx$context.defaultConfig) === null || _widgetsCtx$context$d === void 0 ? void 0 : _widgetsCtx$context$d.baseConfig;
    var globalComsConfig = (_widgetsCtx$context$d2 = widgetsCtx === null || widgetsCtx === void 0 ? void 0 : (_widgetsCtx$context2 = widgetsCtx.context) === null || _widgetsCtx$context2 === void 0 ? void 0 : (_widgetsCtx$context2$ = _widgetsCtx$context2.defaultConfig) === null || _widgetsCtx$context2$ === void 0 ? void 0 : _widgetsCtx$context2$[widgetsCtx.chartName.replace('G2', '')]) !== null && _widgetsCtx$context$d2 !== void 0 ? _widgetsCtx$context$d2 : {};
    (0, _common.merge)(legendConfig, (_widgetsCtx$defaultCo = widgetsCtx === null || widgetsCtx === void 0 ? void 0 : (_widgetsCtx$defaultCo2 = widgetsCtx.defaultConfig) === null || _widgetsCtx$defaultCo2 === void 0 ? void 0 : _widgetsCtx$defaultCo2.legend) !== null && _widgetsCtx$defaultCo !== void 0 ? _widgetsCtx$defaultCo : {}, (_globalBaseConfig$leg = globalBaseConfig === null || globalBaseConfig === void 0 ? void 0 : globalBaseConfig.legend) !== null && _globalBaseConfig$leg !== void 0 ? _globalBaseConfig$leg : {}, (_globalComsConfig$leg = globalComsConfig === null || globalComsConfig === void 0 ? void 0 : globalComsConfig.legend) !== null && _globalComsConfig$leg !== void 0 ? _globalComsConfig$leg : {}, (_widgetsCtx$finalConf = widgetsCtx === null || widgetsCtx === void 0 ? void 0 : (_widgetsCtx$finalConf2 = widgetsCtx.finalConfig) === null || _widgetsCtx$finalConf2 === void 0 ? void 0 : _widgetsCtx$finalConf2.legend) !== null && _widgetsCtx$finalConf !== void 0 ? _widgetsCtx$finalConf : {});
    if (this.legendContainer && !(widgetsCtx !== null && widgetsCtx !== void 0 && widgetsCtx.isEmpty) && !(widgetsCtx !== null && widgetsCtx !== void 0 && (_widgetsCtx$props = widgetsCtx.props) !== null && _widgetsCtx$props !== void 0 && _widgetsCtx$props.loading) && !(widgetsCtx !== null && widgetsCtx !== void 0 && (_widgetsCtx$props2 = widgetsCtx.props) !== null && _widgetsCtx$props2 !== void 0 && _widgetsCtx$props2.errorInfo) && (legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.visible) !== false && (legendConfig !== null && legendConfig !== void 0 && legendConfig.table || legendConfig !== null && legendConfig !== void 0 && legendConfig.gradient || legendConfig !== null && legendConfig !== void 0 && legendConfig.foldable)) {
      var _this$legendContainer, _this$legendContainer2, _legendConfig$positio, _this$view3, _this$view3$canvas, _this$view$getCanvas$, _this$view$getCanvas$2;
      this.legendContainer.style.visibility = 'visible';
      var legendElement = (_this$legendContainer = this.legendContainer) === null || _this$legendContainer === void 0 ? void 0 : (_this$legendContainer2 = _this$legendContainer.childNodes) === null || _this$legendContainer2 === void 0 ? void 0 : _this$legendContainer2[0];
      var position = ((_legendConfig$positio = legendConfig === null || legendConfig === void 0 ? void 0 : legendConfig.position) !== null && _legendConfig$positio !== void 0 ? _legendConfig$positio : 'bottom').split('-')[0];

      // 根据legend配置项计算图表宽高
      var size = [w, h];
      var legendSize = [0, 0];
      var legendMaxSize = null;
      if (legendConfig !== null && legendConfig !== void 0 && legendConfig.table) {
        var _Object$keys$length;
        // 根据数据量计算高度
        var items = (0, _chartRefs.getStatistics)(widgetsCtx.chart, [], (widgetsCtx === null || widgetsCtx === void 0 ? void 0 : widgetsCtx.legendField) || 'type');

        // 目前暂时对多重圆环进行特殊处理，待规则统一梳理后，整理数据类型
        // 增加特殊逻辑，如果目前包含2层以上，则只展示第一层数据
        if (widgetsCtx.chartName === 'G2MultiPie') {
          var _this$view$options$da, _this$view2, _this$view2$options, _filterData$filter, _filterData$filter2;
          var filterData = [].concat((_this$view$options$da = this === null || this === void 0 ? void 0 : (_this$view2 = this.view) === null || _this$view2 === void 0 ? void 0 : (_this$view2$options = _this$view2.options) === null || _this$view2$options === void 0 ? void 0 : _this$view2$options.data) !== null && _this$view$options$da !== void 0 ? _this$view$options$da : []);
          var firstDepthCount = (_filterData$filter = filterData.filter(function (sub) {
            return sub.depth === 1;
          })) === null || _filterData$filter === void 0 ? void 0 : _filterData$filter.length;
          var secondDepthCount = (_filterData$filter2 = filterData.filter(function (sub) {
            return sub.depth === 2;
          })) === null || _filterData$filter2 === void 0 ? void 0 : _filterData$filter2.length;
          if (firstDepthCount > 0 && secondDepthCount > 0) {
            filterData = filterData.filter(function (sub) {
              return sub.depth === 2;
            });
          } else {
            filterData = [];
          }
          var filterDataIdList = filterData.map(function (sub) {
            return sub.id;
          });
          items = (0, _omit["default"])(items, filterDataIdList);
        }
        var num = (_Object$keys$length = Object.keys(items).length) !== null && _Object$keys$length !== void 0 ? _Object$keys$length : 0;
        if (position === 'right') {
          var _legendConfig$table$s, _legendConfig$table, _legendConfig$table$s2;
          size = [w / 2, h];
          var height = (_legendConfig$table$s = legendConfig === null || legendConfig === void 0 ? void 0 : (_legendConfig$table = legendConfig.table) === null || _legendConfig$table === void 0 ? void 0 : (_legendConfig$table$s2 = _legendConfig$table.style) === null || _legendConfig$table$s2 === void 0 ? void 0 : _legendConfig$table$s2.height) !== null && _legendConfig$table$s !== void 0 ? _legendConfig$table$s : Math.min(h, 20 * (num + 1));
          legendSize = [w / 2, height];
          legendMaxSize = [w / 2, h];
        } else {
          var _legendConfig$table$s3, _legendConfig$table2, _legendConfig$table2$;
          var _height = (_legendConfig$table$s3 = legendConfig === null || legendConfig === void 0 ? void 0 : (_legendConfig$table2 = legendConfig.table) === null || _legendConfig$table2 === void 0 ? void 0 : (_legendConfig$table2$ = _legendConfig$table2.style) === null || _legendConfig$table2$ === void 0 ? void 0 : _legendConfig$table2$.height) !== null && _legendConfig$table$s3 !== void 0 ? _legendConfig$table$s3 : Math.min(h * 0.3, 20 * (num + 1));
          size = [w, h - _height];
          legendSize = [w, _height];
          legendMaxSize = [w, _height];
        }
      } else if (legendConfig !== null && legendConfig !== void 0 && legendConfig.gradient) {
        size = [w, h - 50];
        legendSize = [w, 50];
        legendMaxSize = [w, 50];
      } else if (legendConfig !== null && legendConfig !== void 0 && legendConfig.foldable) {
        if (widgetsCtx.legendFolded || widgetsCtx.legendFolded === undefined) {
          size = [w, h - 20];
          legendSize = [w, 20];
        } else {
          // 折叠型legend的展开逻辑在FoldableLegend内实现
          if (legendElement) {
            legendElement.style.width = 'auto';
            legendElement.style.height = 'auto';
          }
          return;
        }
      }
      if ((_this$view3 = this.view) !== null && _this$view3 !== void 0 && (_this$view3$canvas = _this$view3.canvas) !== null && _this$view3$canvas !== void 0 && _this$view3$canvas.get('el')) {
        setTimeout(function () {
          var _this2$view;
          // @ts-ignore
          (_this2$view = _this2.view) === null || _this2$view === void 0 ? void 0 : _this2$view.changeSize(size[0], size[1]);
        }, 0);
      }

      // 设置图表宽高
      var chartContainer = (_this$view$getCanvas$ = this.view.getCanvas().get('el')) === null || _this$view$getCanvas$ === void 0 ? void 0 : (_this$view$getCanvas$2 = _this$view$getCanvas$.parentNode) === null || _this$view$getCanvas$2 === void 0 ? void 0 : _this$view$getCanvas$2.parentNode;
      if (chartContainer) {
        chartContainer.style.width = size[0] + "px";
        chartContainer.style.height = size[1] + "px";
      }

      // 设置legend宽高
      if (legendElement) {
        legendElement.style.width = legendSize[0] + "px";
        legendElement.style.height = legendSize[1] + "px";
        if (legendMaxSize) {
          legendElement.style.maxHeight = legendMaxSize[1] + "px";
        }

        // 记录legend尺寸
        widgetsCtx.legendSize = legendSize;
      }
    } else {
      if (this.legendContainer) {
        this.legendContainer.style.visibility = 'hidden';
      }
      _RawLegendController.prototype.layout.call(this);
    }
  }

  // @ts-ignore
  ;
  _proto.createCustomLegend = function createCustomLegend(geometry, attr, scale, legendOption) {
    // 直接使用 分类图例渲染
    // @ts-ignore
    var cfg = this.getCategoryCfg(geometry, attr, scale, legendOption, true);
    return new _dependents.CategoryLegend(cfg);
  }

  // @ts-ignore
  ;
  _proto.createCategoryLegend = function createCategoryLegend(geometry, attr, scale, legendOption) {
    var _this$parentDom$getEl;
    // @ts-ignore
    var cfg = this.getCategoryCfg(geometry, attr, scale, legendOption);
    this.legendContainer = (_this$parentDom$getEl = this.parentDom.getElementsByClassName('widgets-legend')) === null || _this$parentDom$getEl === void 0 ? void 0 : _this$parentDom$getEl[0];

    // // 当以下配置项生效时，使用g2 原生legend
    // if (
    //   !table &&
    //   !foldable &&
    //   (autoCollapse ||
    //     collapseRow ||
    //     showData ||
    //     marker ||
    //     allowAllCanceled ||
    //     hoverable === false ||
    //     onHover ||
    //     clickable === false ||
    //     onClick ||
    //     customConfig ||
    //     maxWidth ||
    //     maxHeight ||
    //     maxWidthRatio ||
    //     maxHeightRatio ||
    //     useReverseChecked === false ||
    //     dodge)
    // ) {
    //   console.log('normal', this.view?.widgetsCtx?.props?.config?.legend);
    //   // 普通legend
    //   return new CategoryLegend(cfg);
    // }

    // 使用自定义的legend：列表型legend、折叠型legend或阶梯状legend
    if (legendOption !== null && legendOption !== void 0 && legendOption.table || legendOption !== null && legendOption !== void 0 && legendOption.foldable || legendOption !== null && legendOption !== void 0 && legendOption.gradient) {
      var _legendOption$positio, _legendOption$positio2, _legendOption$positio3, _legendOption$positio4, _legendOption$positio5;
      // if (!this.legendContainer) {
      //   this.legendContainer = document.createElement('div');
      //   this.legendContainer.className = `${FullCrossName} widgets-legend`;
      //   this.parentDom.appendChild(this.legendContainer);
      // }
      var position = legendOption === null || legendOption === void 0 ? void 0 : (_legendOption$positio = legendOption.position) === null || _legendOption$positio === void 0 ? void 0 : (_legendOption$positio2 = _legendOption$positio.split('-')) === null || _legendOption$positio2 === void 0 ? void 0 : _legendOption$positio2[0];
      var align = (_legendOption$positio3 = legendOption === null || legendOption === void 0 ? void 0 : (_legendOption$positio4 = legendOption.position) === null || _legendOption$positio4 === void 0 ? void 0 : (_legendOption$positio5 = _legendOption$positio4.split('-')) === null || _legendOption$positio5 === void 0 ? void 0 : _legendOption$positio5[1]) !== null && _legendOption$positio3 !== void 0 ? _legendOption$positio3 : 'center';
      var directionX = ['top', 'bottom'].includes(position) ? align === 'center' ? 'center' : align === 'left' || align === 'top' ? 'flex-start' : 'flex-end' : 'flex-start';
      var directionY = align === 'center' ? 'center' : align === 'left' || align === 'top' ? 'flex-start' : 'flex-end';
      this.legendContainer.style.cssText = "width: 100%; display: flex; justify-content: " + directionX + "; align-items: " + directionY + "; overflow-x: auto;overflow-y: hidden;";
      this.legendContainer.style.visibility = 'visible';
      return new _reactLegend["default"]({
        cfg: cfg,
        container: this.legendContainer,
        chart: this.view,
        legendConfig: legendOption
      });
    }
    this.legendContainer.style.visibility = 'hidden';

    // 普通legend
    return new _dependents.CategoryLegend(cfg);
  };
  _proto.clear = function clear() {
    _RawLegendController.prototype.clear.call(this);
    if (this.legendContainer) {
      this.legendContainer.style.visibility = 'hidden';
    }
  };
  _proto.destroy = function destroy() {
    _RawLegendController.prototype.destroy.call(this);

    // 销毁之前的legend legendContainer
    if (this.legendContainer) {
      this.parentDom.removeChild(this.legendContainer);
      this.legendContainer = null;
    }
  };
  return WidgetsLegendController;
}(_legend["default"]);
var _default = exports["default"] = WidgetsLegendController;