feat(charts): Remove default styling

src/BaseCharts/Bar.js

@@ -1,5 +1,4 @@
 import Chart from 'chart.js'
-import { mergeOptions } from '../helpers/options'
 
 export default {
   render: function (createElement) {
@@ -52,25 +51,6 @@ export default {
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            },
-            categoryPercentage: 0.5,
-            barPercentage: 0.2
-          }]
-        }
-      },
       _plugins: this.plugins
     }
   },
@@ -80,12 +60,11 @@ export default {
       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,
+          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) {
@@ -54,25 +53,6 @@ export default {
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            },
-            categoryPercentage: 0.5,
-            barPercentage: 0.2
-          }]
-        }
-      },
       _plugins: this.plugins
     }
   },
@@ -82,13 +62,11 @@ export default {
       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,
+          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) {
@@ -54,8 +53,6 @@ export default {
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-      },
       _plugins: this.plugins
     }
   },
@@ -64,14 +61,13 @@ export default {
     addPlugin (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,
+          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) {
@@ -54,25 +53,6 @@ export default {
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            },
-            categoryPercentage: 0.5,
-            barPercentage: 0.2
-          }]
-        }
-      },
       _plugins: this.plugins
     }
   },
@@ -81,13 +61,12 @@ export default {
     addPlugin (plugin) {
       this.$data._plugins.push(plugin)
     },
-    renderChart (data, options, type) {
+    renderChart (data, options) {
-      let chartOptions = mergeOptions(this.defaultOptions, options)
       this.$data._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
           type: 'horizontalBar',
           data: data,
-          options: chartOptions,
+          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) {
@@ -54,23 +53,6 @@ export default {
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-        scales: {
-          yAxes: [{
-            ticks: {
-              beginAtZero: true
-            },
-            gridLines: {
-              display: false
-            }
-          }],
-          xAxes: [ {
-            gridLines: {
-              display: false
-            }
-          }]
-        }
-      },
       _plugins: this.plugins
     }
   },
@@ -80,13 +62,11 @@ export default {
       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,
+          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) {
@@ -54,8 +53,6 @@ export default {
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-      },
       _plugins: this.plugins
     }
   },
@@ -65,13 +62,11 @@ export default {
       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,
+          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) {
@@ -54,8 +53,6 @@ export default {
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-      },
       _plugins: this.plugins
     }
   },
@@ -65,13 +62,11 @@ export default {
       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,
+          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) {
@@ -54,8 +53,6 @@ export default {
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-      },
       _plugins: this.plugins
     }
   },
@@ -65,13 +62,11 @@ export default {
       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,
+          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) {
@@ -54,14 +53,6 @@ export default {
   data () {
     return {
       _chart: null,
-      defaultOptions: {
-        scales: {
-          xAxes: [{
-            type: 'linear',
-            position: 'bottom'
-          }]
-        }
-      },
       _plugins: this.plugins
     }
   },
@@ -71,13 +62,11 @@ export default {
       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,
+          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)
-}

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')
-  })
-})