Merge branch 'develop'

* develop:
  💎 Release new version 2.5.4
  🔥 Remove browser field from npm

.gitignore

@@ -4,3 +4,5 @@ npm-debug.log
 selenium-debug.log
 test/unit/coverage
 test/e2e/reports
+dist/
+es/

CHANGELOG.md

@@ -2,7 +2,72 @@
 
 ## [Unreleased](https://github.com/apertureless/vue-chartjs/tree/HEAD)
 
-[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.8...HEAD)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.3...HEAD)
+
+**Closed issues:**
+
+- How to use without babel/webpack? [\#66](https://github.com/apertureless/vue-chartjs/issues/66)
+- The vue-chartjs/src entry point is still creating a new vue instance. [\#55](https://github.com/apertureless/vue-chartjs/issues/55)
+
+**Merged pull requests:**
+
+- Update dependencies to enable Greenkeeper 🌴 [\#65](https://github.com/apertureless/vue-chartjs/pull/65) ([greenkeeper[bot]](https://github.com/integration/greenkeeper))
+
+## [v2.5.3](https://github.com/apertureless/vue-chartjs/tree/v2.5.3) (2017-03-17)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.2...v2.5.3)
+
+**Closed issues:**
+
+- Cannot modify styling using options [\#60](https://github.com/apertureless/vue-chartjs/issues/60)
+
+## [v2.5.2](https://github.com/apertureless/vue-chartjs/tree/v2.5.2) (2017-03-14)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.1...v2.5.2)
+
+**Closed issues:**
+
+- TypeError: child.\_updateFromParent is not a function [\#62](https://github.com/apertureless/vue-chartjs/issues/62)
+- child.\_updateFromParent is not a function [\#59](https://github.com/apertureless/vue-chartjs/issues/59)
+- dependency was not found [\#58](https://github.com/apertureless/vue-chartjs/issues/58)
+
+**Merged pull requests:**
+
+- Develop [\#63](https://github.com/apertureless/vue-chartjs/pull/63) ([apertureless](https://github.com/apertureless))
+- Fix typo for legacy tag [\#61](https://github.com/apertureless/vue-chartjs/pull/61) ([kylestev](https://github.com/kylestev))
+
+## [v2.5.1](https://github.com/apertureless/vue-chartjs/tree/v2.5.1) (2017-03-11)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.0...v2.5.1)
+
+**Closed issues:**
+
+- Lines are looking weird. [\#57](https://github.com/apertureless/vue-chartjs/issues/57)
+- Working with objects [\#48](https://github.com/apertureless/vue-chartjs/issues/48)
+- Mixins don't seem to trigger a refresh of the chart [\#44](https://github.com/apertureless/vue-chartjs/issues/44)
+
+## [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)
+
+**Merged pull requests:**
+
+- Added browserify support [\#51](https://github.com/apertureless/vue-chartjs/pull/51) ([craigh411](https://github.com/craigh411))
+
+## [v2.3.9](https://github.com/apertureless/vue-chartjs/tree/v2.3.9) (2017-03-01)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.3.8...v2.3.9)
 
 **Closed issues:**
 
@@ -18,7 +83,6 @@
 
 **Closed issues:**
 
-- Mixins don't seem to trigger a refresh of the chart [\#44](https://github.com/apertureless/vue-chartjs/issues/44)
 - Colors of dynamically added bars in bar graph are the default color instead of specified color [\#42](https://github.com/apertureless/vue-chartjs/issues/42)
 
 **Merged pull requests:**

README.md

@@ -7,6 +7,8 @@
 [![Build Status](https://travis-ci.org/apertureless/vue-chartjs.svg?branch=master)](https://travis-ci.org/apertureless/vue-chartjs)
 [![Package Quality](http://npm.packagequality.com/shield/vue-chartjs.svg)](http://packagequality.com/#?package=vue-chartjs)
 [![npm](https://img.shields.io/npm/dm/localeval.svg)](https://www.npmjs.com/package/vue-chartjs)
+[![Gitter chat](https://img.shields.io/gitter/room/TechnologyAdvice/Stardust.svg)](https://gitter.im/vue-chartjs/Lobby)
+[![Greenkeeper badge](https://badges.greenkeeper.io/apertureless/vue-chartjs.svg)](https://greenkeeper.io/)
 [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
 
 # vue-chartjs
@@ -117,6 +119,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
@@ -176,6 +179,20 @@ export default Line.extend({
 })
 ```
 
+## Webpack, Browserify and dist files.
+
+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 { Line } from 'vue-chartjs/es'
+```
+
+
 ## Available Charts
 
 ### Bar Chart

build/webpack.release.js

@@ -12,7 +12,8 @@ module.exports = {
   output: {
     filename: './dist/[name].js',
     library: 'VueChartJs',
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    umdNamedDefine: true
   },
   module: {
     preLoaders: [

build/webpack.release.min.js

@@ -0,0 +1,18 @@
+var config = require('./webpack.release.js')
+var webpack = require('webpack')
+
+config.output.filename = config.output.filename.replace(/\.js$/, '.min.js')
+
+delete config.devtool
+
+config.plugins = [
+  new webpack.optimize.UglifyJsPlugin({
+    sourceMap: false,
+    compress: {
+      warnings: false
+    }
+  }),
+  new webpack.optimize.OccurenceOrderPlugin()
+]
+
+module.exports = config

docs/README.md

@@ -15,7 +15,7 @@ If you are working with Vue.js 2+ simple run:
 
 `yarn add vue-chartjs -S`
 
-If you are using vue 1.x please use the `legancy` tag. However the vue 1 version is not maintained anymore.
+If you are using vue 1.x please use the `legacy` tag. However the vue 1 version is not maintained anymore.
 
 `yarn add vue-chartjs@legacy -S`
 
@@ -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)
@@ -278,3 +286,26 @@ Sometimes you need more control over chart.js. Thats why you can access the char
 ### Bubble
 
 ![Bubble](assets/bubble.png)
+
+## Webpack, Browserify and dist files.
+
+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 { Line } from 'vue-chartjs/es'
+```
+
+### 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"]
+}
+```

package.json

@@ -1,12 +1,34 @@
 {
   "name": "vue-chartjs",
-  "version": "2.3.9",
+  "version": "2.5.4",
   "description": "vue.js wrapper for chart.js",
-  "author": "Jakub Juszczak <jakub@nextindex.de>",
+  "author": "Jakub Juszczak <jakub@posteo.de>",
+  "homepage": "http://vue-chartjs.org",
+  "license": "MIT",
+  "contributors": [
+    {
+      "name": "Thorsten Lünborg",
+      "web": "https://github.com/LinusBorg"
+    },
+    {
+      "name": "Juan Carlos Alonso",
+      "web": "https://github.com/jcalonso"
+    }
+  ],
+  "maintainers": [
+    {
+      "name": "Jakub Juszczak",
+      "email": "jakub@posteo.de",
+      "web": "http://www.jakubjuszczak.de"
+    }
+  ],
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com:apertureless/vue-chartjs.git"
   },
+  "bugs": {
+    "url": "https://github.com/apertureless/vue-chartjs/issues"
+  },
   "keywords": [
     "ChartJs",
     "Vue",
@@ -14,82 +36,111 @@
     "Wrapper",
     "Charts"
   ],
-  "main": "src/index.js",
+  "main": "dist/vue-chartjs.js",
+  "unpkg": "dist/vue-chartjs.min.js",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
   "files": [
     "src",
-    "dist"
+    "dist",
+    "es"
   ],
   "scripts": {
     "dev": "node build/dev-server.js",
-    "build": "node build/build.js",
+    "build": "yarn run release && yarn run build:es",
+    "build:es": "cross-env BABEL_ENV=es babel src --out-dir es",
     "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",
-    "release": "webpack --progress --hide-modules --config  ./build/webpack.release.js"
+    "release": "webpack --progress --hide-modules --config  ./build/webpack.release.js && NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.min.js",
+    "prepublish": "yarn run lint && yarn run test && yarn run build"
   },
   "dependencies": {
     "chart.js": "^2.5.0",
-    "vue": "^2.2.1"
+    "lodash": "^4.17.4",
+    "vue": "^2.2.4"
   },
   "devDependencies": {
-    "babel-runtime": "^6.23.0",
-    "babel-core": "^6.23.1",
-    "babel-loader": "^6.3.2",
+    "babel-cli": "^6.24.0",
+    "babel-core": "^6.24.0",
+    "babel-loader": "^6.4.1",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-es2015": "^6.22.0",
+    "babel-preset-es2015": "^6.24.0",
     "babel-preset-stage-2": "^6.22.0",
+    "babel-runtime": "^6.23.0",
     "chai": "^3.5.0",
-    "chromedriver": "^2.21.2",
+    "chromedriver": "^2.28.0",
     "connect-history-api-fallback": "^1.1.0",
-    "cross-spawn": "^5.0.1",
-    "css-loader": "^0.26.2",
-    "eslint": "^3.7.1",
-    "eslint-config-standard": "^6.2.0",
-    "eslint-friendly-formatter": "^2.0.5",
-    "eslint-loader": "^1.3.0",
-    "eslint-plugin-html": "^1.3.0",
-    "eslint-plugin-promise": "^3.4.0",
-    "eslint-plugin-standard": "^2.0.1",
+    "cross-env": "^3.2.4",
+    "cross-spawn": "^5.1.0",
+    "css-loader": "^0.27.3",
+    "eslint": "^3.18.0",
+    "eslint-config-standard": "^7.1.0",
+    "eslint-friendly-formatter": "^2.0.7",
+    "eslint-loader": "^1.6.3",
+    "eslint-plugin-html": "^2.0.1",
+    "eslint-plugin-promise": "^3.5.0",
+    "eslint-plugin-standard": "^2.1.1",
     "eventsource-polyfill": "^0.9.6",
-    "express": "^4.13.3",
+    "express": "^4.15.2",
     "extract-text-webpack-plugin": "^1.0.1",
-    "file-loader": "^0.9.0",
+    "file-loader": "^0.10.1",
     "function-bind": "^1.0.2",
     "html-webpack-plugin": "^2.28.0",
-    "http-proxy-middleware": "^0.17.2",
-    "inject-loader": "^3.0.0-beta2",
+    "http-proxy-middleware": "^0.17.4",
+    "inject-loader": "^3.0.0-beta4",
     "isparta-loader": "^2.0.0",
     "jasmine-core": "^2.5.2",
     "json-loader": "^0.5.4",
-    "karma": "^1.3.0",
+    "karma": "^1.5.0",
     "karma-coverage": "^1.1.1",
     "karma-jasmine": "^1.0.2",
     "karma-mocha": "^1.2.0",
-    "karma-phantomjs-launcher": "^1.0.0",
+    "karma-phantomjs-launcher": "^1.0.4",
     "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.17.4",
-    "lolex": "^1.4.0",
+    "karma-spec-reporter": "0.0.30",
+    "karma-webpack": "1.8.1",
+    "lolex": "^1.6.0",
     "mocha": "^3.1.0",
-    "nightwatch": "^0.9.8",
-    "ora": "^0.3.0",
+    "nightwatch": "^0.9.13",
+    "ora": "^1.1.0",
     "phantomjs-prebuilt": "^2.1.13",
-    "selenium-server": "^3.0.1",
-    "shelljs": "^0.7.4",
-    "sinon": "^1.17.3",
+    "selenium-server": "^3.3.1",
+    "shelljs": "^0.7.7",
+    "sinon": "^2.0.0",
     "sinon-chai": "^2.8.0",
     "url-loader": "^0.5.8",
     "vue-hot-reload-api": "^2.0.11",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^11.1.3",
-    "vue-style-loader": "^2.0.3",
-    "vue-template-compiler": "^2.2.1",
+    "vue-loader": "^11.1.4",
+    "vue-style-loader": "^2.0.4",
+    "vue-template-compiler": "^2.2.4",
     "webpack": "^1.13.2",
-    "webpack-dev-middleware": "^1.4.0",
-    "webpack-hot-middleware": "^2.6.0",
-    "webpack-merge": "^1.1.1"
+    "webpack-dev-middleware": "^1.10.1",
+    "webpack-hot-middleware": "^2.17.1",
+    "webpack-merge": "1.1.1"
+  },
+  "engines": {
+    "node": ">=6.9.0"
+  },
+  "babel": {
+    "presets": [
+      "es2015"
+    ]
+  },
+  "browserify": {
+    "transform": [
+      "babelify"
+    ]
+  },
+  "greenkeeper": {
+    "ignore": [
+      "extract-text-webpack-plugin",
+      "karma-webpack",
+      "webpack",
+      "webpack-merge"
+    ]
   }
 }

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/.eslintrc

@@ -6,5 +6,8 @@
     "expect": true,
     "jasmine": true,
     "sinon": true
+  },
+  "rules": {
+    "no-unused-expressions": 0
   }
 }

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()
+    })
+  })
+})