private createCategoryLegend()

in src/aop/controller/legend.ts [154:221]
60 lines of code
30 McCabe index (conditional complexity)

  private createCategoryLegend(geometry: Geometry, attr: Attribute, scale: Scale, legendOption: any) {
    // @ts-ignore
    const cfg = this.getCategoryCfg(geometry, attr, scale, legendOption);

    this.legendContainer = this.parentDom.getElementsByClassName('widgets-legend')?.[0] as HTMLElement;

    // // 当以下配置项生效时，使用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?.table || legendOption?.foldable || legendOption?.gradient) {
      // if (!this.legendContainer) {
      //   this.legendContainer = document.createElement('div');
      //   this.legendContainer.className = `${FullCrossName} widgets-legend`;
      //   this.parentDom.appendChild(this.legendContainer);
      // }
      const position = legendOption?.position?.split('-')?.[0];
      const align = legendOption?.position?.split('-')?.[1] ?? 'center';
      const directionX = ['top', 'bottom'].includes(position)
        ? align === 'center'
          ? 'center'
          : align === 'left' || align === 'top'
          ? 'flex-start'
          : 'flex-end'
        : 'flex-start';

      const 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({
        cfg,
        container: this.legendContainer,
        chart: this.view,
        legendConfig: legendOption,
      });
    }

    this.legendContainer.style.visibility = 'hidden';

    // 普通legend
    return new CategoryLegend(cfg);
  }