mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
Merge pull request #292 from apertureless/feature/remove_defaults
Feature/remove defaults
This commit is contained in:
@@ -56,9 +56,7 @@
|
|||||||
"release": "webpack --progress --hide-modules --config ./build/webpack.release.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config ./build/webpack.release.min.js",
|
"release": "webpack --progress --hide-modules --config ./build/webpack.release.js && cross-env NODE_ENV=production webpack --progress --hide-modules --config ./build/webpack.release.min.js",
|
||||||
"prepublishOnly": "yarn run lint && yarn run test && yarn run build"
|
"prepublishOnly": "yarn run lint && yarn run test && yarn run build"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {},
|
||||||
"lodash.merge": "^4.6.0"
|
|
||||||
},
|
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"chart.js": "2.7.x"
|
"chart.js": "2.7.x"
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import Chart from 'chart.js'
|
import Chart from 'chart.js'
|
||||||
import { mergeOptions } from '../helpers/options'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
@@ -52,25 +51,6 @@ export default {
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
_chart: null,
|
_chart: null,
|
||||||
defaultOptions: {
|
|
||||||
scales: {
|
|
||||||
yAxes: [{
|
|
||||||
ticks: {
|
|
||||||
beginAtZero: true
|
|
||||||
},
|
|
||||||
gridLines: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
xAxes: [ {
|
|
||||||
gridLines: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
categoryPercentage: 0.5,
|
|
||||||
barPercentage: 0.2
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
_plugins: this.plugins
|
_plugins: this.plugins
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -80,12 +60,11 @@ export default {
|
|||||||
this.$data._plugins.push(plugin)
|
this.$data._plugins.push(plugin)
|
||||||
},
|
},
|
||||||
renderChart (data, options) {
|
renderChart (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
|
||||||
this.$data._chart = new Chart(
|
this.$data._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
type: 'bar',
|
type: 'bar',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions,
|
options: options,
|
||||||
plugins: this.$data._plugins
|
plugins: this.$data._plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import Chart from 'chart.js'
|
import Chart from 'chart.js'
|
||||||
import { mergeOptions } from '../helpers/options'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
@@ -54,25 +53,6 @@ export default {
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
_chart: null,
|
_chart: null,
|
||||||
defaultOptions: {
|
|
||||||
scales: {
|
|
||||||
yAxes: [{
|
|
||||||
ticks: {
|
|
||||||
beginAtZero: true
|
|
||||||
},
|
|
||||||
gridLines: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
xAxes: [ {
|
|
||||||
gridLines: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
categoryPercentage: 0.5,
|
|
||||||
barPercentage: 0.2
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
_plugins: this.plugins
|
_plugins: this.plugins
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -82,13 +62,11 @@ export default {
|
|||||||
this.$data._plugins.push(plugin)
|
this.$data._plugins.push(plugin)
|
||||||
},
|
},
|
||||||
renderChart (data, options) {
|
renderChart (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
|
||||||
|
|
||||||
this.$data._chart = new Chart(
|
this.$data._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
type: 'bubble',
|
type: 'bubble',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions,
|
options: options,
|
||||||
plugins: this.$data._plugins
|
plugins: this.$data._plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import Chart from 'chart.js'
|
import Chart from 'chart.js'
|
||||||
import { mergeOptions } from '../helpers/options'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
@@ -54,8 +53,6 @@ export default {
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
_chart: null,
|
_chart: null,
|
||||||
defaultOptions: {
|
|
||||||
},
|
|
||||||
_plugins: this.plugins
|
_plugins: this.plugins
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -64,14 +61,13 @@ export default {
|
|||||||
addPlugin (plugin) {
|
addPlugin (plugin) {
|
||||||
this.$data._plugins.push(plugin)
|
this.$data._plugins.push(plugin)
|
||||||
},
|
},
|
||||||
renderChart (data, options) {
|
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
|
||||||
|
|
||||||
|
renderChart (data, options) {
|
||||||
this.$data._chart = new Chart(
|
this.$data._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
type: 'doughnut',
|
type: 'doughnut',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions,
|
options: options,
|
||||||
plugins: this.$data._plugins
|
plugins: this.$data._plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import Chart from 'chart.js'
|
import Chart from 'chart.js'
|
||||||
import { mergeOptions } from '../helpers/options'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
@@ -54,25 +53,6 @@ export default {
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
_chart: null,
|
_chart: null,
|
||||||
defaultOptions: {
|
|
||||||
scales: {
|
|
||||||
yAxes: [{
|
|
||||||
ticks: {
|
|
||||||
beginAtZero: true
|
|
||||||
},
|
|
||||||
gridLines: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
xAxes: [ {
|
|
||||||
gridLines: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
categoryPercentage: 0.5,
|
|
||||||
barPercentage: 0.2
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
_plugins: this.plugins
|
_plugins: this.plugins
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -81,13 +61,12 @@ export default {
|
|||||||
addPlugin (plugin) {
|
addPlugin (plugin) {
|
||||||
this.$data._plugins.push(plugin)
|
this.$data._plugins.push(plugin)
|
||||||
},
|
},
|
||||||
renderChart (data, options, type) {
|
renderChart (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
|
||||||
this.$data._chart = new Chart(
|
this.$data._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
type: 'horizontalBar',
|
type: 'horizontalBar',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions,
|
options: options,
|
||||||
plugins: this.$data._plugins
|
plugins: this.$data._plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import Chart from 'chart.js'
|
import Chart from 'chart.js'
|
||||||
import { mergeOptions } from '../helpers/options'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
@@ -54,23 +53,6 @@ export default {
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
_chart: null,
|
_chart: null,
|
||||||
defaultOptions: {
|
|
||||||
scales: {
|
|
||||||
yAxes: [{
|
|
||||||
ticks: {
|
|
||||||
beginAtZero: true
|
|
||||||
},
|
|
||||||
gridLines: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
xAxes: [ {
|
|
||||||
gridLines: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
_plugins: this.plugins
|
_plugins: this.plugins
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -80,13 +62,11 @@ export default {
|
|||||||
this.$data._plugins.push(plugin)
|
this.$data._plugins.push(plugin)
|
||||||
},
|
},
|
||||||
renderChart (data, options) {
|
renderChart (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
|
||||||
|
|
||||||
this.$data._chart = new Chart(
|
this.$data._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions,
|
options: options,
|
||||||
plugins: this.$data._plugins
|
plugins: this.$data._plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import Chart from 'chart.js'
|
import Chart from 'chart.js'
|
||||||
import { mergeOptions } from '../helpers/options'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
@@ -54,8 +53,6 @@ export default {
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
_chart: null,
|
_chart: null,
|
||||||
defaultOptions: {
|
|
||||||
},
|
|
||||||
_plugins: this.plugins
|
_plugins: this.plugins
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -65,13 +62,11 @@ export default {
|
|||||||
this.$data._plugins.push(plugin)
|
this.$data._plugins.push(plugin)
|
||||||
},
|
},
|
||||||
renderChart (data, options) {
|
renderChart (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
|
||||||
|
|
||||||
this.$data._chart = new Chart(
|
this.$data._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions,
|
options: options,
|
||||||
plugins: this.$data._plugins
|
plugins: this.$data._plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import Chart from 'chart.js'
|
import Chart from 'chart.js'
|
||||||
import { mergeOptions } from '../helpers/options'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
@@ -54,8 +53,6 @@ export default {
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
_chart: null,
|
_chart: null,
|
||||||
defaultOptions: {
|
|
||||||
},
|
|
||||||
_plugins: this.plugins
|
_plugins: this.plugins
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -65,13 +62,11 @@ export default {
|
|||||||
this.$data._plugins.push(plugin)
|
this.$data._plugins.push(plugin)
|
||||||
},
|
},
|
||||||
renderChart (data, options) {
|
renderChart (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
|
||||||
|
|
||||||
this.$data._chart = new Chart(
|
this.$data._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
type: 'polarArea',
|
type: 'polarArea',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions,
|
options: options,
|
||||||
plugins: this.$data._plugins
|
plugins: this.$data._plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import Chart from 'chart.js'
|
import Chart from 'chart.js'
|
||||||
import { mergeOptions } from '../helpers/options'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
@@ -54,8 +53,6 @@ export default {
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
_chart: null,
|
_chart: null,
|
||||||
defaultOptions: {
|
|
||||||
},
|
|
||||||
_plugins: this.plugins
|
_plugins: this.plugins
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -65,13 +62,11 @@ export default {
|
|||||||
this.$data._plugins.push(plugin)
|
this.$data._plugins.push(plugin)
|
||||||
},
|
},
|
||||||
renderChart (data, options) {
|
renderChart (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
|
||||||
|
|
||||||
this.$data._chart = new Chart(
|
this.$data._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
type: 'radar',
|
type: 'radar',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions,
|
options: options,
|
||||||
plugins: this.$data._plugins
|
plugins: this.$data._plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -1,5 +1,4 @@
|
|||||||
import Chart from 'chart.js'
|
import Chart from 'chart.js'
|
||||||
import { mergeOptions } from '../helpers/options'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
render: function (createElement) {
|
render: function (createElement) {
|
||||||
@@ -54,14 +53,6 @@ export default {
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
_chart: null,
|
_chart: null,
|
||||||
defaultOptions: {
|
|
||||||
scales: {
|
|
||||||
xAxes: [{
|
|
||||||
type: 'linear',
|
|
||||||
position: 'bottom'
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
_plugins: this.plugins
|
_plugins: this.plugins
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@@ -71,13 +62,11 @@ export default {
|
|||||||
this.$data._plugins.push(plugin)
|
this.$data._plugins.push(plugin)
|
||||||
},
|
},
|
||||||
renderChart (data, options) {
|
renderChart (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
|
||||||
|
|
||||||
this.$data._chart = new Chart(
|
this.$data._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$refs.canvas.getContext('2d'), {
|
||||||
type: 'scatter',
|
type: 'scatter',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions,
|
options: options,
|
||||||
plugins: this.$data._plugins
|
plugins: this.$data._plugins
|
||||||
}
|
}
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -5,6 +5,11 @@
|
|||||||
<bar-example></bar-example>
|
<bar-example></bar-example>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="Chart">
|
||||||
|
<h1 style="text-align:center;">Horizontal Barchart</h1>
|
||||||
|
<horizontal-bar-example></horizontal-bar-example>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="Chart">
|
<div class="Chart">
|
||||||
<h1 style="text-align:center;">Barchart with reactive mixing for live data</h1>
|
<h1 style="text-align:center;">Barchart with reactive mixing for live data</h1>
|
||||||
<reactive-example></reactive-example>
|
<reactive-example></reactive-example>
|
||||||
@@ -63,6 +68,7 @@
|
|||||||
import ReactiveExample from './ReactiveExample'
|
import ReactiveExample from './ReactiveExample'
|
||||||
import ReactivePropExample from './ReactivePropExample'
|
import ReactivePropExample from './ReactivePropExample'
|
||||||
import ScatterExample from './ScatterExample'
|
import ScatterExample from './ScatterExample'
|
||||||
|
import HorizontalBarExample from './HorizontalBarExample'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -75,7 +81,8 @@
|
|||||||
BubbleExample,
|
BubbleExample,
|
||||||
ReactiveExample,
|
ReactiveExample,
|
||||||
ReactivePropExample,
|
ReactivePropExample,
|
||||||
ScatterExample
|
ScatterExample,
|
||||||
|
HorizontalBarExample
|
||||||
},
|
},
|
||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
|
|||||||
@@ -1,5 +0,0 @@
|
|||||||
import merge from 'lodash.merge'
|
|
||||||
|
|
||||||
export function mergeOptions (obj, src) {
|
|
||||||
return merge(obj, src)
|
|
||||||
}
|
|
||||||
@@ -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')
|
|
||||||
})
|
|
||||||
})
|
|
||||||
@@ -4014,10 +4014,6 @@ lodash.memoize@^4.1.2:
|
|||||||
version "4.1.2"
|
version "4.1.2"
|
||||||
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
|
resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
|
||||||
|
|
||||||
lodash.merge@^4.6.0:
|
|
||||||
version "4.6.0"
|
|
||||||
resolved "https://registry.yarnpkg.com/lodash.merge/-/lodash.merge-4.6.0.tgz#69884ba144ac33fe699737a6086deffadd0f89c5"
|
|
||||||
|
|
||||||
lodash.mergewith@^4.0.0:
|
lodash.mergewith@^4.0.0:
|
||||||
version "4.6.0"
|
version "4.6.0"
|
||||||
resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
|
resolved "https://registry.yarnpkg.com/lodash.mergewith/-/lodash.mergewith-4.6.0.tgz#150cf0a16791f5903b8891eab154609274bdea55"
|
||||||
|
|||||||
Reference in New Issue
Block a user