import { ChartControlBase } from '../../../widgets';

/**
 * 图表部件基类
 *
 * @export
 * @class AppChartBase
 * @extends {ChartControlBase}
 */
export class AppChartBase extends ChartControlBase {
  /**
   * 绘制图表
   *
   * @returns {*}
   * @memberof AppChartBase
   */
  render() {
    if (!this.controlIsLoaded) {
      return;
    }
    let chartClassName = {
      'app-data-chart': true,
      'app-chart-empty': this.items.length <= 0,
      ...this.renderOptions.controlClassNames,
    };
    return (
      <div class={chartClassName}>
        {this.isNoData ? (
          <div v-show='isNoData' class='chart-no-data'>
            <i class='el-icon-data-analysis'></i>
            {this.$tl(this.controlInstance.getEmptyTextPSLanguageRes()?.lanResTag, this.$t('app.commonwords.nodata'))}
          </div>
        ) : (
          <div class='app-charts' style='height: 100%; padding: 6px 0' id={this.chartId}></div>
        )}
      </div>
    );
  }
}