componentDidUpdate()

in src/common/Base.tsx [351:507]

• 89 lines of code
• 22 McCabe index (conditional complexity)

  componentDidUpdate(prevProps: Props) {
    const {
      data: newData,
      width: newWidth,
      height: newHeight,
      config: newConfig,
      event: newEvent,
      interaction: newInteraction,
      loading: newLoading,
      // changeConfig = true,
    } = this.props;
    const {
      data: oldData,
      width: oldWidth,
      height: oldHeight,
      // config: oldConfig,
      event: oldEvent,
      interaction: oldInteraction,
      loading: oldLoading,
    } = prevProps;

    this.language = this.props.language || this.context.language;

    // loading状态改变，直接重绘
    if (newLoading !== oldLoading) {
      this.rerender();
      return;
    }

    if (oldLoading && !newLoading) {
      this.initSize();

      this.initChart();
    }

    // 通过上下文传递的通用配置项
    const globalBaseConfig = this.context?.defaultConfig?.baseConfig;
    // 通过上下文传递的图表配置项
    const globalComsConfig = this.context?.defaultConfig?.[this.chartName.replace('G2', '')] ?? {};
    // 用户自定义 > 图表 > 通用 > 默认
    const newAllConfig = merge(
      {},
      this.defaultConfig,
      globalBaseConfig,
      globalComsConfig,
      newConfig,
    );

    // 处理padding
    newAllConfig.padding = fixPadding(prevProps.padding || newAllConfig.padding);
    newAllConfig.appendPadding = prevProps.appendPadding || newAllConfig.appendPadding;

    // 颜色映射
    newAllConfig.colors = mapColors(newAllConfig.colors);

    // 配置项有变化，重新生成图表
    // 还需要判断上下文传的config有没有发生变化
    // if (changeConfig !== false) {
    if (this.checkConfigChange(newAllConfig, this.mergeConfig)) {
      this.rerender();

      return;
    }
    // }
    // console.log('componentDidUpdate', getG2theme(convertThemeKey(this.context.theme)))

    // 判断context内的theme是否有变化
    if (this.context.theme) {
      this.chart.theme(getG2theme(convertThemeKey(this.context.theme)));
    }

    // 更新事件
    if (newEvent !== oldEvent) {
      // 清除旧事件
      Object.keys(oldEvent).forEach((eventKey) => {
        this.chart.off(fixEventName(eventKey), oldEvent[eventKey]);
      });
      // 绑定新事件
      Object.keys(newEvent).forEach((eventKey) => {
        this.chart.on(fixEventName(eventKey), newEvent[eventKey]);
      });
    }

    if (newInteraction !== oldInteraction) {
      // 清除旧交互
      Object.keys(oldInteraction).forEach((interactionName) => {
        this.chart.removeInteraction(interactionName);
      });
      // 绑定新交互
      Object.keys(newInteraction).forEach((interactionName) => {
        this.chart.interaction(interactionName, newInteraction[interactionName]);
      });
    }

    // let needAfterRender = false;

    const dataChanged =
      newData !== oldData ||
      (Array.isArray(newData) && Array.isArray(oldData) && newData.length !== oldData.length);
    const sizeChanged = newWidth !== oldWidth || newHeight !== oldHeight;

    // 数据与尺寸同时改变,直接重绘
    if (dataChanged && sizeChanged) {
      this.rerender();
      return;
    }

    // 数据有变化
    else if (dataChanged) {
      const data =
        this.convertData && newAllConfig.dataType !== 'g2'
          ? highchartsDataToG2Data(newData, newAllConfig)
          : newData;
      this.rawData = newData;

      // 运行规则
      // 目前仅检测极端数据
      // 数据变化时，若替换配置项，必须重绘图表才能生效
      const needRerender = runAfterDataChangedRule(this, newAllConfig, data);

      // 必须重绘的场景：空数据变成有数据、极端与非极端切换、异常与非异常切换
      if (needRerender) {
        this.rerender();
        return;
      }

      this.emitWidgetsEvent(newEvent, 'beforeWidgetsChangeData', newAllConfig, data);

      this.changeData(this.chart, newAllConfig, data);

      this.emitWidgetsEvent(newEvent, 'afterWidgetsChangeData', newAllConfig, data);
      // if (this.chartProcess.changeData) {
      //   this.chart &&
      //     this.chartProcess.changeData.call(
      //       this,
      //       this.chart,
      //       newConfig,
      //       data
      //     );
      // } else {
      //   this.chart && this.chart.changeData(data);
      // }

      // needAfterRender = true;
    }

    // 传入的长宽有变化
    else if (sizeChanged) {
      this.handleChangeSize(newAllConfig, newWidth, newHeight);

      // needAfterRender = true;
    }

    // if (needAfterRender) {
    //   this.handleAfterRender(newConfig);
    // }
  }