💎 Release new version 2.5.1

separate HorizontalBar component added

CHANGELOG.md

@@ -1,5 +1,21 @@
 # Change Log
 
+## [v2.5.0](https://github.com/apertureless/vue-chartjs/tree/v2.5.0) (2017-03-08)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.4.1...v2.5.0)
+
+**Closed issues:**
+
+- UglifyJs is not happy with versions after 2.3.8 [\#54](https://github.com/apertureless/vue-chartjs/issues/54)
+- Why "main"  in Package.json is "src/index.js" and not "dist/vue-chartjs.js" [\#53](https://github.com/apertureless/vue-chartjs/issues/53)
+- Adding static data and dynamic data at the same time.  [\#52](https://github.com/apertureless/vue-chartjs/issues/52)
+
+**Merged pull requests:**
+
+- separate HorizontalBar component added [\#56](https://github.com/apertureless/vue-chartjs/pull/56) ([imbashamba](https://github.com/imbashamba))
+
+## [v2.4.1](https://github.com/apertureless/vue-chartjs/tree/v2.4.1) (2017-03-04)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.4.0...v2.4.1)
+
 ## [v2.4.0](https://github.com/apertureless/vue-chartjs/tree/v2.4.0) (2017-03-03)
 [Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.9...v2.4.0)
 

README.md

@@ -118,6 +118,7 @@ However you can simply implement this by your own or use one of the two mixins w
 Both are included in the `mixins` module.
 
 The mixins automatically create `chartData` as a prop or data. And add a watcher. If data has changed, the chart will update.
+However keep in mind the limitations of vue and javascript for mutations on arrays and objects. More info [here](http://vue-chartjs.org/#/home?id=reactive-data)
 
 ```javascript
 // MonthlyIncome.js
@@ -177,29 +178,20 @@ export default Line.extend({
 })
 ```
 
-## Webpack & Bundling tools
-There are now two version the main entry point is `src/index.js` which is the ES6 source, unbundled.
-If you're using webpack it is recommended to use this one. Because the bundled umd version has vue.js and chart.js bundled into it.
+## Webpack, Browserify and dist files.
 
-However if you have problems o you can import the dist file
+If you use `import VueCharts from 'vue-chartjs'` you will mostly import the UMD build of vue-chart.js
+This is because of compatibility reasons. This approach however has a downside: vue.js and chart.js are bundled into the file.
+And you end up with two vue instances.
+
+If you're using webpack 2 however, it will automatically import the transpiled ES sources.
+If you know what you're doing you can import directly from the transpiled es sources:
 
 ```
-import VueCharts from 'vue-chartjs/dist/vue-chartjs'
-// or
-import { Line } from 'vue-chartjs/dist/vue-chartjs'
+import { Line } from 'vue-chartjs/es'
 ```
 
-Or you can set an alias.
 
-### Browserify
-
-In order for a browserify user to transpile the code, they would need to install `babelify` and `babel-preset-es2015` and add a .babelrc file in the root of their project with the following code:
-
-```
-{
-"presets": ["es2015"]
-}
-```
 ## Available Charts
 
 ### Bar Chart

docs/README.md

@@ -239,6 +239,18 @@ export default Line.extend({
 </style>
 ```
 
+<p class="warning">
+  ⚠ Attention: If you mutate your data in a parent component and pass it to your child chart component keep in mind the javascript limitiations.
+  More info in this [issue#44](https://github.com/apertureless/vue-chartjs/issues/44)
+</p>
+
+### Limitations
+  <ul>
+    <li>[Caveats](https://vuejs.org/v2/guide/list.html#Caveats)</li>
+    <li>[Change-Detection-Caveats](https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats)</li>
+    <li>[vm.$watch](https://vuejs.org/v2/api/#vm-watch)</li>
+  </ul>
+
 ## Chart.js object
 
 Sometimes you need more control over chart.js. Thats why you can access the chart.js instance over `this._chart`
@@ -247,11 +259,7 @@ Sometimes you need more control over chart.js. Thats why you can access the char
 
 ### Bar Chart
 <p class="tip">
-  The bar chart has an **optional** third parameter, which is the type.
-  The default type is `bar` but you can pass `horizontalBar` if you want horizontal bars.
-
-  `renderChart (data, options, type) {}`
-
+  There are two versions of the Bar chart. `{Bar}` and `{HorizontalBar}`
 </p>
 
 ![Bar](assets/bar.png)
@@ -279,20 +287,19 @@ Sometimes you need more control over chart.js. Thats why you can access the char
 
 ![Bubble](assets/bubble.png)
 
-## Webpack & Bundling tools
-There are now two version the main entry point is `src/index.js` which is the ES6 source, unbundled.
-If you're using webpack it is recommended to use this one. Because the bundled umd version has vue.js and chart.js bundled into it.
+## Webpack, Browserify and dist files.
 
-However if you have problems o you can import the dist file
+If you use `import VueCharts from 'vue-chartjs'` you will mostly import the UMD build of vue-chart.js
+This is because of compatibility reasons. This approach however has a downside: vue.js and chart.js are bundled into the file.
+And you end up with two vue instances.
+
+If you're using webpack 2 or rollup however, it will automatically import the transpiled ES sources.
+If you know what you're doing you can import directly from the transpiled es sources:
 
 ```
-import VueCharts from 'vue-chartjs/dist/vue-chartjs'
-// or
-import { Line } from 'vue-chartjs/dist/vue-chartjs'
+import { Line } from 'vue-chartjs/es'
 ```
 
-Or you can set an alias.
-
 ### Browserify
 
 In order for a browserify user to transpile the code, they would need to install `babelify` and `babel-preset-es2015` and add a .babelrc file in the root of their project with the following code:

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "2.4.1",
+  "version": "2.5.1",
   "description": "vue.js wrapper for chart.js",
   "author": "Jakub Juszczak <jakub@posteo.de>",
   "homepage": "http://vue-chartjs.org",
@@ -58,6 +58,7 @@
   },
   "dependencies": {
     "chart.js": "^2.5.0",
+    "lodash": "^4.17.4",
     "vue": "^2.2.1"
   },
   "devDependencies": {
@@ -101,7 +102,6 @@
     "karma-sourcemap-loader": "^0.3.7",
     "karma-spec-reporter": "0.0.26",
     "karma-webpack": "^1.7.0",
-    "lodash": "^4.17.4",
     "lolex": "^1.4.0",
     "mocha": "^3.1.0",
     "nightwatch": "^0.9.8",

src/BaseCharts/Bar.js

@@ -65,7 +65,7 @@ export default Vue.extend({
       let chartOptions = mergeOptions(this.defaultOptions, options)
       this._chart = new Chart(
         this.$refs.canvas.getContext('2d'), {
-          type: type || 'bar',
+          type: 'bar',
           data: data,
           options: chartOptions
         }

src/BaseCharts/HorizontalBar.js

@@ -0,0 +1,79 @@
+import Vue from 'vue'
+import Chart from 'chart.js'
+import { mergeOptions } from '../helpers/options'
+
+export default Vue.extend({
+  render: function (createElement) {
+    return createElement(
+      'div',
+      [
+        createElement(
+          'canvas', {
+            attrs: {
+              id: this.chartId,
+              width: this.width,
+              height: this.height
+            },
+            ref: 'canvas'
+          }
+        )
+      ]
+    )
+  },
+
+  props: {
+    chartId: {
+      default: 'horizontalbar-chart',
+      type: String
+    },
+    width: {
+      default: 400,
+      type: Number
+    },
+    height: {
+      default: 400,
+      type: Number
+    }
+  },
+
+  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, type) {
+      let chartOptions = mergeOptions(this.defaultOptions, options)
+      this._chart = new Chart(
+        this.$refs.canvas.getContext('2d'), {
+          type: 'horizontalBar',
+          data: data,
+          options: chartOptions
+        }
+      )
+      this._chart.generateLegend()
+    }
+  },
+  beforeDestroy () {
+    this._chart.destroy()
+  }
+})

src/examples/HorizontalBarExample.js

@@ -0,0 +1,16 @@
+import HorizontalBarChart from '../BaseCharts/HorizontalBar'
+
+export default HorizontalBarChart.extend({
+  mounted () {
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+      datasets: [
+        {
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+        }
+      ]
+    }, {responsive: true, maintainAspectRatio: false})
+  }
+})

src/index.js

@@ -1,4 +1,5 @@
 import Bar from './BaseCharts/Bar'
+import HorizontalBar from './BaseCharts/HorizontalBar'
 import Doughnut from './BaseCharts/Doughnut'
 import Line from './BaseCharts/Line'
 import Pie from './BaseCharts/Pie'
@@ -9,6 +10,7 @@ import mixins from './mixins/index.js'
 
 const VueCharts = {
   Bar,
+  HorizontalBar,
   Doughnut,
   Line,
   Pie,
@@ -23,6 +25,7 @@ export default VueCharts
 export {
   VueCharts,
   Bar,
+  HorizontalBar,
   Doughnut,
   Line,
   Pie,

test/unit/specs/HorizontalBar.spec.js

@@ -0,0 +1,64 @@
+import Vue from 'vue'
+import HorizontalBarChart from 'src/examples/HorizontalBarExample'
+
+describe('HorizontalBarChart', () => {
+  let el
+
+  beforeEach(() => {
+    el = document.createElement('div')
+  })
+
+  it('should render a canvas', () => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          HorizontalBarChart
+        )
+      },
+      components: { HorizontalBarChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#horizontalbar-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({
+      render: function (createElement) {
+        return createElement(
+          HorizontalBarChart, {
+            props: {
+              chartId: 'horizontalbarchartprop'
+            }
+          }
+        )
+      },
+      components: { HorizontalBarChart }
+    }).$mount(el)
+
+    expect(vm.$el.querySelector('#horizontalbarchartprop')).not.to.be.an('undefined')
+  })
+
+  it('should destroy chart instance', (done) => {
+    const vm = new Vue({
+      render: function (createElement) {
+        return createElement(
+          HorizontalBarChart
+        )
+      },
+      components: { HorizontalBarChart }
+    }).$mount(el)
+
+    expect(vm.$children[0]._chart.chart.ctx).not.to.be.null
+
+    vm.$destroy()
+
+    vm.$nextTick(() => {
+      vm.$forceUpdate()
+      expect(vm.$children[0]._chart.chart.ctx).to.be.null
+      done()
+    })
+  })
+})