KevinMidboe/vue-chartjs
1
0
Fork 0
mirror of https://github.com/KevinMidboe/vue-chartjs.git synced 2025-10-29 18:00:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Feature/merge options #5 (#6)

Browse Source 
* ➕ Add dependency lodash

* ✨ Add helper function to merge chartOptions

* Change Charts to merge options

* And renamed options data to defaultOptions
This commit is contained in:
Jakub
2016-08-21 14:04:34 +02:00
committed by GitHub
parent df7b6ec93e
commit 5258ab1a0f
8 changed files with 53 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/BaseCharts/Bar.js
View File

@@ -1,5 +1,6 @@
import Vue from 'vue'
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'
export default Vue.extend({
template: `
@@ -21,7 +22,7 @@ export default Vue.extend({
data () {
return {
options: {
defaultOptions: {
scales: {
yAxes: [{
ticks: {
@@ -44,12 +45,14 @@ export default Vue.extend({
},
methods: {
render (data, options = this.options) {
render (data, options) {
let chartOptions = mergeOptions(this.defaultOptions, options)
this._chart = new Chart(
this.$els.canvas.getContext('2d'), {
type: 'bar',
data: data,
options: options
options: chartOptions
}
)
this._chart.generateLegend()

9
src/BaseCharts/Doughnut.js
View File

@@ -1,5 +1,6 @@
import Vue from 'vue'
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'
export default Vue.extend({
template: `
@@ -21,18 +22,20 @@ export default Vue.extend({
data () {
return {
options: {
defaultOptions: {
}
}
},
methods: {
render (data, options = this.options) {
render (data, options) {
let chartOptions = mergeOptions(this.defaultOptions, options)
this._chart = new Chart(
this.$els.canvas.getContext('2d'), {
type: 'doughnut',
data: data,
options: options
options: chartOptions
}
)
this._chart.generateLegend()

9
src/BaseCharts/Line.js
View File

@@ -1,5 +1,6 @@
import Vue from 'vue'
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'
export default Vue.extend({
template: `
@@ -21,7 +22,7 @@ export default Vue.extend({
data () {
return {
options: {
defaultOptions: {
scales: {
yAxes: [{
ticks: {
@@ -42,12 +43,14 @@ export default Vue.extend({
},
methods: {
render (data, options = this.options) {
render (data, options) {
let chartOptions = mergeOptions(this.defaultOptions, options)
this._chart = new Chart(
this.$els.canvas.getContext('2d'), {
type: 'line',
data: data,
options: options
options: chartOptions
}
)
this._chart.generateLegend()

9
src/BaseCharts/Pie.js
View File

@@ -1,5 +1,6 @@
import Vue from 'vue'
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'
export default Vue.extend({
template: `
@@ -21,18 +22,20 @@ export default Vue.extend({
data () {
return {
options: {
defaultOptions: {
}
}
},
methods: {
render (data, options = this.options) {
render (data, options) {
let chartOptions = mergeOptions(this.defaultOptions, options)
this._chart = new Chart(
this.$els.canvas.getContext('2d'), {
type: 'pie',
data: data,
options: options
options: chartOptions
}
)
this._chart.generateLegend()

9
src/BaseCharts/PolarArea.js
View File

@@ -1,5 +1,6 @@
import Vue from 'vue'
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'
export default Vue.extend({
template: `
@@ -21,18 +22,20 @@ export default Vue.extend({
data () {
return {
options: {
defaultOptions: {
}
}
},
methods: {
render (data, options = this.options) {
render (data, options) {
let chartOptions = mergeOptions(this.defaultOptions, options)
this._chart = new Chart(
this.$els.canvas.getContext('2d'), {
type: 'polarArea',
data: data,
options: options
options: chartOptions
}
)
this._chart.generateLegend()

9
src/BaseCharts/Radar.js
View File

@@ -1,5 +1,6 @@
import Vue from 'vue'
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'
export default Vue.extend({
template: `
@@ -21,18 +22,20 @@ export default Vue.extend({
data () {
return {
options: {
defaultOptions: {
}
}
},
methods: {
render (data, options = this.options) {
render (data, options) {
let chartOptions = mergeOptions(this.defaultOptions, options)
this._chart = new Chart(
this.$els.canvas.getContext('2d'), {
type: 'radar',
data: data,
options: options
options: chartOptions
}
)
this._chart.generateLegend()

5
src/helpers/options.js Normal file
View File

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