💎 Release new version 2.6.0-rc1

Update release build to not include externals.

CHANGELOG.md

@@ -1,5 +1,86 @@
 # Change Log
 
+## [Unreleased](https://github.com/apertureless/vue-chartjs/tree/HEAD)
+
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.5...HEAD)
+
+**Closed issues:**
+
+- An in-range update of vue is breaking the build 🚨 [\#76](https://github.com/apertureless/vue-chartjs/issues/76)
+- An in-range update of vue-template-compiler is breaking the build 🚨 [\#75](https://github.com/apertureless/vue-chartjs/issues/75)
+
+## [v2.5.5](https://github.com/apertureless/vue-chartjs/tree/v2.5.5) (2017-03-24)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.4...v2.5.5)
+
+**Closed issues:**
+
+- Access chartjs methods [\#71](https://github.com/apertureless/vue-chartjs/issues/71)
+- Pass Reactive data into Scatterplot  [\#69](https://github.com/apertureless/vue-chartjs/issues/69)
+
+**Merged pull requests:**
+
+- Removed -s flag from yarn command in docs [\#73](https://github.com/apertureless/vue-chartjs/pull/73) ([mika76](https://github.com/mika76))
+
+## [v2.5.4](https://github.com/apertureless/vue-chartjs/tree/v2.5.4) (2017-03-19)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.3...v2.5.4)
+
+**Closed issues:**
+
+- An in-range update of eslint-config-standard is breaking the build 🚨 [\#68](https://github.com/apertureless/vue-chartjs/issues/68)
+- Using data from vuex to populate a line graph [\#67](https://github.com/apertureless/vue-chartjs/issues/67)
+- 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)
 

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
+## Webpack, Browserify and dist files.
-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.
 
-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'
+import { Line } from 'vue-chartjs/es'
-// or
-import { Line } from 'vue-chartjs/dist/vue-chartjs'
 ```
 
-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

build/webpack.base.conf.js

@@ -5,7 +5,7 @@ var projectRoot = path.resolve(__dirname, '../')
 
 module.exports = {
   entry: {
-    app: './src/index.js'
+    app: './src/main.js'
   },
   output: {
     path: config.build.assetsRoot,

build/webpack.release.full.js

@@ -0,0 +1,92 @@
+var vue = require('vue-loader')
+var path = require('path')
+var webpack = require("webpack")
+var ExtractTextPlugin = require("extract-text-webpack-plugin")
+var projectRoot = path.resolve(__dirname, '../')
+var cssLoader = ExtractTextPlugin.extract('style-loader', 'css-loader')
+const npmCfg = require('../package.json');
+
+var banner = [
+    npmCfg.name + ' v' + npmCfg.version,
+    '(c) ' + (new Date().getFullYear()) + ' ' + npmCfg.author,
+    npmCfg.homepage
+].join('\n')
+
+module.exports = {
+  entry: {
+    'vue-chartjs': './src/index.js'
+  },
+  output: {
+    filename: './dist/[name].full.js',
+    library: 'VueChartJs',
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  },
+  module: {
+    preLoaders: [
+      {
+        test: /\.vue$/,
+        loader: 'eslint',
+        include: projectRoot,
+        exclude: /node_modules/
+      },
+      {
+        test: /\.js$/,
+        loader: 'eslint',
+        include: projectRoot,
+        exclude: /node_modules/
+      }
+    ],
+    loaders: [
+      {
+        test: /\.vue$/,
+        loader: 'vue'
+      },
+      {
+        test: /\.js$/,
+        exclude: /node_modules/,
+        loader: 'babel'
+      },
+      {
+        test: /\.css$/,
+        loader: cssLoader
+      },
+      {
+        test: /\.s[a|c]ss$/,
+        loader: ExtractTextPlugin.extract('style-loader','css-loader!sass-loader')
+      },
+      {
+        test: /\.json$/, loader: 'json'
+      }
+    ]
+  },
+  eslint: {
+    formatter: require('eslint-friendly-formatter')
+  },
+  babel: {
+    presets: ['es2015'],
+    plugins: ['transform-runtime']
+  },
+  plugins: [
+    new webpack.BannerPlugin(banner)
+  ]
+}
+
+if (process.env.NODE_ENV === 'production') {
+
+  delete module.exports.devtool
+  module.exports.plugins = [
+    new webpack.DefinePlugin({
+      'process.env': {
+        NODE_ENV: '"production"'
+      }
+    }),
+    new webpack.optimize.UglifyJsPlugin({
+      compress: {
+        warnings: false
+      }
+    }),
+    new webpack.optimize.OccurenceOrderPlugin()
+    // new ExtractTextPlugin('build.css')
+  ]
+}

build/webpack.release.full.min.js

@@ -0,0 +1,18 @@
+var config = require('./webpack.release.full.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

build/webpack.release.js

@@ -4,6 +4,13 @@ var webpack = require("webpack")
 var ExtractTextPlugin = require("extract-text-webpack-plugin")
 var projectRoot = path.resolve(__dirname, '../')
 var cssLoader = ExtractTextPlugin.extract('style-loader', 'css-loader')
+const npmCfg = require('../package.json');
+
+var banner = [
+    npmCfg.name + ' v' + npmCfg.version,
+    '(c) ' + (new Date().getFullYear()) + ' ' + npmCfg.author,
+    npmCfg.homepage
+].join('\n')
 
 module.exports = {
   entry: {
@@ -12,7 +19,12 @@ module.exports = {
   output: {
     filename: './dist/[name].js',
     library: 'VueChartJs',
-    libraryTarget: 'umd'
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  },
+  externals: {
+    'vue': 'vue',
+    'chart.js': 'chart.js'
   },
   module: {
     preLoaders: [
@@ -46,6 +58,9 @@ module.exports = {
       {
         test: /\.s[a|c]ss$/,
         loader: ExtractTextPlugin.extract('style-loader','css-loader!sass-loader')
+      },
+      {
+        test: /\.json$/, loader: 'json'
       }
     ]
   },
@@ -55,7 +70,10 @@ module.exports = {
   babel: {
     presets: ['es2015'],
     plugins: ['transform-runtime']
-  }
+  },
+  plugins: [
+    new webpack.BannerPlugin(banner)
+  ]
 }
 
 if (process.env.NODE_ENV === 'production') {

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

@@ -13,11 +13,11 @@ It abstracts the basic logic but exposes the chart.js object to give you the mos
 ## Installation
 If you are working with Vue.js 2+ simple run:
 
-`yarn add vue-chartjs -S`
+`yarn add vue-chartjs`
 
-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`
+`yarn add vue-chartjs@legacy`
 
 ## Quick Start
 
@@ -70,7 +70,7 @@ There are some basic props defined in the BaseCharts. Because you `extend()` the
 |---|---|
 | width | chart width |
 | height | chart height |
-| id | id of the canvas |
+| chart-id | id of the canvas |
 
 
 ## Examples
@@ -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.
+  There are two versions of the Bar chart. `{Bar}` and `{HorizontalBar}`
-  The default type is `bar` but you can pass `horizontalBar` if you want horizontal bars.
-
-  `renderChart (data, options, type) {}`
-
 </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
+## Webpack, Browserify and dist files.
-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.
 
-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'
+import { Line } from 'vue-chartjs/es'
-// or
-import { Line } from 'vue-chartjs/dist/vue-chartjs'
 ```
 
-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:

docs/config.js

@@ -1,12 +1,35 @@
-self.$config = {
+const langs = [
+  {title: 'English', path: '/home', matchPath: /^\/(home|changelog)/},
+  {title: 'Deutsch', path: '/de/', matchPath: /^\/de/}
+]
+
+docute.init({
   title: 'vue-chartjs docs',
-  plugins: [
-    evanyou()
-  ],
   landing: true,
-  // or custom path
   landing: '_landing.html',
   repo: 'apertureless/vue-chartjs',
   twitter: 'apertureless',
-  'edit-link': 'https://github.com/apertureless/vue-chartjs/blob/master/docs'
+  tocVisibleDepth: 2,
-}
+  'edit-link': 'https://github.com/apertureless/vue-chartjs/blob/master/docs',
+  nav: {
+    default: [
+      {
+        title: 'Home', path: '/home'
+      },
+      {
+        title: 'Changelog', path: '/changelog', source: 'https://raw.githubusercontent.com/apertureless/vue-chartjs/develop/CHANGELOG.md'
+      },
+      {
+        title: 'Languages', type: 'dropdown', items: langs
+      }
+    ],
+    'de': [
+      {
+        title: 'Startseite', path: '/de/'
+      }
+    ]
+  },
+  plugins: [
+    evanyou()
+  ],
+})

docs/de/README.md

@@ -0,0 +1,311 @@
+---
+search: deutsch
+---
+
+# vue-chartjs
+**vue-chartjs** ist ein Wrapper für [Chart.js](https://github.com/chartjs/Chart.js) in vue. Man kann einfach wiederverwendbare Chart Components erstellen.
+
+## Einleitung
+`vue-chartjs` let you use chart.js without much hassle inside vue. It's perfect for people who need simple charts up and running as fast as possible.
+
+It abstracts the basic logic but exposes the chart.js object to give you the most possible flexibility.
+
+## Installation
+If you are working with Vue.js 2+ simple run:
+
+`yarn add vue-chartjs`
+
+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`
+
+## Schnellstart
+
+You need to import the base chart and extend it. This gives much more flexibility when working with different data.
+You can encapsulate your components and use props to pass data or you can directly imput them inside the component. However this way, your component is not reuseable.
+
+You can import the whole package or each module individual.
+
+```javascript
+// CommitChart.js
+import { Bar } from 'vue-chartjs'
+
+export default Bar.extend({
+  mounted () {
+    // Overwriting base render method with actual data.
+    this.renderChart(data, options)
+  }
+})
+```
+
+You can pass the `renderChart()` method, two arguments:
+
+- Data object
+- Options object
+
+### Data object
+
+The data object looks like this:
+
+```javascript
+{
+  labels: ['January', 'February'],
+  datasets: [
+    {
+      label: 'GitHub Commits',
+      backgroundColor: '#f87979',
+      data: [40, 20]
+    }
+  ]
+}
+```
+
+For more information take a look at the [Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) docs.
+
+## Props
+
+There are some basic props defined in the BaseCharts. Because you `extend()` them, they are *invisible*, but you can overwrite them:
+
+| Prop | Description |
+|---|---|
+| width | chart width |
+| height | chart height |
+| chart-id | id of the canvas |
+
+
+## Examples
+
+Here are some exmaples
+
+### Chart with props
+
+You can create the data and options props to pass data to the chart.
+
+```javascript
+// LineChart.js
+import { Line } from 'vue-chartjs'
+
+export default Line.extend({
+  props: ['data', 'options'],
+  mounted () {
+    this.renderChart(this.data, this.options)
+  }
+})
+```
+
+After you add your component you can use it:
+
+```html
+ <line-chart :data="{your data object}" :options="{your options}"></line-chart>
+```
+
+If you want to overwrite the width and height:
+
+```html
+ <line-chart
+  :data="{your data object}"
+  :options="{responsive: false, maintainAspectRatio: false}"
+  :width="400"
+  :height="200"
+  >
+ </line-chart>
+```
+
+<p class="warning">
+  Please keep in mind, that you have to set `responsive: false` to be able to set a fix `width` and `height.
+</p>
+
+### Chart with local data
+
+```javascript
+import {Bar} from 'vue-chartjs'
+
+export default Bar.extend({
+  data () {
+    return {
+      datacollection: {
+        labels: ['January', 'February'],
+        datasets: [
+          {
+            label: 'Data One',
+            backgroundColor: '#f87979',
+            data: [40, 20]
+          }
+        ]
+      }
+    }
+  }
+  mounted () {
+    this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
+  }
+})
+```
+
+### Reusebale Components
+
+If you want to keep your chart components reuseable, it's the best to add a wrapper to them. This way the chart component is only responsable for the pure data representation and the wrapper component for the logic behind it. There are many different usecases and it is different if you're running a Single Page Application or integrate it in for example laravel.
+
+## Reactive Data
+
+Chart.js does not provide a live update if you change the datasets. However `vue-chartjs` provides two mixins to achive this.
+
+- `reactiveProp`
+- `reactiveData`
+
+Both mixins to actually the same. Most of the time you will use `reactiveProp`. It extends the logic of your chart component and automatically creates a prop names `chartData` and add a `vue watch` on this prop. On data change, it will either call `update()` if only the data inside the datasets has changed or `renderChart()` if new datasets were added.
+
+`reactiveData` simply creates a local chartData variable which is not a prop! And add a watcher.
+This is only usefull, if you need single purpose charts and make an API call inside your chart component.
+
+```javascript
+data () {
+  return {
+    chartData: null
+  }
+}
+```
+
+### Example
+
+**LineChart.js**
+```javascript
+import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default Line.extend({
+  mixins: [reactiveProp],
+  props: ['options'],
+  mounted () {
+    // this.chartData is created in the mixin
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+**RandomChart.vue**
+
+```javascript
+<template>
+  <div class="small">
+    <line-chart :chart-data="datacollection"></line-chart>
+    <button @click="fillData()">Randomize</button>
+  </div>
+</template>
+
+<script>
+  import LineChart from './LineChart.js'
+
+  export default {
+    components: {
+      LineChart
+    },
+    data () {
+      return {
+        datacollection: null
+      }
+    },
+    mounted () {
+      this.fillData()
+    },
+    methods: {
+      fillData () {
+        this.datacollection = {
+          labels: [this.getRandomInt(), this.getRandomInt()],
+          datasets: [
+            {
+              label: 'Data One',
+              backgroundColor: '#f87979',
+              data: [this.getRandomInt(), this.getRandomInt()]
+            }, {
+              label: 'Data One',
+              backgroundColor: '#f87979',
+              data: [this.getRandomInt(), this.getRandomInt()]
+            }
+          ]
+        }
+      },
+      getRandomInt () {
+        return Math.floor(Math.random() * (50 - 5 + 1)) + 5
+      }
+    }
+  }
+</script>
+
+<style>
+  .small {
+    max-width: 600px;
+    margin:  150px auto;
+  }
+</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`
+
+## Available Charts
+
+### Bar Chart
+<p class="tip">
+  There are two versions of the Bar chart. `{Bar}` and `{HorizontalBar}`
+</p>
+
+![Bar](assets/bar.png)
+### Line Chart
+
+![Line](assets/line.png)
+
+### Doughnut
+
+![Doughnut](assets/doughnut.png)
+
+### Pie
+
+![Pie](assets/pie.png)
+
+### Radar
+
+![Pie](assets/radar.png)
+
+### Polar Area
+
+![Pie](assets/polar.png)
+
+### 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"]
+}
+```

docs/index.html

@@ -11,8 +11,8 @@
   <!-- don't remove this part start -->
   <div id="app"></div>
   <script src="https://unpkg.com/docute-evanyou"></script>
+  <script src="https://unpkg.com/docute/dist/docute.js"></script>
   <script src="./config.js"></script>
-  <script src="https://unpkg.com/docute@2/dist/docute.js"></script>
   <!-- don't remove this part end -->
 
   <!-- Google Analytics -->

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "2.4.1",
+  "version": "2.6.0-rc1",
   "description": "vue.js wrapper for chart.js",
   "author": "Jakub Juszczak <jakub@posteo.de>",
   "homepage": "http://vue-chartjs.org",
@@ -37,7 +37,7 @@
     "Charts"
   ],
   "main": "dist/vue-chartjs.js",
-  "unpkg": "dist/vue-chartjs.js",
+  "unpkg": "dist/vue-chartjs.full.min.js",
   "module": "es/index.js",
   "jsnext:main": "es/index.js",
   "files": [
@@ -53,74 +53,78 @@
     "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 && webpack --progress --hide-modules --config  ./build/webpack.release.full.js && NODE_ENV=production webpack --progress --hide-modules --config  ./build/webpack.release.full.min.js",
     "prepublish": "yarn run lint && yarn run test && yarn run build"
   },
   "dependencies": {
+    "lodash": "^4.17.4"
+  },
+  "peerDependencies": {
     "chart.js": "^2.5.0",
-    "vue": "^2.2.1"
+    "vue": "^2.2.6"
   },
   "devDependencies": {
-    "babel-cli": "^6.23.0",
+    "babel-cli": "^6.24.0",
-    "babel-core": "^6.23.1",
+    "babel-core": "^6.24.0",
-    "babel-loader": "^6.3.2",
+    "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",
+    "chart.js": "^2.5.0",
+    "chromedriver": "^2.28.0",
     "connect-history-api-fallback": "^1.1.0",
-    "cross-env": "^3.1.4",
+    "cross-env": "^3.2.4",
-    "cross-spawn": "^5.0.1",
+    "cross-spawn": "^5.1.0",
-    "css-loader": "^0.26.2",
+    "css-loader": "^0.27.3",
-    "eslint": "^3.7.1",
+    "eslint": "^3.18.0",
-    "eslint-config-standard": "^6.2.0",
+    "eslint-config-standard": "^7.1.0",
-    "eslint-friendly-formatter": "^2.0.5",
+    "eslint-friendly-formatter": "^2.0.7",
-    "eslint-loader": "^1.3.0",
+    "eslint-loader": "^1.7.0",
-    "eslint-plugin-html": "^1.3.0",
+    "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",
+    "http-proxy-middleware": "^0.17.4",
-    "inject-loader": "^3.0.0-beta2",
+    "inject-loader": "^3.0.0",
     "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-spec-reporter": "0.0.30",
-    "karma-webpack": "^1.7.0",
+    "karma-webpack": "1.8.1",
-    "lodash": "^4.17.4",
+    "lolex": "^1.6.0",
-    "lolex": "^1.4.0",
     "mocha": "^3.1.0",
-    "nightwatch": "^0.9.8",
+    "nightwatch": "^0.9.14",
-    "ora": "^0.3.0",
+    "ora": "^1.2.0",
     "phantomjs-prebuilt": "^2.1.13",
-    "selenium-server": "^3.0.1",
+    "selenium-server": "^3.3.1",
-    "shelljs": "^0.7.4",
+    "shelljs": "^0.7.7",
-    "sinon": "^1.17.3",
+    "sinon": "^2.1.0",
-    "sinon-chai": "^2.8.0",
+    "sinon-chai": "^2.9.0",
     "url-loader": "^0.5.8",
+    "vue": "^2.2.6",
     "vue-hot-reload-api": "^2.0.11",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^11.1.4",
+    "vue-loader": "^11.3.4",
-    "vue-style-loader": "^2.0.3",
+    "vue-style-loader": "^2.0.5",
-    "vue-template-compiler": "^2.2.1",
+    "vue-template-compiler": "^2.2.6",
     "webpack": "^1.13.2",
-    "webpack-dev-middleware": "^1.4.0",
+    "webpack-dev-middleware": "^1.10.1",
-    "webpack-hot-middleware": "^2.6.0",
+    "webpack-hot-middleware": "^2.17.1",
-    "webpack-merge": "^1.1.1"
+    "webpack-merge": "1.1.1"
   },
   "engines": {
     "node": ">=6.9.0"
@@ -134,5 +138,13 @@
     "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'
@@ -6,9 +7,12 @@ import PolarArea from './BaseCharts/PolarArea'
 import Radar from './BaseCharts/Radar'
 import Bubble from './BaseCharts/Bubble'
 import mixins from './mixins/index.js'
+import npmCfg from '../package.json'
 
 const VueCharts = {
+  version: npmCfg.version,
   Bar,
+  HorizontalBar,
   Doughnut,
   Line,
   Pie,
@@ -23,6 +27,7 @@ export default VueCharts
 export {
   VueCharts,
   Bar,
+  HorizontalBar,
   Doughnut,
   Line,
   Pie,

src/main.js

@@ -0,0 +1,9 @@
+// The Vue build version to load with the `import` command
+// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
+import Vue from 'vue'
+import App from './examples/App'
+
+/* eslint-disable no-new */
+new Vue({
+  render: h => h(App)
+}).$mount('#app')

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