Add prop for inline plugins

syshex · Dec 13, 2017 · 5486560 · 5486560
1 parent ae13d71
commit 5486560
Show file tree

Hide file tree

Showing 18 changed files with 297 additions and 45 deletions.
diff --git a/src/BaseCharts/Bar.js b/src/BaseCharts/Bar.js
@@ -41,6 +41,12 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
   data () {
@@ -65,13 +71,13 @@ export default {
           }]
         }
       },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this._plugins.push(plugin)
     },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
@@ -80,7 +86,7 @@ export default {
           type: 'bar',
           data: data,
           options: chartOptions,
-          plugins: this.plugins
+          plugins: this._plugins
         }
       )
     }

diff --git a/src/BaseCharts/Bubble.js b/src/BaseCharts/Bubble.js
@@ -42,6 +42,12 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
 
@@ -67,13 +73,13 @@ export default {
           }]
         }
       },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this._plugins.push(plugin)
     },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
@@ -83,7 +89,7 @@ export default {
           type: 'bubble',
           data: data,
           options: chartOptions,
-          plugins: this.plugins
+          plugins: this._plugins
         }
       )
     }

diff --git a/src/BaseCharts/Doughnut.js b/src/BaseCharts/Doughnut.js
@@ -42,6 +42,12 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
 
@@ -50,13 +56,13 @@ export default {
       _chart: null,
       defaultOptions: {
       },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this._plugins.push(plugin)
     },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
@@ -66,7 +72,7 @@ export default {
           type: 'doughnut',
           data: data,
           options: chartOptions,
-          plugins: this.plugins
+          plugins: this._plugins
         }
       )
     }

diff --git a/src/BaseCharts/HorizontalBar.js b/src/BaseCharts/HorizontalBar.js
@@ -42,6 +42,12 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
 
@@ -67,13 +73,13 @@ export default {
           }]
         }
       },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this._plugins.push(plugin)
     },
     renderChart (data, options, type) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
@@ -82,7 +88,7 @@ export default {
           type: 'horizontalBar',
           data: data,
           options: chartOptions,
-          plugins: this.plugins
+          plugins: this._plugins
         }
       )
     }

diff --git a/src/BaseCharts/Line.js b/src/BaseCharts/Line.js
@@ -42,6 +42,12 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
 
@@ -65,13 +71,13 @@ export default {
           }]
         }
       },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this._plugins.push(plugin)
     },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
@@ -81,7 +87,7 @@ export default {
           type: 'line',
           data: data,
           options: chartOptions,
-          plugins: this.plugins
+          plugins: this._plugins
         }
       )
     }

diff --git a/src/BaseCharts/Pie.js b/src/BaseCharts/Pie.js
@@ -42,6 +42,12 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
 
@@ -50,13 +56,13 @@ export default {
       _chart: null,
       defaultOptions: {
       },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this._plugins.push(plugin)
     },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
@@ -66,7 +72,7 @@ export default {
           type: 'pie',
           data: data,
           options: chartOptions,
-          plugins: this.plugins
+          plugins: this._plugins
         }
       )
     }

diff --git a/src/BaseCharts/PolarArea.js b/src/BaseCharts/PolarArea.js
@@ -42,6 +42,12 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
 
@@ -50,13 +56,13 @@ export default {
       _chart: null,
       defaultOptions: {
       },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this._plugins.push(plugin)
     },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
@@ -66,7 +72,7 @@ export default {
           type: 'polarArea',
           data: data,
           options: chartOptions,
-          plugins: this.plugins
+          plugins: this._plugins
         }
       )
     }

diff --git a/src/BaseCharts/Radar.js b/src/BaseCharts/Radar.js
@@ -42,6 +42,12 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
 
@@ -50,13 +56,13 @@ export default {
       _chart: null,
       defaultOptions: {
       },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this._plugins.push(plugin)
     },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
@@ -66,7 +72,7 @@ export default {
           type: 'radar',
           data: data,
           options: chartOptions,
-          plugins: this.plugins
+          plugins: this._plugins
         }
       )
     }

diff --git a/src/BaseCharts/Scatter.js b/src/BaseCharts/Scatter.js
@@ -42,6 +42,12 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
 
@@ -56,13 +62,13 @@ export default {
           }]
         }
       },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this._plugins.push(plugin)
     },
     renderChart (data, options) {
       let chartOptions = mergeOptions(this.defaultOptions, options)
@@ -72,7 +78,7 @@ export default {
           type: 'scatter',
           data: data,
           options: chartOptions,
-          plugins: this.plugins
+          plugins: this._plugins
         }
       )
     }

diff --git a/test/unit/specs/Bar.spec.js b/test/unit/specs/Bar.spec.js
@@ -76,9 +76,31 @@ describe('BarChart', () => {
       components: { BarChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0]._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0]._plugins.length).to.equal(1)
+  })
+
+  it('should add inline plugins based on prop', () => {
+    const testPlugin = {
+      id: 'test'
+    }
+
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          BarChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { BarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._plugins).to.exist
+    expect(vm.$children[0]._plugins.length).to.equal(1)
   })
 })