import { CChart } from '@coreui/vue-chartjs'

import {
  CChart,
  CChartBar,
  CChartHorizontalBar,
  CChartLine,
  CChartDoughnut,
  CChartRadar,
  CChartPie,
  CChartPolarArea,
} from '@coreui/vue-chartjs'

/**
 * Enables custom html based tooltips instead of standard tooltips.
 *
 * @default true
 */
customTooltips: {
  type: Boolean,
  default: true,
  required: false,
},
/**
 * The data object that is passed into the Chart.js chart (more info).
 */
data: {
  type: [Object, Function] as PropType<ChartData | ((canvas: HTMLCanvasElement) => ChartData)>,
  required: true,
},
/**
 * Height attribute applied to the rendered canvas.
 *
 * @default 150
 */
height: {
  type: Number,
  default: 150,
  required: false,
},
/**
 * ID attribute applied to the rendered canvas.
 */
id: {
  type: String,
  default: undefined,
  required: false,
},
/**
 * The options object that is passed into the Chart.js chart.
 *
 * {@link https://www.chartjs.org/docs/latest/general/options.html More Info}
 */
options: {
  type: Object as PropType<ChartOptions>,
  default: undefined,
  required: false,
},
/**
 * The plugins array that is passed into the Chart.js chart (more info)
 *
 * {@link https://www.chartjs.org/docs/latest/developers/plugins.html More Info}
 */
plugins: {
  type: Array as PropType<Plugin[]>,
  default: undefined,
},
/**
 * If true, will tear down and redraw chart on all updates.
 */
redraw: Boolean,
/**
 * Chart.js chart type.
 *
 * @type {'line' | 'bar' | 'radar' | 'doughnut' | 'polarArea' | 'bubble' | 'pie' | 'scatter'}
 */
type: {
  type: String as PropType<ChartType>,
  default: 'bar',
  required: false,
},
/**
 * Width attribute applied to the rendered canvas.
 *
 * @default 300
 */
width: {
  type: Number,
  default: 300,
  required: false,
},
/**
 * Put the chart into the wrapper div element.
 *
 * @default true
 */
wrapper: {
  type: Boolean,
  default: true,
  required: false,
},