import React from 'react';
import { Column } from '@ant-design/charts';
import { ColumnConfig } from '@ant-design/charts/es/column';
import defaultConfig from '../_utils/theme';
import isEmpty from '../_utils/isEmpty';
import { Empty } from 'antd';

export interface IColumnChart extends ColumnConfig {
  showFilter?: boolean;
}

const columnDefaultConfig = {
  isGroup: true,
  marginRatio: 0,
};

export default ({ ...rest }: IColumnChart) => {
  const { loading, data } = rest;
  if (loading === false && isEmpty(data)) {
    return <Empty />;
  }
  if (isEmpty(data)) {
    rest.data = [];
  }
  return <Column {...defaultConfig} {...columnDefaultConfig} {...rest} />;
};