From d6c3f50ba8f5455e64aa2653d4c6711dd785dbb2 Mon Sep 17 00:00:00 2001
From: Jakub Juszczak <netghost03@gmail.com>
Date: Fri, 23 Sep 2016 12:59:00 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20chart=20type=20Bubble?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/BaseCharts/Bubble.js      | 64 +++++++++++++++++++++++++++++++++++
 src/examples/App.vue          | 15 ++++----
 src/examples/BubbleExample.js | 52 ++++++++++++++++++++++++++++
 src/index.js                  |  4 ++-
 4 files changed, 127 insertions(+), 8 deletions(-)
 create mode 100644 src/BaseCharts/Bubble.js
 create mode 100644 src/examples/BubbleExample.js

diff --git a/src/BaseCharts/Bubble.js b/src/BaseCharts/Bubble.js
new file mode 100644
index 0000000..ce35752
--- /dev/null
+++ b/src/BaseCharts/Bubble.js
@@ -0,0 +1,64 @@
+import Vue from 'vue'
+import Chart from 'chart.js'
+import { mergeOptions } from '../helpers/options'
+
+export default Vue.extend({
+  template: `
+    <div>
+      <canvas id="bar-chart" width=width height=height ref="canvas"></canvas>
+    </div>
+  `,
+
+  props: {
+    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) {
+      let chartOptions = mergeOptions(this.defaultOptions, options)
+
+      this._chart = new Chart(
+        this.$refs.canvas.getContext('2d'), {
+          type: 'bubble',
+          data: data,
+          options: chartOptions
+        }
+      )
+      this._chart.generateLegend()
+    }
+  },
+  beforeDestroy () {
+    this._chart.destroy()
+  }
+})
diff --git a/src/examples/App.vue b/src/examples/App.vue
index 73adf07..0317410 100644
--- a/src/examples/App.vue
+++ b/src/examples/App.vue
@@ -10,15 +10,16 @@
 </template>
 
 <script>
-  import BarExample from './examples/BarExample'
-  import LineExample from './examples/LineExample'
-  import DoughnutExample from './examples/DoughnutExample'
-  import PieExample from './examples/PieExample'
-  import RadarExample from './examples/RadarExample'
-  import PolarAreaExample from './examples/PolarAreaExample'
+  import BarExample from './BarExample'
+  import LineExample from './LineExample'
+  import DoughnutExample from './DoughnutExample'
+  import PieExample from './PieExample'
+  import RadarExample from './RadarExample'
+  import PolarAreaExample from './PolarAreaExample'
+  import BubbleExample from './BubbleExample'
 
   export default {
-    components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample }
+    components: { BarExample, LineExample, DoughnutExample, PieExample, RadarExample, PolarAreaExample, BubbleExample }
   }
 </script>
 
diff --git a/src/examples/BubbleExample.js b/src/examples/BubbleExample.js
new file mode 100644
index 0000000..06a0311
--- /dev/null
+++ b/src/examples/BubbleExample.js
@@ -0,0 +1,52 @@
+import BubbleChart from '../BaseCharts/Bubble'
+
+export default BubbleChart.extend({
+  mounted () {
+    this.renderChart({
+      datasets: [
+        {
+          label: 'Data One',
+          backgroundColor: '#f87979',
+          data: [
+            {
+              x: 20,
+              y: 25,
+              r: 5
+            },
+            {
+              x: 40,
+              y: 10,
+              r: 10
+            },
+            {
+              x: 30,
+              y: 22,
+              r: 30
+            }
+          ]
+        },
+        {
+          label: 'Data Two',
+          backgroundColor: '#7C8CF8',
+          data: [
+            {
+              x: 10,
+              y: 30,
+              r: 15
+            },
+            {
+              x: 20,
+              y: 20,
+              r: 10
+            },
+            {
+              x: 15,
+              y: 8,
+              r: 30
+            }
+          ]
+        }
+      ]
+    })
+  }
+})
diff --git a/src/index.js b/src/index.js
index edf86a9..7740349 100644
--- a/src/index.js
+++ b/src/index.js
@@ -4,6 +4,7 @@ import Line from './BaseCharts/Line'
 import Pie from './BaseCharts/Pie'
 import PolarArea from './BaseCharts/PolarArea'
 import Radar from './BaseCharts/Radar'
+import Bubble from './BaseCharts/Bubble'
 
 const VueCharts = {
   Bar,
@@ -11,7 +12,8 @@ const VueCharts = {
   Line,
   Pie,
   PolarArea,
-  Radar
+  Radar,
+  Bubble
 }
 
 module.exports = VueCharts