Skip to content

Commit

Permalink
Merge pull request #162 from apertureless/feature/dynamic_styles
Browse files Browse the repository at this point in the history
Feature/dynamic styles
  • Loading branch information
apertureless authored Aug 1, 2017
2 parents e0c771f + 7e52380 commit c9bc36e
Show file tree
Hide file tree
Showing 11 changed files with 179 additions and 14 deletions.
6 changes: 4 additions & 2 deletions docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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)
}
})
Expand Down
21 changes: 18 additions & 3 deletions src/BaseCharts/Bar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand All @@ -20,7 +23,6 @@ export default Vue.extend({
]
)
},

props: {
chartId: {
default: 'bar-chart',
Expand All @@ -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: {
Expand Down
19 changes: 18 additions & 1 deletion src/BaseCharts/Bubble.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down Expand Up @@ -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'
}
}
}
},

Expand Down
19 changes: 18 additions & 1 deletion src/BaseCharts/Doughnut.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down Expand Up @@ -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'
}
}
}
},

Expand Down
19 changes: 18 additions & 1 deletion src/BaseCharts/HorizontalBar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down Expand Up @@ -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'
}
}
}
},

Expand Down
19 changes: 18 additions & 1 deletion src/BaseCharts/Line.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down Expand Up @@ -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'
}
}
}
},

Expand Down
19 changes: 18 additions & 1 deletion src/BaseCharts/Pie.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down Expand Up @@ -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'
}
}
}
},

Expand Down
19 changes: 18 additions & 1 deletion src/BaseCharts/PolarArea.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down Expand Up @@ -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'
}
}
}
},

Expand Down
19 changes: 18 additions & 1 deletion src/BaseCharts/Radar.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down Expand Up @@ -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'
}
}
}
},

Expand Down
19 changes: 18 additions & 1 deletion src/BaseCharts/Scatter.js
Original file line number Diff line number Diff line change
Expand Up @@ -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', {
Expand Down Expand Up @@ -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'
}
}
}
},

Expand Down
14 changes: 13 additions & 1 deletion src/examples/App.vue
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,8 @@
},
data () {
return {
dataPoints: null
dataPoints: null,
height: 20
}
},
mounted () {
Expand All @@ -88,6 +89,9 @@
}, 2000)
},
methods: {
increaseHeight () {
this.height += 10
},
getRandomInt () {
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
},
Expand All @@ -103,6 +107,14 @@
]
}
}
},
computed: {
myStyles () {
return {
height: `${this.height}px`,
position: 'relative'
}
}
}
}
</script>
Expand Down

0 comments on commit c9bc36e

Please sign in to comment.