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

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