feat(charts): Remove default styling

fix(mixins): Check for chartjs instance before rendering chart

README.md

@@ -76,7 +76,7 @@ However Chart.js is a `peerDependencies` so you have to install it separately. I
 
 ### Webpack 2
 If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
-It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way you three shaking will work.  Like in the bundled version, `Chart.js` is a `peerDependencies` and need to be installed.
+It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way you tree shaking will work.  Like in the bundled version, `Chart.js` is a `peerDependencies` and need to be installed.
 
 
 ## How to use

package.json

@@ -53,12 +53,10 @@
     "e2e": "node test/e2e/runner.js",
     "test": "npm run unit",
     "lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
-    "release": "webpack --progress --hide-modules --config  ./build/webpack.release.js && NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.min.js",
+    "release": "webpack --progress --hide-modules --config  ./build/webpack.release.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.min.js",
     "prepublishOnly": "yarn run lint && yarn run test && yarn run build"
   },
-  "dependencies": {
-    "lodash.merge": "^4.6.0"
-  },
+  "dependencies": {},
   "peerDependencies": {
     "chart.js": "2.7.x"
   },
@@ -72,7 +70,7 @@
     "chart.js": "2.7.0",
     "chromedriver": "^2.28.0",
     "connect-history-api-fallback": "^1.1.0",
-    "cross-env": "^3.2.4",
+    "cross-env": "^5.1.1",
     "cross-spawn": "^5.1.0",
     "css-loader": "^0.28.0",
     "eslint": "^3.19.0",

src/BaseCharts/Bar.js

@@ -1,5 +1,4 @@
 import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
 
 export default {
   render: function (createElement) {
@@ -41,46 +40,32 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            },
-            categoryPercentage: 0.5,
-            barPercentage: 0.2
-          }]
-        }
-      },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this.$data._plugins.push(plugin)
     },
     renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
       this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'bar',
           data: data,
-          options: chartOptions,
-          plugins: this.plugins
+          options: options,
+          plugins: this.$data._plugins
         }
       )
     }

src/BaseCharts/Bubble.js

@@ -1,5 +1,4 @@
 import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
 
 export default {
   render: function (createElement) {
@@ -42,48 +41,33 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
 
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            },
-            categoryPercentage: 0.5,
-            barPercentage: 0.2
-          }]
-        }
-      },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this.$data._plugins.push(plugin)
     },
     renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
       this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'bubble',
           data: data,
-          options: chartOptions,
-          plugins: this.plugins
+          options: options,
+          plugins: this.$data._plugins
         }
       )
     }

src/BaseCharts/Doughnut.js

@@ -1,5 +1,4 @@
 import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
 
 export default {
   render: function (createElement) {
@@ -42,31 +41,34 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
 
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-      },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this.$data._plugins.push(plugin)
     },
-    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
 
+    renderChart (data, options) {
       this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'doughnut',
           data: data,
-          options: chartOptions,
-          plugins: this.plugins
+          options: options,
+          plugins: this.$data._plugins
         }
       )
     }

src/BaseCharts/HorizontalBar.js

@@ -1,5 +1,4 @@
 import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
 
 export default {
   render: function (createElement) {
@@ -42,47 +41,33 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
 
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            },
-            categoryPercentage: 0.5,
-            barPercentage: 0.2
-          }]
-        }
-      },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this.$data._plugins.push(plugin)
     },
-    renderChart (data, options, type) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
+    renderChart (data, options) {
       this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'horizontalBar',
           data: data,
-          options: chartOptions,
-          plugins: this.plugins
+          options: options,
+          plugins: this.$data._plugins
         }
       )
     }

src/BaseCharts/Line.js

@@ -1,5 +1,4 @@
 import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
 
 export default {
   render: function (createElement) {
@@ -42,46 +41,33 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
 
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            }
-          }]
-        }
-      },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this.$data._plugins.push(plugin)
     },
     renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
       this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'line',
           data: data,
-          options: chartOptions,
-          plugins: this.plugins
+          options: options,
+          plugins: this.$data._plugins
         }
       )
     }

src/BaseCharts/Pie.js

@@ -1,5 +1,4 @@
 import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
 
 export default {
   render: function (createElement) {
@@ -42,31 +41,33 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
 
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-      },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this.$data._plugins.push(plugin)
     },
     renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
       this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'pie',
           data: data,
-          options: chartOptions,
-          plugins: this.plugins
+          options: options,
+          plugins: this.$data._plugins
         }
       )
     }

src/BaseCharts/PolarArea.js

@@ -1,5 +1,4 @@
 import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
 
 export default {
   render: function (createElement) {
@@ -42,31 +41,33 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
 
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-      },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this.$data._plugins.push(plugin)
     },
     renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
       this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'polarArea',
           data: data,
-          options: chartOptions,
-          plugins: this.plugins
+          options: options,
+          plugins: this.$data._plugins
         }
       )
     }

src/BaseCharts/Radar.js

@@ -1,5 +1,4 @@
 import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
 
 export default {
   render: function (createElement) {
@@ -42,31 +41,33 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
 
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-      },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this.$data._plugins.push(plugin)
     },
     renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
       this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'radar',
           data: data,
-          options: chartOptions,
-          plugins: this.plugins
+          options: options,
+          plugins: this.$data._plugins
         }
       )
     }

src/BaseCharts/Scatter.js

@@ -1,5 +1,4 @@
 import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
 
 export default {
   render: function (createElement) {
@@ -42,37 +41,33 @@ export default {
     },
     styles: {
       type: Object
+    },
+    plugins: {
+      type: Array,
+      default () {
+        return []
+      }
     }
   },
 
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-        scales: {
-          xAxes: [{
-            type: 'linear',
-            position: 'bottom'
-          }]
-        }
-      },
-      plugins: []
+      _plugins: this.plugins
     }
   },
 
   methods: {
     addPlugin (plugin) {
-      this.plugins.push(plugin)
+      this.$data._plugins.push(plugin)
     },
     renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
-
       this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'scatter',
           data: data,
-          options: chartOptions,
-          plugins: this.plugins
+          options: options,
+          plugins: this.$data._plugins
         }
       )
     }

src/examples/App.vue

@@ -5,6 +5,11 @@
       <bar-example></bar-example>
     </div>
 
+    <div class="Chart">
+      <h1 style="text-align:center;">Horizontal Barchart</h1>
+      <horizontal-bar-example></horizontal-bar-example>
+    </div>
+
     <div class="Chart">
       <h1 style="text-align:center;">Barchart with reactive mixing for live data</h1>
       <reactive-example></reactive-example>
@@ -63,6 +68,7 @@
   import ReactiveExample from './ReactiveExample'
   import ReactivePropExample from './ReactivePropExample'
   import ScatterExample from './ScatterExample'
+  import HorizontalBarExample from './HorizontalBarExample'
 
   export default {
     components: {
@@ -75,7 +81,8 @@
       BubbleExample,
       ReactiveExample,
       ReactivePropExample,
-      ScatterExample
+      ScatterExample,
+      HorizontalBarExample
     },
     data () {
       return {

src/helpers/options.js

@@ -1,5 +0,0 @@
-import merge from 'lodash.merge'
-
-export function mergeOptions (obj, src) {
-  return merge(obj, src)
-}

src/mixins/reactiveData.js

@@ -63,6 +63,9 @@ module.exports = {
             this.renderChart(this.chartData, this.options)
           }
         } else {
+          if (this.$data._chart) {
+            this.$data._chart.destroy()
+          }
           this.renderChart(this.chartData, this.options)
         }
       }

src/mixins/reactiveProp.js

@@ -63,6 +63,9 @@ module.exports = {
             this.renderChart(this.chartData, this.options)
           }
         } else {
+          if (this.$data._chart) {
+            this.$data._chart.destroy()
+          }
           this.renderChart(this.chartData, this.options)
         }
       }

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].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._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].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Bubble.spec.js

@@ -76,9 +76,31 @@ describe('BubbleChart', () => {
       components: { BubbleChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._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(
+          BubbleChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { BubbleChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Doughnut.spec.js

@@ -76,9 +76,31 @@ describe('DoughnutChart', () => {
       components: { DoughnutChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._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(
+          DoughnutChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { DoughnutChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/HorizontalBar.spec.js

@@ -76,9 +76,31 @@ describe('HorizontalBarChart', () => {
       components: { HorizontalBarChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._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(
+          HorizontalBarChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { HorizontalBarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Line.spec.js

@@ -76,9 +76,31 @@ describe('LineChart', () => {
       components: { LineChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._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(
+          LineChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { LineChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Pie.spec.js

@@ -75,9 +75,31 @@ describe('PieChart', () => {
       components: { PieChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._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(
+          PieChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { PieChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/PolarArea.spec.js

@@ -76,9 +76,31 @@ describe('PolarChart', () => {
       components: { PolarChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._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(
+          PolarChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { PolarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Radar.spec.js

@@ -75,9 +75,31 @@ describe('RadarChart', () => {
       components: { RadarChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._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(
+          RadarChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { RadarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/Scatter.spec.js

@@ -76,9 +76,31 @@ describe('ScatterChart', () => {
       components: { ScatterChart }
     }).$mount(el)
 
-    expect(vm.$children[0].plugins).to.exist
+    expect(vm.$children[0].$data._plugins).to.exist
     vm.$children[0].addPlugin(testPlugin)
 
-    expect(vm.$children[0].plugins.length).to.equal(1)
+    expect(vm.$children[0].$data._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(
+          ScatterChart, {
+            props: {
+              plugins: [testPlugin]
+            }
+          }
+        )
+      },
+      components: { ScatterChart }
+    }).$mount(el)
+
+    expect(vm.$children[0].$data._plugins).to.exist
+    expect(vm.$children[0].$data._plugins.length).to.equal(1)
   })
 })

test/unit/specs/helpers/options.spec.js

@@ -1,54 +0,0 @@
-import { mergeOptions } from '@/helpers/options'
-
-describe('mergeOptions.js', () => {
-  const a = {
-    a: 'a',
-    b: 'a'
-  }
-
-  const b = {
-    a: 'b',
-    b: 'b'
-  }
-
-  const c = {
-    c: 'c'
-  }
-
-  const an = {
-    a: {
-      a: 'a'
-    },
-    b: {
-      b: 'a'
-    }
-  }
-
-  const bn = {
-    a: {
-      a: 'a'
-    },
-    b: {
-      b: 'b'
-    }
-  }
-
-  it('should replace old a and b if a and b are new', () => {
-    const ab = mergeOptions(a, b)
-    expect(ab).to.have.property('a').and.to.equal('b')
-    expect(ab).to.have.property('b').and.to.equal('b')
-  })
-
-  it('should add c if c is new', () => {
-    const ac = mergeOptions(a, c)
-    expect(ac).to.have.property('a').and.to.equal('b')
-    expect(ac).to.have.property('b').and.to.equal('b')
-    expect(ac).to.have.property('c').and.to.equal('c')
-  })
-
-  it('should replace old a and b if a and b are new in nested objects', () => {
-    const ab = mergeOptions(an, bn)
-    expect(ab).to.have.deep.property('a.a').and.to.equal('a')
-    expect(ab).to.have.deep.property('b.b').and.to.equal('b')
-  })
-})