added bubble chart

Author: ignoreintuition

README.md

@@ -92,6 +92,31 @@ export default {
   }
 }
 ```
+Bubble Charts require three metrics (v1, v2, and v3).  These should be passed as triplets
+
+```JavaScript
+export default {
+  name: 'example',
+  data () {
+    return {
+      chartData: {
+        chartType: "bubbleChart",
+        selector: "chart",
+        title: "Important Data",
+        width: 400,
+        height: 200,
+        triplet: ['count', 'pyCount', 'revenue']
+        data: [
+          {'count': 120,
+           'fruit': 'apples'}, 
+          {'count': 250,
+           'fruit': 'oranges'}
+        ]
+      }
+    }
+  }
+}
+```
 ### Overrides
 If you need to override any of the default values of the charts (pallette colors, ticks, margins, etc) you can pass an overrides object to you chartData.
 
@@ -131,6 +156,7 @@ chartData: {
 * scatterPlot: a graph in which the values of two variables are plotted along two axes, the pattern of the resulting points revealing any correlation present.
 * pieChart: a chart in which a circle is divided into slices to illustrate proportion
 * areaChart: a chart which displays graphically quantitative data
+* bubleChart: a bubble chart is a variation of a scatter chart in which the data points are replaced with bubbles, and an additional dimension of the data is represented in the size of the bubbles.
 
 ### Charts that support two or more metrics
 * barChart

package.json

@@ -1,7 +1,7 @@
 {
   "name": "v-chart-plugin",
   "main": "./dist/module/v-chart-plugin.js",
-  "version": "0.2.15",
+  "version": "0.3.0",
   "description": "This plugin is designed to allow Vue.js developers to incorporate fully reactive and customizable charts into your applications.  Uses D3.js for charting.",
   "keywords": [
     "vue",

src/components/chartExample.vue

@@ -82,7 +82,7 @@ export default {
         subtitle: "Sales by month",
         width: 600,
         height: 500,
-        metric: ["total", "forecast", "yoy"],
+        triplet: ["total", "forecast", "yoy"],
         data: sales,
         goal: 500,
         legends: {

src/import/bubbleChart.js

@@ -55,15 +55,9 @@ const lineGraph = function chart(mode) {
     points.enter()
       .append('circle')
       .attr('class', this.selector)
-      .attr('r', d => cs.r.scale(d.metric[2]))
-      .on('mouseover', (d) => {
-        this.addTooltip(d, window.event);
-      })
-      .on('mouseout', (d) => {
-        this.removeTooltip(d);
-      })
-      .attr('cx', d => cs.x.scale(d.metric[0]) + cs.y.axisWidth + 5)
-      .attr('cy', d => cs.y.scale(d.metric[1]));
+      .attr('r', d =>  cs.r.scale(d.metric[0][this.triplet[2]]))
+      .attr('cx', d => cs.x.scale(d.metric[0][this.triplet[0]]) + cs.y.axisWidth + 5)
+      .attr('cy', d => cs.y.scale(d.metric[0][this.triplet[1]]));
     return points;
   };
   /**
@@ -74,11 +68,9 @@ const lineGraph = function chart(mode) {
    */
   const transition = (points) => {
     points.transition()
-      .attr('r', d => cs.r.scale(d.metric[2]))
-      .attr('cx', d => cs.x.scale(d.dim) + cs.y.axisWidth + 5)
-      .attr('cy', d => cs.y.scale(d.metric[0]))
-      .attr('cx', d => cs.x.scale(d.dim) + cs.y.axisWidth + 5)
-      .attr('cy', d => cs.y.scale(d.metric[1]));
+      .attr('r', d => cs.r.scale(d.metric[0][this.triplet[2]]))
+      .attr('cx', d => cs.x.scale(d.metric[0][this.triplet[0]]) + cs.y.axisWidth + 5)
+      .attr('cy', d => cs.y.scale(d.metric[0][this.triplet[1]]));
     return points;
   };
 
@@ -100,13 +92,13 @@ const lineGraph = function chart(mode) {
    */
   const buildScales = cs => {
     cs.y.scale = d3.scaleLinear()
-      .domain([this.min, this.max])
+      .domain([this.minTriplet.v1, this.maxTriplet.v1])
       .range([this.displayHeight - cs.x.axisHeight, this.header]);
     cs.x.scale = d3.scaleLinear()
-      .domain([this.min, this.max])
+      .domain([this.minTriplet.v2, this.maxTriplet.v2])
       .range([0, this.width]);
     cs.r.scale = d3.scaleLinear()
-      .domain([0, 2])
+      .domain([this.minTriplet.v3, this.maxTriplet.v3])
       .range([0, 20]);
   };
   /**

src/v-chart-plugin.js

@@ -206,7 +206,7 @@ const Chart = {
           return ds.data.map((d) => {
             const td = { metric: [] };
             if (!ds.metric[0])
-              td.metric[0] = d;
+              td.metric[0] = d || 0;
             else {
               ds.metric.forEach(function(e, i){
                 td.metric[i] = d[e] || 0;
@@ -230,7 +230,16 @@ const Chart = {
          * @returns {array} Metrics 
          */
         metric() {
-          return (Array.isArray(this.chartData.metric)) ? this.chartData.metric : new Array(this.chartData.metric);
+          const metric = (Array.isArray(this.chartData.metric)) ? this.chartData.metric : new Array(this.chartData.metric);
+          return metric;
+        },
+        /**
+         * triplet getter function
+         * @memberOf Chart
+         * @returns {array} Metrics 
+         */
+        triplet() {
+          return this.chartData.triplet;
         },
         /**
          * Height getter function
@@ -264,19 +273,58 @@ const Chart = {
           });
           return max;
         },
+        /**
+         * Get the maxium value for triplet
+         * @memberOf Chart
+         * @returns {Array} Max values for triplet
+         */
+        maxTriplet() {
+          const max = {
+            v1: 0,
+            v2: 0,
+            v3: 0
+          };
+          this.ds.forEach(e => {
+            max.v1 = max.v1 > e.metric[0][this.triplet[0]] ? max.v1 : e.metric[0][this.triplet[0]];
+            max.v2 = max.v2 > e.metric[0][this.triplet[1]] ? max.v2 : e.metric[0][this.triplet[1]];
+            max.v3 = max.v3 > e.metric[0][this.triplet[2]] ? max.v3 : e.metric[0][this.triplet[2]];
+          });
+          return max;
+        },
         /**
          * Get the minimum value for dataset
          * @memberOf Chart
          * @returns {number} Min value for metric
          */
         min() {
-          let max = 0;
           var results = []; 
           this.ds.forEach(e => {
             results = results.concat([...e.metric]);
           });
           return Math.min(...results.map(o => o));
         },
+        /**
+         * Get the minimum value for triplet
+         * @memberOf Chart
+         * @returns {Array} Min values for triplet
+         */
+        minTriplet() {
+          var results = {
+            v1: [],
+            v2: [],
+            v3: []
+          };
+          this.ds.forEach(e => {
+            results.v1.push(e.metric[0][this.triplet[0]])
+            results.v2.push(e.metric[0][this.triplet[1]])
+            results.v3.push(e.metric[0][this.triplet[2]])
+          })
+          return {
+            v1: (Math.min(...results.v1.map(o => o))),
+            v2: (Math.min(...results.v2.map(o => o))),
+            v3: (Math.min(...results.v3.map(o => o)))
+          };
+        },
         /**
          * Gets the height of the dispaly area
          * @memberOf Chart