mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
Compare commits
20 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
98961547f3 | ||
|
|
c11127e64f | ||
|
|
0f98800b92 | ||
|
|
8eefeeef86 | ||
|
|
d913e9c515 | ||
|
|
377ae5e27a | ||
|
|
9bcffae429 | ||
|
|
086fb1d4e9 | ||
|
|
f241613107 | ||
|
|
af373cf09d | ||
|
|
a7776f8407 | ||
|
|
776f3976ec | ||
|
|
3785e73b43 | ||
|
|
9bf6e6078d | ||
|
|
e62e8c81fb | ||
|
|
9f79fb581d | ||
|
|
45d500d401 | ||
|
|
9f02e95355 | ||
|
|
d80eace435 | ||
|
|
d9f95fd737 |
10
CHANGELOG.md
10
CHANGELOG.md
@@ -1,5 +1,15 @@
|
|||||||
# Change Log
|
# Change Log
|
||||||
|
|
||||||
|
## [1.1.2](https://github.com/apertureless/vue-chartjs/tree/1.1.2) (2016-09-07)
|
||||||
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.1...1.1.2)
|
||||||
|
|
||||||
|
**Implemented enhancements:**
|
||||||
|
|
||||||
|
- Change name of the render method to ensure compatiblity with Vue 2.0 [\#4](https://github.com/apertureless/vue-chartjs/issues/4)
|
||||||
|
|
||||||
|
## [1.1.1](https://github.com/apertureless/vue-chartjs/tree/1.1.1) (2016-08-23)
|
||||||
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.1.0...1.1.1)
|
||||||
|
|
||||||
## [1.1.0](https://github.com/apertureless/vue-chartjs/tree/1.1.0) (2016-08-21)
|
## [1.1.0](https://github.com/apertureless/vue-chartjs/tree/1.1.0) (2016-08-21)
|
||||||
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.0.3...1.1.0)
|
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.0.3...1.1.0)
|
||||||
|
|
||||||
|
|||||||
24
README.md
24
README.md
@@ -4,11 +4,9 @@
|
|||||||
|
|
||||||
> VueJS wrapper for ChartJs
|
> VueJS wrapper for ChartJs
|
||||||
|
|
||||||
# 🚧 VUE 2.0 WIP ⚠
|
|
||||||
|
|
||||||
## Install
|
## Install
|
||||||
|
|
||||||
Simply run `npm install vue-chartjs@next`
|
Simply run `npm install vue-chartjs`
|
||||||
|
|
||||||
## How to use
|
## How to use
|
||||||
|
|
||||||
@@ -28,9 +26,9 @@ Just create your own component.
|
|||||||
import { Bar } from 'vue-chartjs'
|
import { Bar } from 'vue-chartjs'
|
||||||
|
|
||||||
export default BarChart.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: [
|
||||||
{
|
{
|
||||||
@@ -60,8 +58,8 @@ import { Line } from 'vue-chartjs'
|
|||||||
|
|
||||||
export default LineChart.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)
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
```
|
```
|
||||||
@@ -109,17 +107,9 @@ export default {
|
|||||||
|
|
||||||

|

|
||||||
|
|
||||||
## Todo
|
### Bubble
|
||||||
|
|
||||||
- [x] ~~Implement Bar Chart~~
|
|
||||||
- [x] ~~Implement Line Chart~~
|
|
||||||
- [x] ~~Implement Radar Chart~~
|
|
||||||
- [x] ~~Implement Polar Area Chart~~
|
|
||||||
- [x] ~~Implement Pie Chart~~
|
|
||||||
- [x] ~~Implement Doughnut Chart~~
|
|
||||||
- [x] ~~Make npm module~~
|
|
||||||
- [ ] Add tests
|
|
||||||
|
|
||||||
|

|
||||||
|
|
||||||
## Build Setup
|
## Build Setup
|
||||||
|
|
||||||
|
|||||||
BIN
assets/bubble.png
Normal file
BIN
assets/bubble.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 82 KiB |
@@ -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')
|
||||||
}
|
}
|
||||||
|
|||||||
37
dist/vue-chartjs.js
vendored
37
dist/vue-chartjs.js
vendored
File diff suppressed because one or more lines are too long
2
dist/vue-chartjs.js.map
vendored
2
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>
|
||||||
|
|||||||
22
package.json
22
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "vue-chartjs",
|
"name": "vue-chartjs",
|
||||||
"version": "2.1.0",
|
"version": "1.1.3",
|
||||||
"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": {
|
||||||
@@ -21,18 +21,18 @@
|
|||||||
"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.1.6",
|
||||||
"vue": "^2.0.0-rc.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",
|
||||||
@@ -76,11 +76,11 @@
|
|||||||
"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.8.3"
|
"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,11 +49,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: 'bar',
|
type: 'bar',
|
||||||
data: data,
|
data: data,
|
||||||
options: chartOptions
|
options: chartOptions
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -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
|
||||||
|
|||||||
@@ -20,7 +20,15 @@
|
|||||||
import BubbleExample from './BubbleExample'
|
import BubbleExample from './BubbleExample'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample, BubbleExample }
|
components: {
|
||||||
|
BarExample,
|
||||||
|
LineExample,
|
||||||
|
DoughnutExample,
|
||||||
|
PieExample,
|
||||||
|
RadarExample,
|
||||||
|
PolarAreaExample,
|
||||||
|
BubbleExample
|
||||||
|
}
|
||||||
}
|
}
|
||||||
</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: [
|
||||||
{
|
{
|
||||||
@@ -11,6 +11,6 @@ export default BarChart.extend({
|
|||||||
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
})
|
}, {responsive: true, maintainAspectRatio: false})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -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: [
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -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