init()

in src/Wfunnel/index.tsx [57:179]

• 108 lines of code
• 14 McCabe index (conditional complexity)

  init(chart: Chart, config: WfunnelConfig, data: any) {
    const defs: Record<string, Types.ScaleOption> = {
      type: {
        type: 'cat',
      },
    };

    chart.scale(defs);
    chart.interaction('element-active');
    chart.axis(false);
    chart.data(data);

    // 设置图例
    rectLegend(this, chart, config, null, 'single');

    // tooltip
    rectTooltip(
      this,
      chart,
      config,
      {
        showTitle: false,
        showMarkers: false,
        showCrosshairs: false,
      },
      null,
      {
        showTitle: false,
        showMarkers: false,
        showCrosshairs: false,
      },
    );

    // 根据传入的 direction 和 align 设置坐标系，并绘制图形
    const drawType = `${config.direction}-${config.align}`;
    let geom = null;
    const fontSize1 = pxToNumber(themes['widgets-font-size-1']);
    let percentOffsetX = 0;
    let percentOffsetY = 0;
    const funnelShape = config.align === 'center' && config.pyramid ? 'pyramid' : 'funnel';

    switch (drawType) {
      case 'vertical-left':
      case 'vertical-start':
        chart.coordinate('rect').transpose().scale(1, -1);
        geom = chart.interval().position('x*y').shape(funnelShape).color('x', config.colors);
        percentOffsetX = 3 * fontSize1;
        break;
      case 'vertical-center':
        chart.coordinate('rect').transpose().scale(1, -1);
        geom = chart
          .interval()
          .adjust([
            {
              type: 'symmetric',
            },
          ])
          .position('x*y')
          .shape(funnelShape)
          .color('x', config.colors);
        break;
      case 'vertical-right':
      case 'vertical-end':
        chart.coordinate('rect').transpose().scale(-1, -1);
        geom = chart.interval().position('x*y').shape(funnelShape).color('x', config.colors);
        percentOffsetX = -3 * fontSize1;
        break;
      case 'horizontal-top':
      case 'horizontal-start':
        chart.coordinate('rect').reflect('y');
        geom = chart.interval().position('x*y').shape(funnelShape).color('x', config.colors);
        percentOffsetY = 3 * fontSize1;
        break;
      case 'horizontal-center':
        geom = chart
          .interval()
          .position('x*y')
          .shape(funnelShape)
          .color('x', config.colors)
          .adjust([
            {
              type: 'symmetric',
            },
          ]);
        break;
      // case 'horizontal-bottom':
      // case 'horizontal-end':
      // 和 default 时相同
      default:
        geom = chart.interval().position('x*y').shape(funnelShape).color('x', config.colors);
        percentOffsetY = -3 * fontSize1;
    }

    geomStyle(geom, config.geomStyle);

    if (config.label) {
      label({
        geom: geom,
        config: config,
        useCustomOffset: true,
        componentConfig: {
          labelLine: {
            style: {
              lineWidth: 1,
              stroke: themes['widgets-axis-line'],
            },
          },
          content: (v, item, index) => {
            if (typeof config.label === 'boolean') {
              return v['y'];
            }
            if (config.label.labelFormatter) {
              return config.label.labelFormatter(v['y'], item, index);
            }
            return v['y'];
          },
        },
      });
    }

    // 绘制辅助线，辅助背景区域
    renderGuide(chart, config, data, percentOffsetX, percentOffsetY);
  }