Compare commits

..

20 Commits

Author SHA1 Message Date
Jakub Juszczak
98961547f3 💎 Release new version 1.1.3 2016-09-08 13:39:30 +02:00
Jakub Juszczak
c11127e64f 1.1.3 2016-09-08 13:38:52 +02:00
Jakub Juszczak
0f98800b92 Add prepublish command to package.json for np 2016-09-08 13:34:05 +02:00
Jakub Juszczak
8eefeeef86 📝 Update README with badges 2016-09-08 13:30:19 +02:00
Jakub Juszczak
d913e9c515 Add unit tests and travis.yml 2016-09-08 13:21:20 +02:00
Jakub Juszczak
377ae5e27a Change example location to src folder for easier testing 2016-09-08 13:06:36 +02:00
Jakub Juszczak
9bcffae429 Add missing image for readme 2016-09-08 12:12:25 +02:00
Jakub Juszczak
086fb1d4e9 Add BubbleExample to app.vue 2016-09-08 12:12:15 +02:00
Jakub Juszczak
f241613107 Add canvas id as prop 2016-09-08 12:08:19 +02:00
Jakub Juszczak
af373cf09d 📝 Add BubbleChart Preview to README 2016-09-08 12:04:36 +02:00
Jakub Juszczak
a7776f8407 Add bubbleChart example 2016-09-08 12:03:15 +02:00
Jakub
776f3976ec Merge pull request #9 from jcalonso/feature/bubble-chart
Add bubble chart type
2016-09-08 11:49:31 +02:00
Juan Carlos Alonso
3785e73b43 Added bubble chart type 2016-09-07 22:50:18 +01:00
Jakub Juszczak
9bf6e6078d 📝 Update CHANGELOG
Signed-off-by: Jakub Juszczak <netghost03@gmail.com>
2016-09-07 10:38:43 +02:00
Jakub Juszczak
e62e8c81fb Update npm version
Signed-off-by: Jakub Juszczak <netghost03@gmail.com>
2016-09-07 10:30:07 +02:00
Jakub Juszczak
9f79fb581d 🔥 Remove placeholder test
Signed-off-by: Jakub Juszczak <netghost03@gmail.com>
2016-09-07 10:29:56 +02:00
Jakub Juszczak
45d500d401 💎 Release new version 1.1.2
Signed-off-by: Jakub Juszczak <netghost03@gmail.com>
2016-09-07 10:24:07 +02:00
Jakub Juszczak
9f02e95355 🐛 Fix props 2016-09-07 10:19:05 +02:00
Jakub Juszczak
d80eace435 📝 Update CHANGELOG 2016-08-23 20:59:21 +02:00
Jakub Juszczak
d9f95fd737 💎 Release new version 1.1.1
Updated ChartJs
2016-08-23 20:55:04 +02:00
30 changed files with 114 additions and 223 deletions

View File

@@ -1,5 +1,15 @@
# 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)
[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/1.0.3...1.1.0)

View File

@@ -4,11 +4,9 @@
> VueJS wrapper for ChartJs
# 🚧 VUE 2.0 WIP ⚠
## Install
Simply run `npm install vue-chartjs@next`
Simply run `npm install vue-chartjs`
## How to use
@@ -28,9 +26,9 @@ Just create your own component.
import { Bar } from 'vue-chartjs'
export default BarChart.extend({
mounted () {
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: [
{
@@ -60,8 +58,8 @@ import { Line } from 'vue-chartjs'
export default LineChart.extend({
props: [data, options],
mounted () {
this.renderChart(this.data, this.options)
ready () {
this.render(this.data, this.options)
}
})
```
@@ -109,17 +107,9 @@ export default {
![Pie](assets/polar.png)
## Todo
- [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
### Bubble
![Bubble](assets/bubble.png)
## Build Setup

BIN
assets/bubble.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 82 KiB

View File

@@ -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')
}

37
dist/vue-chartjs.js vendored

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@@ -5,9 +5,7 @@
<title>Vue-ChartJs</title>
</head>
<body>
<div id="app">
<app></app>
</div>
<!-- built files will be auto injected -->
</body>
</html>

View File

@@ -1,6 +1,6 @@
{
"name": "vue-chartjs",
"version": "2.1.0",
"version": "1.1.3",
"description": "Vue wrapper for chart.js",
"author": "Jakub Juszczak <jakub@nextindex.de>",
"repository": {
@@ -21,18 +21,18 @@
"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.0-rc.1"
"babel-runtime": "^6.0.0",
"chart.js": "^2.1.6",
"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",
@@ -76,11 +76,11 @@
"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.8.3"

View File

@@ -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,11 +49,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: 'bar',
data: data,
options: chartOptions

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -20,7 +20,15 @@
import BubbleExample from './BubbleExample'
export default {
components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample, BubbleExample }
components: {
BarExample,
LineExample,
DoughnutExample,
PieExample,
RadarExample,
PolarAreaExample,
BubbleExample
}
}
</script>

View File

@@ -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: [
{
@@ -11,6 +11,6 @@ export default BarChart.extend({
data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
}
]
})
}, {responsive: true, maintainAspectRatio: false})
}
})

View File

@@ -1,8 +1,8 @@
import BubbleChart from '../BaseCharts/Bubble'
export default BubbleChart.extend({
mounted () {
this.renderChart({
ready () {
this.render({
datasets: [
{
label: 'Data One',

View File

@@ -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: [
{

View File

@@ -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: [
{

View File

@@ -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: [
{

View File

@@ -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: [
{

View File

@@ -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: [
{

View File

@@ -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')
})
})

View File

@@ -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')
})
})

View File

@@ -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')
})
})

View File

@@ -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')
})
})

View File

@@ -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')
})
})

View File

@@ -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')
})
})

View File

@@ -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')
})
})