feat(charts): Remove default styling

syshex · Jan 12, 2018 · ac5d4d8 · ac5d4d8
1 parent db0040e
commit ac5d4d8
Show file tree

Hide file tree

Showing 13 changed files with 19 additions and 185 deletions.
diff --git a/src/BaseCharts/Bar.js b/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
         }
       )

diff --git a/src/BaseCharts/Bubble.js b/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
         }
       )

diff --git a/src/BaseCharts/Doughnut.js b/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
         }
       )

diff --git a/src/BaseCharts/HorizontalBar.js b/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) {
-      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,
+          options: options,
           plugins: this.$data._plugins
         }
       )

diff --git a/src/BaseCharts/Line.js b/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
         }
       )

diff --git a/src/BaseCharts/Pie.js b/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
         }
       )

diff --git a/src/BaseCharts/PolarArea.js b/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
         }
       )

diff --git a/src/BaseCharts/Radar.js b/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
         }
       )

diff --git a/src/BaseCharts/Scatter.js b/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
         }
       )

diff --git a/src/examples/App.vue b/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 {

diff --git a/src/helpers/options.js b/src/helpers/options.js