Merge pull request #138 from ignoreintuition/development

Development

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,9 +156,11 @@ 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
+* vBarChart
 * lineGraph
 
 Lastly you will need to add the component and bind your data

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

@@ -17,13 +17,13 @@
       <div class="col-6 col-md-8">
         <div class="row">
           <div class="col-12">
-            <v-chart v-bind:chartData="lineGraphData"></v-chart>
+            <v-chart v-bind:chartData="bubbleChartData"></v-chart>
           </div>
           <div class="col-12 col-lg-6">
             <v-chart v-bind:chartData="areaChartData"></v-chart>
           </div>
           <div class="col-12 col-lg-6">
-            <v-chart v-bind:chartData="barChartData"></v-chart>
+            <v-chart v-bind:chartData="lineGraphData"></v-chart>
           </div>
           <div class="col-12 col-lg-6">
             <v-chart v-bind:chartData="vBarChartData"></v-chart>
@@ -75,15 +75,16 @@ export default {
           width: 50
         },                      
       },
-      barChartData: {
-        chartType: "barChart",
+      bubbleChartData: {
+        chartType: "bubbleChart",
         selector: "chart",
         title: "Bar Chart",
         subtitle: "Sales by month",
-        height: 200,
-        metric: ["total"],
-        dim: "month",
+        width: 600,
+        height: 500,
+        triplet: ["total", "forecast", "yoy"],
         data: sales,
+        goal: 500,
         legends: {
           enabled: true,
           height: 25,
@@ -94,9 +95,10 @@ export default {
         chartType: "lineGraph",
         selector: "lineGraph",
         title: "Line Graph",
-        width: 600,
+        width: 200,
         subtitle: "Sales by month",        
         height: 200,
+        goal: 500,
         metric: ["total", "forecast"],
         dim: "month",
         data: sales,
@@ -112,8 +114,8 @@ export default {
         title: "Verticle Bar Chart",
         subtitle: "Sales by month",
         width: 300,
-        height: 200,
-        metric: "total",
+        height: 300,
+        metric: ["total", "forecast"],
         dim: "month",
         data: sales,
         legends: {

src/import/barChart.js

@@ -1,3 +1,5 @@
+import { globalAgent } from 'http';
+
 /** 
  *  @fileOverview Bar chart component definition
  *
@@ -30,7 +32,7 @@ const barChart = function chart() {
    */
   let cs = {
     palette: {
-      fill: '#005792',
+      fill: ['#005792', '#ffcdcd'],
       stroke: '#d1f4fa',
     },
     bar: {
@@ -62,7 +64,7 @@ const barChart = function chart() {
    * @function
    */
   const getHeight = () => (
-    this.displayHeight - cs.x.axisHeight - this.header - cs.bar.vPadding) / this.ds.length - 1;
+    (this.displayHeight - cs.x.axisHeight - this.header - cs.bar.vPadding) / this.ds.length - 1) / this.metric.length ;
 
   /**
    * Returns y axis co-ordinate of the bar
@@ -72,7 +74,7 @@ const barChart = function chart() {
    * @param {Object} i (svg element)
    */
   const getYCoord = (d, i) => i * (
-    this.displayHeight - cs.x.axisHeight - this.header) / this.ds.length + 1 + this.header;
+    this.displayHeight - cs.x.axisHeight - this.header) / this.ds.length + 1 + this.header + cs.bar.offset * getHeight();
 
   /**
    * Adds a tooltip on mouse over
@@ -100,17 +102,22 @@ const barChart = function chart() {
    * @param {Object} rects (svg element)
    */
   const enter = (rects) => {
-    rects.enter()
-      .append('rect')
-      .attr('fill', cs.palette.fill)
-      .attr('stroke', cs.palette.stroke)
-      .attr('class', this.selector)
-      .attr('width', getWidth)
-      .attr('height', getHeight)
-      .attr('y', getYCoord)
-      .attr('x', cs.y.axisWidth + cs.bar.hPadding)
-      .on('mouseover', mouseOver)
-      .on('mouseout', mouseOut);
+    this.metric.forEach( (e, i) => {
+      cs.bar.offset = i;
+      rects[i].enter()
+        .append('rect')
+        .attr('fill', cs.palette.fill[i])
+        .attr('stroke', cs.palette.stroke)
+        .attr('class', this.selector)
+        .attr('class', 'r' + i)
+        .attr('width', getWidth)
+        .attr('height', getHeight)
+        .attr('y', getYCoord)
+        .attr('x', cs.y.axisWidth + cs.bar.hPadding)
+        .on('mouseover', mouseOver)
+        .on('mouseout', mouseOut);
+    });
+    if (this.goal) this.generateGoal(cs, svgContainer, false, cs.y.axisWidth + cs.bar.hPadding);
     return rects;
   };
   /**
@@ -120,11 +127,15 @@ const barChart = function chart() {
    * @param {Object} rects (svg element)
    */
   const transition = (rects) => {
-    rects.transition()
-      .attr('width', getWidth)
-      .attr('height', getHeight)
-      .attr('y', getYCoord)
-      .attr('x', cs.y.axisWidth + cs.bar.hPadding);
+    this.metric.forEach( (e, i) => {
+      cs.bar.offset = i;
+      rects[i].transition()
+        .attr('width', getWidth)
+        .attr('height', getHeight)
+        .attr('y', getYCoord)
+        .attr('x', cs.y.axisWidth + cs.bar.hPadding);
+    });
+    if (this.goal) this.generateGoal(cs, svgContainer, false, cs.y.axisWidth + cs.bar.hPadding);
     return rects;
   };
   /**
@@ -134,7 +145,9 @@ const barChart = function chart() {
    * @param {Object} rect (svg element)
    */
   const exit = (rects) => {
-    rects.exit().remove();
+    this.metric.forEach( (e, i) => {
+      rects[i].exit().remove();
+    });
     return rects;
   };
   /**
@@ -175,13 +188,22 @@ const barChart = function chart() {
    * @param {number} currentValue
    */
   const getMaxDimLength = (accumulator, currentValue) => {
+    if(!currentValue.dim) return accumulator;
     return (currentValue.dim.length > accumulator) ? currentValue.dim.length : accumulator;
   }
 
-  const rects = svgContainer.selectAll('rect').data(this.ds);
+  const rects = []
+  this.metric.forEach( (e, i) => {
+    rects.push(svgContainer.selectAll('rect.r' + i).data(this.ds.map(d => {
+      return  {
+        metric: d.metric[i],
+        dim: d.dim
+      }      
+    })))
+  })
 
   cs = this.setOverrides(cs, this.chartData.overrides);
-  if (this.ds[0].dim)
+  if (this.ds[0] && this.ds[0].dim)
     cs.y.axisWidth = cs.y.axisWidth || (this.ds.reduce(getMaxDimLength, 0)) * 10;
 
   buildScales(cs);

src/import/bubbleChart.js

@@ -0,0 +1,135 @@
+/** 
+ *  @fileOverview Line Graph component definition
+ *
+ *  @author       Brian Greig
+ *
+ *  @requires     NPM:d3:Vue
+ *  @requires     src/v-chart-plugin.js
+ */
+const d3 = Object.assign({},
+  require('d3-selection'),
+  require('d3-scale'),
+  require('d3-axis'),
+  require('d3-shape'));
+/**
+ * Builds a Line Graph.
+ * @module lineGraph
+ */
+
+const lineGraph = function chart(mode) {
+  /**
+   * The SVG that stores the chart
+   * @member svgContainer
+   */
+  const svgContainer = d3.select(`#${this.chartData.selector}`);
+  /**
+   * The configuration of the coordinate system
+   * @member cs
+   */
+  let cs = {
+    palette: {
+      pointFill: '#005792',
+      pointStroke: '#d1f4fa',
+    },
+    x: {
+      domain: [],
+      range: [],
+      axisHeight: 20,
+    },
+    y: {
+      axisWidth: 30,
+      ticks: 5,
+    },
+    r: {
+
+    }
+  };
+
+  /**
+   * Runs when a new element is added to the dataset
+   * @member enter
+   * @function
+   * @param {Object} points (svg element) 
+   */
+  const enter = (points) => {
+    points.enter()
+      .append('circle')
+      .attr('class', this.selector)
+      .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;
+  };
+  /**
+   * Runs when a value of an element in dataset is changed
+   * @member transition
+   * @function
+   * @param {Object} points (svg element) 
+   */
+  const transition = (points) => {
+    points.transition()
+      .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;
+  };
+
+  /**
+   * Runs when an element is removed from the dataset
+   * @member exit
+   * @function
+   * @param {Object} points (svg element)
+   */
+  const exit = (points) => {
+    points.exit().remove();
+    return points;
+  };
+
+  /**
+   * Builds the scales for the x and y axes
+   * @member buildScales
+   * @function
+   */
+  const buildScales = cs => {
+    cs.y.scale = d3.scaleLinear()
+      .domain([this.minTriplet.v1, this.maxTriplet.v1])
+      .range([this.displayHeight - cs.x.axisHeight, this.header]);
+    cs.x.scale = d3.scaleLinear()
+      .domain([this.minTriplet.v2, this.maxTriplet.v2])
+      .range([0, this.width]);
+    cs.r.scale = d3.scaleLinear()
+      .domain([this.minTriplet.v3, this.maxTriplet.v3])
+      .range([0, 20]);
+  };
+  /**
+   * Draws the x and y axes on the svg
+   * @member drawAxis
+   * @function
+   */
+  const drawAxis = cs => {
+    cs.x.axis = d3.axisBottom().scale(cs.x.scale);
+    cs.x.xOffset = cs.y.axisWidth + 5;
+    cs.x.yOffset = this.displayHeight - cs.x.axisHeight;
+    cs.y.axis = d3.axisLeft().ticks(cs.y.ticks, 's').scale(cs.y.scale);
+    cs.y.xOffset = cs.y.axisWidth;
+    cs.y.yOffset = 0;
+    svgContainer.append('g').attr('class', 'axis').attr('transform', `translate(${cs.x.xOffset}, ${cs.x.yOffset})`)
+      .call(cs.x.axis);
+    svgContainer.append('g').attr('class', 'axis').attr('transform', `translate(${cs.y.xOffset},${cs.y.yOffset})`)
+      .call(cs.y.axis);
+  };
+  
+  const points = svgContainer.selectAll('circle').data(this.ds);
+
+  cs = this.setOverrides(cs, this.chartData.overrides);
+
+  buildScales(cs);
+  drawAxis(cs);
+  enter(points);
+  transition(points);
+  exit(points);
+
+  return cs;
+};
+
+export default lineGraph;