mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
Compare commits
32 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
88b16e89d4 | ||
|
|
71b50df77a | ||
|
4297872885 | ||
|
|
96adf9eab3 | ||
|
|
b80b07efd8 | ||
|
|
84f2934f74 | ||
|
ee5be86e5b | ||
|
|
3907c5a378 | ||
|
2274cfab22 | ||
|
|
66533c09a9 | ||
|
|
281c847070 | ||
|
e7be94e041 | ||
|
|
9ef0dedeb0 | ||
|
|
4347fe906e | ||
|
|
662329846e | ||
|
|
ecae747ba3 | ||
|
|
75bfa5ccbc | ||
|
|
8f91703e9f | ||
|
|
ac5d4d824c | ||
|
|
db0040e613 | ||
|
|
3b46bc8f03 | ||
|
|
39ff839d92 | ||
|
|
0506b4ee35 | ||
|
072724fc6f | ||
|
|
dd9a5b855d | ||
|
|
5486560257 | ||
|
|
ae13d71081 | ||
|
1902bf0b0e | ||
|
|
b0ad387856 | ||
|
b7074e428f | ||
|
|
d9e5d5a5f0 | ||
|
|
a5f112e952 |
102
CHANGELOG.md
102
CHANGELOG.md
@@ -1,11 +1,111 @@
|
||||
# Change Log
|
||||
|
||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||
|
||||
<a name="3.1.0"></a>
|
||||
# [3.1.0](https://github.com/apertureless/vue-chartjs/compare/v3.0.2...v3.1.0) (2018-01-12)
|
||||
|
||||
|
||||
### Bug Fixes
|
||||
|
||||
* **mixins:** Check for chartjs instance before rendering chart ([39ff839](https://github.com/apertureless/vue-chartjs/commit/39ff839)), closes [#288](https://github.com/apertureless/vue-chartjs/issues/288)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **charts:** Remove default styling ([ac5d4d8](https://github.com/apertureless/vue-chartjs/commit/ac5d4d8))
|
||||
|
||||
|
||||
|
||||
# Change Log
|
||||
|
||||
## [v3.0.1](https://github.com/apertureless/vue-chartjs/tree/v3.0.1) (2017-11-06)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v3.0.0...v3.0.1)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- \[Suggestion\]Loose package dependencies [\#245](https://github.com/apertureless/vue-chartjs/issues/245)
|
||||
- reactiveData mixin [\#244](https://github.com/apertureless/vue-chartjs/issues/244)
|
||||
- Customise individual Axis Labels [\#243](https://github.com/apertureless/vue-chartjs/issues/243)
|
||||
- presets es2015 [\#242](https://github.com/apertureless/vue-chartjs/issues/242)
|
||||
- Uncaught TypeError: Cannot read property 'transition' of null [\#241](https://github.com/apertureless/vue-chartjs/issues/241)
|
||||
- Is it possible to create an callback on the onAnimationComplete option [\#240](https://github.com/apertureless/vue-chartjs/issues/240)
|
||||
- When resizing window, chart returns to first loaded state [\#239](https://github.com/apertureless/vue-chartjs/issues/239)
|
||||
- Reactively change chart properties [\#237](https://github.com/apertureless/vue-chartjs/issues/237)
|
||||
- how to enforce the max value on y axis [\#236](https://github.com/apertureless/vue-chartjs/issues/236)
|
||||
- Chart is not rendered when maintainAspectRatio is set to false and chart container is hidden [\#235](https://github.com/apertureless/vue-chartjs/issues/235)
|
||||
- How to access Chart.defaults.global [\#234](https://github.com/apertureless/vue-chartjs/issues/234)
|
||||
- Blank Chart - no data [\#233](https://github.com/apertureless/vue-chartjs/issues/233)
|
||||
- Maxin with multiple chartData [\#231](https://github.com/apertureless/vue-chartjs/issues/231)
|
||||
- How to destroy chart before re-rendering? [\#230](https://github.com/apertureless/vue-chartjs/issues/230)
|
||||
- chnage gridlines color [\#228](https://github.com/apertureless/vue-chartjs/issues/228)
|
||||
- Stacked bar chart? [\#226](https://github.com/apertureless/vue-chartjs/issues/226)
|
||||
- Chart crashes when reentering page [\#223](https://github.com/apertureless/vue-chartjs/issues/223)
|
||||
- 在图表上左右滑动会出现数据错乱的问题 [\#222](https://github.com/apertureless/vue-chartjs/issues/222)
|
||||
- How do I set the scale of the Y axis? [\#220](https://github.com/apertureless/vue-chartjs/issues/220)
|
||||
- Upgrading from 2.8.2 to 2.8.3 breaks charts [\#209](https://github.com/apertureless/vue-chartjs/issues/209)
|
||||
- How to scale the radius property of each bubble in a vue-chartjs bubble chart [\#205](https://github.com/apertureless/vue-chartjs/issues/205)
|
||||
- Last release is causing problems with Firefox [\#203](https://github.com/apertureless/vue-chartjs/issues/203)
|
||||
- 🔥 Remove Vue.extend\(\) [\#201](https://github.com/apertureless/vue-chartjs/issues/201)
|
||||
- Update to webpack@3 [\#134](https://github.com/apertureless/vue-chartjs/issues/134)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Feature/dependency and build fix [\#246](https://github.com/apertureless/vue-chartjs/pull/246) ([apertureless](https://github.com/apertureless))
|
||||
- Typo fix in EN docs [\#238](https://github.com/apertureless/vue-chartjs/pull/238) ([chakan](https://github.com/chakan))
|
||||
- Made some small edits to French README.MD [\#232](https://github.com/apertureless/vue-chartjs/pull/232) ([music-mind](https://github.com/music-mind))
|
||||
- update webpack to version 3 [\#227](https://github.com/apertureless/vue-chartjs/pull/227) ([kingkong64](https://github.com/kingkong64))
|
||||
|
||||
## [v3.0.0](https://github.com/apertureless/vue-chartjs/tree/v3.0.0) (2017-10-14)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.7...v3.0.0)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- Create an image of the chart to download [\#219](https://github.com/apertureless/vue-chartjs/issues/219)
|
||||
- How to achieve this effect? [\#218](https://github.com/apertureless/vue-chartjs/issues/218)
|
||||
- Some Error [\#217](https://github.com/apertureless/vue-chartjs/issues/217)
|
||||
- Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "chartData" [\#216](https://github.com/apertureless/vue-chartjs/issues/216)
|
||||
- can't get legendCallback to fire at all [\#212](https://github.com/apertureless/vue-chartjs/issues/212)
|
||||
- this demo is not support, is it because version older? [\#210](https://github.com/apertureless/vue-chartjs/issues/210)
|
||||
- how to change value without reload?? [\#208](https://github.com/apertureless/vue-chartjs/issues/208)
|
||||
- typescript definition? [\#207](https://github.com/apertureless/vue-chartjs/issues/207)
|
||||
- 使用动态数据时报错 [\#204](https://github.com/apertureless/vue-chartjs/issues/204)
|
||||
- Commit the final dist js files to github [\#202](https://github.com/apertureless/vue-chartjs/issues/202)
|
||||
- \[Best Practices❓\] Usage of Private Data [\#182](https://github.com/apertureless/vue-chartjs/issues/182)
|
||||
- 📝 Update docs & examples - SSR with nuxt [\#172](https://github.com/apertureless/vue-chartjs/issues/172)
|
||||
- 📝 Update Docs - Section about extending [\#171](https://github.com/apertureless/vue-chartjs/issues/171)
|
||||
- Register vue-chartjs as vue-plugin? [\#168](https://github.com/apertureless/vue-chartjs/issues/168)
|
||||
- Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders [\#151](https://github.com/apertureless/vue-chartjs/issues/151)
|
||||
|
||||
**Merged pull requests:**
|
||||
|
||||
- Feature/v3 [\#225](https://github.com/apertureless/vue-chartjs/pull/225) ([apertureless](https://github.com/apertureless))
|
||||
- ✏️ Spelling in docs [\#215](https://github.com/apertureless/vue-chartjs/pull/215) ([cugu](https://github.com/cugu))
|
||||
- Fix inaccuracies in Russian translation [\#214](https://github.com/apertureless/vue-chartjs/pull/214) ([pushkyn](https://github.com/pushkyn))
|
||||
- Add id docs readme support [\#213](https://github.com/apertureless/vue-chartjs/pull/213) ([tesarwijaya](https://github.com/tesarwijaya))
|
||||
- French translation for README.md [\#211](https://github.com/apertureless/vue-chartjs/pull/211) ([julienc91](https://github.com/julienc91))
|
||||
|
||||
## [v2.8.7](https://github.com/apertureless/vue-chartjs/tree/v2.8.7) (2017-09-16)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.6...v2.8.7)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- 真机和浏览器呈现的效果不一样的问题 [\#199](https://github.com/apertureless/vue-chartjs/issues/199)
|
||||
- can not use npm install? [\#198](https://github.com/apertureless/vue-chartjs/issues/198)
|
||||
- Reactive Props - Max Call Stack Exceeded Error [\#197](https://github.com/apertureless/vue-chartjs/issues/197)
|
||||
- Unmet Peer Dependency [\#196](https://github.com/apertureless/vue-chartjs/issues/196)
|
||||
- Is there a way to update options? [\#195](https://github.com/apertureless/vue-chartjs/issues/195)
|
||||
- deepmerge [\#194](https://github.com/apertureless/vue-chartjs/issues/194)
|
||||
- TypeError: Cannot convert undefined or null to object [\#193](https://github.com/apertureless/vue-chartjs/issues/193)
|
||||
|
||||
## [v2.8.6](https://github.com/apertureless/vue-chartjs/tree/v2.8.6) (2017-09-12)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.5...v2.8.6)
|
||||
|
||||
## [v2.8.5](https://github.com/apertureless/vue-chartjs/tree/v2.8.5) (2017-09-12)
|
||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.8.4...v2.8.5)
|
||||
|
||||
**Closed issues:**
|
||||
|
||||
- TypeError: Cannot convert undefined or null to object [\#193](https://github.com/apertureless/vue-chartjs/issues/193)
|
||||
- Chart error since the addition of deepmerge in build 2.8.4 [\#192](https://github.com/apertureless/vue-chartjs/issues/192)
|
||||
|
||||
## [v2.8.4](https://github.com/apertureless/vue-chartjs/tree/v2.8.4) (2017-09-08)
|
||||
|
||||
15
README.md
15
README.md
@@ -33,7 +33,8 @@ If you're looking for v1 check this [branch](https://github.com/apertureless/vue
|
||||
|
||||
## Install
|
||||
|
||||
Simply run `yarn add vue-chartjs chart.js`
|
||||
- **yarn** install: `yarn add vue-chartjs chart.js`
|
||||
- **npm** install: `npm install vue-chartjs chart.js --save`
|
||||
|
||||
Or if you want to use it directly in the browser add
|
||||
|
||||
@@ -76,7 +77,7 @@ However Chart.js is a `peerDependencies` so you have to install it separately. I
|
||||
|
||||
### Webpack 2
|
||||
If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
|
||||
It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way you three shaking will work. Like in the bundled version, `Chart.js` is a `peerDependencies` and need to be installed.
|
||||
It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way you tree shaking will work. Like in the bundled version, `Chart.js` is a `peerDependencies` and need to be installed.
|
||||
|
||||
|
||||
## How to use
|
||||
@@ -165,7 +166,11 @@ However you can simply implement this on your own or use one of the two mixins w
|
||||
Both are included in the `mixins` module.
|
||||
|
||||
The mixins automatically create `chartData` as a prop or data. And add a watcher. If data has changed, the chart will update.
|
||||
However keep in mind the limitations of vue and javascript for mutations on arrays and objects. More info [here](http://vue-chartjs.org/#/home?id=reactive-data)
|
||||
However keep in mind the limitations of vue and javascript for mutations on arrays and objects.
|
||||
**It is important that you pass your options in a local variable named `options`!**
|
||||
The reason is that if the mixin re-renders the chart it calls `this.renderChart(this.chartData, this.options`)` so don't pass in the options object directly or it will be ignored.
|
||||
|
||||
More info [here](http://vue-chartjs.org/#/home?id=reactive-data)
|
||||
|
||||
```javascript
|
||||
// MonthlyIncome.js
|
||||
@@ -229,6 +234,10 @@ export default {
|
||||
}
|
||||
```
|
||||
|
||||
## Single File Components
|
||||
|
||||
You can create your components in Vues single file components. However it is important that you **do not** have the `<template></template>` included. Because Vue can't merge templates. And the template is included in the mixin. If you leave the template tag in your component, it will overwrite the one which comes from the base chart and you will have a blank screen.
|
||||
|
||||
## Available Charts
|
||||
|
||||
### Bar Chart
|
||||
|
||||
3092
dist/vue-chartjs.js
vendored
3092
dist/vue-chartjs.js
vendored
File diff suppressed because it is too large
Load Diff
2
dist/vue-chartjs.min.js
vendored
2
dist/vue-chartjs.min.js
vendored
File diff suppressed because one or more lines are too long
2
package-lock.json
generated
2
package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-chartjs",
|
||||
"version": "3.0.0",
|
||||
"version": "3.1.0",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
13
package.json
13
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-chartjs",
|
||||
"version": "3.0.1",
|
||||
"version": "3.1.1",
|
||||
"description": "Vue.js wrapper for chart.js for creating beautiful charts.",
|
||||
"author": "Jakub Juszczak <jakub@posteo.de>",
|
||||
"homepage": "http://vue-chartjs.org",
|
||||
@@ -37,7 +37,7 @@
|
||||
"Charts"
|
||||
],
|
||||
"main": "dist/vue-chartjs.js",
|
||||
"unpkg": "dist/vue-chartjs.full.min.js",
|
||||
"unpkg": "dist/vue-chartjs.min.js",
|
||||
"module": "es/index.js",
|
||||
"jsnext:main": "es/index.js",
|
||||
"files": [
|
||||
@@ -53,12 +53,10 @@
|
||||
"e2e": "node test/e2e/runner.js",
|
||||
"test": "npm run unit",
|
||||
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
|
||||
"release": "webpack --progress --hide-modules --config ./build/webpack.release.js && 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"
|
||||
},
|
||||
"dependencies": {
|
||||
"lodash.merge": "^4.6.0"
|
||||
},
|
||||
"dependencies": {},
|
||||
"peerDependencies": {
|
||||
"chart.js": "2.7.x"
|
||||
},
|
||||
@@ -72,7 +70,7 @@
|
||||
"chart.js": "2.7.0",
|
||||
"chromedriver": "^2.28.0",
|
||||
"connect-history-api-fallback": "^1.1.0",
|
||||
"cross-env": "^3.2.4",
|
||||
"cross-env": "^5.1.1",
|
||||
"cross-spawn": "^5.1.0",
|
||||
"css-loader": "^0.28.0",
|
||||
"eslint": "^3.19.0",
|
||||
@@ -108,7 +106,6 @@
|
||||
"karma-webpack": "2",
|
||||
"lolex": "^1.6.0",
|
||||
"mocha": "^3.1.0",
|
||||
"nightwatch": "^0.9.14",
|
||||
"opn": "^5.1.0",
|
||||
"ora": "^1.2.0",
|
||||
"phantomjs-prebuilt": "^2.1.13",
|
||||
|
||||
104
src/BaseCharts.js
Normal file
104
src/BaseCharts.js
Normal file
@@ -0,0 +1,104 @@
|
||||
import Chart from 'chart.js'
|
||||
|
||||
function generateChart (chartId, chartType) {
|
||||
return {
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
attrs: {
|
||||
id: this.chartId,
|
||||
width: this.width,
|
||||
height: this.height
|
||||
},
|
||||
ref: 'canvas'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
default: chartId,
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
},
|
||||
plugins: {
|
||||
type: Array,
|
||||
default () {
|
||||
return []
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
_chart: null,
|
||||
_plugins: this.plugins
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addPlugin (plugin) {
|
||||
this.$data._plugins.push(plugin)
|
||||
},
|
||||
renderChart (data, options) {
|
||||
this.$data._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
type: chartType,
|
||||
data: data,
|
||||
options: options,
|
||||
plugins: this.$data._plugins
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.$data._chart) {
|
||||
this.$data._chart.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export const Bar = generateChart('bar-chart', 'bar')
|
||||
export const HorizontalBar = generateChart('horizontalbar-chart', 'horizontalBar')
|
||||
export const Doughnut = generateChart('doughnut-chart', 'doughnut')
|
||||
export const Line = generateChart('line-chart', 'line')
|
||||
export const Pie = generateChart('pie-chart', 'pie')
|
||||
export const PolarArea = generateChart('polar-chart', 'polarArea')
|
||||
export const Radar = generateChart('radar-chart', 'radar')
|
||||
export const Bubble = generateChart('bubble-chart', 'bubble')
|
||||
export const Scatter = generateChart('scatter-chart', 'scatter')
|
||||
|
||||
export default {
|
||||
Bar,
|
||||
HorizontalBar,
|
||||
Doughnut,
|
||||
Line,
|
||||
Pie,
|
||||
PolarArea,
|
||||
Radar,
|
||||
Bubble,
|
||||
Scatter
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
import Chart from 'chart.js'
|
||||
import { mergeOptions } from '../helpers/options'
|
||||
|
||||
export default {
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
attrs: {
|
||||
id: this.chartId,
|
||||
width: this.width,
|
||||
height: this.height
|
||||
},
|
||||
ref: 'canvas'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
props: {
|
||||
chartId: {
|
||||
default: 'bar-chart',
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
_chart: null,
|
||||
defaultOptions: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
xAxes: [ {
|
||||
gridLines: {
|
||||
display: false
|
||||
},
|
||||
categoryPercentage: 0.5,
|
||||
barPercentage: 0.2
|
||||
}]
|
||||
}
|
||||
},
|
||||
plugins: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addPlugin (plugin) {
|
||||
this.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,
|
||||
plugins: this.plugins
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.$data._chart) {
|
||||
this.$data._chart.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,96 +0,0 @@
|
||||
import Chart from 'chart.js'
|
||||
import { mergeOptions } from '../helpers/options'
|
||||
|
||||
export default {
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
attrs: {
|
||||
id: this.chartId,
|
||||
width: this.width,
|
||||
height: this.height
|
||||
},
|
||||
ref: 'canvas'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
default: 'bubble-chart',
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
_chart: null,
|
||||
defaultOptions: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
xAxes: [ {
|
||||
gridLines: {
|
||||
display: false
|
||||
},
|
||||
categoryPercentage: 0.5,
|
||||
barPercentage: 0.2
|
||||
}]
|
||||
}
|
||||
},
|
||||
plugins: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addPlugin (plugin) {
|
||||
this.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,
|
||||
plugins: this.plugins
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.$data._chart) {
|
||||
this.$data._chart.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import Chart from 'chart.js'
|
||||
import { mergeOptions } from '../helpers/options'
|
||||
|
||||
export default {
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
attrs: {
|
||||
id: this.chartId,
|
||||
width: this.width,
|
||||
height: this.height
|
||||
},
|
||||
ref: 'canvas'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
default: 'doughnut-chart',
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
_chart: null,
|
||||
defaultOptions: {
|
||||
},
|
||||
plugins: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addPlugin (plugin) {
|
||||
this.plugins.push(plugin)
|
||||
},
|
||||
renderChart (data, options) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
|
||||
this.$data._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
type: 'doughnut',
|
||||
data: data,
|
||||
options: chartOptions,
|
||||
plugins: this.plugins
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.$data._chart) {
|
||||
this.$data._chart.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,95 +0,0 @@
|
||||
import Chart from 'chart.js'
|
||||
import { mergeOptions } from '../helpers/options'
|
||||
|
||||
export default {
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
attrs: {
|
||||
id: this.chartId,
|
||||
width: this.width,
|
||||
height: this.height
|
||||
},
|
||||
ref: 'canvas'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
default: 'horizontalbar-chart',
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
_chart: null,
|
||||
defaultOptions: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
xAxes: [ {
|
||||
gridLines: {
|
||||
display: false
|
||||
},
|
||||
categoryPercentage: 0.5,
|
||||
barPercentage: 0.2
|
||||
}]
|
||||
}
|
||||
},
|
||||
plugins: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addPlugin (plugin) {
|
||||
this.plugins.push(plugin)
|
||||
},
|
||||
renderChart (data, options, type) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
this.$data._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
type: 'horizontalBar',
|
||||
data: data,
|
||||
options: chartOptions,
|
||||
plugins: this.plugins
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.$data._chart) {
|
||||
this.$data._chart.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,94 +0,0 @@
|
||||
import Chart from 'chart.js'
|
||||
import { mergeOptions } from '../helpers/options'
|
||||
|
||||
export default {
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
attrs: {
|
||||
id: this.chartId,
|
||||
width: this.width,
|
||||
height: this.height
|
||||
},
|
||||
ref: 'canvas'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
default: 'line-chart',
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
_chart: null,
|
||||
defaultOptions: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
xAxes: [ {
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
}]
|
||||
}
|
||||
},
|
||||
plugins: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addPlugin (plugin) {
|
||||
this.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,
|
||||
plugins: this.plugins
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.$data._chart) {
|
||||
this.$data._chart.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import Chart from 'chart.js'
|
||||
import { mergeOptions } from '../helpers/options'
|
||||
|
||||
export default {
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
attrs: {
|
||||
id: this.chartId,
|
||||
width: this.width,
|
||||
height: this.height
|
||||
},
|
||||
ref: 'canvas'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
default: 'pie-chart',
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
_chart: null,
|
||||
defaultOptions: {
|
||||
},
|
||||
plugins: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addPlugin (plugin) {
|
||||
this.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,
|
||||
plugins: this.plugins
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.$data._chart) {
|
||||
this.$data._chart.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import Chart from 'chart.js'
|
||||
import { mergeOptions } from '../helpers/options'
|
||||
|
||||
export default {
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
attrs: {
|
||||
id: this.chartId,
|
||||
width: this.width,
|
||||
height: this.height
|
||||
},
|
||||
ref: 'canvas'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
default: 'polar-chart',
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
_chart: null,
|
||||
defaultOptions: {
|
||||
},
|
||||
plugins: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addPlugin (plugin) {
|
||||
this.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,
|
||||
plugins: this.plugins
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.$data._chart) {
|
||||
this.$data._chart.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,79 +0,0 @@
|
||||
import Chart from 'chart.js'
|
||||
import { mergeOptions } from '../helpers/options'
|
||||
|
||||
export default {
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
attrs: {
|
||||
id: this.chartId,
|
||||
width: this.width,
|
||||
height: this.height
|
||||
},
|
||||
ref: 'canvas'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
default: 'radar-chart',
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
_chart: null,
|
||||
defaultOptions: {
|
||||
},
|
||||
plugins: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addPlugin (plugin) {
|
||||
this.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,
|
||||
plugins: this.plugins
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.$data._chart) {
|
||||
this.$data._chart.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,85 +0,0 @@
|
||||
import Chart from 'chart.js'
|
||||
import { mergeOptions } from '../helpers/options'
|
||||
|
||||
export default {
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
'div', {
|
||||
style: this.styles,
|
||||
class: this.cssClasses
|
||||
},
|
||||
[
|
||||
createElement(
|
||||
'canvas', {
|
||||
attrs: {
|
||||
id: this.chartId,
|
||||
width: this.width,
|
||||
height: this.height
|
||||
},
|
||||
ref: 'canvas'
|
||||
}
|
||||
)
|
||||
]
|
||||
)
|
||||
},
|
||||
|
||||
props: {
|
||||
chartId: {
|
||||
default: 'scatter-chart',
|
||||
type: String
|
||||
},
|
||||
width: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
height: {
|
||||
default: 400,
|
||||
type: Number
|
||||
},
|
||||
cssClasses: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
styles: {
|
||||
type: Object
|
||||
}
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
_chart: null,
|
||||
defaultOptions: {
|
||||
scales: {
|
||||
xAxes: [{
|
||||
type: 'linear',
|
||||
position: 'bottom'
|
||||
}]
|
||||
}
|
||||
},
|
||||
plugins: []
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
addPlugin (plugin) {
|
||||
this.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,
|
||||
plugins: this.plugins
|
||||
}
|
||||
)
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
if (this.$data._chart) {
|
||||
this.$data._chart.destroy()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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 {
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import Bar from '../BaseCharts/Bar'
|
||||
import { Bar } from '../BaseCharts'
|
||||
|
||||
export default {
|
||||
extends: Bar,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import Bubble from '../BaseCharts/Bubble'
|
||||
import { Bubble } from '../BaseCharts'
|
||||
|
||||
export default {
|
||||
extends: Bubble,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import Doughnut from '../BaseCharts/Doughnut'
|
||||
import { Doughnut } from '../BaseCharts'
|
||||
|
||||
export default {
|
||||
extends: Doughnut,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import HorizontalBar from '../BaseCharts/HorizontalBar'
|
||||
import { HorizontalBar } from '../BaseCharts'
|
||||
|
||||
export default {
|
||||
extends: HorizontalBar,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import Line from '../BaseCharts/Line'
|
||||
import { Line } from '../BaseCharts'
|
||||
|
||||
export default {
|
||||
extends: Line,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import Pie from '../BaseCharts/Pie'
|
||||
import { Pie } from '../BaseCharts'
|
||||
|
||||
export default {
|
||||
extends: Pie,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import PolarArea from '../BaseCharts/PolarArea'
|
||||
import { PolarArea } from '../BaseCharts'
|
||||
|
||||
export default {
|
||||
extends: PolarArea,
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import Radar from '../BaseCharts/Radar'
|
||||
import { Radar } from '../BaseCharts'
|
||||
|
||||
export default {
|
||||
extends: Radar,
|
||||
|
||||
@@ -1,20 +1,22 @@
|
||||
import Bar from '../BaseCharts/Bar'
|
||||
import { Bar } from '../BaseCharts'
|
||||
import reactiveData from '../mixins/reactiveData'
|
||||
|
||||
export default {
|
||||
extends: Bar,
|
||||
mixins: [reactiveData],
|
||||
data () {
|
||||
return {
|
||||
chartData: ''
|
||||
data: () => ({
|
||||
chartData: '',
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
},
|
||||
}),
|
||||
created () {
|
||||
this.fillData()
|
||||
},
|
||||
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
|
||||
this.renderChart(this.chartData, this.options)
|
||||
|
||||
setInterval(() => {
|
||||
this.fillData()
|
||||
|
||||
@@ -1,11 +1,17 @@
|
||||
import Bar from '../BaseCharts/Bar'
|
||||
import { Bar } from '../BaseCharts'
|
||||
import reactiveProp from '../mixins/reactiveProp'
|
||||
|
||||
export default {
|
||||
extends: Bar,
|
||||
mixins: [reactiveProp],
|
||||
data: () => ({
|
||||
options: {
|
||||
responsive: true,
|
||||
maintainAspectRatio: false
|
||||
}
|
||||
}),
|
||||
|
||||
mounted () {
|
||||
this.renderChart(this.chartData, {responsive: true, maintainAspectRatio: false})
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import Scatter from '../BaseCharts/Scatter'
|
||||
import { Scatter } from '../BaseCharts'
|
||||
|
||||
export default {
|
||||
extends: Scatter,
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
import merge from 'lodash.merge'
|
||||
|
||||
export function mergeOptions (obj, src) {
|
||||
return merge(obj, src)
|
||||
}
|
||||
20
src/index.js
20
src/index.js
@@ -1,14 +1,16 @@
|
||||
import Bar from './BaseCharts/Bar'
|
||||
import HorizontalBar from './BaseCharts/HorizontalBar'
|
||||
import Doughnut from './BaseCharts/Doughnut'
|
||||
import Line from './BaseCharts/Line'
|
||||
import Pie from './BaseCharts/Pie'
|
||||
import PolarArea from './BaseCharts/PolarArea'
|
||||
import Radar from './BaseCharts/Radar'
|
||||
import Bubble from './BaseCharts/Bubble'
|
||||
import Scatter from './BaseCharts/Scatter'
|
||||
import mixins from './mixins/index.js'
|
||||
import npmCfg from '../package.json'
|
||||
import {
|
||||
Bar,
|
||||
HorizontalBar,
|
||||
Doughnut,
|
||||
Line,
|
||||
Pie,
|
||||
PolarArea,
|
||||
Radar,
|
||||
Bubble,
|
||||
Scatter
|
||||
} from './BaseCharts'
|
||||
|
||||
const VueCharts = {
|
||||
version: npmCfg.version,
|
||||
|
||||
@@ -63,6 +63,9 @@ module.exports = {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
} else {
|
||||
if (this.$data._chart) {
|
||||
this.$data._chart.destroy()
|
||||
}
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -63,6 +63,9 @@ module.exports = {
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
} else {
|
||||
if (this.$data._chart) {
|
||||
this.$data._chart.destroy()
|
||||
}
|
||||
this.renderChart(this.chartData, this.options)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -76,9 +76,31 @@ describe('BarChart', () => {
|
||||
components: { BarChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
vm.$children[0].addPlugin(testPlugin)
|
||||
|
||||
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
|
||||
it('should add inline plugins based on prop', () => {
|
||||
const testPlugin = {
|
||||
id: 'test'
|
||||
}
|
||||
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
BarChart, {
|
||||
props: {
|
||||
plugins: [testPlugin]
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { BarChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -76,9 +76,31 @@ describe('BubbleChart', () => {
|
||||
components: { BubbleChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
vm.$children[0].addPlugin(testPlugin)
|
||||
|
||||
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
|
||||
it('should add inline plugins based on prop', () => {
|
||||
const testPlugin = {
|
||||
id: 'test'
|
||||
}
|
||||
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
BubbleChart, {
|
||||
props: {
|
||||
plugins: [testPlugin]
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { BubbleChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -76,9 +76,31 @@ describe('DoughnutChart', () => {
|
||||
components: { DoughnutChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
vm.$children[0].addPlugin(testPlugin)
|
||||
|
||||
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
|
||||
it('should add inline plugins based on prop', () => {
|
||||
const testPlugin = {
|
||||
id: 'test'
|
||||
}
|
||||
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
DoughnutChart, {
|
||||
props: {
|
||||
plugins: [testPlugin]
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { DoughnutChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -76,9 +76,31 @@ describe('HorizontalBarChart', () => {
|
||||
components: { HorizontalBarChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
vm.$children[0].addPlugin(testPlugin)
|
||||
|
||||
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
|
||||
it('should add inline plugins based on prop', () => {
|
||||
const testPlugin = {
|
||||
id: 'test'
|
||||
}
|
||||
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
HorizontalBarChart, {
|
||||
props: {
|
||||
plugins: [testPlugin]
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { HorizontalBarChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -76,9 +76,31 @@ describe('LineChart', () => {
|
||||
components: { LineChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
vm.$children[0].addPlugin(testPlugin)
|
||||
|
||||
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
|
||||
it('should add inline plugins based on prop', () => {
|
||||
const testPlugin = {
|
||||
id: 'test'
|
||||
}
|
||||
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
LineChart, {
|
||||
props: {
|
||||
plugins: [testPlugin]
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { LineChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -75,9 +75,31 @@ describe('PieChart', () => {
|
||||
components: { PieChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
vm.$children[0].addPlugin(testPlugin)
|
||||
|
||||
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
|
||||
it('should add inline plugins based on prop', () => {
|
||||
const testPlugin = {
|
||||
id: 'test'
|
||||
}
|
||||
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
PieChart, {
|
||||
props: {
|
||||
plugins: [testPlugin]
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { PieChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -76,9 +76,31 @@ describe('PolarChart', () => {
|
||||
components: { PolarChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
vm.$children[0].addPlugin(testPlugin)
|
||||
|
||||
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
|
||||
it('should add inline plugins based on prop', () => {
|
||||
const testPlugin = {
|
||||
id: 'test'
|
||||
}
|
||||
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
PolarChart, {
|
||||
props: {
|
||||
plugins: [testPlugin]
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { PolarChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -75,9 +75,31 @@ describe('RadarChart', () => {
|
||||
components: { RadarChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
vm.$children[0].addPlugin(testPlugin)
|
||||
|
||||
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
|
||||
it('should add inline plugins based on prop', () => {
|
||||
const testPlugin = {
|
||||
id: 'test'
|
||||
}
|
||||
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
RadarChart, {
|
||||
props: {
|
||||
plugins: [testPlugin]
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { RadarChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -76,9 +76,31 @@ describe('ScatterChart', () => {
|
||||
components: { ScatterChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
vm.$children[0].addPlugin(testPlugin)
|
||||
|
||||
expect(vm.$children[0].plugins.length).to.equal(1)
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
|
||||
it('should add inline plugins based on prop', () => {
|
||||
const testPlugin = {
|
||||
id: 'test'
|
||||
}
|
||||
|
||||
const vm = new Vue({
|
||||
render: function (createElement) {
|
||||
return createElement(
|
||||
ScatterChart, {
|
||||
props: {
|
||||
plugins: [testPlugin]
|
||||
}
|
||||
}
|
||||
)
|
||||
},
|
||||
components: { ScatterChart }
|
||||
}).$mount(el)
|
||||
|
||||
expect(vm.$children[0].$data._plugins).to.exist
|
||||
expect(vm.$children[0].$data._plugins.length).to.equal(1)
|
||||
})
|
||||
})
|
||||
|
||||
@@ -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')
|
||||
})
|
||||
})
|
||||
Reference in New Issue
Block a user