Skip to content

Commit ac5d4d8

Browse files
aperturelessapertureless
committed
feat(charts): Remove default styling
1 parent db0040e commit ac5d4d8

File tree

13 files changed

+19
-185
lines changed

13 files changed

+19
-185
lines changed

‎src/BaseCharts/Bar.js

+1-22
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Chart from 'chart.js'
2-
import { mergeOptions } from '../helpers/options'
32

43
export default {
54
render: function (createElement) {
@@ -52,25 +51,6 @@ export default {
5251
data () {
5352
return {
5453
_chart: null,
55-
defaultOptions: {
56-
scales: {
57-
yAxes: [{
58-
ticks: {
59-
beginAtZero: true
60-
},
61-
gridLines: {
62-
display: false
63-
}
64-
}],
65-
xAxes: [ {
66-
gridLines: {
67-
display: false
68-
},
69-
categoryPercentage: 0.5,
70-
barPercentage: 0.2
71-
}]
72-
}
73-
},
7454
_plugins: this.plugins
7555
}
7656
},
@@ -80,12 +60,11 @@ export default {
8060
this.$data._plugins.push(plugin)
8161
},
8262
renderChart (data, options) {
83-
let chartOptions = mergeOptions(this.defaultOptions, options)
8463
this.$data._chart = new Chart(
8564
this.$refs.canvas.getContext('2d'), {
8665
type: 'bar',
8766
data: data,
88-
options: chartOptions,
67+
options: options,
8968
plugins: this.$data._plugins
9069
}
9170
)

‎src/BaseCharts/Bubble.js

+1-23
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Chart from 'chart.js'
2-
import { mergeOptions } from '../helpers/options'
32

43
export default {
54
render: function (createElement) {
@@ -54,25 +53,6 @@ export default {
5453
data () {
5554
return {
5655
_chart: null,
57-
defaultOptions: {
58-
scales: {
59-
yAxes: [{
60-
ticks: {
61-
beginAtZero: true
62-
},
63-
gridLines: {
64-
display: false
65-
}
66-
}],
67-
xAxes: [ {
68-
gridLines: {
69-
display: false
70-
},
71-
categoryPercentage: 0.5,
72-
barPercentage: 0.2
73-
}]
74-
}
75-
},
7656
_plugins: this.plugins
7757
}
7858
},
@@ -82,13 +62,11 @@ export default {
8262
this.$data._plugins.push(plugin)
8363
},
8464
renderChart (data, options) {
85-
let chartOptions = mergeOptions(this.defaultOptions, options)
86-
8765
this.$data._chart = new Chart(
8866
this.$refs.canvas.getContext('2d'), {
8967
type: 'bubble',
9068
data: data,
91-
options: chartOptions,
69+
options: options,
9270
plugins: this.$data._plugins
9371
}
9472
)

‎src/BaseCharts/Doughnut.js

+2-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Chart from 'chart.js'
2-
import { mergeOptions } from '../helpers/options'
32

43
export default {
54
render: function (createElement) {
@@ -54,8 +53,6 @@ export default {
5453
data () {
5554
return {
5655
_chart: null,
57-
defaultOptions: {
58-
},
5956
_plugins: this.plugins
6057
}
6158
},
@@ -64,14 +61,13 @@ export default {
6461
addPlugin (plugin) {
6562
this.$data._plugins.push(plugin)
6663
},
67-
renderChart (data, options) {
68-
let chartOptions = mergeOptions(this.defaultOptions, options)
6964

65+
renderChart (data, options) {
7066
this.$data._chart = new Chart(
7167
this.$refs.canvas.getContext('2d'), {
7268
type: 'doughnut',
7369
data: data,
74-
options: chartOptions,
70+
options: options,
7571
plugins: this.$data._plugins
7672
}
7773
)

‎src/BaseCharts/HorizontalBar.js

+2-23
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Chart from 'chart.js'
2-
import { mergeOptions } from '../helpers/options'
32

43
export default {
54
render: function (createElement) {
@@ -54,25 +53,6 @@ export default {
5453
data () {
5554
return {
5655
_chart: null,
57-
defaultOptions: {
58-
scales: {
59-
yAxes: [{
60-
ticks: {
61-
beginAtZero: true
62-
},
63-
gridLines: {
64-
display: false
65-
}
66-
}],
67-
xAxes: [ {
68-
gridLines: {
69-
display: false
70-
},
71-
categoryPercentage: 0.5,
72-
barPercentage: 0.2
73-
}]
74-
}
75-
},
7656
_plugins: this.plugins
7757
}
7858
},
@@ -81,13 +61,12 @@ export default {
8161
addPlugin (plugin) {
8262
this.$data._plugins.push(plugin)
8363
},
84-
renderChart (data, options, type) {
85-
let chartOptions = mergeOptions(this.defaultOptions, options)
64+
renderChart (data, options) {
8665
this.$data._chart = new Chart(
8766
this.$refs.canvas.getContext('2d'), {
8867
type: 'horizontalBar',
8968
data: data,
90-
options: chartOptions,
69+
options: options,
9170
plugins: this.$data._plugins
9271
}
9372
)

‎src/BaseCharts/Line.js

+1-21
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Chart from 'chart.js'
2-
import { mergeOptions } from '../helpers/options'
32

43
export default {
54
render: function (createElement) {
@@ -54,23 +53,6 @@ export default {
5453
data () {
5554
return {
5655
_chart: null,
57-
defaultOptions: {
58-
scales: {
59-
yAxes: [{
60-
ticks: {
61-
beginAtZero: true
62-
},
63-
gridLines: {
64-
display: false
65-
}
66-
}],
67-
xAxes: [ {
68-
gridLines: {
69-
display: false
70-
}
71-
}]
72-
}
73-
},
7456
_plugins: this.plugins
7557
}
7658
},
@@ -80,13 +62,11 @@ export default {
8062
this.$data._plugins.push(plugin)
8163
},
8264
renderChart (data, options) {
83-
let chartOptions = mergeOptions(this.defaultOptions, options)
84-
8565
this.$data._chart = new Chart(
8666
this.$refs.canvas.getContext('2d'), {
8767
type: 'line',
8868
data: data,
89-
options: chartOptions,
69+
options: options,
9070
plugins: this.$data._plugins
9171
}
9272
)

‎src/BaseCharts/Pie.js

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Chart from 'chart.js'
2-
import { mergeOptions } from '../helpers/options'
32

43
export default {
54
render: function (createElement) {
@@ -54,8 +53,6 @@ export default {
5453
data () {
5554
return {
5655
_chart: null,
57-
defaultOptions: {
58-
},
5956
_plugins: this.plugins
6057
}
6158
},
@@ -65,13 +62,11 @@ export default {
6562
this.$data._plugins.push(plugin)
6663
},
6764
renderChart (data, options) {
68-
let chartOptions = mergeOptions(this.defaultOptions, options)
69-
7065
this.$data._chart = new Chart(
7166
this.$refs.canvas.getContext('2d'), {
7267
type: 'pie',
7368
data: data,
74-
options: chartOptions,
69+
options: options,
7570
plugins: this.$data._plugins
7671
}
7772
)

‎src/BaseCharts/PolarArea.js

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Chart from 'chart.js'
2-
import { mergeOptions } from '../helpers/options'
32

43
export default {
54
render: function (createElement) {
@@ -54,8 +53,6 @@ export default {
5453
data () {
5554
return {
5655
_chart: null,
57-
defaultOptions: {
58-
},
5956
_plugins: this.plugins
6057
}
6158
},
@@ -65,13 +62,11 @@ export default {
6562
this.$data._plugins.push(plugin)
6663
},
6764
renderChart (data, options) {
68-
let chartOptions = mergeOptions(this.defaultOptions, options)
69-
7065
this.$data._chart = new Chart(
7166
this.$refs.canvas.getContext('2d'), {
7267
type: 'polarArea',
7368
data: data,
74-
options: chartOptions,
69+
options: options,
7570
plugins: this.$data._plugins
7671
}
7772
)

‎src/BaseCharts/Radar.js

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Chart from 'chart.js'
2-
import { mergeOptions } from '../helpers/options'
32

43
export default {
54
render: function (createElement) {
@@ -54,8 +53,6 @@ export default {
5453
data () {
5554
return {
5655
_chart: null,
57-
defaultOptions: {
58-
},
5956
_plugins: this.plugins
6057
}
6158
},
@@ -65,13 +62,11 @@ export default {
6562
this.$data._plugins.push(plugin)
6663
},
6764
renderChart (data, options) {
68-
let chartOptions = mergeOptions(this.defaultOptions, options)
69-
7065
this.$data._chart = new Chart(
7166
this.$refs.canvas.getContext('2d'), {
7267
type: 'radar',
7368
data: data,
74-
options: chartOptions,
69+
options: options,
7570
plugins: this.$data._plugins
7671
}
7772
)

‎src/BaseCharts/Scatter.js

+1-12
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import Chart from 'chart.js'
2-
import { mergeOptions } from '../helpers/options'
32

43
export default {
54
render: function (createElement) {
@@ -54,14 +53,6 @@ export default {
5453
data () {
5554
return {
5655
_chart: null,
57-
defaultOptions: {
58-
scales: {
59-
xAxes: [{
60-
type: 'linear',
61-
position: 'bottom'
62-
}]
63-
}
64-
},
6556
_plugins: this.plugins
6657
}
6758
},
@@ -71,13 +62,11 @@ export default {
7162
this.$data._plugins.push(plugin)
7263
},
7364
renderChart (data, options) {
74-
let chartOptions = mergeOptions(this.defaultOptions, options)
75-
7665
this.$data._chart = new Chart(
7766
this.$refs.canvas.getContext('2d'), {
7867
type: 'scatter',
7968
data: data,
80-
options: chartOptions,
69+
options: options,
8170
plugins: this.$data._plugins
8271
}
8372
)

‎src/examples/App.vue

+8-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,11 @@
55
<bar-example></bar-example>
66
</div>
77

8+
<div class="Chart">
9+
<h1 style="text-align:center;">Horizontal Barchart</h1>
10+
<horizontal-bar-example></horizontal-bar-example>
11+
</div>
12+
813
<div class="Chart">
914
<h1 style="text-align:center;">Barchart with reactive mixing for live data</h1>
1015
<reactive-example></reactive-example>
@@ -63,6 +68,7 @@
6368
import ReactiveExample from './ReactiveExample'
6469
import ReactivePropExample from './ReactivePropExample'
6570
import ScatterExample from './ScatterExample'
71+
import HorizontalBarExample from './HorizontalBarExample'
6672
6773
export default {
6874
components: {
@@ -75,7 +81,8 @@
7581
BubbleExample,
7682
ReactiveExample,
7783
ReactivePropExample,
78-
ScatterExample
84+
ScatterExample,
85+
HorizontalBarExample
7986
},
8087
data () {
8188
return {

‎src/helpers/options.js

-5
This file was deleted.

0 commit comments

Comments
 (0)