init()

in src/Wlinebox/index.tsx [154:298]

• 109 lines of code
• 13 McCabe index (conditional complexity)

  init(chart: Chart, config: WlineboxConfig, data: ChartData) {
    const rawLineData: DataAdapterData[] = [];
    this.rawLineData = rawLineData;
    const rawBoxData: DataAdapterData[] = [];
    this.rawBoxData = rawBoxData;

    (data || []).forEach((d: DataAdapterData) => {
      if (d.type === 'line') {
        rawLineData.push(d);
      } else if (d.type === 'box') {
        rawBoxData.push(d);
      }
    });

    const lineData = highchartsDataToG2Data(rawLineData, config as DataAdapterConfig, {});
    const boxData = highchartsDataToG2Data(rawBoxData, config as DataAdapterConfig, {});

    const defs: Record<string, Types.ScaleOption> = {
      x: propertyAssign(
        propertyMap.axis,
        {
          type: 'cat',
          // fix 更新数据时x轴无法清除数据
          sync: true,
        },
        config.xAxis,
      ),
      type: {
        type: 'cat',
      },
    };

    // 双轴
    if (Array.isArray(config.yAxis)) {
      config.yAxis.forEach((axis, yIndex) => {
        defs[`y${yIndex}`] = propertyAssign(
          propertyMap.axis,
          {
            type: 'linear',
            tickCount: 5,
            nice: true,
          },
          axis,
        );
      });
    } else {
      defs.y = propertyAssign(
        propertyMap.axis,
        {
          type: 'linear',
          tickCount: 5,
          // 单轴时，必须同步度量，否则会两个度量叠加在一起
          sync: true,
          nice: true,
        },
        config.yAxis,
      );
    }

    autoTimeScale(defs, this.rawData, this.language || this.context.language);

    chart.scale(defs);

    // 设置X轴
    rectXAxis(this, chart, config);

    if (Array.isArray(config.yAxis)) {
      config.yAxis.forEach((axis, yIndex) => {
        const axisColor = themes['widgets-axis-line'];
        const yAxisConfig: Types.AxisCfg = {
          line: {
            style: {
              stroke: axisColor,
            },
          },
        };
        if (yIndex !== 0) {
          yAxisConfig.grid = null;
          // 因为是多个view组成的图表，所以这里需要移动位置
          yAxisConfig.position = 'right';
        }

        rectYAxis(this, chart, { ...config, yAxis: axis }, `y${yIndex}`, yAxisConfig);
      });
    } else {
      // 设置单个Y轴
      rectYAxis(this, chart, config as { yAxis: (Types.ScaleOption & YAxisConfig) | false });
    }

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

    // 正式开始绘图，创建两个不同的view
    const boxView = chart.createView({
      padding: config.padding === 'auto' ? 'auto' : 0,
    });
    boxView.data(boxData);
    this.boxView = boxView;

    // Tooltip 背景区域
    activeRegionWithTheme(boxView);

    const lineView = chart.createView({
      padding: config.padding === 'auto' ? 'auto' : 0,
    });
    lineView.data(lineData);
    this.lineView = lineView;
    // 关闭一个View的X轴，避免重叠字体变粗
    lineView.axis('x', false);

    if (Array.isArray(config.yAxis)) {
      config.yAxis.forEach((asix, yIndex) => {
        if (getDataIndexColor(config.boxColors, rawBoxData, yIndex)) {
          drawBox(boxView, config, `y${yIndex}`, 'type');
        }
        if (getDataIndexColor(config.lineColors, rawLineData, yIndex)) {
          drawLine(lineView, config, `y${yIndex}`, 'type');
        }
      });
    } else {
      // 单Y轴时同时关闭一个View的Y轴，避免重叠字体变粗
      lineView.axis('y', false);

      drawBox(boxView, config, 'y', 'type');
      drawLine(lineView, config, 'y', 'type');
    }

    // 绘制辅助线，辅助背景区域
    // viewGuide(config, lineView, rawLineData, boxView, rawBoxData);

    legendFilter(this, boxView, 'rawBoxData');
    legendFilter(this, lineView, 'rawLineData');

    rectLegend(
      this,
      chart,
      config,
      {
        items: getLegendItems(rawLineData, rawBoxData, lineView.geometries[0], boxView.geometries[0], config),
      },
      'multiple',
    );
  }