import { Widget } from "./Widget";
import * as echarts from "echarts";
import * as ecStat from 'echarts-stat';
/**
 * @class Chart.echart
 * @since ui.Chart
 */
export class echart extends Widget {

  cht: any;
  option: any;

  constructor() {
    let div = document.createElement("div");
    div.style.width = "100%";
    div.style.height = "300px";
    div.classList.add('ui-chart-div');
    super(div);
  }

  /**
   *  设置图表选项
   * @param {any} option  图表选项。
   * @return ui.Chart.echart
   * @tutorial ui.Chart.echart
   */
  static setOption(option: any) {
    let chart = new echart();
    var myChart = echarts.init(chart.el as HTMLElement);
    myChart.setOption(option);
    chart.option = option;
    chart.cht = myChart;
    return chart;
  }

  static histogram(hist: any, bin_edges: any, title: string, xAxisName: any, yAxisName: any) {
    if (hist && bin_edges) {
      let data = [];
      for (let index = 0; index < hist.length; index++) {
        const element = hist[index];
        let min = bin_edges[index];
        let max = bin_edges[index + 1];
        let arr = [];
        arr.push((max + min) / 2);
        arr.push(element);
        arr.push(min);
        arr.push(max);
        arr.push(min + "-" + max);
        data.push(arr);
      }
      var option = {
        title: {
          text: title ?? "直方图",
          left: 'center',
          top: 20
        },
        tooltip: {

        },
        color: ['rgb(51, 102, 204)'],
        grid: {
          left: '3%',
          right: '3%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          boundaryGap: '5%',
          scale: true,
        },
        yAxis: {
        },
        series: [{
          name: yAxisName ? yAxisName.name : 'histogram',
          type: 'bar',
          barWidth: '100%',
          encode: { x: 0, y: 1, itemName: 4 },
          //  barCategoryGap: 0,
          label: {
            normal: {
              show: false,
              position: 'insideTop'
            }
          },
          data: data
        }]
      };
      console.log("bins.Data:", data);
      return echart.setOption(option);
    }
  }
}