import * as React from 'react';
import ReactECharts from 'echarts-for-react';
import useChart from './useChart';
import { ChartTypes } from './types';
import { getOption } from './barMan';

function Chart(props: ChartTypes.ChartProps) {
  const { config } = props;
  const { mode } = config;

  const {
    columnMetas,
    results,
  } = useChart(props);

  return (
    columnMetas && results && columnMetas.length > 0 && results.length > 0 ? (
      <ReactECharts
        option={getOption(mode, config, { columnMetas, results })}
        style={{ minHeight: '300px', width: '100%' }}
        className="react-echarts"
      />
    ) : <div className="no-data">暂无数据</div>
  );
}

export default Chart;