💎 Release new version 2.6.4

Fix reactive mixins animation re-rendering issue.

CHANGELOG.md

@@ -1,13 +1,60 @@
 # Change Log
 
-## [Unreleased](https://github.com/apertureless/vue-chartjs/tree/HEAD)
+## [v2.6.2](https://github.com/apertureless/vue-chartjs/tree/v2.6.2) (2017-04-29)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.1...v2.6.2)
 
-[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.5...HEAD)
+**Merged pull requests:**
+
+- ⬆️ Update dev dependencies [\#96](https://github.com/apertureless/vue-chartjs/pull/96) ([apertureless](https://github.com/apertureless))
+
+## [v2.6.1](https://github.com/apertureless/vue-chartjs/tree/v2.6.1) (2017-04-21)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.0...v2.6.1)
 
 **Closed issues:**
 
+- Not understanding options [\#93](https://github.com/apertureless/vue-chartjs/issues/93)
+- A Gotcha on component creation. [\#92](https://github.com/apertureless/vue-chartjs/issues/92)
+- Error when building: 'This dependency was not found: chartjs' [\#91](https://github.com/apertureless/vue-chartjs/issues/91)
+- Chart does not render inside conditional [\#90](https://github.com/apertureless/vue-chartjs/issues/90)
+- Unable to add to material-vue layout [\#87](https://github.com/apertureless/vue-chartjs/issues/87)
+
+## [v2.6.0](https://github.com/apertureless/vue-chartjs/tree/v2.6.0) (2017-04-09)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.6.0-rc1...v2.6.0)
+
+**Closed issues:**
+
+- how to export to image or pdf [\#89](https://github.com/apertureless/vue-chartjs/issues/89)
+- 🙏🏻 Testing 2.6.0-rc1 [\#88](https://github.com/apertureless/vue-chartjs/issues/88)
+- Adding annotation plugin functionality [\#86](https://github.com/apertureless/vue-chartjs/issues/86)
+
+## [v2.6.0-rc1](https://github.com/apertureless/vue-chartjs/tree/v2.6.0-rc1) (2017-04-05)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.6...v2.6.0-rc1)
+
+**Closed issues:**
+
+- Overwrite prop [\#85](https://github.com/apertureless/vue-chartjs/issues/85)
+
+**Merged pull requests:**
+
+- Update release build to not include externals. [\#84](https://github.com/apertureless/vue-chartjs/pull/84) ([gcoguiec](https://github.com/gcoguiec))
+
+## [v2.5.6](https://github.com/apertureless/vue-chartjs/tree/v2.5.6) (2017-03-29)
+[Full Changelog](https://github.com/apertureless/vue-chartjs/compare/v2.5.5...v2.5.6)
+
+**Closed issues:**
+
+- Can not render two lines at the same time [\#83](https://github.com/apertureless/vue-chartjs/issues/83)
+- Suggestion: Chart not re-rendering on window resize [\#82](https://github.com/apertureless/vue-chartjs/issues/82)
+- How can you change legend label colour? [\#81](https://github.com/apertureless/vue-chartjs/issues/81)
+- Doughnut with text in the middle [\#80](https://github.com/apertureless/vue-chartjs/issues/80)
+- Set chart width without affecting labels [\#79](https://github.com/apertureless/vue-chartjs/issues/79)
+- Loading data from server and displaying [\#78](https://github.com/apertureless/vue-chartjs/issues/78)
+- Why separate .js files in the examples? [\#77](https://github.com/apertureless/vue-chartjs/issues/77)
 - 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)
+- Uncaught TypeError: Cannot read property 'chartId' of undefined [\#74](https://github.com/apertureless/vue-chartjs/issues/74)
+- TypeError: child.\_updateFromParent is not a function [\#72](https://github.com/apertureless/vue-chartjs/issues/72)
+- Styling componement's surrounding \<div\> [\#70](https://github.com/apertureless/vue-chartjs/issues/70)
 
 ## [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)

README.md

@@ -6,9 +6,10 @@
 [![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs)
 [![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)
+[![npm](https://img.shields.io/npm/dm/vue-chartjs.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)
 [![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
+[![CDNJS version](https://img.shields.io/cdnjs/v/vue-chartjs.svg)](https://cdnjs.com/libraries/vue-chartjs)
 
 # vue-chartjs
 
@@ -16,8 +17,8 @@
 
 ## Demo & Docs
 
-- [Demo](http://demo.vue-chartjs.org/)
+- 📺 [Demo](http://demo.vue-chartjs.org/)
-- [Docs](http://www.vue-chartjs.org/)
+- 📖 [Docs](http://www.vue-chartjs.org/)
 
 ### Compatibility
 
@@ -32,7 +33,45 @@ If you're looking for v1 check this [branch](https://github.com/apertureless/vue
 
 ## Install
 
-Simply run `npm install vue-chartjs`
+Simply run `yarn add vue-chartjs chart.js`
+
+Or if you want to use it directly in the browser add
+
+```html
+<script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
+```
+to your scripts. See [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
+
+## Explanation of Different Builds
+There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a peerDependency.
+
+- Browser
+- Browserify / Webpack 1
+- Webpack 2
+
+
+| Build | Chart.js | Vue.js |
+|---|---|---|
+| vue-chartjs.full.js | Bundled | Bundled |
+| vue-chartjs.full.min.js |  Bundled | Bundled  |
+| vue-chartjs.js | peerDependency | peerDependency  |
+| vue-chartjs.min.js | peerDependency  | peerDependency  |
+| es/index* |  peerDependency | peerDependency  |
+
+### Browser
+You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). For this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Vue.js and Chart.js bundled into it. And bundled to a UMD Module. So you only need that one file.
+
+
+### Browserify / Webpack 1
+
+If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
+
+However Vue.js and Chart.js are `deerDependencies` so you have to install them seperately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
+
+### Webpack 2
+If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
+It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way you three shaking will work.  Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.
+
 
 ## How to use
 
@@ -83,7 +122,7 @@ You can overwrite the default chart options. Just pass the options object as a s
 import { Line } from 'vue-chartjs'
 
 export default Line.extend({
-  props: ["data", "options"],
+  props: ['data', 'options'],
   mounted () {
     this.renderChart(this.data, this.options)
   }
@@ -126,7 +165,7 @@ import { Line, mixins } from 'vue-chartjs'
 
 export default Line.extend({
   mixins: [mixins.reactiveProp],
-  props: ["chartData", "options"],
+  props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
@@ -144,7 +183,7 @@ import VueCharts from 'vue-chartjs'
 
 export default VueCharts.Line.extend({
   mixins: [VueCharts.mixins.reactiveProp],
-  props: ["chartData", "options"],
+  props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
@@ -157,7 +196,7 @@ import { Line, mixins } from 'vue-chartjs'
 
 export default Line.extend({
   mixins: [mixins.reactiveProp],
-  props: ["chartData", "options"],
+  props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
@@ -171,27 +210,13 @@ const { reactiveProp } = mixins
 
 export default Line.extend({
   mixins: [reactiveProp],
-  props: ["chartData", "options"],
+  props: ['chartData', 'options'],
   mounted () {
     this.renderChart(this.chartData, this.options)
   }
 })
 ```
 
-## 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

docs/README.md

@@ -1,5 +1,5 @@
 ---
-search: english
+search: en
 ---
 
 # vue-chartjs
@@ -13,7 +13,7 @@ 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`
+`yarn add vue-chartjs chart.js`
 
 If you are using vue 1.x please use the `legacy` tag. However the vue 1 version is not maintained anymore.
 
@@ -112,7 +112,7 @@ If you want to overwrite the width and height:
 ```
 
 <p class="warning">
-  Please keep in mind, that you have to set `responsive: false` to be able to set a fix `width` and `height.
+  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
@@ -287,25 +287,33 @@ Sometimes you need more control over chart.js. Thats why you can access the char
 
 ![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
+## Explanation of Different Builds
-This is because of compatibility reasons. This approach however has a downside: vue.js and chart.js are bundled into the file.
+There are three different entry points. It depends on which build setup do you have. The dependencies are bundled or required as a peerDependency.
-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.
+- Browser
-If you know what you're doing you can import directly from the transpiled es sources:
+- Browserify / Webpack 1
+- Webpack 2
 
-```
-import { Line } from 'vue-chartjs/es'
-```
 
-### Browserify
+| Build | Chart.js | Vue.js |
+|---|---|---|
+| vue-chartjs.full.js | Bundled | Bundled |
+| vue-chartjs.full.min.js |  Bundled | Bundled  |
+| vue-chartjs.js | peerDependency | peerDependency  |
+| vue-chartjs.min.js | peerDependency  | peerDependency  |
+| es/index* |  peerDependency | peerDependency  |
 
-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:
+### Browser
+You can use `vue-chartjs` directly in the browser without any build setup. Like in this [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). For this case, please use the `vue-chartjs.full.min.js` which is the minified version. It has Vue.js and Chart.js bundled into it. And bundled to a UMD Module. So you only need that one file.
 
-```
+
-{
+### Browserify / Webpack 1
-"presets": ["es2015"]
+
-}
+If you're using Gulp, Browserify or Webpack 1 the entry is `vue-chartjs.js` which is __transpiled__ and __bundled__ UMD Module.
-```
+
+However Vue.js and Chart.js are `peerDependencies` so you have to install them seperately. In most projects you will have `Vue.js` already installed anyways. This way, you can have different versions of Vue.js and Chart.js then in this package.
+
+### Webpack 2
+If you're using Webpack 2 it will automatically use the `jsnext:main` / `module` entry point. Which is `es/index.js`
+It is a __transpiled__ es version of the source. And is not __bundled__ to a module. This way your tree shaking will work.  Like in the bundled version, `Vue.js` and `Chart.js` are `peerDependencies` and need to be installed.

docs/config.js

@@ -1,6 +1,8 @@
 const langs = [
   {title: 'English', path: '/home', matchPath: /^\/(home|changelog)/},
-  {title: 'Deutsch', path: '/de/', matchPath: /^\/de/}
+  {title: 'Deutsch', path: '/de/', matchPath: /^\/de/},
+  {title: '日本語', path: '/ja/', matchPath: /^\/ja/},
+  {title: 'Português do Brasil', path: '/pt-br/', matchPath: /^\/pt-br/}
 ]
 
 docute.init({
@@ -30,6 +32,15 @@ docute.init({
     ]
   },
   plugins: [
-    evanyou()
+    evanyou(),
+    docsearch({
+      apiKey: 'b3544f7387612693644777553675d56a',
+      indexName: 'vue-chartjs',
+      // algolia docsearch allows you to search with tag filter
+      tags: ['en', 'de', 'ja', 'pt-br'],
+      // this plugin does require a url too
+      // where docsearch fetches contents
+      url: 'https://vue-chartjs.org'
+    })
   ],
 })

docs/de/README.md

@@ -1,5 +1,5 @@
 ---
-search: deutsch
+search: de
 ---
 
 # vue-chartjs
@@ -13,7 +13,7 @@ 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`
+`yarn add vue-chartjs chart.js`
 
 If you are using vue 1.x please use the `legacy` tag. However the vue 1 version is not maintained anymore.
 
@@ -134,7 +134,7 @@ export default Bar.extend({
         ]
       }
     }
-  }
+  },
   mounted () {
     this.renderChart(this.datacollection, {responsive: true, maintainAspectRatio: false})
   }

docs/index.html

@@ -12,6 +12,7 @@
   <div id="app"></div>
   <script src="https://unpkg.com/docute-evanyou"></script>
   <script src="https://unpkg.com/docute/dist/docute.js"></script>
+  <script src="https://unpkg.com/docute/plugins/docsearch.js"></script>
   <script src="./config.js"></script>
   <!-- don't remove this part end -->
 

docs/ja/README.md

@@ -0,0 +1,318 @@
+---
+search: ja
+---
+
+# vue-chartjs
+**vue-chartjs** は [Chart.js](https://github.com/chartjs/Chart.js) をvueで使用するためのラッパーです。 再利用可能なチャートコンポーネントを簡単に作成できます。
+
+## イントロ
+`vue-chartjs` vueの中であまり面倒なくchart.jsを使うことができます。 シンプルなチャートをできるだけ早く実行したいという人に最適です。
+
+chart.jsの基本ロジックを抽象化していますが、公開されたchart.jsのオブジェクト使用して柔軟にカスタマイズできます。
+
+## インストール
+Vue.jsの Version2以上を使用している場合は簡単にインストールできます。:
+
+`yarn add vue-chartjs chart.js`
+
+Vue.jsの Version 1.xを使用している場合は`legacy`タグを使用してください。しかし、vueのバージョン1はもうメンテナンスされません。
+
+`yarn add vue-chartjs@legacy`
+
+## クイックスタート
+
+BaseChartをインポートしてextendします。
+
+異なるデータのチャートを表示するときに柔軟性が大幅に向上します。
+コンポーネントをカプセル化し、プロパティをコンポーネントのデータに渡したり、コンポーネント内に直接データを記述することができます。ただし直接データを記述した場合はコンポーネントの再利用ができません。
+
+パッケージ全体またはモジュールごとに個別にインポートすることができます。
+
+```javascript
+// CommitChart.js
+import { Bar } from 'vue-chartjs'
+
+export default Bar.extend({
+  mounted () {
+    // Overwriting base render method with actual data.
+    this.renderChart(data, options)
+  }
+})
+```
+
+renderChart()メソッドに2つの引数を渡すことができます:
+
+- Data object
+- Options object
+
+### データオブジェクト
+
+データオブジェクトは、次のようになります。:
+
+```javascript
+{
+  labels: ['January', 'February'],
+  datasets: [
+    {
+      label: 'GitHub Commits',
+      backgroundColor: '#f87979',
+      data: [40, 20]
+    }
+  ]
+}
+```
+
+詳細については、[Chart.js](http://www.chartjs.org/docs/#chart-configuration-chart-data) のドキュメントをご覧ください。
+## プロパティ
+
+BaseChartsには基本プロパティがいくつか定義されています。 extendされたときにそれらは明示的に表示されていませんが、使用するときに上書きして設定することができます。
+
+| プロパティ | 説明 |
+|---|---|
+| width | chartの表示幅 |
+| height | chartの表示高さ |
+| chart-id | canvas要素のid |
+
+
+## 実装例
+
+いくつか例を記載します。
+
+### プロパティの利用
+
+dataとoptionsプロパティを作成して、チャートにデータを渡すことが出来ます。
+
+```javascript
+// LineChart.js
+import { Line } from 'vue-chartjs'
+
+export default Line.extend({
+  props: ['data', 'options'],
+  mounted () {
+    this.renderChart(this.data, this.options)
+  }
+})
+```
+
+コンポーネントに追加して、使用することができます。
+
+```html
+ <line-chart :data="{your data object}" :options="{your options}"></line-chart>
+```
+
+幅と高さを上書きする場合:
+
+```html
+ <line-chart
+  :data="{your data object}"
+  :options="{responsive: false, maintainAspectRatio: false}"
+  :width="400"
+  :height="200"
+  >
+ </line-chart>
+```
+
+<p class="warning">
+`width` と `height` を反映させるためには、 `responsive：false` を設定しなければならないことに注意してください。
+</p>
+
+### コンポーネント内のローカルデータを使用する場合
+
+```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})
+  }
+})
+```
+
+### コンポーネントの再利用
+
+チャートコンポーネントを再利用可能にしたい場合は、ラッパーを使用することをお勧めします。このようにすると、チャートコンポーネントはデータ表示とロジックを含むラッパーコンポーネントに対してのみ応答可能です。単一ページアプリケーションを実行している場合や、laravelで統合されている場合は、異なった方法があります。
+
+
+## リアクティブデータ
+
+Chart.js はデータセットを変更したときのライブアップデートを提供していません。`vue-chartjs` ではこれを実現するために2つのミックスインを提供します。
+
+- `reactiveProp`
+- `reactiveData`
+
+この２つのミックスインは実際には同じものです。 ほとんどの場合 `reactiveProp` を使用します。これはチャートコンポーネントのロジックを拡張し、自動的に `chartData` という名前のプロパティを追加し、さらにこのプロパティに対して `vue watch` を追加します。 データの更新に対して、データセット内のデータのみが変更されたときには `update()` を呼び出し、新しいデータセットが追加された場合は `renderChart()` が呼び出されます。
+
+`reactiveData` は単純に(プロパティではない!!)ローカルの chartData 変数を追加し、ウォッチャーを追加します。
+単一の目的のチャートのみ必要でチャートコンポーネント内でAPI呼び出しを行うときのみ有用です。
+
+```javascript
+data () {
+  return {
+    chartData: null
+  }
+}
+```
+
+### 例
+
+**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">
+  ⚠ 注意:親コンポーネントでデータを変更し、それを子チャートコンポーネントに渡す場合は、JavaScriptの制限事項に注意してください。
+  この問題の詳細 [issue#44](https://github.com/apertureless/vue-chartjs/issues/44)
+</p>
+
+### 制限事項
+  <ul>
+    <li>[注意事項](https://jp.vuejs.org/v2/guide/list.html#注意事項)</li>
+    <li>[変更検出の注意事項](https://jp.vuejs.org/v2/guide/reactivity.html#変更検出の注意事項)</li>
+    <li>[vm.$watch](https://jp.vuejs.org/v2/api/#vm-watch)</li>
+  </ul>
+
+## Chart.js オブジェクト
+
+場合によっては、chart.jsをより詳細に制御する必要があります。Chart.jsインスタンスには `this._chart` を使ってアクセスします。
+
+## 利用可能なグラフ
+
+### 棒グラフ
+<p class="tip">
+  棒グラフには `{Bar}` と `{HorizontalBar}` の2つのバージョンがあります。
+</p>
+
+![Bar](assets/bar.png)
+### 折れ線グラフ
+
+![Line](assets/line.png)
+
+### ドーナツチャート
+
+![Doughnut](assets/doughnut.png)
+
+### パイチャート
+
+![Pie](assets/pie.png)
+
+### レーダーチャート
+
+![Pie](assets/radar.png)
+
+### 鶏頭図
+
+![Pie](assets/polar.png)
+
+### バブルチャート
+
+![Bubble](assets/bubble.png)
+
+
+## ビルド方法の違い
+あなたが使用するビルドツールに依存した３つの異なるエントリーポイントがあります。 依存するライブラリは一緒にバンドルされているか、または peerDependency として指定します。
+
+- Browser
+- Browserify / Webpack 1
+- Webpack 2
+
+
+| Build | Chart.js | Vue.js |
+|---|---|---|
+| vue-chartjs.full.js | Bundled | Bundled |
+| vue-chartjs.full.min.js |  Bundled | Bundled  |
+| vue-chartjs.js | peerDependency | peerDependency  |
+| vue-chartjs.min.js | peerDependency  | peerDependency  |
+| es/index* |  peerDependency | peerDependency  |
+
+### ブラウザー
+`vue-chartjs` をビルドツールを使用せず直接ブラウザー内で使用します。 例 [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010) このケースでは縮小版の `vue-chartjs.full.min.js` を使用します。これにはVue.js と Chart.js が 含まれていて、UMD Module として定義されています。従ってあなたはただ一つのファイルしか必要としません。
+
+### Browserify / Webpack 1
+Gulp、BrowserifyまたはWebpackのバージョン1を使用している場合は、__トランスパイル__ され UMD Moduleとして __バンドル__ された `vue-chartjs.js` を使用します。
+
+Vue.jsとChart.jsは `peerDependencies` なので別にインストールする必要があります。ほとんどのプロジェクトでは、Vue.jsはすでにインストールされているでしょう。この方法では、このパッケージと異なるバージョンのVue.jsとChart.jsを持つことができます。
+
+### Webpack 2
+Webpack 2を使用している場合、 `jsnext:main` または `module` に`es/index.js` を指定します。 ソースファイルは __トランスパイル__ されます。またmoduleには __バンドル__ されません。このようにすると `tree shaking` が動作します。バンドル版のように、`peerDependencies` で指定された `Vue.js` と `Chart.js` はインストールする必要があります。

docs/pt-br/README.md

@@ -0,0 +1,284 @@
+<div align="center">
+  <img width="256" heigth="256" src="/assets/vue-chartjs.png" alt="vue-chartjs logo">
+</div>
+
+[![npm version](https://badge.fury.io/js/vue-chartjs.svg)](https://badge.fury.io/js/vue-chartjs)
+[![codecov](https://codecov.io/gh/apertureless/vue-chartjs/branch/master/graph/badge.svg)](https://codecov.io/gh/apertureless/vue-chartjs)
+[![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/vue-chartjs.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)
+[![license](https://img.shields.io/github/license/mashape/apistatus.svg)](https://github.com/apertureless/vue-chartjs/blob/master/LICENSE.txt)
+[![CDNJS version](https://img.shields.io/cdnjs/v/vue-chartjs.svg)](https://cdnjs.com/libraries/vue-chartjs)
+
+# vue-chartjs
+
+**vue-chartjs** é um wrapper para o [Chart.js](https://github.com/chartjs/Chart.js) no vue. Você pode criar gráficos reutilizáveis facilmente.
+
+## Demo & Docs
+
+- 📺 [Demo](http://demo.vue-chartjs.org/)
+- 📖 [Docs](http://www.vue-chartjs.org/)
+
+### Compatibilidade
+
+- v1 later `@legacy`
+  - Vue.js 1.x
+- v2 later
+  - Vue.js 2.x
+
+Após a release final do vue.js 2, você também instala por padrão o vue-chartjs v2 pelo npm.
+Não é mas necessária a tag @next. Se você quiser a versão v1, você precisa definir a versão ou usar uma tag legada.
+Se está procurando pela versão v1, dê uma olhada nessa [branch](https://github.com/apertureless/vue-chartjs/tree/release/1.1.3)
+
+## Instalação
+
+Simplemente execute `yarn add vue-chartjs chart.js`
+
+Ou se quiser utilizar diretamente no browser, adicione
+
+```html
+<script src="https://unpkg.com/vue-chartjs@2.6.0/dist/vue-chartjs.full.min.js"></script>
+```
+em seus scripts. Veja [Codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010)
+
+## Explicação das diferentes builds
+
+Existem três diferentes pontos de entrada (entry points). Isso depende da configuração de build que você possui. As dependências são empacotadas (bundled) ou requisitadas como peerDependency.
+
+- Browser
+- Browserify / Webpack 1
+- Webpack 2
+
+
+| Build | Chart.js | Vue.js |
+|---|---|---|
+| vue-chartjs.full.js | Bundled | Bundled |
+| vue-chartjs.full.min.js |  Bundled | Bundled  |
+| vue-chartjs.js | peerDependency | peerDependency  |
+| vue-chartjs.min.js | peerDependency  | peerDependency  |
+| es/index* |  peerDependency | peerDependency  |
+
+### Browser
+Você pode usar o `vue-chartjs` diretamente no seu browser sem qualquer configuração de build. Como em [codepen](https://codepen.io/apertureless/pen/vxWbqB?editors=1010). Nesse caso, use `vue-chartjs.full.min.js` que é a versão minificada. Esse arquivo contém o Vue.js e o Chart.js inseridos nele. E são  And empacotados (bundled) em um módulo UMD. Então você precisa somente desse arquivo.
+
+
+### Browserify / Webpack 1
+
+Se você estiver usando Gulb, Browserify ou Webpack 1 a opção é `vue-chartjs.js`, que é __transpiled__ e __bundled__ no modelo UMD.
+
+Porém, Vue.js e Chart.js são `peerDependencies`, então você precisa instalá-los seperadamente. Na maioria dos projetos você terá o `Vue.js` instalado de qualquer maneira. Dessa forma, você pode ter diferentes versões do Vue.js e do Chart.j nesse pacote.
+
+
+### Webpack 2
+Se você está usando o Webpack 2, ele automaticamente usará a opção `jsnext:main` / `module`. Que é `es/index.js`, uma versão do código do es __transpiled__. Não é __bundled__ em módulo algum. Dessa forma, seu [tree shaking](https://webpack.js.org/guides/tree-shaking/) funcionará. Como na versão bundled, o `Vue.js` e o `Chart.js` são `peerDependencies` e precisam ser instalados.
+
+## Como usar
+
+Você precisa importar a classe de gráficos básica e extendê-la. Isso garante muito mais flexibilidade quando se está trabalhando com dados diferentes. Você pode passar dados via props ou vue-resource.
+
+Você pode importar todo o pacote ou cada módulo individualmente.
+
+```javascript
+import VueCharts from 'vue-chartjs'
+import { Bar, Line } from 'vue-chartjs'
+```
+
+Apenas crie seu próprio componente.
+
+```javascript
+// CommitChart.js
+import { Bar } from 'vue-chartjs'
+
+export default Bar.extend({
+  mounted () {
+    // Overwriting base render method with actual data.
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
+      datasets: [
+        {
+          label: 'GitHub Commits',
+          backgroundColor: '#f87979',
+          data: [40, 20, 12, 39, 10, 40, 39, 80, 40, 20, 12, 11]
+        }
+      ]
+    })
+  }
+})
+```
+
+Então, simplesmente importe e use seu próprio componente extendido como um componente vue.
+
+```javascript
+import CommitChart from 'path/to/component/CommitChart'
+```
+
+## Another Example with options
+
+Você pode sobreescrever as options (opções) padrão do gráfico. Basta passar o objeto options como segundo parâmetro do método de renderização.
+
+```javascript
+// MonthlyIncome.js
+import { Line } from 'vue-chartjs'
+
+export default Line.extend({
+  props: ["data", "options"],
+  mounted () {
+    this.renderChart(this.data, this.options)
+  }
+})
+```
+
+Use isso no seu componente vue
+
+```javascript
+import MonthlyIncome from 'path/to/component/MonthlyIncome'
+
+<template>
+  <monthly-income :data={....} />
+</template>
+
+<script>
+export default {
+  components: { MonthlyIncome },
+  ....
+}
+</script>
+```
+
+## Reactivity (Reatividade)
+
+O Chart.js não atualiza nem re-renderiza o gráfico se novos dados são passados.
+Porém, você pode implementar isso por si só ou usar um dos dois mixins inclusos.
+
+- `reactiveProp`
+- `reactiveData`
+
+Ambos estão incluídos no módulo de `mixins`.
+
+Os mixins criam automaticamente o `chartData` como um prop ou como um data. E adiciona um watcher. Se os dados mudarem, o gráfico será atualizado. Mas matenha em mente as limitações do vue e do javascript para as mutations(mutações) em vetores e objetos. Mais informações [aqui](http://vue-chartjs.org/#/home?id=reactive-data)
+
+
+```javascript
+// MonthlyIncome.js
+import { Line, mixins } from 'vue-chartjs'
+
+export default Line.extend({
+  mixins: [mixins.reactiveProp],
+  props: ["chartData", "options"],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+
+```
+
+### Módulo de Mixins
+O módulo de `mixins` está incluído no módulo do  `VueCharts` e como módulo separado.
+Algumas maneiras de importá-los:
+
+```javascript
+// Load complete module with all charts
+import VueCharts from 'vue-chartjs'
+
+export default VueCharts.Line.extend({
+  mixins: [VueCharts.mixins.reactiveProp],
+  props: ["chartData", "options"],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+```javascript
+// Load speperate modules
+import { Line, mixins } from 'vue-chartjs'
+
+export default Line.extend({
+  mixins: [mixins.reactiveProp],
+  props: ["chartData", "options"],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+```javascript
+// Load speperate modules with destructure assign
+import { Line, mixins } from 'vue-chartjs'
+const { reactiveProp } = mixins
+
+export default Line.extend({
+  mixins: [reactiveProp],
+  props: ["chartData", "options"],
+  mounted () {
+    this.renderChart(this.chartData, this.options)
+  }
+})
+```
+
+## Gráficos disponíveis
+
+### Gráfico de Barra
+
+![Barra](assets/bar.png)
+
+### Gráfico de Linha
+
+![Linha](assets/line.png)
+
+### Donut
+
+![Donut](assets/doughnut.png)
+
+### Pizza
+
+![Pizza](assets/pie.png)
+
+### Radar
+
+![Radar](assets/radar.png)
+
+### Área Polar
+
+![Área Polar](assets/polar.png)
+
+### Bolha
+
+![Bolha](assets/bubble.png)
+
+## Configurações de Build
+
+``` bash
+# Instala as dependências
+npm install
+
+# roda o servidor com hot reload at localhost:8080
+npm run dev
+
+# build para produção com minificação
+npm run build
+
+# roda testes unitários
+npm run unit
+
+# roda testes e2e
+npm run e2e
+
+# roda todos os teste
+npm test
+```
+
+Para informações detalhadas de como as coisas funcionam, confira o [guia](http://vuejs-templates.github.io/webpack/) e [documentação do vue-loader](http://vuejs.github.io/vue-loader).
+
+## Contribuindo
+
+1. Faça um fork o projeto ( https://github.com/apertureless/vue-chartjs/fork )
+2. Crie uma branch da sua feature (`git checkout -b my-new-feature`)
+3. Faça o commit das suas modificações (`git commit -am 'Add some feature'`)
+4. Faça o push da branch (`git push origin my-new-feature`)
+5. Crie uma nova requisição de pull
+
+## License
+
+Esse software é distribuído sob a licença [MIT license](LICENSE.txt).

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-chartjs",
-  "version": "2.6.0-rc1",
+  "version": "2.6.4",
   "description": "vue.js wrapper for chart.js",
   "author": "Jakub Juszczak <jakub@posteo.de>",
   "homepage": "http://vue-chartjs.org",
@@ -61,15 +61,15 @@
   },
   "peerDependencies": {
     "chart.js": "^2.5.0",
-    "vue": "^2.2.6"
+    "vue": "^2.3.3"
   },
   "devDependencies": {
-    "babel-cli": "^6.24.0",
+    "babel-cli": "^6.24.1",
-    "babel-core": "^6.24.0",
+    "babel-core": "^6.24.1",
-    "babel-loader": "^6.4.1",
+    "babel-loader": "^7.0.0",
     "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-es2015": "^6.24.0",
+    "babel-preset-es2015": "^6.24.1",
-    "babel-preset-stage-2": "^6.22.0",
+    "babel-preset-stage-2": "^6.24.1",
     "babel-runtime": "^6.23.0",
     "chai": "^3.5.0",
     "chart.js": "^2.5.0",
@@ -77,14 +77,16 @@
     "connect-history-api-fallback": "^1.1.0",
     "cross-env": "^3.2.4",
     "cross-spawn": "^5.1.0",
-    "css-loader": "^0.27.3",
+    "css-loader": "^0.28.0",
-    "eslint": "^3.18.0",
+    "eslint": "^3.19.0",
-    "eslint-config-standard": "^7.1.0",
+    "eslint-config-standard": "^10.2.1",
     "eslint-friendly-formatter": "^2.0.7",
-    "eslint-loader": "^1.7.0",
+    "eslint-loader": "^1.7.1",
     "eslint-plugin-html": "^2.0.1",
+    "eslint-plugin-import": "^2.2.0",
+    "eslint-plugin-node": "^4.2.2",
     "eslint-plugin-promise": "^3.5.0",
-    "eslint-plugin-standard": "^2.1.1",
+    "eslint-plugin-standard": "^3.0.1",
     "eventsource-polyfill": "^0.9.6",
     "express": "^4.15.2",
     "extract-text-webpack-plugin": "^1.0.1",
@@ -115,12 +117,12 @@
     "sinon": "^2.1.0",
     "sinon-chai": "^2.9.0",
     "url-loader": "^0.5.8",
-    "vue": "^2.2.6",
+    "vue": "^2.3.3",
-    "vue-hot-reload-api": "^2.0.11",
+    "vue-hot-reload-api": "^2.1.0",
     "vue-html-loader": "^1.2.4",
-    "vue-loader": "^11.3.4",
+    "vue-loader": "^12.0.4",
-    "vue-style-loader": "^2.0.5",
+    "vue-style-loader": "^3.0.1",
-    "vue-template-compiler": "^2.2.6",
+    "vue-template-compiler": "^2.3.3",
     "webpack": "^1.13.2",
     "webpack-dev-middleware": "^1.10.1",
     "webpack-hot-middleware": "^2.17.1",

src/BaseCharts/Bar.js

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

src/mixins/reactiveData.js

@@ -26,7 +26,26 @@ module.exports = {
           // Check if Labels are equal and if dataset length is equal
           if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
             newData.datasets.forEach((dataset, i) => {
-              chart.data.datasets[i] = dataset
+              // Get new and old dataset keys
+              const oldDatasetKeys = Object.keys(oldData.datasets[i])
+              const newDatasetKeys = Object.keys(dataset)
+
+              // Get keys that aren't present in the new data
+              const deletionKeys = oldDatasetKeys.filter((key) => {
+                return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
+              })
+
+              // Remove outdated key-value pairs
+              deletionKeys.forEach((deletionKey) => {
+                delete chart.data.datasets[i][deletionKey]
+              })
+
+              // Update attributes individually to avoid re-rendering the entire chart
+              for (const attribute in dataset) {
+                if (dataset.hasOwnProperty(attribute)) {
+                  chart.data.datasets[i][attribute] = dataset[attribute]
+                }
+              }
             })
 
             chart.data.labels = newData.labels

src/mixins/reactiveProp.js

@@ -4,7 +4,6 @@ module.exports = {
       required: true
     }
   },
-
   watch: {
     'chartData': {
       handler (newData, oldData) {
@@ -27,7 +26,26 @@ module.exports = {
           // Check if Labels are equal and if dataset length is equal
           if (newLabels === oldLabels && oldData.datasets.length === newData.datasets.length) {
             newData.datasets.forEach((dataset, i) => {
-              chart.data.datasets[i] = dataset
+              // Get new and old dataset keys
+              const oldDatasetKeys = Object.keys(oldData.datasets[i])
+              const newDatasetKeys = Object.keys(dataset)
+
+              // Get keys that aren't present in the new data
+              const deletionKeys = oldDatasetKeys.filter((key) => {
+                return key !== '_meta' && newDatasetKeys.indexOf(key) === -1
+              })
+
+              // Remove outdated key-value pairs
+              deletionKeys.forEach((deletionKey) => {
+                delete chart.data.datasets[i][deletionKey]
+              })
+
+              // Update attributes individually to avoid re-rendering the entire chart
+              for (const attribute in dataset) {
+                if (dataset.hasOwnProperty(attribute)) {
+                  chart.data.datasets[i][attribute] = dataset[attribute]
+                }
+              }
             })
 
             chart.data.labels = newData.labels