Skip to content

Commit

Permalink
feat(charts): Remove default styling
Browse files Browse the repository at this point in the history
  • Loading branch information
@apertureless
apertureless committed Jan 12, 2018
1 parent db0040e commit ac5d4d8
Show file tree
Hide file tree
Showing 13 changed files with 19 additions and 185 deletions.
23 changes: 1 addition & 22 deletions src/BaseCharts/Bar.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'

export default {
render: function (createElement) {
Expand Down Expand Up @@ -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
}
},
Expand All @@ -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
}
)
Expand Down
24 changes: 1 addition & 23 deletions src/BaseCharts/Bubble.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'

export default {
render: function (createElement) {
Expand Down Expand Up @@ -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
}
},
Expand All @@ -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
}
)
Expand Down
8 changes: 2 additions & 6 deletions src/BaseCharts/Doughnut.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'

export default {
render: function (createElement) {
Expand Down Expand Up @@ -54,8 +53,6 @@ export default {
data () {
return {
_chart: null,
defaultOptions: {
},
_plugins: this.plugins
}
},
Expand All @@ -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
}
)
Expand Down
25 changes: 2 additions & 23 deletions src/BaseCharts/HorizontalBar.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'

export default {
render: function (createElement) {
Expand Down Expand Up @@ -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
}
},
Expand All @@ -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
}
)
Expand Down
22 changes: 1 addition & 21 deletions src/BaseCharts/Line.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'

export default {
render: function (createElement) {
Expand Down Expand Up @@ -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
}
},
Expand All @@ -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
}
)
Expand Down
7 changes: 1 addition & 6 deletions src/BaseCharts/Pie.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'

export default {
render: function (createElement) {
Expand Down Expand Up @@ -54,8 +53,6 @@ export default {
data () {
return {
_chart: null,
defaultOptions: {
},
_plugins: this.plugins
}
},
Expand All @@ -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
}
)
Expand Down
7 changes: 1 addition & 6 deletions src/BaseCharts/PolarArea.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'

export default {
render: function (createElement) {
Expand Down Expand Up @@ -54,8 +53,6 @@ export default {
data () {
return {
_chart: null,
defaultOptions: {
},
_plugins: this.plugins
}
},
Expand All @@ -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
}
)
Expand Down
7 changes: 1 addition & 6 deletions src/BaseCharts/Radar.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'

export default {
render: function (createElement) {
Expand Down Expand Up @@ -54,8 +53,6 @@ export default {
data () {
return {
_chart: null,
defaultOptions: {
},
_plugins: this.plugins
}
},
Expand All @@ -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
}
)
Expand Down
13 changes: 1 addition & 12 deletions src/BaseCharts/Scatter.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import Chart from 'chart.js'
import { mergeOptions } from '../helpers/options'

export default {
render: function (createElement) {
Expand Down Expand Up @@ -54,14 +53,6 @@ export default {
data () {
return {
_chart: null,
defaultOptions: {
scales: {
xAxes: [{
type: 'linear',
position: 'bottom'
}]
}
},
_plugins: this.plugins
}
},
Expand All @@ -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
}
)
Expand Down
9 changes: 8 additions & 1 deletion src/examples/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -63,6 +68,7 @@
import ReactiveExample from './ReactiveExample'
import ReactivePropExample from './ReactivePropExample'
import ScatterExample from './ScatterExample'
import HorizontalBarExample from './HorizontalBarExample'
export default {
components: {
Expand All @@ -75,7 +81,8 @@
BubbleExample,
ReactiveExample,
ReactivePropExample,
ScatterExample
ScatterExample,
HorizontalBarExample
},
data () {
return {
Expand Down
5 changes: 0 additions & 5 deletions src/helpers/options.js
View file

This file was deleted.

Loading

2 comments on commit ac5d4d8

@Phlow2001
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is quite a significant breaking change. We extend each chart type and override the defaultOptions object, but now they aren't merged in at all. All charts are broken as a result.

@apertureless
Copy link
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @Phlow2001

Why are the charts broken now? The default stylings are removed now, so you actually just need to pass in the one you want. So there is no need for merging. And the options were only visual. Mostly gridLines disabled and the barchart width changed.

Please sign in to comment.