fix: fix chart plugins type (#786)

change chart plugins type from object to array, fix tests and examples

#782

Author: thabarbados

README.md

@@ -129,8 +129,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -183,8 +183,8 @@ export default defineComponent({
       default: () => {}
     },
     plugins: {
-      type: Object as PropType<PluginOptionsByType<'bar'>>,
-      default: () => {}
+      type: Array as PropType<Plugin<'bar'>[]>,
+      default: () => []
     }
   },
   setup(props) {

legacy/sandboxes/bar/src/components/Bar.vue

@@ -58,8 +58,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {

legacy/sandboxes/bubble/src/components/Bubble.vue

@@ -57,8 +57,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {

legacy/sandboxes/doughnut/src/components/Doughnut.vue

@@ -57,8 +57,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {

legacy/sandboxes/line/src/components/Line.vue

@@ -57,8 +57,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {

legacy/sandboxes/pie/src/components/Pie.vue

@@ -57,8 +57,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {

legacy/sandboxes/polar-area/src/components/PolarArea.vue

@@ -57,8 +57,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {

legacy/sandboxes/radar/src/components/Radar.vue

@@ -57,8 +57,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {

legacy/sandboxes/scatter/src/components/Scatter.vue

@@ -57,8 +57,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {

legacy/src/Charts.js

@@ -14,7 +14,6 @@ import {
   chartCreate,
   chartDestroy,
   chartUpdate,
-  getChartOptions,
   getChartData,
   setChartLabels,
   setChartDatasets,
@@ -59,8 +58,8 @@ export function generateChart(chartId, chartType, chartController) {
         default: () => {}
       },
       plugins: {
-        type: Object,
-        default: () => {}
+        type: Array,
+        default: () => []
       }
     },
     data() {
@@ -100,7 +99,8 @@ export function generateChart(chartId, chartType, chartController) {
             this.$data._chart = new ChartJS(canvasEl2DContext, {
               type: chartType,
               data: chartData,
-              options: getChartOptions(options, this.plugins)
+              options,
+              plugins: this.plugins
             })
           }
         }

legacy/test/Bar.spec.js

@@ -31,15 +31,13 @@ describe('LegacyBar', () => {
 
   it('should add inline plugins based on prop', () => {
     const testPlugin = {
-      title: {
-        display: true
-      }
+      id: 'test'
     }
 
     const wrapper = mount(Component, {
-      propsData: { plugins: testPlugin }
+      propsData: { plugins: [testPlugin] }
     })
 
-    expect(Object.keys(wrapper.props().plugins).length).toEqual(1)
+    expect(wrapper.props().plugins.length).toEqual(1)
   })
 })

legacy/test/Bubble.spec.js

@@ -32,15 +32,13 @@ describe('LegacyBubble', () => {
 
   it('should add inline plugins based on prop', () => {
     const testPlugin = {
-      title: {
-        display: true
-      }
+      id: 'test'
     }
 
     const wrapper = mount(Component, {
-      propsData: { plugins: testPlugin }
+      propsData: { plugins: [testPlugin] }
     })
 
-    expect(Object.keys(wrapper.props().plugins).length).toEqual(1)
+    expect(wrapper.props().plugins.length).toEqual(1)
   })
 })

legacy/test/Doughnut.spec.js

@@ -32,15 +32,13 @@ describe('LegacyDoughnut', () => {
 
   it('should add inline plugins based on prop', () => {
     const testPlugin = {
-      title: {
-        display: true
-      }
+      id: 'test'
     }
 
     const wrapper = mount(Component, {
-      propsData: { plugins: testPlugin }
+      propsData: { plugins: [testPlugin] }
     })
 
-    expect(Object.keys(wrapper.props().plugins).length).toEqual(1)
+    expect(wrapper.props().plugins.length).toEqual(1)
   })
 })

legacy/test/Line.spec.js

@@ -31,15 +31,13 @@ describe('LegacyLine', () => {
 
   it('should add inline plugins based on prop', () => {
     const testPlugin = {
-      title: {
-        display: true
-      }
+      id: 'test'
     }
 
     const wrapper = mount(Component, {
-      propsData: { plugins: testPlugin }
+      propsData: { plugins: [testPlugin] }
     })
 
-    expect(Object.keys(wrapper.props().plugins).length).toEqual(1)
+    expect(wrapper.props().plugins.length).toEqual(1)
   })
 })

legacy/test/Pie.spec.js

@@ -31,15 +31,13 @@ describe('LegacyPie', () => {
 
   it('should add inline plugins based on prop', () => {
     const testPlugin = {
-      title: {
-        display: true
-      }
+      id: 'test'
     }
 
     const wrapper = mount(Component, {
-      propsData: { plugins: testPlugin }
+      propsData: { plugins: [testPlugin] }
     })
 
-    expect(Object.keys(wrapper.props().plugins).length).toEqual(1)
+    expect(wrapper.props().plugins.length).toEqual(1)
   })
 })

legacy/test/PolarArea.spec.js

@@ -32,15 +32,13 @@ describe('LegacyPolarArea', () => {
 
   it('should add inline plugins based on prop', () => {
     const testPlugin = {
-      title: {
-        display: true
-      }
+      id: 'test'
     }
 
     const wrapper = mount(Component, {
-      propsData: { plugins: testPlugin }
+      propsData: { plugins: [testPlugin] }
     })
 
-    expect(Object.keys(wrapper.props().plugins).length).toEqual(1)
+    expect(wrapper.props().plugins.length).toEqual(1)
   })
 })

legacy/test/Radar.spec.js

@@ -32,15 +32,13 @@ describe('LegacyRadar', () => {
 
   it('should add inline plugins based on prop', () => {
     const testPlugin = {
-      title: {
-        display: true
-      }
+      id: 'test'
     }
 
     const wrapper = mount(Component, {
-      propsData: { plugins: testPlugin }
+      propsData: { plugins: [testPlugin] }
     })
 
-    expect(Object.keys(wrapper.props().plugins).length).toEqual(1)
+    expect(wrapper.props().plugins.length).toEqual(1)
   })
 })

legacy/test/Scatter.spec.js

@@ -32,15 +32,13 @@ describe('LegacyScatter', () => {
 
   it('should add inline plugins based on prop', () => {
     const testPlugin = {
-      title: {
-        display: true
-      }
+      id: 'test'
     }
 
     const wrapper = mount(Component, {
-      propsData: { plugins: testPlugin }
+      propsData: { plugins: [testPlugin] }
     })
 
-    expect(Object.keys(wrapper.props().plugins).length).toEqual(1)
+    expect(wrapper.props().plugins.length).toEqual(1)
   })
 })

legacy/test/examples/Bar.vue

@@ -58,8 +58,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {

legacy/test/examples/Bubble.vue

@@ -57,8 +57,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {

legacy/test/examples/Doughnut.vue

@@ -57,8 +57,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {

legacy/test/examples/Line.vue

@@ -57,8 +57,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {

legacy/test/examples/Pie.vue

@@ -57,8 +57,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {

legacy/test/examples/PolarArea.vue

@@ -57,8 +57,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {

legacy/test/examples/Radar.vue

@@ -57,8 +57,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {

legacy/test/examples/Scatter.vue

@@ -57,8 +57,8 @@ export default {
       default: () => {}
     },
     plugins: {
-      type: Object,
-      default: () => {}
+      type: Array,
+      default: () => []
     }
   },
   data() {

package.json

@@ -1,7 +1,6 @@
 {
   "name": "vue-chartjs",
   "version": "4.0.2",
-  "packageManager": "[email protected]",
   "description": "Vue.js wrapper for chart.js for creating beautiful charts.",
   "author": "Jakub Juszczak <[email protected]>",
   "homepage": "http://vue-chartjs.org",