Merge pull request #153 from ignoreintuition/development

Development

Author: ignoreintuition

src/components/chartExample.vue

@@ -17,7 +17,7 @@
       <div class="col-6 col-md-8">
         <div class="row">
           <div class="col-12">
-            <v-chart v-bind:chartData="bubbleChartData"></v-chart>
+            <v-chart v-bind:chartData="boxPlotData"></v-chart>
           </div>
           <div class="col-12 col-lg-6">
             <v-chart v-bind:chartData="areaChartData"></v-chart>
@@ -75,25 +75,16 @@ export default {
           width: 50
         }
       },
-      bubbleChartData: {
-        chartType: "bubbleChart",
+      boxPlotData: {
+        chartType: "boxPlot",
         selector: "chart",
-        title: "Bubble Plot",
+        title: "Box Plot",
         subtitle: "Sales by month",
         width: 600,
         height: 500,
-        metric: ["total", "forecast", "yoy"],
+        metric: ['total'],
         data: sales,
         goal: 500,
-        legends: {
-          enabled: true,
-          height: 25,
-          width: 50
-        },
-        grid: {
-          enabled: true,
-          gridTicks: 25
-        }
       },
       lineGraphData: {
         chartType: "lineGraph",

src/import/boxPlot.js

@@ -0,0 +1,178 @@
+import { globalAgent } from 'http';
+
+/** 
+ *  @fileOverview Bar chart component definition
+ *
+ *  @author       Brian Greig
+ *
+ *  @requires     NPM:d3:Vue
+ *  @requires     src/v-chart-plugin.js
+ */
+
+/* eslint-env browser */
+const d3 = Object.assign({},
+  require('d3-selection'),
+  require('d3-scale'),
+  require('d3-axis'),
+  require('d3-ease'),
+  require('d3-array'));
+/**
+ * Builds a Box Plot.
+ * @module boxPlot
+ */
+
+const boxPlot = function chart() {
+  /**
+   * 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: {
+      fill: ['#005792', '#ffcdcd'],
+      stroke: '#d1f4fa',
+    },
+    x: {
+      axisHeight: 10,
+      ticks: 5,
+    },
+    y: {
+      axisWidth: 10,
+      ticks: 5,
+    },
+  };
+
+  /**
+   * Runs when a new element is added to the dataset
+   * @member enter
+   * @function
+   * @param {Object} boxes (svg element)
+   */
+  const enter = (boxes, lines) => {
+    boxes.enter()
+      .append('rect')
+      .attr('fill', 'none')
+      .attr('stroke', 'black')
+      .attr('stroke-width', 3)
+      .attr('class', this.selector)
+      .attr('width', 50)
+      .attr('height', d => cs.y.scale(d.thirdQrt) - cs.y.scale(d.firstQrt))
+      .attr('x', 50)
+      .attr('y', d => cs.y.scale(d.firstQrt))
+    
+    const l = lines.enter()
+      
+      l.append('line')
+      .attr('fill', 'none')
+      .attr('stroke', 'black')
+      .attr('stroke-width', 3)
+      .attr('x1', 75)
+      .attr('y1', d => cs.y.scale(d.min))
+      .attr('x2', 75)
+      .attr('y2', d => cs.y.scale(d.firstQrt))
+    
+      l.append('line')
+      .attr('fill', 'none')
+      .attr('stroke', 'black')
+      .attr('stroke-width', 3)
+      .attr('x1', 75)
+      .attr('y1', d => cs.y.scale(d.thirdQrt))
+      .attr('x2', 75)
+      .attr('y2', d => cs.y.scale(d.max))
+    
+      l.append('line')
+      .attr('fill', 'none')
+      .attr('stroke', 'black')
+      .attr('stroke-width', 3)
+      .attr('x1', 50)
+      .attr('y1', d => cs.y.scale(d.median))
+      .attr('x2', 100)
+      .attr('y2', d => cs.y.scale(d.median))
+      
+      l.append('line')
+      .attr('fill', 'none')
+      .attr('stroke', 'black')
+      .attr('stroke-width', 3)
+      .attr('x1', 50)
+      .attr('y1', d => cs.y.scale(d.min))
+      .attr('x2', 100)
+      .attr('y2', d => cs.y.scale(d.min))
+
+      l.append('line')
+      .attr('fill', 'none')
+      .attr('stroke', 'black')
+      .attr('stroke-width', 3)
+      .attr('x1', 50)
+      .attr('y1', d => cs.y.scale(d.max))
+      .attr('x2', 100)
+      .attr('y2', d => cs.y.scale(d.max))
+                
+    return boxes;
+  };
+  /**
+   * Runs when a value of an element in dataset is changed
+   * @member transition
+   * @function
+   * @param {Object} boxes (svg element)
+   */
+  const transition = (boxes) => {
+    boxes.transition()
+    return boxes;
+  };
+  /**
+   * Runs when an element is removed from the dataset
+   * @member exit
+   * @function
+   * @param {Object} boxes (svg element)
+   */
+  const exit = (rects) => {
+    boxes.exit().remove();
+    return rects;
+  };
+  /**
+   * Builds the scales for the x and y axes
+   * @member buildScales
+   * @function
+   */
+  const buildScales = () => {
+    cs.y.scale = d3.scaleLinear()
+      .domain([this.min * 0.95, this.max * 1.05])
+      .range([this.header, this.displayHeight]);
+  };
+  /**
+   * Draws the x and y axes on the svg
+   * @member drawAxis
+   * @function
+   */
+  const drawAxis = () => {
+
+  };
+
+  const ds = this.metricAsArray('total').sort();
+  const a = [{
+    min: this.min,
+    median: d3.quantile(ds, 0.5),
+    max: this.max,
+    firstQrt: d3.quantile(ds, 0.25),
+    thirdQrt: d3.quantile(ds, 0.75)
+  }]
+
+  const boxes = svgContainer.selectAll('rect').data(a);
+  const lines = svgContainer.selectAll('line').data(a);
+
+  cs = this.setOverrides(cs, this.chartData.overrides);
+  console.log(a)
+  buildScales(cs);
+  drawAxis(cs);
+  enter(boxes, lines);
+  transition(boxes, lines);
+  exit(boxes, lines);
+
+  return cs;
+};
+
+export default boxPlot;

src/v-chart-plugin.js

@@ -14,6 +14,7 @@ import scatterPlot from './import/scatterPlot';
 import pieChart from './import/pieChart';
 import areaChart from './import/areaChart';
 import bubbleChart from './import/bubbleChart';
+import boxPlot from './import/boxPlot';
 
 const d3 = Object.assign({},
   require('d3-selection'));
@@ -209,6 +210,15 @@ const Chart = {
             .style('stroke', '#708090')
             .style('stroke-width', 1)
         },
+                /**
+         * get the values of a metric as an array
+         * @memberOf Chart
+         * @returns {Array} metric values
+         */
+        metricAsArray(metric) {
+          metric = this.chartData.data.map(d => d[metric]);
+          return metric; 
+        },
 
         ...((typeof barChart !== 'undefined') && { barChart }),
         ...((typeof vBarChart !== 'undefined') && { vBarChart }),
@@ -217,6 +227,7 @@ const Chart = {
         ...((typeof areaChart !== 'undefined') && { areaChart }),
         ...((typeof lineGraph !== 'undefined') && { lineGraph }),
         ...((typeof bubbleChart !== 'undefined') && { bubbleChart }),
+        ...((typeof boxPlot !== 'undefined') && { boxPlot }),
       },
       computed: {
         /**