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

feat(charts): Remove default styling

Browse Source
This commit is contained in:
Jakub Juszczak
2018-01-12 13:30:29 +01:00
parent db0040e613
commit ac5d4d824c
13 changed files with 19 additions and 185 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/BaseCharts/Bar.js
View File

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

24
src/BaseCharts/Bubble.js
View File

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

8
src/BaseCharts/Doughnut.js
View File

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

25
src/BaseCharts/HorizontalBar.js
View File

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

22
src/BaseCharts/Line.js
View File

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

7
src/BaseCharts/Pie.js
View File

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

7
src/BaseCharts/PolarArea.js
View File

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

7
src/BaseCharts/Radar.js
View File

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

13
src/BaseCharts/Scatter.js
View File

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

9
src/examples/App.vue
View File

@@ -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 {

5
src/helpers/options.js
View File

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

54
test/unit/specs/helpers/options.spec.js
View File

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

0
test/unit/specs/mixins/reactiveData.js
View File