Merge pull request #162 from apertureless/feature/dynamic_styles

Feature/dynamic styles

Author: apertureless

docs/README.md

@@ -71,7 +71,8 @@ There are some basic props defined in the BaseCharts. Because you `extend()` the
 | width | chart width |
 | height | chart height |
 | chart-id | id of the canvas |
-
+| css-classes | String with css classes for the surrounding div |
+| styles | Object with css styles for the surrounding div container |
 
 ## Examples
 
@@ -176,7 +177,8 @@ export default Line.extend({
   mixins: [reactiveProp],
   props: ['options'],
   mounted () {
-    // this.chartData is created in the mixin
+    // this.chartData is created in the mixin.
+    // If you want to pass options please create a local options object
     this.renderChart(this.chartData, this.options)
   }
 })

src/BaseCharts/Bar.js

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -20,7 +23,6 @@ export default Vue.extend({
       ]
     )
   },
-
   props: {
     chartId: {
       default: 'bar-chart',
@@ -33,9 +35,22 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
-
   data () {
     return {
       defaultOptions: {

src/BaseCharts/Bubble.js

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,20 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
 

src/BaseCharts/Doughnut.js

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,20 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
 

src/BaseCharts/HorizontalBar.js

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,20 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
 

src/BaseCharts/Line.js

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,20 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
 

src/BaseCharts/Pie.js

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,20 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
 

src/BaseCharts/PolarArea.js

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,20 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
 

src/BaseCharts/Radar.js

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,20 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },
 

src/BaseCharts/Scatter.js

@@ -5,7 +5,10 @@ import { mergeOptions } from '../helpers/options'
 export default Vue.extend({
   render: function (createElement) {
     return createElement(
-      'div',
+      'div', {
+        style: this.styles,
+        class: this.cssClasses
+      },
       [
         createElement(
           'canvas', {
@@ -33,6 +36,20 @@ export default Vue.extend({
     height: {
       default: 400,
       type: Number
+    },
+    cssClasses: {
+      type: String,
+      default: ''
+    },
+    styles: {
+      type: Object,
+      default () {
+        return {
+          width: '100%',
+          height: '200%',
+          position: 'relative'
+        }
+      }
     }
   },