mirror of
https://github.com/KevinMidboe/vue-chartjs.git
synced 2025-10-29 18:00:20 +00:00
Compare commits
11 Commits
| 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
|
||||
test/unit/coverage
|
||||
test/e2e/reports
|
||||
dist/
|
||||
es/
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
# 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)
|
||||
[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
|
||||
|
||||
### 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
|
||||
|
||||
Simply run `npm install vue-chartjs`
|
||||
Simply run `npm install vue-chartjs@1.1.3`
|
||||
|
||||
## How to use
|
||||
|
||||
@@ -36,10 +25,10 @@ Just create your own component.
|
||||
// CommitChart.js
|
||||
import { Bar } from 'vue-chartjs'
|
||||
|
||||
export default Bar.extend({
|
||||
mounted () {
|
||||
export default BarChart.extend({
|
||||
ready () {
|
||||
// Overwriting base render method with actual data.
|
||||
this.renderChart({
|
||||
this.render({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
datasets: [
|
||||
{
|
||||
@@ -67,10 +56,10 @@ You can overwrite the default chart options. Just pass the options object as a s
|
||||
// MonthlyIncome.js
|
||||
import { Line } from 'vue-chartjs'
|
||||
|
||||
export default Line.extend({
|
||||
export default LineChart.extend({
|
||||
props: [data, options],
|
||||
mounted () {
|
||||
this.renderChart(this.data, this.options)
|
||||
ready () {
|
||||
this.render(this.data, this.options)
|
||||
}
|
||||
})
|
||||
```
|
||||
@@ -92,30 +81,6 @@ export default {
|
||||
</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
|
||||
|
||||
### Bar Chart
|
||||
|
||||
@@ -16,7 +16,6 @@ module.exports = {
|
||||
extensions: ['', '.js', '.vue'],
|
||||
fallback: [path.join(__dirname, '../node_modules')],
|
||||
alias: {
|
||||
'vue': 'vue/dist/vue.js',
|
||||
'src': path.resolve(__dirname, '../src'),
|
||||
'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>
|
||||
</head>
|
||||
<body>
|
||||
<div id="app">
|
||||
<app></app>
|
||||
</div>
|
||||
<!-- built files will be auto injected -->
|
||||
</body>
|
||||
</html>
|
||||
|
||||
67
package.json
67
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "vue-chartjs",
|
||||
"version": "2.2.0",
|
||||
"version": "1.2.0",
|
||||
"description": "Vue wrapper for chart.js",
|
||||
"author": "Jakub Juszczak <jakub@nextindex.de>",
|
||||
"repository": {
|
||||
@@ -15,76 +15,77 @@
|
||||
"Charts"
|
||||
],
|
||||
"main": "dist/vue-chartjs.js",
|
||||
"files": [
|
||||
"dist"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "node build/dev-server.js",
|
||||
"build": "node build/build.js",
|
||||
"unit": "karma start test/unit/karma.conf.js --single-run",
|
||||
"e2e": "node test/e2e/runner.js",
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
"babel-runtime": "^6.11.6",
|
||||
"chart.js": "^2.2.1",
|
||||
"vue": "^2.0.1"
|
||||
"babel-runtime": "^6.0.0",
|
||||
"chart.js": "^2.6.0",
|
||||
"vue": "^1.0.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"babel-core": "^6.10.4",
|
||||
"babel-core": "^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-stage-2": "^6.0.0",
|
||||
"chai": "^3.5.0",
|
||||
"chromedriver": "^2.21.2",
|
||||
"connect-history-api-fallback": "^1.1.0",
|
||||
"cross-spawn": "^4.0.2",
|
||||
"css-loader": "^0.25.0",
|
||||
"eslint": "^3.7.1",
|
||||
"eslint-config-standard": "^6.2.0",
|
||||
"cross-spawn": "^2.1.5",
|
||||
"css-loader": "^0.23.0",
|
||||
"eslint": "^2.10.2",
|
||||
"eslint-config-standard": "^5.1.0",
|
||||
"eslint-friendly-formatter": "^2.0.5",
|
||||
"eslint-loader": "^1.3.0",
|
||||
"eslint-plugin-html": "^1.3.0",
|
||||
"eslint-plugin-promise": "^2.0.1",
|
||||
"eslint-plugin-standard": "^2.0.1",
|
||||
"eslint-plugin-promise": "^1.0.8",
|
||||
"eslint-plugin-standard": "^1.3.2",
|
||||
"eventsource-polyfill": "^0.9.6",
|
||||
"express": "^4.13.3",
|
||||
"extract-text-webpack-plugin": "^1.0.1",
|
||||
"file-loader": "^0.9.0",
|
||||
"file-loader": "^0.8.4",
|
||||
"function-bind": "^1.0.2",
|
||||
"html-webpack-plugin": "^2.8.1",
|
||||
"http-proxy-middleware": "^0.17.2",
|
||||
"http-proxy-middleware": "^0.12.0",
|
||||
"inject-loader": "^2.0.1",
|
||||
"isparta-loader": "^2.0.0",
|
||||
"jasmine-core": "^2.5.2",
|
||||
"json-loader": "^0.5.4",
|
||||
"karma": "^1.3.0",
|
||||
"karma-coverage": "^1.1.1",
|
||||
"karma-jasmine": "^1.0.2",
|
||||
"karma-mocha": "^1.2.0",
|
||||
"karma": "^0.13.15",
|
||||
"karma-coverage": "^0.5.5",
|
||||
"karma-mocha": "^0.2.2",
|
||||
"karma-phantomjs-launcher": "^1.0.0",
|
||||
"karma-sinon-chai": "^1.2.0",
|
||||
"karma-sourcemap-loader": "^0.3.7",
|
||||
"karma-spec-reporter": "0.0.26",
|
||||
"karma-spec-reporter": "0.0.24",
|
||||
"karma-webpack": "^1.7.0",
|
||||
"lodash": "^4.16.3",
|
||||
"lodash": "^4.15.0",
|
||||
"lolex": "^1.4.0",
|
||||
"mocha": "^3.1.0",
|
||||
"nightwatch": "^0.9.8",
|
||||
"ora": "^0.3.0",
|
||||
"phantomjs-prebuilt": "^2.1.13",
|
||||
"selenium-server": "^2.53.1",
|
||||
"shelljs": "^0.7.4",
|
||||
"mocha": "^2.4.5",
|
||||
"nightwatch": "^0.8.18",
|
||||
"ora": "^0.2.0",
|
||||
"phantomjs-prebuilt": "^2.1.3",
|
||||
"selenium-server": "2.53.0",
|
||||
"shelljs": "^0.6.0",
|
||||
"sinon": "^1.17.3",
|
||||
"sinon-chai": "^2.8.0",
|
||||
"url-loader": "^0.5.7",
|
||||
"vue-hot-reload-api": "^2.0.6",
|
||||
"vue-html-loader": "^1.2.3",
|
||||
"vue-loader": "^9.3.0",
|
||||
"vue-hot-reload-api": "^1.2.0",
|
||||
"vue-html-loader": "^1.0.0",
|
||||
"vue-loader": "^8.3.0",
|
||||
"vue-style-loader": "^1.0.0",
|
||||
"webpack": "^1.13.2",
|
||||
"webpack": "^1.12.2",
|
||||
"webpack-dev-middleware": "^1.4.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({
|
||||
template: `
|
||||
<div>
|
||||
<canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
|
||||
<canvas id="{{chartId}}" width="{{width}}" height="{{height}}" v-el:canvas></canvas>
|
||||
</div>
|
||||
`,
|
||||
|
||||
@@ -49,12 +49,12 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderChart (data, options, type) {
|
||||
render (data, options) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
|
||||
this._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
type: type || 'bar',
|
||||
this.$els.canvas.getContext('2d'), {
|
||||
type: 'bar',
|
||||
data: data,
|
||||
options: chartOptions
|
||||
}
|
||||
@@ -63,6 +63,8 @@ export default Vue.extend({
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this._chart.destroy()
|
||||
if (this._chart) {
|
||||
this._chart.destroy()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
|
||||
export default Vue.extend({
|
||||
template: `
|
||||
<div>
|
||||
<canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
|
||||
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||
</div>
|
||||
`,
|
||||
|
||||
@@ -27,33 +27,16 @@ export default Vue.extend({
|
||||
data () {
|
||||
return {
|
||||
defaultOptions: {
|
||||
scales: {
|
||||
yAxes: [{
|
||||
ticks: {
|
||||
beginAtZero: true
|
||||
},
|
||||
gridLines: {
|
||||
display: false
|
||||
}
|
||||
}],
|
||||
xAxes: [ {
|
||||
gridLines: {
|
||||
display: false
|
||||
},
|
||||
categoryPercentage: 0.5,
|
||||
barPercentage: 0.2
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderChart (data, options) {
|
||||
render (data, options) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
|
||||
this._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
this.$els.canvas.getContext('2d'), {
|
||||
type: 'bubble',
|
||||
data: data,
|
||||
options: chartOptions
|
||||
@@ -63,6 +46,8 @@ export default Vue.extend({
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this._chart.destroy()
|
||||
if (this._chart) {
|
||||
this._chart.destroy()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
|
||||
export default Vue.extend({
|
||||
template: `
|
||||
<div>
|
||||
<canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
|
||||
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||
</div>
|
||||
`,
|
||||
|
||||
@@ -32,11 +32,11 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderChart (data, options) {
|
||||
render (data, options) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
|
||||
this._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
this.$els.canvas.getContext('2d'), {
|
||||
type: 'doughnut',
|
||||
data: data,
|
||||
options: chartOptions
|
||||
@@ -46,6 +46,8 @@ export default Vue.extend({
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this._chart.destroy()
|
||||
if (this._chart) {
|
||||
this._chart.destroy()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
|
||||
export default Vue.extend({
|
||||
template: `
|
||||
<div>
|
||||
<canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
|
||||
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||
</div>
|
||||
`,
|
||||
|
||||
@@ -47,11 +47,11 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderChart (data, options) {
|
||||
render (data, options) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
|
||||
this._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
this.$els.canvas.getContext('2d'), {
|
||||
type: 'line',
|
||||
data: data,
|
||||
options: chartOptions
|
||||
@@ -61,6 +61,8 @@ export default Vue.extend({
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this._chart.destroy()
|
||||
if (this._chart) {
|
||||
this._chart.destroy()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
|
||||
export default Vue.extend({
|
||||
template: `
|
||||
<div>
|
||||
<canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
|
||||
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||
</div>
|
||||
`,
|
||||
|
||||
@@ -32,11 +32,11 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderChart (data, options) {
|
||||
render (data, options) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
|
||||
this._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
this.$els.canvas.getContext('2d'), {
|
||||
type: 'pie',
|
||||
data: data,
|
||||
options: chartOptions
|
||||
@@ -46,6 +46,8 @@ export default Vue.extend({
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this._chart.destroy()
|
||||
if (this._chart) {
|
||||
this._chart.destroy()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
|
||||
export default Vue.extend({
|
||||
template: `
|
||||
<div>
|
||||
<canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
|
||||
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||
</div>
|
||||
`,
|
||||
|
||||
@@ -32,11 +32,11 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderChart (data, options) {
|
||||
render (data, options) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
|
||||
this._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
this.$els.canvas.getContext('2d'), {
|
||||
type: 'polarArea',
|
||||
data: data,
|
||||
options: chartOptions
|
||||
@@ -46,6 +46,8 @@ export default Vue.extend({
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this._chart.destroy()
|
||||
if (this._chart) {
|
||||
this._chart.destroy()
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
@@ -5,7 +5,7 @@ import { mergeOptions } from '../helpers/options'
|
||||
export default Vue.extend({
|
||||
template: `
|
||||
<div>
|
||||
<canvas :id="chartId" :width="width" :height="height" ref="canvas"></canvas>
|
||||
<canvas id="{{chartId}}" width={{width}} height={{height}} v-el:canvas></canvas>
|
||||
</div>
|
||||
`,
|
||||
|
||||
@@ -32,11 +32,11 @@ export default Vue.extend({
|
||||
},
|
||||
|
||||
methods: {
|
||||
renderChart (data, options) {
|
||||
render (data, options) {
|
||||
let chartOptions = mergeOptions(this.defaultOptions, options)
|
||||
|
||||
this._chart = new Chart(
|
||||
this.$refs.canvas.getContext('2d'), {
|
||||
this.$els.canvas.getContext('2d'), {
|
||||
type: 'radar',
|
||||
data: data,
|
||||
options: chartOptions
|
||||
@@ -46,6 +46,8 @@ export default Vue.extend({
|
||||
}
|
||||
},
|
||||
beforeDestroy () {
|
||||
this._chart.destroy()
|
||||
if (this._chart) {
|
||||
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>
|
||||
<div class="container">
|
||||
<bar-example></bar-example>
|
||||
<reactive-example></reactive-example>
|
||||
<line-example></line-example>
|
||||
<doughnut-example></doughnut-example>
|
||||
<pie-example></pie-example>
|
||||
@@ -19,8 +18,6 @@
|
||||
import RadarExample from './RadarExample'
|
||||
import PolarAreaExample from './PolarAreaExample'
|
||||
import BubbleExample from './BubbleExample'
|
||||
import ReactiveExample from './ReactiveExample'
|
||||
import ReactivePropExample from './ReactivePropExample'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@@ -30,9 +27,7 @@
|
||||
PieExample,
|
||||
RadarExample,
|
||||
PolarAreaExample,
|
||||
BubbleExample,
|
||||
ReactiveExample,
|
||||
ReactivePropExample
|
||||
BubbleExample
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import BarChart from '../BaseCharts/Bar'
|
||||
|
||||
export default BarChart.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
ready () {
|
||||
this.render({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
|
||||
datasets: [
|
||||
{
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import BubbleChart from '../BaseCharts/Bubble'
|
||||
|
||||
export default BubbleChart.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
ready () {
|
||||
this.render({
|
||||
datasets: [
|
||||
{
|
||||
label: 'Data One',
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import DoughnutChart from '../BaseCharts/Doughnut'
|
||||
|
||||
export default DoughnutChart.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
ready () {
|
||||
this.render({
|
||||
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
||||
datasets: [
|
||||
{
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import LineChart from '../BaseCharts/Line'
|
||||
|
||||
export default LineChart.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
ready () {
|
||||
this.render({
|
||||
labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
|
||||
datasets: [
|
||||
{
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import PieChart from '../BaseCharts/Pie'
|
||||
|
||||
export default PieChart.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
ready () {
|
||||
this.render({
|
||||
labels: ['VueJs', 'EmberJs', 'ReactJs', 'AngularJs'],
|
||||
datasets: [
|
||||
{
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import PolarAreaChart from '../BaseCharts/PolarArea'
|
||||
|
||||
export default PolarAreaChart.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
ready () {
|
||||
this.render({
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
datasets: [
|
||||
{
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
import RadarChart from '../BaseCharts/Radar'
|
||||
|
||||
export default RadarChart.extend({
|
||||
mounted () {
|
||||
this.renderChart({
|
||||
ready () {
|
||||
this.render({
|
||||
labels: ['Eating', 'Drinking', 'Sleeping', 'Designing', 'Coding', 'Cycling', 'Running'],
|
||||
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 Radar from './BaseCharts/Radar'
|
||||
import Bubble from './BaseCharts/Bubble'
|
||||
import reactiveProp from './mixins/reactiveProp'
|
||||
import reactiveData from './mixins/reactiveData'
|
||||
import Scatter from './BaseCharts/Scatter'
|
||||
|
||||
const VueCharts = {
|
||||
Bar,
|
||||
@@ -16,8 +15,7 @@ const VueCharts = {
|
||||
PolarArea,
|
||||
Radar,
|
||||
Bubble,
|
||||
reactiveProp,
|
||||
reactiveData
|
||||
Scatter
|
||||
}
|
||||
|
||||
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": {
|
||||
"expect": true,
|
||||
"jasmine": true,
|
||||
"sinon": true
|
||||
}
|
||||
}
|
||||
|
||||
@@ -54,7 +54,7 @@ module.exports = function (config) {
|
||||
// http://karma-runner.github.io/0.13/config/browsers.html
|
||||
// 2. add it to the `browsers` array below.
|
||||
browsers: ['PhantomJS'],
|
||||
frameworks: ['mocha', 'sinon-chai', 'jasmine'],
|
||||
frameworks: ['mocha', 'sinon-chai'],
|
||||
reporters: ['spec', 'coverage'],
|
||||
files: ['./index.js'],
|
||||
preprocessors: {
|
||||
|
||||
@@ -2,30 +2,16 @@ import Vue from 'vue'
|
||||
import BarChart from 'src/examples/BarExample'
|
||||
|
||||
describe('BarChart', () => {
|
||||
let el
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div')
|
||||
})
|
||||
|
||||
it('should render a canvas', () => {
|
||||
const vm = new Vue({
|
||||
el: 'body',
|
||||
replace: false,
|
||||
template: '<bar-chart></bar-chart>',
|
||||
components: { BarChart }
|
||||
}).$mount(el)
|
||||
|
||||
})
|
||||
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('null')
|
||||
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'
|
||||
|
||||
describe('BubbleChart', () => {
|
||||
let el
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div')
|
||||
})
|
||||
|
||||
it('should render a canvas', () => {
|
||||
const vm = new Vue({
|
||||
el: 'body',
|
||||
replace: false,
|
||||
template: '<bubble-chart></bubble-chart>',
|
||||
components: { BubbleChart }
|
||||
}).$mount(el)
|
||||
|
||||
})
|
||||
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('null')
|
||||
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'
|
||||
|
||||
describe('DoughnutChart', () => {
|
||||
let el
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div')
|
||||
})
|
||||
|
||||
it('should render a canvas', () => {
|
||||
const vm = new Vue({
|
||||
el: 'body',
|
||||
replace: false,
|
||||
template: '<doughnut-chart></doughnut-chart>',
|
||||
components: { DoughnutChart }
|
||||
}).$mount(el)
|
||||
|
||||
})
|
||||
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('null')
|
||||
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'
|
||||
|
||||
describe('LineChart', () => {
|
||||
let el
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div')
|
||||
})
|
||||
|
||||
it('should render a canvas', () => {
|
||||
const vm = new Vue({
|
||||
el: 'body',
|
||||
replace: false,
|
||||
template: '<line-chart></line-chart>',
|
||||
components: { LineChart }
|
||||
}).$mount(el)
|
||||
|
||||
})
|
||||
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('null')
|
||||
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'
|
||||
|
||||
describe('PieChart', () => {
|
||||
let el
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div')
|
||||
})
|
||||
|
||||
it('should render a canvas', () => {
|
||||
const vm = new Vue({
|
||||
el: 'body',
|
||||
replace: false,
|
||||
template: '<pie-chart></pie-chart>',
|
||||
components: { PieChart }
|
||||
}).$mount(el)
|
||||
|
||||
})
|
||||
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('null')
|
||||
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'
|
||||
|
||||
describe('PolarChart', () => {
|
||||
let el
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div')
|
||||
})
|
||||
|
||||
it('should render a canvas', () => {
|
||||
const vm = new Vue({
|
||||
el: 'body',
|
||||
replace: false,
|
||||
template: '<polar-chart></polar-chart>',
|
||||
components: { PolarChart }
|
||||
}).$mount(el)
|
||||
|
||||
})
|
||||
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('null')
|
||||
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'
|
||||
|
||||
describe('RadarChart', () => {
|
||||
let el
|
||||
|
||||
beforeEach(() => {
|
||||
el = document.createElement('div')
|
||||
})
|
||||
|
||||
it('should render a canvas', () => {
|
||||
const vm = new Vue({
|
||||
el: 'body',
|
||||
replace: false,
|
||||
template: '<radar-chart></radar-chart>',
|
||||
components: { RadarChart }
|
||||
}).$mount(el)
|
||||
|
||||
})
|
||||
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('null')
|
||||
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