release: @coreui/vue-chartjs v2.0.0-rc.2

Author: mrholek

packages/coreui-vue-chartjs/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@coreui/vue-chartjs",
   "description": "Vue component wrapper for chart.js",
-  "version": "2.0.0-rc.1",
+  "version": "2.0.0-rc.2",
   "license": "MIT",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

packages/coreui-vue-chartjs/src/CChart.ts

@@ -64,6 +64,7 @@ const CChart = defineComponent({
     plugins: {
       type: Array as PropType<Plugin[]>,
       default: undefined,
+      required: false,
     },
     /**
      * If true, will tear down and redraw chart on all updates.
@@ -144,7 +145,6 @@ const CChart = defineComponent({
     }
 
     const handleOnClick = (e: Event) => {
-      console.log(chart)
       if (!chart) return
 
       emit(

packages/coreui-vue-chartjs/src/index.ts

@@ -1,43 +1,109 @@
-import { App, defineComponent, h } from 'vue'
+import { App, defineComponent, h, PropType } from 'vue'
+import { ChartData, ChartOptions, Plugin } from 'chart.js/auto'
 import { CChart } from './CChart'
 
+const CChartProps = {
+  customTooltips: {
+    type: Boolean,
+    default: true,
+    required: false,
+  },
+  data: {
+    type: [Object, Function] as PropType<ChartData | ((canvas: HTMLCanvasElement) => ChartData)>,
+    required: true,
+  },
+  height: {
+    type: Number,
+    default: 150,
+    required: false,
+  },
+  id: {
+    type: String,
+    default: undefined,
+    required: false,
+  },
+  options: {
+    type: Object as PropType<ChartOptions>,
+    default: undefined,
+    required: false,
+  },
+  plugins: {
+    type: Array as PropType<Plugin[]>,
+    default: undefined,
+    required: false,
+  },
+  redraw: Boolean,
+  width: {
+    type: Number,
+    default: 300,
+    required: false,
+  },
+  wrapper: {
+    type: Boolean,
+    default: true,
+    required: false,
+  },
+}
+
 const CChartBar = defineComponent({
+  name: 'CChartBar',
+  props: CChartProps,
   setup(props) {
     return () => h(CChart, { type: 'bar', ...props })
   },
 })
 
 const CChartBubble = defineComponent({
+  name: 'CChartBubble',
+  props: CChartProps,
   setup(props) {
     return () => h(CChart, { type: 'bubble', ...props })
   },
 })
 
 const CChartDoughnut = defineComponent({
+  name: 'CChartDoughnut',
+  props: CChartProps,
   setup(props) {
     return () => h(CChart, { type: 'doughnut', ...props })
   },
 })
 
 const CChartLine = defineComponent({
+  name: 'CChartLine',
+  props: CChartProps,
   setup(props) {
     return () => h(CChart, { type: 'line', ...props })
   },
 })
 
+const CChartPie = defineComponent({
+  name: 'CChartPie',
+  props: CChartProps,
+  setup(props) {
+    return () => h(CChart, { type: 'pie', ...props })
+  },
+})
+
 const CChartPolarArea = defineComponent({
+  name: 'CChartPolarArea',
+  props: CChartProps,
   setup(props) {
     return () => h(CChart, { type: 'polarArea', ...props })
   },
 })
 
 const CChartRadar = defineComponent({
+  name: 'CChartRadar',
+  props: CChartProps,
   setup(props) {
     return () => h(CChart, { type: 'radar', ...props })
   },
 })
 
 const CChartScatter = defineComponent({
+  name: 'CChartScatter',
+  props: CChartProps,
   setup(props) {
     return () => h(CChart, { type: 'scatter', ...props })
   },
@@ -50,6 +116,7 @@ const CChartPlugin = {
     app.component('CChartBubble', CChartBubble)
     app.component('CChartDoughnut', CChartDoughnut)
     app.component('CChartLine', CChartLine)
+    app.component('CChartPie', CChartPie)
     app.component('CChartPolarArea', CChartPolarArea)
     app.component('CChartRadar', CChartRadar)
     app.component('CChartScatter', CChartScatter)
@@ -64,6 +131,7 @@ export {
   CChartBubble,
   CChartDoughnut,
   CChartLine,
+  CChartPie,
   CChartPolarArea,
   CChartRadar,
   CChartScatter,