@antv/g2plot/src/plots/funnel/interactions/funnel-conversion-tag.ts

An interactive and responsive charting library

import { Action } from '@antv/g2';
import { each, filter, get, map } from '@antv/util';
import { conversionTag as basicConversionTag } from '../geometries/basic';
import { CONVERSION_TAG_NAME, transformData } from '../geometries/common';
import { compareConversionTag } from '../geometries/compare';
import { FunnelOptions } from '../types';

/**
 * Funnel 转化率跟随 legend 变化事件
 */
export class ConversionTagAction extends Action {
  private rendering = false;
  public change(options: FunnelOptions) {
    // 防止多次重复渲染
    if (!this.rendering) {
      const { seriesField, compareField } = options;
      const conversionTag = compareField ? compareConversionTag : basicConversionTag;
      const { view } = this.context;
      // 兼容分面漏斗图
      const views = seriesField || compareField ? view.views : [view];
      map(views, (v, index) => {
        // 防止影响其他 annotations 被去除
        const annotationController = v.getController('annotation');

        const annotations = filter(
          get(annotationController, ['option'], []),
          ({ name }) => name !== CONVERSION_TAG_NAME
        );

        annotationController.clear(true);

        each(annotations, (annotation) => {
          if (typeof annotation === 'object') {
            v.annotation()[annotation.type](annotation);
          }
        });

        const data = get(v, ['filteredData'], v.getOptions().data);

        conversionTag({
          chart: v,
          index,
          options: {
            ...options,
            // @ts-ignore
            filteredData: transformData(data, data, options),
          },
        });

        v.filterData(data);
        this.rendering = true;
        v.render(true);
      });
    }
    this.rendering = false;
  }
}