Skip to content

Commit

Permalink
Merge pull request #11 from apertureless/feature/reactive_chart_data
Browse files Browse the repository at this point in the history
WIP Feature/reactive chart data #11
  • Loading branch information
apertureless authored Oct 15, 2016
2 parents ae93b96 + 6f77de8 commit 2df29e1
Show file tree
Hide file tree
Showing 12 changed files with 224 additions and 16 deletions.
28 changes: 26 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ Just create your own component.
// CommitChart.js
import { Bar } from 'vue-chartjs'

export default BarChart.extend({
export default Bar.extend({
mounted () {
// Overwriting base render method with actual data.
this.renderChart({
Expand Down Expand Up @@ -67,7 +67,7 @@ You can overwrite the default chart options. Just pass the options object as a s
// MonthlyIncome.js
import { Line } from 'vue-chartjs'

export default LineChart.extend({
export default Line.extend({
props: [data, options],
mounted () {
this.renderChart(this.data, this.options)
Expand All @@ -92,6 +92,30 @@ 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
Expand Down
34 changes: 34 additions & 0 deletions codecov.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
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
24 changes: 13 additions & 11 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -38,9 +38,9 @@
"chai": "^3.5.0",
"chromedriver": "^2.21.2",
"connect-history-api-fallback": "^1.1.0",
"cross-spawn": "^2.1.5",
"cross-spawn": "^4.0.2",
"css-loader": "^0.25.0",
"eslint": "^3.7.0",
"eslint": "^3.7.1",
"eslint-config-standard": "^6.2.0",
"eslint-friendly-formatter": "^2.0.5",
"eslint-loader": "^1.3.0",
Expand All @@ -56,23 +56,25 @@
"http-proxy-middleware": "^0.17.2",
"inject-loader": "^2.0.1",
"isparta-loader": "^2.0.0",
"jasmine-core": "^2.5.2",
"json-loader": "^0.5.4",
"karma": "^0.13.15",
"karma-coverage": "^0.5.5",
"karma-mocha": "^0.2.2",
"karma": "^1.3.0",
"karma-coverage": "^1.1.1",
"karma-jasmine": "^1.0.2",
"karma-mocha": "^1.2.0",
"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-webpack": "^1.7.0",
"lodash": "^4.15.0",
"lodash": "^4.16.3",
"lolex": "^1.4.0",
"mocha": "^3.1.0",
"nightwatch": "^0.8.18",
"ora": "^0.2.0",
"phantomjs-prebuilt": "^2.1.3",
"nightwatch": "^0.9.8",
"ora": "^0.3.0",
"phantomjs-prebuilt": "^2.1.13",
"selenium-server": "^2.53.1",
"shelljs": "^0.6.0",
"shelljs": "^0.7.4",
"sinon": "^1.17.3",
"sinon-chai": "^2.8.0",
"url-loader": "^0.5.7",
Expand All @@ -83,6 +85,6 @@
"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.4.0",
"webpack-hot-middleware": "^2.6.0",
"webpack-merge": "^0.8.3"
"webpack-merge": "^0.14.1"
}
}
15 changes: 14 additions & 1 deletion src/examples/App.vue
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<template>
<div class="container">
<bar-example></bar-example>
<reactive-example></reactive-example>
<line-example></line-example>
<doughnut-example></doughnut-example>
<pie-example></pie-example>
Expand All @@ -18,9 +19,21 @@
import RadarExample from './RadarExample'
import PolarAreaExample from './PolarAreaExample'
import BubbleExample from './BubbleExample'
import ReactiveExample from './ReactiveExample'
import ReactivePropExample from './ReactivePropExample'
export default {
components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample, BubbleExample }
components: {
BarExample,
LineExample,
DoughnutExample,
PieExample,
RadarExample,
PolarAreaExample,
BubbleExample,
ReactiveExample,
ReactivePropExample
}
}
</script>

Expand Down
41 changes: 41 additions & 0 deletions src/examples/ReactiveExample.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
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
}
}
})
10 changes: 10 additions & 0 deletions src/examples/ReactivePropExample.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import BarChart from '../BaseCharts/Bar'
import reactiveData from '../mixins/reactiveProp'

export default BarChart.extend({
mixins: [reactiveData],

mounted () {
this.renderChart(this.chartData)
}
})
6 changes: 5 additions & 1 deletion src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ 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'

const VueCharts = {
Bar,
Expand All @@ -13,7 +15,9 @@ const VueCharts = {
Pie,
PolarArea,
Radar,
Bubble
Bubble,
reactiveProp,
reactiveData
}

module.exports = VueCharts
44 changes: 44 additions & 0 deletions src/mixins/reactiveData.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
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)
}
}
}
35 changes: 35 additions & 0 deletions src/mixins/reactiveProp.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
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)
}
}
}
}
}
}
1 change: 1 addition & 0 deletions test/unit/.eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@
},
"globals": {
"expect": true,
"jasmine": true,
"sinon": true
}
}
2 changes: 1 addition & 1 deletion test/unit/karma.conf.js
Original file line number Diff line number Diff line change
Expand Up @@ -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'],
frameworks: ['mocha', 'sinon-chai', 'jasmine'],
reporters: ['spec', 'coverage'],
files: ['./index.js'],
preprocessors: {
Expand Down
Empty file.

0 comments on commit 2df29e1

Please sign in to comment.