Merge pull request #145 from ignoreintuition/development

Development

Author: ignoreintuition

src/components/chartExample.vue

@@ -44,17 +44,17 @@ import sales from "../assets/data/sales";
 export default {
   name: "barChartExample",
   methods: {
-    newItem: function(){
+    newItem: function() {
       this.sales.push({
-        "month": null,
-        "year": null,
-        "total": null,
-        "actual": false
-      })
+        month: null,
+        year: null,
+        total: null,
+        actual: false
+      });
     },
-    removeItem: function(d, e){
+    removeItem: function(d, e) {
       e.preventDefault();
-      this.sales.splice(d, 1)
+      this.sales.splice(d, 1);
     }
   },
   data() {
@@ -73,12 +73,12 @@ export default {
           enabled: true,
           height: 25,
           width: 50
-        },                      
+        }
       },
       bubbleChartData: {
         chartType: "bubbleChart",
         selector: "chart",
-        title: "Bar Chart",
+        title: "Bubble Plot",
         subtitle: "Sales by month",
         width: 600,
         height: 500,
@@ -89,14 +89,14 @@ export default {
           enabled: true,
           height: 25,
           width: 50
-        },                      
+        }
       },
       lineGraphData: {
         chartType: "lineGraph",
         selector: "lineGraph",
         title: "Line Graph",
         width: 200,
-        subtitle: "Sales by month",        
+        subtitle: "Sales by month",
         height: 200,
         goal: 500,
         metric: ["total", "forecast"],
@@ -106,12 +106,18 @@ export default {
           enabled: true,
           height: 25,
           width: 50
-        },              
+        },
+        overrides: {
+          palette: {
+            fill: ["#34495E", "#4fc08d"],
+            stroke: "#41B883"
+          }
+        }
       },
       vBarChartData: {
-        chartType: "vBarChart",
+        chartType: "barChart",
         selector: "vChart",
-        title: "Verticle Bar Chart",
+        title: "Bar Chart",
         subtitle: "Sales by month",
         width: 300,
         height: 300,
@@ -122,7 +128,9 @@ export default {
           enabled: true,
           height: 25,
           width: 50
-        },              
+        },
+        overrides: {
+        }
       },
       pieChartData: {
         chartType: "pieChart",
@@ -133,33 +141,16 @@ export default {
         height: 200,
         metric: "total",
         dim: "month",
-        data: sales,
+        data: sales
       },
-      scatterPlotData: {
-        chartType: "scatterPlot",
-        selector: "scatterPlot",
-        title: "Scatter Plot",
-        subtitle: "Sales by month",
-        width: 300,
-        height: 200,
-        metric: "total",
-        dim: "month",
-        data: sales,
-        legends: {
-          enabled: true,
-          height: 25,
-          width: 50
-        },              
-      }
-      
     };
   }
 };
 </script>
 
 <!-- Add "scoped" attribute to limit CSS to this component only -->
-<style> 
-  .logo {
-    width: 200px
-  }
+<style>
+.logo {
+  width: 200px;
+}
 </style>

src/import/bubbleChart.js

@@ -1,5 +1,5 @@
 /** 
- *  @fileOverview Line Graph component definition
+ *  @fileOverview Bubble Chart component definition
  *
  *  @author       Brian Greig
  *
@@ -12,11 +12,11 @@ const d3 = Object.assign({},
   require('d3-axis'),
   require('d3-shape'));
 /**
- * Builds a Line Graph.
- * @module lineGraph
+ * Builds a Bubble Chart.
+ * @module bubbleChart
  */
 
-const lineGraph = function chart(mode) {
+const bubbleChart = function chart(mode) {
   /**
    * The SVG that stores the chart
    * @member svgContainer
@@ -92,10 +92,10 @@ const lineGraph = function chart(mode) {
    */
   const buildScales = cs => {
     cs.y.scale = d3.scaleLinear()
-      .domain([this.minTriplet.v1, this.maxTriplet.v1])
+      .domain([this.minTriplet.v2, this.maxTriplet.v2])
       .range([this.displayHeight - cs.x.axisHeight, this.header]);
     cs.x.scale = d3.scaleLinear()
-      .domain([this.minTriplet.v2, this.maxTriplet.v2])
+      .domain([this.minTriplet.v1, this.maxTriplet.v1])
       .range([0, this.width]);
     cs.r.scale = d3.scaleLinear()
       .domain([this.minTriplet.v3, this.maxTriplet.v3])
@@ -132,4 +132,4 @@ const lineGraph = function chart(mode) {
   return cs;
 };
 
-export default lineGraph;
+export default bubbleChart;

src/import/scatterPlot.js

@@ -28,6 +28,10 @@ const scatterPlot = function chart() {
    * @member cs
    */
   let cs = {
+    palette: {
+      pointFill: '#005792',
+      pointStroke: '#d1f4fa',
+    },
     x: {
       domain: [],
       range: [],
@@ -37,83 +41,86 @@ const scatterPlot = function chart() {
       axisWidth: 30,
       ticks: 5,
     },
+    r: {
+      width: 5
+    }
   };
-  const points = svgContainer.selectAll('circle').data(this.ds);
+
   /**
    * Runs when a new element is added to the dataset
    * @member enter
    * @function
-   * @param {Object} p (svg element)
+   * @param {Object} points (svg element) 
    */
-  const enter = (p) => {
-    p.enter()
+  const enter = (points) => {
+    points.enter()
       .append('circle')
       .attr('class', this.selector)
-      .attr('r', 2)
-      .on('mouseover', (d) => {
-        this.addTooltip(d, window.event);
-      })
-      .on('mouseout', (d) => {
-        this.removeTooltip(d);
-      })
-      .attr('cx', d => cs.x.scale(d.dim) + cs.y.axisWidth + 5)
-      .attr('cy', d => cs.y.scale(d.metric));
+      .attr('r', cs.r.width)
+      .attr('cx', d => cs.x.scale(d.metric[0]) + cs.y.axisWidth + 5) 
+      .attr('cy', d => cs.y.scale(d.metric[1]));
     return points;
   };
   /**
    * Runs when a value of an element in dataset is changed
    * @member transition
    * @function
-   * @param {Object} p (svg element)
+   * @param {Object} points (svg element) 
    */
-  const transition = (p) => {
-    p.transition()
-      .attr('cx', d => cs.x.scale(d.dim) + cs.y.axisWidth + 5)
-      .attr('cy', d => cs.y.scale(d.metric))
-      .attr('cx', d => cs.x.scale(d.dim) + cs.y.axisWidth + 5)
-      .attr('cy', d => cs.y.scale(d.metric));
+  const transition = (points) => {
+    points.transition()
+      .attr('r', cs.r.width)
+      .attr('cx', d => cs.x.scale(d.metric[0]) + cs.y.axisWidth + 5)
+      .attr('cy', d => cs.y.scale(d.metric[1]));
     return points;
   };
+
   /**
    * Runs when an element is removed from the dataset
    * @member exit
    * @function
-   * @param {Object} rect (svg element)
+   * @param {Object} points (svg element)
    */
-  const exit = () => {
+  const exit = (points) => {
     points.exit().remove();
     return points;
   };
+
   /**
    * Builds the scales for the x and y axes
    * @member buildScales
    * @function
    */
-  const buildScales = () => {
+  const buildScales = cs => {
     cs.y.scale = d3.scaleLinear()
-      .domain([this.min, this.max])
+      .domain([this.minTriplet.v2, this.maxTriplet.v2])
       .range([this.displayHeight - cs.x.axisHeight, this.header]);
-    cs.y.axis = d3.axisLeft().ticks(cs.y.ticks, 's').scale(cs.y.scale);
-    this.ds.forEach(t => cs.x.domain.push(t.dim));
-    this.ds.forEach((t, i) => cs.x.range.push(((this.width * i) - this.header) / this.ds.length));
-    cs.x.scale = d3.scaleOrdinal().domain(cs.x.domain).range(cs.x.range);
+    cs.x.scale = d3.scaleLinear()
+      .domain([this.minTriplet.v1, this.maxTriplet.v1])
+      .range([0, this.width]);
   };
   /**
    * Draws the x and y axes on the svg
    * @member drawAxis
    * @function
    */
-  const drawAxis = () => {
+  const drawAxis = cs => {
     cs.x.axis = d3.axisBottom().scale(cs.x.scale);
     cs.x.xOffset = cs.y.axisWidth + 5;
-    cs.x.yOffset = this.height - cs.x.axisHeight;
+    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);
+    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);

src/v-chart-plugin.js

@@ -92,17 +92,17 @@ const Chart = {
         addTooltip(d, e) {
           d3.select(`#${this.chartData.selector}`)
             .append('rect')
-            .attr('x', e.layerX - 5 - 50)
-            .attr('y', e.layerY - 13 - 25)
+            .attr('x', e.offsetX - 5 - 50)
+            .attr('y', e.offsetY - 13 - 25)
             .attr('height', '16px')
             .attr('width', '80px')
             .attr('class', 'tt')
             .attr('fill', 'white');
 
           d3.select(`#${this.chartData.selector}`)
             .append('text')
-            .attr('x', e.layerX - 50)
-            .attr('y', e.layerY - 25)
+            .attr('x', e.offsetX - 50)
+            .attr('y', e.offsetY - 25)
             .attr('class', 'tt')
             .attr('font-size', '10px')
             .text(`${d.dim}:${d.metric}`);