From 50e56441b9e2fda5167306c758bdc108d8c82202 Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Thu, 22 Mar 2018 10:39:00 +0100
Subject: [PATCH 1/3] feat(charts): Export generateChart to create custom
 charts

---
 src/BaseCharts.js             |  2 +-
 src/examples/App.vue          | 28 +++++++++++--------
 src/examples/CustomExample.js | 51 +++++++++++++++++++++++++++++++++++
 3 files changed, 69 insertions(+), 12 deletions(-)
 create mode 100644 src/examples/CustomExample.js

diff --git a/src/BaseCharts.js b/src/BaseCharts.js
index e198bc3e..ea79e916 100644
--- a/src/BaseCharts.js
+++ b/src/BaseCharts.js
@@ -1,6 +1,6 @@
 import Chart from 'chart.js'
 
-function generateChart (chartId, chartType) {
+export function generateChart (chartId, chartType) {
   return {
     render: function (createElement) {
       return createElement(
diff --git a/src/examples/App.vue b/src/examples/App.vue
index 1107e632..eff94d3b 100644
--- a/src/examples/App.vue
+++ b/src/examples/App.vue
@@ -2,57 +2,61 @@
   <div class="container">
     <div class="Chart">
       <h1 style="text-align:center;">Barchart</h1>
-      <bar-example></bar-example>
+      <bar-example/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Horizontal Barchart</h1>
-      <horizontal-bar-example></horizontal-bar-example>
+      <horizontal-bar-example/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Barchart with reactive mixing for live data</h1>
-      <reactive-example></reactive-example>
+      <reactive-example/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Barchart with reactive mixing for live data as props</h1>
-      <reactive-prop-example :chart-data="dataPoints"></reactive-prop-example>
+      <reactive-prop-example :chart-data="dataPoints"/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Linechart</h1>
-      <line-example></line-example>
+      <line-example/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Doughnutchart</h1>
-      <doughnut-example></doughnut-example>
+      <doughnut-example/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Piechart</h1>
-      <pie-example></pie-example>
+      <pie-example/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Radarchart</h1>
-      <radar-example></radar-example>
+      <radar-example/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Polararea</h1>
-      <polar-area-example></polar-area-example>
+      <polar-area-example/>
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Bubblechart</h1>
-      <bubble-example></bubble-example>
+      <bubble-example />
     </div>
 
     <div class="Chart">
       <h1 style="text-align:center;">Scatter Chart</h1>
-      <scatter-example></scatter-example>
+      <scatter-example />
+    </div>
+    <div class="Chart">
+      <h1 style="text-align:center;">Custom Line Chart</h1>
+      <custom-line />
     </div>
   </div>
 </template>
@@ -69,12 +73,14 @@
   import ReactivePropExample from './ReactivePropExample'
   import ScatterExample from './ScatterExample'
   import HorizontalBarExample from './HorizontalBarExample'
+  import CustomLine from './CustomExample'
 
   export default {
     components: {
       BarExample,
       LineExample,
       DoughnutExample,
+      CustomLine,
       PieExample,
       RadarExample,
       PolarAreaExample,
diff --git a/src/examples/CustomExample.js b/src/examples/CustomExample.js
new file mode 100644
index 00000000..25d79def
--- /dev/null
+++ b/src/examples/CustomExample.js
@@ -0,0 +1,51 @@
+import Chart from 'chart.js'
+import { generateChart } from '../BaseCharts'
+
+Chart.defaults.LineWithLine = Chart.defaults.line
+Chart.controllers.LineWithLine = Chart.controllers.line.extend({
+  draw: function (ease) {
+    Chart.controllers.line.prototype.draw.call(this, ease)
+
+    if (this.chart.tooltip._active && this.chart.tooltip._active.length) {
+      let activePoint = this.chart.tooltip._active[0]
+      let ctx = this.chart.ctx
+      let x = activePoint.tooltipPosition().x
+      let topY = this.chart.scales['y-axis-0'].top
+      let bottomY = this.chart.scales['y-axis-0'].bottom
+
+      // draw line
+      ctx.save()
+      ctx.beginPath()
+      ctx.moveTo(x, topY)
+      ctx.lineTo(x, bottomY)
+      ctx.lineWidth = 2
+      ctx.strokeStyle = '#07C'
+      ctx.stroke()
+      ctx.restore()
+    }
+  }
+})
+
+const LineWithLine = generateChart('line-with-chart', 'LineWithLine')
+
+export default {
+  extends: LineWithLine,
+  mounted () {
+    this.renderChart({
+      labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+      datasets: [
+        {
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [40, 39, 10, 40, 39, 80, 40]
+        }
+      ]
+    }, {
+      responsive: true,
+      maintainAspectRatio: false,
+      tooltips: {
+        intersect: false
+      }
+    })
+  }
+}

From 3247a61cde65d446d816a52b2cac136647684178 Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Fri, 23 Mar 2018 14:34:34 +0100
Subject: [PATCH 2/3] feat(docs): Update docs with custom chart example

---
 docs/README.md | 64 +++++++++++++++++++++++++-------------------------
 1 file changed, 32 insertions(+), 32 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index 954404f0..b84abd98 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -99,14 +99,14 @@ export default {
 After you add your component you can use it:
 
 ```html
- <line-chart :data="{your data object}" :options="{your options}"></line-chart>
+ <line-chart :data="chartData" :options="chartOptions"></line-chart>
 ```
 
 If you want to overwrite width and height:
 
 ```html
  <line-chart
-  :data="{your data object}"
+  :data="chartData"
   :options="{responsive: false, maintainAspectRatio: false}"
   :width="400"
   :height="200"
@@ -279,6 +279,36 @@ mounted () {
   })
 }
 ```
+## Custom / New Charts
+
+Sometimes you need to extend the default Chart.js charts. There are a lot of examples how to extend and modify the default charts. Or you want to create a own chart type.
+
+In `vue-chartjs` you can do this pretty much the same way.
+
+```js
+// 1. Import Chart.js so you can use the global Chart object
+import Chart from 'chart.js'
+// 2. Import the `generateChart()` method to create the vue component.
+import { generateChart } from 'vue-chartjs'
+
+// 3. Extend on of the default charts
+// http://www.chartjs.org/docs/latest/developers/charts.html
+Chart.defaults.LineWithLine = Chart.defaults.line;
+Chart.controllers.LineWithLine = Chart.controllers.line.extend({ /* custom magic here */})
+
+// 4. Generate the vue-chartjs component
+// First argument is the chart-id, second the chart type.
+const CustomLine = generateChart('custom-line', 'LineWithLine')
+
+// 5. Extend the CustomLine Component just like you do with the default vue-chartjs charts.
+
+export default {
+  extends: CustomLine,
+  mounted () {
+    // ....
+  }
+}
+```
 
 ## Available Charts
 
@@ -318,36 +348,6 @@ This chart has a different data structure then the others. Right now the reactiv
 
 ![Scatter](assets/scatter.png)
 
-
-## Explanation of Different Builds
-There are three different entry points. It depends on your build setup. 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). In 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 is 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 `peerDependencies` so you have to install them separately. 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.
-
 ## Resources
 
 You can find here some resources like tutorials on how to use `vue-chartjs`

From 29d511cdfdc5dcc6f87f45e888269295f06a4935 Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Fri, 23 Mar 2018 14:36:13 +0100
Subject: [PATCH 3/3] docs(webpack): Remove old doc parts

---
 README.md | 12 ------------
 1 file changed, 12 deletions(-)

diff --git a/README.md b/README.md
index 6eb8c143..bce6db43 100644
--- a/README.md
+++ b/README.md
@@ -71,18 +71,6 @@ Vue.component('line-chart', {
 })
 ```
 
-
-### 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, Chart.js is a `peerDependencies` so you have to install it separately. In most projects This way, you can have different versions of 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, `Chart.js` is a `peerDependencies` and need to be installed.
-
-
 ## How to use
 
 You need to import the component and then either use `extends` or `mixins` and add it.