mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
Compare commits
11 Commits
v2.2.0
...
release/1.
| Author | SHA1 | Date | |
|---|---|---|---|
|
4f5aa1811d | ||
|
|
098c90edf1 | ||
|
|
3f15eb9abc | ||
|
|
68e94b7fe3 | ||
|
0d24270bf2 | ||
|
|
e034467e5b | ||
|
|
c7cb8e24e9 | ||
|
|
4c9f4fc5e5 | ||
|
|
a25d327b13 | ||
|
|
f57e555d94 | ||
|
|
88d2771175 |
2
.gitignore
vendored
2
.gitignore
vendored
@@ -4,3 +4,5 @@ npm-debug.log
|
|||||||
selenium-debug.log
|
selenium-debug.log
|
||||||
test/unit/coverage
|
test/unit/coverage
|
||||||
test/e2e/reports
|
test/e2e/reports
|
||||||
|
dist/
|
||||||
|
es/
|
||||||
|
|||||||
@@ -1,11 +1,5 @@
|
|||||||
# Change Log
|
# Change Log
|
||||||
|
|
||||||
## [v2.1.1](https://github.com/apertureless/vue-chartjs/tree/v2.1.1) (2016-10-02)
|
|
||||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v.2.1.0...v2.1.1)
|
|
||||||
|
|
||||||
## [v.2.1.0](https://github.com/apertureless/vue-chartjs/tree/v.2.1.0) (2016-09-23)
|
|
||||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v1.1.3...v.2.1.0)
|
|
||||||
|
|
||||||
## [v1.1.3](https://github.com/apertureless/vue-chartjs/tree/v1.1.3) (2016-09-08)
|
## [v1.1.3](https://github.com/apertureless/vue-chartjs/tree/v1.1.3) (2016-09-08)
|
||||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.2...v1.1.3)
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.2...v1.1.3)
|
||||||
|
|
||||||
|
|||||||
49
README.md
49
README.md
@@ -4,20 +4,9 @@
|
|||||||
|
|
||||||
> VueJS wrapper for ChartJs
|
> VueJS wrapper for ChartJs
|
||||||
|
|
||||||
### Compatibility
|
|
||||||
|
|
||||||
- v1 later
|
|
||||||
- Vue.js 1.x
|
|
||||||
- v2 later
|
|
||||||
- Vue.js 2.x
|
|
||||||
|
|
||||||
After the final release of vue.js 2, you also get the v2 per default if you install vue-chartjs over npm.
|
|
||||||
No need for the @next tag anymore. If you want the v1 you need to define the version.
|
|
||||||
If you're looking for v1 check this [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
|
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
Simply run `npm install vue-chartjs`
|
Simply run `npm install vue-chartjs@1.1.3`
|
||||||
|
|
||||||
## How to use
|
## How to use
|
||||||
|
|
||||||
@@ -36,10 +25,10 @@ Just create your own component.
|
|||||||
// CommitChart.js
|
// CommitChart.js
|
||||||
import { Bar } from 'vue-chartjs'
|
import { Bar } from 'vue-chartjs'
|
||||||
|
|
||||||
export default Bar.extend({
|
export default BarChart.extend({
|
||||||
mounted () {
|
ready () {
|
||||||
// Overwriting base render method with actual data.
|
// Overwriting base render method with actual data.
|
||||||
this.renderChart({
|
this.render({
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
@@ -67,10 +56,10 @@ You can overwrite the default chart options. Just pass the options object as a s
|
|||||||
// MonthlyIncome.js
|
// MonthlyIncome.js
|
||||||
import { Line } from 'vue-chartjs'
|
import { Line } from 'vue-chartjs'
|
||||||
|
|
||||||
export default Line.extend({
|
export default LineChart.extend({
|
||||||
props: [data, options],
|
props: [data, options],
|
||||||
mounted () {
|
ready () {
|
||||||
this.renderChart(this.data, this.options)
|
this.render(this.data, this.options)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
@@ -92,30 +81,6 @@ export default {
|
|||||||
</script>
|
</script>
|
||||||
```
|
```
|
||||||
|
|
||||||
## Reactivity
|
|
||||||
|
|
||||||
Chart.js does not update or re-render the chart if new data is passed.
|
|
||||||
However you can simply implement this by your own or use one of the two mixins which are included.
|
|
||||||
|
|
||||||
- `reactiveProp`
|
|
||||||
- `reactiveData`
|
|
||||||
|
|
||||||
The mixins automatically create `chartData` as a prop or data. And add a watcher. If data has changed, the chart will update.
|
|
||||||
|
|
||||||
```javascript
|
|
||||||
// MonthlyIncome.js
|
|
||||||
import { Line, reactiveProp } from 'vue-chartjs'
|
|
||||||
|
|
||||||
export default Line.extend({
|
|
||||||
mixins: [reactiveProp]
|
|
||||||
props: [chartData, options],
|
|
||||||
mounted () {
|
|
||||||
this.renderChart(this.chartData, this.options)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
## Available Charts
|
## Available Charts
|
||||||
|
|
||||||
### Bar Chart
|
### Bar Chart
|
||||||
|
|||||||
@@ -16,7 +16,6 @@ module.exports = {
|
|||||||
extensions: ['', '.js', '.vue'],
|
extensions: ['', '.js', '.vue'],
|
||||||
fallback: [path.join(__dirname, '../node_modules')],
|
fallback: [path.join(__dirname, '../node_modules')],
|
||||||
alias: {
|
alias: {
|
||||||
'vue': 'vue/dist/vue.js',
|
|
||||||
'src': path.resolve(__dirname, '../src'),
|
'src': path.resolve(__dirname, '../src'),
|
||||||
'BaseCharts': path.resolve(__dirname, '../src/BaseCharts')
|
'BaseCharts': path.resolve(__dirname, '../src/BaseCharts')
|
||||||
}
|
}
|
||||||
|
|||||||
34
codecov.yml
34
codecov.yml
@@ -1,34 +0,0 @@
|
|||||||
codecov:
|
|
||||||
branch: master
|
|
||||||
|
|
||||||
coverage:
|
|
||||||
precision: 2
|
|
||||||
round: down
|
|
||||||
range: "70...100"
|
|
||||||
|
|
||||||
status:
|
|
||||||
project:
|
|
||||||
default:
|
|
||||||
target: auto
|
|
||||||
threshold: null
|
|
||||||
branches: null
|
|
||||||
|
|
||||||
patch:
|
|
||||||
default:
|
|
||||||
target: auto
|
|
||||||
branches: null
|
|
||||||
|
|
||||||
changes:
|
|
||||||
default:
|
|
||||||
branches: null
|
|
||||||
|
|
||||||
ignore:
|
|
||||||
- "tests/*"
|
|
||||||
- "src/examples/*"
|
|
||||||
- "src/mixins/*"
|
|
||||||
|
|
||||||
|
|
||||||
comment:
|
|
||||||
layout: "header, diff, changes, sunburst, uncovered, tree"
|
|
||||||
branches: null
|
|
||||||
behavior: default
|
|
||||||
21
dist/vue-chartjs.js
vendored
21
dist/vue-chartjs.js
vendored
File diff suppressed because one or more lines are too long
1
dist/vue-chartjs.js.map
vendored
1
dist/vue-chartjs.js.map
vendored
File diff suppressed because one or more lines are too long
@@ -5,9 +5,7 @@
|
|||||||
<title>Vue-ChartJs</title>
|
<title>Vue-ChartJs</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="app">
|
|
||||||
<app></app>
|
<app></app>
|
||||||
</div>
|
|
||||||
<!-- built files will be auto injected -->
|
<!-- built files will be auto injected -->
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
67
package.json
67
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vue-chartjs",
|
"name": "vue-chartjs",
|
||||||
"version": "2.2.0",
|
"version": "1.2.0",
|
||||||
"description": "Vue wrapper for chart.js",
|
"description": "Vue wrapper for chart.js",
|
||||||
"author": "Jakub Juszczak <jakub@nextindex.de>",
|
"author": "Jakub Juszczak <jakub@nextindex.de>",
|
||||||
"repository": {
|
"repository": {
|
||||||
@@ -15,76 +15,77 @@
|
|||||||
"Charts"
|
"Charts"
|
||||||
],
|
],
|
||||||
"main": "dist/vue-chartjs.js",
|
"main": "dist/vue-chartjs.js",
|
||||||
|
"files": [
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "node build/dev-server.js",
|
"dev": "node build/dev-server.js",
|
||||||
"build": "node build/build.js",
|
"build": "node build/build.js",
|
||||||
"unit": "karma start test/unit/karma.conf.js --single-run",
|
"unit": "karma start test/unit/karma.conf.js --single-run",
|
||||||
"e2e": "node test/e2e/runner.js",
|
"e2e": "node test/e2e/runner.js",
|
||||||
"test": "npm run unit",
|
"test": "npm run unit",
|
||||||
"lint": "eslint --ext .js,.vue src test/unit/specs test/e2e/specs",
|
"lint": "eslint --ext .js,.vue src test/unit/specs",
|
||||||
"prepublish": "node build/build.js"
|
"prepublish": "node build/build.js"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"babel-runtime": "^6.11.6",
|
"babel-runtime": "^6.0.0",
|
||||||
"chart.js": "^2.2.1",
|
"chart.js": "^2.6.0",
|
||||||
"vue": "^2.0.1"
|
"vue": "^1.0.21"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-core": "^6.10.4",
|
"babel-core": "^6.0.0",
|
||||||
"babel-loader": "^6.0.0",
|
"babel-loader": "^6.0.0",
|
||||||
"babel-plugin-transform-runtime": "^6.12.0",
|
"babel-plugin-transform-runtime": "^6.0.0",
|
||||||
"babel-preset-es2015": "^6.0.0",
|
"babel-preset-es2015": "^6.0.0",
|
||||||
"babel-preset-stage-2": "^6.0.0",
|
"babel-preset-stage-2": "^6.0.0",
|
||||||
"chai": "^3.5.0",
|
"chai": "^3.5.0",
|
||||||
"chromedriver": "^2.21.2",
|
"chromedriver": "^2.21.2",
|
||||||
"connect-history-api-fallback": "^1.1.0",
|
"connect-history-api-fallback": "^1.1.0",
|
||||||
"cross-spawn": "^4.0.2",
|
"cross-spawn": "^2.1.5",
|
||||||
"css-loader": "^0.25.0",
|
"css-loader": "^0.23.0",
|
||||||
"eslint": "^3.7.1",
|
"eslint": "^2.10.2",
|
||||||
"eslint-config-standard": "^6.2.0",
|
"eslint-config-standard": "^5.1.0",
|
||||||
"eslint-friendly-formatter": "^2.0.5",
|
"eslint-friendly-formatter": "^2.0.5",
|
||||||
"eslint-loader": "^1.3.0",
|
"eslint-loader": "^1.3.0",
|
||||||
"eslint-plugin-html": "^1.3.0",
|
"eslint-plugin-html": "^1.3.0",
|
||||||
"eslint-plugin-promise": "^2.0.1",
|
"eslint-plugin-promise": "^1.0.8",
|
||||||
"eslint-plugin-standard": "^2.0.1",
|
"eslint-plugin-standard": "^1.3.2",
|
||||||
"eventsource-polyfill": "^0.9.6",
|
"eventsource-polyfill": "^0.9.6",
|
||||||
"express": "^4.13.3",
|
"express": "^4.13.3",
|
||||||
"extract-text-webpack-plugin": "^1.0.1",
|
"extract-text-webpack-plugin": "^1.0.1",
|
||||||
"file-loader": "^0.9.0",
|
"file-loader": "^0.8.4",
|
||||||
"function-bind": "^1.0.2",
|
"function-bind": "^1.0.2",
|
||||||
"html-webpack-plugin": "^2.8.1",
|
"html-webpack-plugin": "^2.8.1",
|
||||||
"http-proxy-middleware": "^0.17.2",
|
"http-proxy-middleware": "^0.12.0",
|
||||||
"inject-loader": "^2.0.1",
|
"inject-loader": "^2.0.1",
|
||||||
"isparta-loader": "^2.0.0",
|
"isparta-loader": "^2.0.0",
|
||||||
"jasmine-core": "^2.5.2",
|
|
||||||
"json-loader": "^0.5.4",
|
"json-loader": "^0.5.4",
|
||||||
"karma": "^1.3.0",
|
"karma": "^0.13.15",
|
||||||
"karma-coverage": "^1.1.1",
|
"karma-coverage": "^0.5.5",
|
||||||
"karma-jasmine": "^1.0.2",
|
"karma-mocha": "^0.2.2",
|
||||||
"karma-mocha": "^1.2.0",
|
|
||||||
"karma-phantomjs-launcher": "^1.0.0",
|
"karma-phantomjs-launcher": "^1.0.0",
|
||||||
"karma-sinon-chai": "^1.2.0",
|
"karma-sinon-chai": "^1.2.0",
|
||||||
"karma-sourcemap-loader": "^0.3.7",
|
"karma-sourcemap-loader": "^0.3.7",
|
||||||
"karma-spec-reporter": "0.0.26",
|
"karma-spec-reporter": "0.0.24",
|
||||||
"karma-webpack": "^1.7.0",
|
"karma-webpack": "^1.7.0",
|
||||||
"lodash": "^4.16.3",
|
"lodash": "^4.15.0",
|
||||||
"lolex": "^1.4.0",
|
"lolex": "^1.4.0",
|
||||||
"mocha": "^3.1.0",
|
"mocha": "^2.4.5",
|
||||||
"nightwatch": "^0.9.8",
|
"nightwatch": "^0.8.18",
|
||||||
"ora": "^0.3.0",
|
"ora": "^0.2.0",
|
||||||
"phantomjs-prebuilt": "^2.1.13",
|
"phantomjs-prebuilt": "^2.1.3",
|
||||||
"selenium-server": "^2.53.1",
|
"selenium-server": "2.53.0",
|
||||||
"shelljs": "^0.7.4",
|
"shelljs": "^0.6.0",
|
||||||
"sinon": "^1.17.3",
|
"sinon": "^1.17.3",
|
||||||
"sinon-chai": "^2.8.0",
|
"sinon-chai": "^2.8.0",
|
||||||
"url-loader": "^0.5.7",
|
"url-loader": "^0.5.7",
|
||||||
"vue-hot-reload-api": "^2.0.6",
|
"vue-hot-reload-api": "^1.2.0",
|
||||||
"vue-html-loader": "^1.2.3",
|
"vue-html-loader": "^1.0.0",
|
||||||
"vue-loader": "^9.3.0",
|
"vue-loader": "^8.3.0",
|
||||||
"vue-style-loader": "^1.0.0",
|
"vue-style-loader": "^1.0.0",
|
||||||
"webpack": "^1.13.2",
|
"webpack": "^1.12.2",
|
||||||
"webpack-dev-middleware": "^1.4.0",
|
"webpack-dev-middleware": "^1.4.0",
|
||||||
"webpack-hot-middleware": "^2.6.0",
|
"webpack-hot-middleware": "^2.6.0",
|
||||||
"webpack-merge": "^0.14.1"
|
"webpack-merge": "^0.8.3"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
|
|||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
template: `
|
template: `
|
||||||
<div>
|
<div>
|
||||||
<canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
|
<canvas id="{{chartId}}" width="{{width}}" height="{{height}}" v-el:canvas></canvas>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
|
|
||||||
@@ -49,12 +49,12 @@ export default Vue.extend({
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
renderChart (data, options, type) {
|
render (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
|
|
||||||
this._chart = new Chart(
|
this._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$els.canvas.getContext('2d'), {
|
||||||
type: type || 'bar',
|
type: 'bar',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions
|
options: chartOptions
|
||||||
}
|
}
|
||||||
@@ -63,6 +63,8 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
|
if (this._chart) {
|
||||||
this._chart.destroy()
|
this._chart.destroy()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
|
|||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
template: `
|
template: `
|
||||||
<div>
|
<div>
|
||||||
<canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
|
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
|
|
||||||
@@ -27,33 +27,16 @@ export default Vue.extend({
|
|||||||
data () {
|
data () {
|
||||||
return {
|
return {
|
||||||
defaultOptions: {
|
defaultOptions: {
|
||||||
scales: {
|
|
||||||
yAxes: [{
|
|
||||||
ticks: {
|
|
||||||
beginAtZero: true
|
|
||||||
},
|
|
||||||
gridLines: {
|
|
||||||
display: false
|
|
||||||
}
|
|
||||||
}],
|
|
||||||
xAxes: [ {
|
|
||||||
gridLines: {
|
|
||||||
display: false
|
|
||||||
},
|
|
||||||
categoryPercentage: 0.5,
|
|
||||||
barPercentage: 0.2
|
|
||||||
}]
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
renderChart (data, options) {
|
render (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
|
|
||||||
this._chart = new Chart(
|
this._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$els.canvas.getContext('2d'), {
|
||||||
type: 'bubble',
|
type: 'bubble',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions
|
options: chartOptions
|
||||||
@@ -63,6 +46,8 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
|
if (this._chart) {
|
||||||
this._chart.destroy()
|
this._chart.destroy()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
|
|||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
template: `
|
template: `
|
||||||
<div>
|
<div>
|
||||||
<canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
|
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
|
|
||||||
@@ -32,11 +32,11 @@ export default Vue.extend({
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
renderChart (data, options) {
|
render (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
|
|
||||||
this._chart = new Chart(
|
this._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$els.canvas.getContext('2d'), {
|
||||||
type: 'doughnut',
|
type: 'doughnut',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions
|
options: chartOptions
|
||||||
@@ -46,6 +46,8 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
|
if (this._chart) {
|
||||||
this._chart.destroy()
|
this._chart.destroy()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
|
|||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
template: `
|
template: `
|
||||||
<div>
|
<div>
|
||||||
<canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
|
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
|
|
||||||
@@ -47,11 +47,11 @@ export default Vue.extend({
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
renderChart (data, options) {
|
render (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
|
|
||||||
this._chart = new Chart(
|
this._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$els.canvas.getContext('2d'), {
|
||||||
type: 'line',
|
type: 'line',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions
|
options: chartOptions
|
||||||
@@ -61,6 +61,8 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
|
if (this._chart) {
|
||||||
this._chart.destroy()
|
this._chart.destroy()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
|
|||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
template: `
|
template: `
|
||||||
<div>
|
<div>
|
||||||
<canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
|
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
|
|
||||||
@@ -32,11 +32,11 @@ export default Vue.extend({
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
renderChart (data, options) {
|
render (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
|
|
||||||
this._chart = new Chart(
|
this._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$els.canvas.getContext('2d'), {
|
||||||
type: 'pie',
|
type: 'pie',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions
|
options: chartOptions
|
||||||
@@ -46,6 +46,8 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
|
if (this._chart) {
|
||||||
this._chart.destroy()
|
this._chart.destroy()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
|
|||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
template: `
|
template: `
|
||||||
<div>
|
<div>
|
||||||
<canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
|
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
|
|
||||||
@@ -32,11 +32,11 @@ export default Vue.extend({
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
renderChart (data, options) {
|
render (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
|
|
||||||
this._chart = new Chart(
|
this._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$els.canvas.getContext('2d'), {
|
||||||
type: 'polarArea',
|
type: 'polarArea',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions
|
options: chartOptions
|
||||||
@@ -46,6 +46,8 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
|
if (this._chart) {
|
||||||
this._chart.destroy()
|
this._chart.destroy()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
|
|||||||
export default Vue.extend({
|
export default Vue.extend({
|
||||||
template: `
|
template: `
|
||||||
<div>
|
<div>
|
||||||
<canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
|
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||||
</div>
|
</div>
|
||||||
`,
|
`,
|
||||||
|
|
||||||
@@ -32,11 +32,11 @@ export default Vue.extend({
|
|||||||
},
|
},
|
||||||
|
|
||||||
methods: {
|
methods: {
|
||||||
renderChart (data, options) {
|
render (data, options) {
|
||||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
|
|
||||||
this._chart = new Chart(
|
this._chart = new Chart(
|
||||||
this.$refs.canvas.getContext('2d'), {
|
this.$els.canvas.getContext('2d'), {
|
||||||
type: 'radar',
|
type: 'radar',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions
|
options: chartOptions
|
||||||
@@ -46,6 +46,8 @@ export default Vue.extend({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
beforeDestroy () {
|
beforeDestroy () {
|
||||||
|
if (this._chart) {
|
||||||
this._chart.destroy()
|
this._chart.destroy()
|
||||||
}
|
}
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
59
src/BaseCharts/Scatter.js
Normal file
59
src/BaseCharts/Scatter.js
Normal file
@@ -0,0 +1,59 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import Chart from 'chart.js'
|
||||||
|
import { mergeOptions } from '../helpers/options'
|
||||||
|
|
||||||
|
export default Vue.extend({
|
||||||
|
template: `
|
||||||
|
<div>
|
||||||
|
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||||
|
</div>
|
||||||
|
`,
|
||||||
|
|
||||||
|
props: {
|
||||||
|
chartId: {
|
||||||
|
default: 'scatter-chart',
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
default: 400,
|
||||||
|
type: Number
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
default: 400,
|
||||||
|
type: Number
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data () {
|
||||||
|
return {
|
||||||
|
defaultOptions: {
|
||||||
|
scales: {
|
||||||
|
xAxes: [{
|
||||||
|
type: 'linear',
|
||||||
|
position: 'bottom'
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
render (data, options) {
|
||||||
|
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||||
|
|
||||||
|
this._chart = new Chart(
|
||||||
|
this.$els.canvas.getContext('2d'), {
|
||||||
|
type: 'scatter',
|
||||||
|
data: data,
|
||||||
|
options: chartOptions
|
||||||
|
}
|
||||||
|
)
|
||||||
|
this._chart.generateLegend()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy () {
|
||||||
|
if (this._chart) {
|
||||||
|
this._chart.destroy()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
@@ -1,7 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<bar-example></bar-example>
|
<bar-example></bar-example>
|
||||||
<reactive-example></reactive-example>
|
|
||||||
<line-example></line-example>
|
<line-example></line-example>
|
||||||
<doughnut-example></doughnut-example>
|
<doughnut-example></doughnut-example>
|
||||||
<pie-example></pie-example>
|
<pie-example></pie-example>
|
||||||
@@ -19,8 +18,6 @@
|
|||||||
import RadarExample from './RadarExample'
|
import RadarExample from './RadarExample'
|
||||||
import PolarAreaExample from './PolarAreaExample'
|
import PolarAreaExample from './PolarAreaExample'
|
||||||
import BubbleExample from './BubbleExample'
|
import BubbleExample from './BubbleExample'
|
||||||
import ReactiveExample from './ReactiveExample'
|
|
||||||
import ReactivePropExample from './ReactivePropExample'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
@@ -30,9 +27,7 @@
|
|||||||
PieExample,
|
PieExample,
|
||||||
RadarExample,
|
RadarExample,
|
||||||
PolarAreaExample,
|
PolarAreaExample,
|
||||||
BubbleExample,
|
BubbleExample
|
||||||
ReactiveExample,
|
|
||||||
ReactivePropExample
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
import BarChart from '../BaseCharts/Bar'
|
import BarChart from '../BaseCharts/Bar'
|
||||||
|
|
||||||
export default BarChart.extend({
|
export default BarChart.extend({
|
||||||
mounted () {
|
ready () {
|
||||||
this.renderChart({
|
this.render({
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
import BubbleChart from '../BaseCharts/Bubble'
|
import BubbleChart from '../BaseCharts/Bubble'
|
||||||
|
|
||||||
export default BubbleChart.extend({
|
export default BubbleChart.extend({
|
||||||
mounted () {
|
ready () {
|
||||||
this.renderChart({
|
this.render({
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
label: 'Data One',
|
label: 'Data One',
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
import DoughnutChart from '../BaseCharts/Doughnut'
|
import DoughnutChart from '../BaseCharts/Doughnut'
|
||||||
|
|
||||||
export default DoughnutChart.extend({
|
export default DoughnutChart.extend({
|
||||||
mounted () {
|
ready () {
|
||||||
this.renderChart({
|
this.render({
|
||||||
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
import LineChart from '../BaseCharts/Line'
|
import LineChart from '../BaseCharts/Line'
|
||||||
|
|
||||||
export default LineChart.extend({
|
export default LineChart.extend({
|
||||||
mounted () {
|
ready () {
|
||||||
this.renderChart({
|
this.render({
|
||||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
import PieChart from '../BaseCharts/Pie'
|
import PieChart from '../BaseCharts/Pie'
|
||||||
|
|
||||||
export default PieChart.extend({
|
export default PieChart.extend({
|
||||||
mounted () {
|
ready () {
|
||||||
this.renderChart({
|
this.render({
|
||||||
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
import PolarAreaChart from '../BaseCharts/PolarArea'
|
import PolarAreaChart from '../BaseCharts/PolarArea'
|
||||||
|
|
||||||
export default PolarAreaChart.extend({
|
export default PolarAreaChart.extend({
|
||||||
mounted () {
|
ready () {
|
||||||
this.renderChart({
|
this.render({
|
||||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
import RadarChart from '../BaseCharts/Radar'
|
import RadarChart from '../BaseCharts/Radar'
|
||||||
|
|
||||||
export default RadarChart.extend({
|
export default RadarChart.extend({
|
||||||
mounted () {
|
ready () {
|
||||||
this.renderChart({
|
this.render({
|
||||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||||
datasets: [
|
datasets: [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -1,41 +0,0 @@
|
|||||||
import BarChart from '../BaseCharts/Bar'
|
|
||||||
import reactiveData from '../mixins/reactiveData'
|
|
||||||
|
|
||||||
export default BarChart.extend({
|
|
||||||
mixins: [reactiveData],
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
chartData: ''
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created () {
|
|
||||||
this.fillData()
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted () {
|
|
||||||
this.renderChart(this.chartData)
|
|
||||||
|
|
||||||
setInterval(() => {
|
|
||||||
this.fillData()
|
|
||||||
}, 5000)
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
fillData () {
|
|
||||||
this.chartData = {
|
|
||||||
labels: ['January' + this.getRandomInt(), 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
|
||||||
datasets: [
|
|
||||||
{
|
|
||||||
label: 'Data One',
|
|
||||||
backgroundColor: '#f87979',
|
|
||||||
data: [this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt(), this.getRandomInt()]
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
getRandomInt () {
|
|
||||||
return Math.floor(Math.random() * (50 - 5 + 1)) + 5
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -1,10 +0,0 @@
|
|||||||
import BarChart from '../BaseCharts/Bar'
|
|
||||||
import reactiveData from '../mixins/reactiveProp'
|
|
||||||
|
|
||||||
export default BarChart.extend({
|
|
||||||
mixins: [reactiveData],
|
|
||||||
|
|
||||||
mounted () {
|
|
||||||
this.renderChart(this.chartData)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
@@ -5,8 +5,7 @@ import Pie from './BaseCharts/Pie'
|
|||||||
import PolarArea from './BaseCharts/PolarArea'
|
import PolarArea from './BaseCharts/PolarArea'
|
||||||
import Radar from './BaseCharts/Radar'
|
import Radar from './BaseCharts/Radar'
|
||||||
import Bubble from './BaseCharts/Bubble'
|
import Bubble from './BaseCharts/Bubble'
|
||||||
import reactiveProp from './mixins/reactiveProp'
|
import Scatter from './BaseCharts/Scatter'
|
||||||
import reactiveData from './mixins/reactiveData'
|
|
||||||
|
|
||||||
const VueCharts = {
|
const VueCharts = {
|
||||||
Bar,
|
Bar,
|
||||||
@@ -16,8 +15,7 @@ const VueCharts = {
|
|||||||
PolarArea,
|
PolarArea,
|
||||||
Radar,
|
Radar,
|
||||||
Bubble,
|
Bubble,
|
||||||
reactiveProp,
|
Scatter
|
||||||
reactiveData
|
|
||||||
}
|
}
|
||||||
|
|
||||||
module.exports = VueCharts
|
module.exports = VueCharts
|
||||||
|
|||||||
@@ -1,44 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
data () {
|
|
||||||
return {
|
|
||||||
chartData: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
'chartData': {
|
|
||||||
handler (newData, oldData) {
|
|
||||||
if (oldData) {
|
|
||||||
let chart = this._chart
|
|
||||||
|
|
||||||
let newDataLabels = newData.datasets.map((dataset) => {
|
|
||||||
return dataset.label
|
|
||||||
})
|
|
||||||
|
|
||||||
let oldDataLabels = oldData.datasets.map((dataset) => {
|
|
||||||
return dataset.label
|
|
||||||
})
|
|
||||||
|
|
||||||
if (JSON.stringify(newDataLabels) === JSON.stringify(oldDataLabels)) {
|
|
||||||
this.forceUpdate(newData, chart)
|
|
||||||
} else {
|
|
||||||
this.forceRender()
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
forceUpdate (newData, chart) {
|
|
||||||
newData.datasets.forEach((dataset, i) => {
|
|
||||||
chart.data.datasets[i].data = dataset.data
|
|
||||||
})
|
|
||||||
|
|
||||||
chart.data.labels = newData.labels
|
|
||||||
chart.update()
|
|
||||||
},
|
|
||||||
|
|
||||||
forceRender () {
|
|
||||||
this.renderChart(this.chartData, this.options)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,35 +0,0 @@
|
|||||||
module.exports = {
|
|
||||||
props: {
|
|
||||||
chartData: {
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
'chartData': {
|
|
||||||
handler (newData, oldData) {
|
|
||||||
if (oldData) {
|
|
||||||
let chart = this._chart
|
|
||||||
|
|
||||||
let newDataLabels = newData.datasets.map((dataset) => {
|
|
||||||
return dataset.label
|
|
||||||
})
|
|
||||||
|
|
||||||
let oldDataLabels = oldData.datasets.map((dataset) => {
|
|
||||||
return dataset.label
|
|
||||||
})
|
|
||||||
|
|
||||||
if (JSON.stringify(newDataLabels) === JSON.stringify(oldDataLabels)) {
|
|
||||||
newData.datasets.forEach((dataset, i) => {
|
|
||||||
chart.data.datasets[i].data = dataset.data
|
|
||||||
})
|
|
||||||
chart.data.labels = newData.labels
|
|
||||||
chart.update()
|
|
||||||
} else {
|
|
||||||
this.renderChart(this.chartData, this.options)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -4,7 +4,6 @@
|
|||||||
},
|
},
|
||||||
"globals": {
|
"globals": {
|
||||||
"expect": true,
|
"expect": true,
|
||||||
"jasmine": true,
|
|
||||||
"sinon": true
|
"sinon": true
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -54,7 +54,7 @@ module.exports = function (config) {
|
|||||||
// http://karma-runner.github.io/0.13/config/browsers.html
|
// http://karma-runner.github.io/0.13/config/browsers.html
|
||||||
// 2. add it to the `browsers` array below.
|
// 2. add it to the `browsers` array below.
|
||||||
browsers: ['PhantomJS'],
|
browsers: ['PhantomJS'],
|
||||||
frameworks: ['mocha', 'sinon-chai', 'jasmine'],
|
frameworks: ['mocha', 'sinon-chai'],
|
||||||
reporters: ['spec', 'coverage'],
|
reporters: ['spec', 'coverage'],
|
||||||
files: ['./index.js'],
|
files: ['./index.js'],
|
||||||
preprocessors: {
|
preprocessors: {
|
||||||
|
|||||||
@@ -2,30 +2,16 @@ import Vue from 'vue'
|
|||||||
import BarChart from 'src/examples/BarExample'
|
import BarChart from 'src/examples/BarExample'
|
||||||
|
|
||||||
describe('BarChart', () => {
|
describe('BarChart', () => {
|
||||||
let el
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
el = document.createElement('div')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should render a canvas', () => {
|
it('should render a canvas', () => {
|
||||||
const vm = new Vue({
|
const vm = new Vue({
|
||||||
|
el: 'body',
|
||||||
|
replace: false,
|
||||||
template: '<bar-chart></bar-chart>',
|
template: '<bar-chart></bar-chart>',
|
||||||
components: { BarChart }
|
components: { BarChart }
|
||||||
}).$mount(el)
|
})
|
||||||
|
|
||||||
expect(vm.$el.querySelector('#bar-chart')).not.to.be.an('undefined')
|
expect(vm.$el.querySelector('#bar-chart')).not.to.be.an('undefined')
|
||||||
expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
|
expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
|
||||||
expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
|
expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
|
||||||
expect(vm.$el.querySelector('canvas')).to.exist
|
expect(vm.$el.querySelector('canvas')).to.exist
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should change id based on prop', () => {
|
|
||||||
const vm = new Vue({
|
|
||||||
template: '<bar-chart chartId="barchartprop"></bar-chart>',
|
|
||||||
components: { BarChart }
|
|
||||||
}).$mount(el)
|
|
||||||
|
|
||||||
expect(vm.$el.querySelector('#barchartprop')).not.to.be.an('undefined')
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -2,30 +2,16 @@ import Vue from 'vue'
|
|||||||
import BubbleChart from 'src/examples/BubbleExample'
|
import BubbleChart from 'src/examples/BubbleExample'
|
||||||
|
|
||||||
describe('BubbleChart', () => {
|
describe('BubbleChart', () => {
|
||||||
let el
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
el = document.createElement('div')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should render a canvas', () => {
|
it('should render a canvas', () => {
|
||||||
const vm = new Vue({
|
const vm = new Vue({
|
||||||
|
el: 'body',
|
||||||
|
replace: false,
|
||||||
template: '<bubble-chart></bubble-chart>',
|
template: '<bubble-chart></bubble-chart>',
|
||||||
components: { BubbleChart }
|
components: { BubbleChart }
|
||||||
}).$mount(el)
|
})
|
||||||
|
|
||||||
expect(vm.$el.querySelector('#bubble-chart')).not.to.be.an('undefined')
|
expect(vm.$el.querySelector('#bubble-chart')).not.to.be.an('undefined')
|
||||||
expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
|
expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
|
||||||
expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
|
expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
|
||||||
expect(vm.$el.querySelector('canvas')).to.exist
|
expect(vm.$el.querySelector('canvas')).to.exist
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should change id based on prop', () => {
|
|
||||||
const vm = new Vue({
|
|
||||||
template: '<bubble-chart chartId="bubblechartprop"></bubble-chart>',
|
|
||||||
components: { BubbleChart }
|
|
||||||
}).$mount(el)
|
|
||||||
|
|
||||||
expect(vm.$el.querySelector('#bubblechartprop')).not.to.be.an('undefined')
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -2,30 +2,16 @@ import Vue from 'vue'
|
|||||||
import DoughnutChart from 'src/examples/DoughnutExample'
|
import DoughnutChart from 'src/examples/DoughnutExample'
|
||||||
|
|
||||||
describe('DoughnutChart', () => {
|
describe('DoughnutChart', () => {
|
||||||
let el
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
el = document.createElement('div')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should render a canvas', () => {
|
it('should render a canvas', () => {
|
||||||
const vm = new Vue({
|
const vm = new Vue({
|
||||||
|
el: 'body',
|
||||||
|
replace: false,
|
||||||
template: '<doughnut-chart></doughnut-chart>',
|
template: '<doughnut-chart></doughnut-chart>',
|
||||||
components: { DoughnutChart }
|
components: { DoughnutChart }
|
||||||
}).$mount(el)
|
})
|
||||||
|
|
||||||
expect(vm.$el.querySelector('#doughnut-chart')).not.to.be.an('undefined')
|
expect(vm.$el.querySelector('#doughnut-chart')).not.to.be.an('undefined')
|
||||||
expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
|
expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
|
||||||
expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
|
expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
|
||||||
expect(vm.$el.querySelector('canvas')).to.exist
|
expect(vm.$el.querySelector('canvas')).to.exist
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should change id based on prop', () => {
|
|
||||||
const vm = new Vue({
|
|
||||||
template: '<doughnut-chart chartId="doughnutchartprop"></doughnut-chart>',
|
|
||||||
components: { DoughnutChart }
|
|
||||||
}).$mount(el)
|
|
||||||
|
|
||||||
expect(vm.$el.querySelector('#doughnutchartprop')).not.to.be.an('undefined')
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -2,30 +2,16 @@ import Vue from 'vue'
|
|||||||
import LineChart from 'src/examples/LineExample'
|
import LineChart from 'src/examples/LineExample'
|
||||||
|
|
||||||
describe('LineChart', () => {
|
describe('LineChart', () => {
|
||||||
let el
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
el = document.createElement('div')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should render a canvas', () => {
|
it('should render a canvas', () => {
|
||||||
const vm = new Vue({
|
const vm = new Vue({
|
||||||
|
el: 'body',
|
||||||
|
replace: false,
|
||||||
template: '<line-chart></line-chart>',
|
template: '<line-chart></line-chart>',
|
||||||
components: { LineChart }
|
components: { LineChart }
|
||||||
}).$mount(el)
|
})
|
||||||
|
|
||||||
expect(vm.$el.querySelector('#line-chart')).not.to.be.an('undefined')
|
expect(vm.$el.querySelector('#line-chart')).not.to.be.an('undefined')
|
||||||
expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
|
expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
|
||||||
expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
|
expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
|
||||||
expect(vm.$el.querySelector('canvas')).to.exist
|
expect(vm.$el.querySelector('canvas')).to.exist
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should change id based on prop', () => {
|
|
||||||
const vm = new Vue({
|
|
||||||
template: '<line-chart chartId="linechartprop"></line-chart>',
|
|
||||||
components: { LineChart }
|
|
||||||
}).$mount(el)
|
|
||||||
|
|
||||||
expect(vm.$el.querySelector('#linechartprop')).not.to.be.an('undefined')
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -2,30 +2,16 @@ import Vue from 'vue'
|
|||||||
import PieChart from 'src/examples/PieExample'
|
import PieChart from 'src/examples/PieExample'
|
||||||
|
|
||||||
describe('PieChart', () => {
|
describe('PieChart', () => {
|
||||||
let el
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
el = document.createElement('div')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should render a canvas', () => {
|
it('should render a canvas', () => {
|
||||||
const vm = new Vue({
|
const vm = new Vue({
|
||||||
|
el: 'body',
|
||||||
|
replace: false,
|
||||||
template: '<pie-chart></pie-chart>',
|
template: '<pie-chart></pie-chart>',
|
||||||
components: { PieChart }
|
components: { PieChart }
|
||||||
}).$mount(el)
|
})
|
||||||
|
|
||||||
expect(vm.$el.querySelector('#pie-chart')).not.to.be.an('undefined')
|
expect(vm.$el.querySelector('#pie-chart')).not.to.be.an('undefined')
|
||||||
expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
|
expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
|
||||||
expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
|
expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
|
||||||
expect(vm.$el.querySelector('canvas')).to.exist
|
expect(vm.$el.querySelector('canvas')).to.exist
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should change id based on prop', () => {
|
|
||||||
const vm = new Vue({
|
|
||||||
template: '<pie-chart chartId="piechartprop"></pie-chart>',
|
|
||||||
components: { PieChart }
|
|
||||||
}).$mount(el)
|
|
||||||
|
|
||||||
expect(vm.$el.querySelector('#piechartprop')).not.to.be.an('undefined')
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -2,30 +2,16 @@ import Vue from 'vue'
|
|||||||
import PolarChart from 'src/examples/PolarAreaExample'
|
import PolarChart from 'src/examples/PolarAreaExample'
|
||||||
|
|
||||||
describe('PolarChart', () => {
|
describe('PolarChart', () => {
|
||||||
let el
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
el = document.createElement('div')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should render a canvas', () => {
|
it('should render a canvas', () => {
|
||||||
const vm = new Vue({
|
const vm = new Vue({
|
||||||
|
el: 'body',
|
||||||
|
replace: false,
|
||||||
template: '<polar-chart></polar-chart>',
|
template: '<polar-chart></polar-chart>',
|
||||||
components: { PolarChart }
|
components: { PolarChart }
|
||||||
}).$mount(el)
|
})
|
||||||
|
|
||||||
expect(vm.$el.querySelector('#polar-chart')).not.to.be.an('undefined')
|
expect(vm.$el.querySelector('#polar-chart')).not.to.be.an('undefined')
|
||||||
expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
|
expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
|
||||||
expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
|
expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
|
||||||
expect(vm.$el.querySelector('canvas')).to.exist
|
expect(vm.$el.querySelector('canvas')).to.exist
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should change id based on prop', () => {
|
|
||||||
const vm = new Vue({
|
|
||||||
template: '<polar-chart chartId="polarchartprop"></polar-chart>',
|
|
||||||
components: { PolarChart }
|
|
||||||
}).$mount(el)
|
|
||||||
|
|
||||||
expect(vm.$el.querySelector('#polarchartprop')).not.to.be.an('undefined')
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -2,30 +2,16 @@ import Vue from 'vue'
|
|||||||
import RadarChart from 'src/examples/RadarExample'
|
import RadarChart from 'src/examples/RadarExample'
|
||||||
|
|
||||||
describe('RadarChart', () => {
|
describe('RadarChart', () => {
|
||||||
let el
|
|
||||||
|
|
||||||
beforeEach(() => {
|
|
||||||
el = document.createElement('div')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('should render a canvas', () => {
|
it('should render a canvas', () => {
|
||||||
const vm = new Vue({
|
const vm = new Vue({
|
||||||
|
el: 'body',
|
||||||
|
replace: false,
|
||||||
template: '<radar-chart></radar-chart>',
|
template: '<radar-chart></radar-chart>',
|
||||||
components: { RadarChart }
|
components: { RadarChart }
|
||||||
}).$mount(el)
|
})
|
||||||
|
|
||||||
expect(vm.$el.querySelector('#radar-chart')).not.to.be.an('undefined')
|
expect(vm.$el.querySelector('#radar-chart')).not.to.be.an('undefined')
|
||||||
expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
|
expect(vm.$el.querySelector('canvas')).not.to.be.an('undefined')
|
||||||
expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
|
expect(vm.$el.querySelector('canvas')).not.to.be.an('null')
|
||||||
expect(vm.$el.querySelector('canvas')).to.exist
|
expect(vm.$el.querySelector('canvas')).to.exist
|
||||||
})
|
})
|
||||||
|
|
||||||
it('should change id based on prop', () => {
|
|
||||||
const vm = new Vue({
|
|
||||||
template: '<radar-chart chartId="rodarchartprop"></radar-chart>',
|
|
||||||
components: { RadarChart }
|
|
||||||
}).$mount(el)
|
|
||||||
|
|
||||||
expect(vm.$el.querySelector('#rodarchartprop')).not.to.be.an('undefined')
|
|
||||||
})
|
|
||||||
})
|
})
|
||||||
|
|||||||
Reference in New Issue
Block a user