Moved charts to directive

js/app.js

@@ -1,4 +1,4 @@
-var app = angular.module("chart-builder",["ngDrag","chart-builder.filters"]);
+var app = angular.module("chart-builder",["ngDrag","chart-builder.filters","chart-builder.directives"]);
 
 app.value("allData",{
     "values":{
@@ -41,19 +41,14 @@ app.value("allData",{
     "measures": ["Sales","Orders","Revenue"]
 });
 
-app.value("chartTypes",["column","bar","pie"]);
 
-
-app.controller("mainController", ["allData","chartTypes","$scope",function (allData,chartTypes,$scope) {
+app.controller("mainController", ["allData","$scope",function (allData,$scope) {
     $scope.data = {};
     $scope.data.chooserDimensions = allData.dimensions;
     $scope.data.chosenDimension = undefined;
     $scope.data.chooserMeasures = allData.measures;
     $scope.data.chosenMeasure = undefined;
 
-    $scope.chartTypes = chartTypes;
-    $scope.chartTypeChosen = chartTypes[0];
-
     $scope.data.values = allData.values;
 
     $scope.allowDrop = function(ev,location) {
@@ -133,33 +128,4 @@ app.controller("mainController", ["allData","chartTypes","$scope",function (allD
         }
 
     }
-
-    $scope.$watchGroup(["data.values","data.chosenDimension","data.chosenMeasure","chartTypeChosen"],function(){
-        if ($scope.data.chosenMeasure && $scope.data.chosenDimension){
-            var tmpData = $scope.data.values[$scope.data.chosenDimension][$scope.data.chosenMeasure];
-            var chartData = [];
-            var keys = Object.keys(tmpData);
-            var axisLabel;
-            if ($scope.chartTypeChosen.toLowerCase() === "bar")
-            {
-                for (var i = keys.length - 1; i >= 0; i--) {
-                    chartData.push({"y":keys[i],"x":tmpData[keys[i]]});
-                }
-                axisLabel = [$scope.data.chosenMeasure,$scope.data.chosenDimension];
-            }
-            else
-            {
-                for (var i = keys.length - 1; i >= 0; i--) {
-                    chartData.push({"x":keys[i],"y":tmpData[keys[i]]});
-                }   
-                axisLabel = [$scope.data.chosenDimension,$scope.data.chosenMeasure];
-            }
-
-            drawChart($scope.chartTypeChosen,chartData,axisLabel);
-        }
-        else
-        {
-            cleanChart();
-        }
-    });
 }]);

js/directives/directives.js

@@ -0,0 +1,357 @@
+var app = angular.module("chart-builder.directives",["chart-builder.filters"]);
+
+app.value("chartTypes",["column","bar","pie"]);
+
+app.directive("dynamicChart", function () {
+    var controller = function (chartTypes,$scope) {
+        $scope.chartTypes = chartTypes;
+        $scope.chartTypeChosen = $scope.chartTypes[0];
+
+        $scope.$watch("[chartData,chartAxisLabel,chartTypeChosen]",function(){
+            console.log([$scope.chartData,$scope.chartAxisLabel]);
+            if ($scope.chartTypeChosen && $scope.chartData){
+                drawChart($scope.chartTypeChosen,$scope.chartData,$scope.chartAxisLabel);
+            }
+            else
+            {
+                cleanChart();   
+            }
+        },
+        true);
+        
+        /* internal functions start here */
+        function drawChart(type,data,axisLabel) {
+            var typeMapping = {
+            "column" : drawColumnChart,
+            "bar" : drawBarChart,
+            "pie" : drawPieChart
+            };
+
+            if (typeof(type) === "string"){
+                var processedData = processData(type,data,axisLabel);
+                data = processedData.data;
+                axisLabel = processedData.axisLabel;
+
+                var drawFunc = typeMapping[type.toLowerCase()];
+                if (typeof(drawFunc) !== undefined){
+                drawFunc(data,axisLabel);
+                }
+            }
+        }
+
+        function processData(type,data,axisLabel) {
+          var tmpData = data;
+          var tmpAxisLabel = axisLabel;
+          var newData = [];
+          var keys = Object.keys(tmpData);
+          var newAxisLabel;
+          if (type.toLowerCase() === "bar")
+          {
+              for (var i = keys.length - 1; i >= 0; i--) {
+                  newData.push({"y":keys[i],"x":tmpData[keys[i]]});
+              }
+              newAxisLabel = [tmpAxisLabel[1],tmpAxisLabel[0]];
+          }
+          else
+          {
+              for (var i = keys.length - 1; i >= 0; i--) {
+                  newData.push({"x":keys[i],"y":tmpData[keys[i]]});
+              }   
+              newAxisLabel = tmpAxisLabel;
+          }
+
+          return {
+            "data": newData,
+            "axisLabel": newAxisLabel
+          };
+        }
+
+        function drawColumnChart(data,axisLabel)
+        {
+          var eleChart = d3.select(".chart").html(""),
+              eleChartBbox = eleChart.node().getBoundingClientRect(),
+              margin = {top: 15, right: 30, bottom: 60, left: 70},
+              width = +eleChartBbox.width - margin.left - margin.right,
+              height = +eleChartBbox.height - margin.top - margin.bottom;
+
+          var svg = eleChart.append("svg").attr("width",eleChartBbox.width).attr("height",eleChartBbox.height);
+
+          var x = d3.scaleBand().rangeRound([0, width]).padding(0.25),
+              y = d3.scaleLinear().rangeRound([height, 0]);
+
+          var g = svg.append("g")
+              .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
+
+
+          x.domain(data.map(function(d) { return d.x; }));
+          y.domain([0, d3.max(data, function(d) { return d.y; })]);
+
+          g.append("g")
+              .attr("class", "axis axis-x")
+              .style("font-size",".75em")
+              .attr("transform", "translate(0," + height + ")")
+              .call(d3.axisBottom(x));
+
+          g.append("g")
+              .attr("class", "axis axis-y")
+              .style("font-size",".75em")
+              .call(d3.axisLeft(y).ticks(10))
+            .append("text")
+              .attr("transform", "translate(15,0) rotate(-90)")
+              .attr("y", 6)
+              .attr("dy", "0.71em")
+              .attr("text-anchor", "end")
+              .text("y");
+
+          var xLabel = ((axisLabel.length == 2) && axisLabel[0] ) || "X-label";
+          var yLabel = ((axisLabel.length == 2) && axisLabel[1] ) || "Y-label";
+
+          var xLabelPos = d3.select(".axis-x").node().getBBox().height*2 + height;
+          var yLabelPos = -d3.select(".axis-y").node().getBBox().width*0.65;
+
+          g
+            .append('g').classed("label-x",true)
+            .attr('transform', 'translate(' + (width/2) + ', ' + xLabelPos + ')')
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .text(xLabel);
+
+          g
+            .append('g').classed("label-y",true)
+            .attr('transform', 'translate(' + yLabelPos + ', ' + (height/2) + ') rotate(-90)')
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .attr("shape-rendering","crispEdges")
+            .text(yLabel);
+
+          var tip_points = d3.tip()
+            .attr('class', 'd3-tip')
+            .html(function(d) { return d.y; });
+
+          var vis = svg.call(tip_points);
+
+          g.selectAll(".bar")
+            .data(data)
+            .enter().append("rect")
+              .attr("class", "bar")
+              .attr("x", function(d) { return x(d.x); })
+              .attr("y", function(d) { return y(d.y); })
+              .attr("width", x.bandwidth())
+              .attr("height", function(d) { return height - y(d.y); })
+              .on('mouseover', function () {
+                tip_points.show.apply(this,arguments);
+
+              })
+              .on('mouseout', function () {
+                tip_points.hide.apply(this,arguments);
+
+              });
+
+        }
+
+        function drawBarChart(data,axisLabel){
+          var eleChart = d3.select(".chart").html(""),
+              eleChartBbox = eleChart.node().getBoundingClientRect(),
+              margin = {top: 15, right: 80, bottom: 60, left: 80},
+              width = +eleChartBbox.width - margin.left - margin.right,
+              height = +eleChartBbox.height - margin.top - margin.bottom;
+
+          var svg = eleChart.append("svg").attr("width",eleChartBbox.width).attr("height",eleChartBbox.height);
+
+          var x = d3.scaleLinear().rangeRound([0, width]),
+              y = d3.scaleBand().rangeRound([height, 0]).padding(0.25);
+
+          var g = svg.append("g")
+              .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
+              .attr("width",width).attr("height",height);
+
+
+          x.domain([0, d3.max(data, function(d) { return d.x; })]);
+          y.domain(data.map(function(d) { return d.y; }));
+
+          g.append("g")
+              .attr("class", "axis axis-x")
+              .style("font-size",".75em")
+              .attr("transform", "translate(0," + height + ")")
+              .call(d3.axisBottom(x).ticks(10));
+
+          g.append("g")
+              .attr("class", "axis axis-y")
+              .style("font-size",".75em")
+              .call(d3.axisLeft(y))
+            .append("text")
+              .attr("transform", "translate(15,0) rotate(-90)")
+              .attr("y", 6)
+              .attr("dy", "0.71em")
+              .attr("text-anchor", "end")
+              .text("y");
+
+          var xLabel = ((axisLabel.length == 2) && axisLabel[0] ) || "X-label";
+          var yLabel = ((axisLabel.length == 2) && axisLabel[1] ) || "Y-label";
+
+          var xLabelPos = d3.select(".axis-x").node().getBBox().height*2 + height;
+          var yLabelPos = -d3.select(".axis-y").node().getBBox().width*0.65;
+
+          g
+            .append('g').classed("label-x",true)
+            .attr('transform', 'translate(' + (width/2) + ', ' + xLabelPos + ')')
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .text(xLabel);
+
+          g
+            .append('g').classed("label-y",true)
+            .attr('transform', 'translate(' + yLabelPos + ', ' + (height/2) + ') rotate(-90)')
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .attr("shape-rendering","crispEdges")
+            .text(yLabel);
+
+          var tip_points = d3.tip()
+            .attr('class', 'd3-tip')
+            .html(function(d) { return d.x; })
+            .direction("e")
+            .offset([0,10]);
+
+          var vis = svg.call(tip_points);
+
+          g.selectAll(".bar")
+            .data(data)
+            .enter().append("rect")
+              .attr("class", "bar")
+              .attr("x", function(d) { return 0; })
+              .attr("y", function(d) { return y(d.y); })
+              .attr("width", function(d) { return x(d.x); })
+              .attr("height", y.bandwidth())
+              .on('mouseover', function () {
+                tip_points.show.apply(this,arguments);
+
+              })
+              .on('mouseout', function () {
+                tip_points.hide.apply(this,arguments);
+
+           });
+
+        }
+
+        function drawPieChart (data,axisLabel) {
+            var eleChart = d3.select(".chart").html(""),
+              eleChartBbox = eleChart.node().getBoundingClientRect(),
+              margin = {top: 10, right: 15, bottom: 50, left: 15},
+              width = +eleChartBbox.width - margin.left - margin.right,
+              height = +eleChartBbox.height - margin.top - margin.bottom,
+              radius = Math.min(width, height) / 2;
+
+            var color = d3.scaleOrdinal().domain(data.map(function(d){return d.x;}))
+            .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
+
+            var arc = d3.arc()
+            .outerRadius(radius - 10)
+            .innerRadius(0);
+
+            var pie = d3.pie()
+            .sort(null)
+            .value(function(d) { return d.y; });
+
+            var svg = eleChart.append("svg")
+            .attr("width",eleChartBbox.width)
+            .attr("height",eleChartBbox.height);
+
+            var g = svg
+            .append("g")
+            .attr("transform", "translate(" + (width/2 + margin.left) + "," + (height/2 + margin.top) + ")")
+            .attr("width", width)
+            .attr("height", height);
+
+
+            var groupArc = g.selectAll(".arc")
+            .data(pie(data))
+            .enter().append("g")
+            .attr("class", "arc");
+
+            groupArc.append("path")
+            .attr("d", arc)
+            .style("fill", function(d) {return color(d.data.x); });
+
+            groupArc.append("text")
+            .attr("transform", function(d) { return "translate(" + arc.centroid(d) + ")"; })
+            .attr("dy", ".35em")
+            .style("text-anchor", "middle")
+            .text(function(d) { return d.data.x; })
+            .style("fill", "white");
+
+            var xLabel = axisLabel[0];
+            var yLabel = axisLabel[1];
+
+            svg
+            .append('g').classed("title",true)
+            .attr('transform', 'translate(' + (width/2 + margin.left/2) + ', ' + (eleChartBbox.height - margin.bottom/2 ) + ')')
+            .append('text')
+            .attr('text-anchor', 'middle')
+            .text(""+yLabel+" vs. "+xLabel);
+
+            var tip_points = d3.tip()
+            .attr('class', 'd3-tip')
+            .html(function(d) {return d.data.y; })
+            .direction(function(d){
+              var availableDirection = ["n", "ne", "e", "se", "s", "sw", "w", "nw"];
+              
+              var midAngle = ((d.startAngle + d.endAngle)/2)*180/Math.PI;
+              var indexDirection = Math.floor(midAngle/360 *8);
+
+              var direction = availableDirection[indexDirection];
+              console.log(direction);
+              return direction;
+            })
+            .offset(function (d) {
+              var midAngle = ((d.startAngle + d.endAngle)/2);
+
+              midAngle = Math.floor(midAngle/(Math.PI*2/8))*(Math.PI*2/8);
+              midAngle = midAngle - Math.PI/2;
+              
+              var extraRadius = 15;
+              var posCentre = [-extraRadius*Math.sin(midAngle),-extraRadius*Math.cos(midAngle)];
+
+              console.log(midAngle*180/Math.PI);
+              console.log(posCentre);
+              return posCentre;
+            });
+
+            var vis = svg.call(tip_points);
+
+            groupArc
+            .on('mouseover', function () {
+              // console.log([event,this])
+              if ("path" === event.target.nodeName)
+              {
+                tip_points.show.apply(this,arguments);
+              }
+
+            })
+            .on('mouseout', function () {
+              if ("path" === event.target.nodeName)
+              {
+                tip_points.hide.apply(this,arguments);
+              }
+
+            });
+
+
+        }
+
+        function cleanChart() {
+          var eleChart = d3.select(".chart").html("");
+        }
+
+
+    };
+   return {
+        restrict: "EA",
+        templateUrl: "/js/directives/dynamic-chart/dynamic-chart.html",
+        scope: {
+            chartData: "=",
+            chartAxisLabel: "="
+        },
+        controller: controller
+   }; 
+});

js/directives/dynamic-chart/draw-chart.js

@@ -1,10 +1,14 @@
-
 function drawChart(type,data,axisLabel) {
   var typeMapping = {
     "column" : drawColumnChart,
     "bar" : drawBarChart,
     "pie" : drawPieChart
   };
+
+  var processedData = processData();
+  data = processData.data;
+  axisLabel = processData.axisLabel;
+
   if (typeof(type) === "string"){
     var drawFunc = typeMapping[type.toLowerCase()];
     if (typeof(drawFunc) !== undefined){
@@ -13,6 +17,33 @@ function drawChart(type,data,axisLabel) {
   }
 }
 
+function processData(data,axisLabel) {
+  var tmpData = data;
+  var tmpAxisLabel = axisLabel;
+  var newData = [];
+  var keys = Object.keys(tmpData);
+  var newAxisLabel;
+  if ($scope.chartTypeChosen.toLowerCase() === "bar")
+  {
+      for (var i = keys.length - 1; i >= 0; i--) {
+          newData.push({"y":keys[i],"x":tmpData[keys[i]]});
+      }
+      newAxisLabel = [tmpAxisLabel[1],tmpAxisLabel[0]];
+  }
+  else
+  {
+      for (var i = keys.length - 1; i >= 0; i--) {
+          newData.push({"x":keys[i],"y":tmpData[keys[i]]});
+      }   
+      newAxisLabel = tmpAxisLabel;
+  }
+
+  return {
+    "data": newData,
+    "axisLabel": newAxisLabel
+  };
+}
+
 function drawColumnChart(data,axisLabel)
 {
   var eleChart = d3.select(".chart").html(""),

js/directives/dynamic-chart/dynamic-chart.css

@@ -0,0 +1,38 @@
+.chart-selector-container
+{
+    width: 100%;
+    height: 3em;
+    padding: 1em;
+}
+
+.chart-selector
+{
+    float: right;
+    /*margin-right: 1em;*/
+}
+
+.chart
+{
+    width: 100%;
+    height: calc(100% - 3em);
+        
+    /*background-color: lightgray;*/
+    overflow: hidden;
+}
+
+/* d3 styles*/
+.bar {
+    fill: steelblue;
+}
+
+.bar:hover,.arc:hover path{
+    -webkit-transition: fill 0.5s;
+    -o-transition: fill 0.5s;
+    transition: fill 0.5s;
+    
+    fill: brown !important;
+}
+
+.axis-x path {
+  display: none;
+}

js/directives/dynamic-chart/dynamic-chart.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title></title>
+    <link rel="stylesheet" href="/js/directives/dynamic-chart/dynamic-chart.css">
+</head>
+<body>
+    <div class="chart-selector-container">
+        <select class="chart-selector" ng-options="chartName as chartName|sentencecase for chartName in chartTypes" ng-model="chartTypeChosen"></select>
+    </div>
+    <div class="chart"></div>
+</body>
+</html>

js/filters.js

@@ -1,10 +0,0 @@
-var app = angular.module("chart-builder.filters",[]);
-
-app.filter("sentencecase", function () {
-    return function (strToUse) {
-       if (typeof(strToUse)  === "string"){
-            strToUse = strToUse[0].toUpperCase() + strToUse.slice(1);
-       }
-       return strToUse;
-    };
-});

js/filters/filters.js

@@ -0,0 +1,10 @@
+var app = angular.module("chart-builder.filters",[]);
+
+app.filter("sentencecase", function () {
+    return function (str) {
+       if (typeof(str)  === "string"){
+            str = str[0].toUpperCase() + str.slice(1);
+       }
+       return str;
+    };
+});