Rename js folder to app

app/app.js

@@ -0,0 +1,131 @@
+var app = angular.module("chart-builder",["ngDrag","chart-builder.filters","chart-builder.directives","chart-builder.services"]);
+
+app.value("allData",{
+    "values":{
+        "Brand": {
+            "Sales":{
+                "Adidas": 3500,
+                "Reebok": 4000,
+                "Nike": 7999
+            },
+            "Orders":{
+                "Adidas": 680,
+                "Reebok": 700,
+                "Nike": 500
+            },
+            "Revenue":{
+                "Adidas": 4000,
+                "Reebok": 12000,
+                "Nike": 8000
+            }
+        },
+        "Category": {
+            "Sales":{
+                "Laptop": 50000,
+                "Mobile": 40000,
+                "E-reader": 25000
+            },
+            "Orders":{
+                "Laptop": 600,
+                "Mobile": 300,
+                "E-reader": 250
+            },
+            "Revenue":{
+                "Laptop": 8000,
+                "Mobile": 12000,
+                "E-reader": 5000
+            }
+        }
+    },
+    "dimensions": ["Brand","Category"],
+    "measures": ["Sales","Orders","Revenue"]
+});
+
+
+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.data.values = allData.values;
+
+    $scope.allowDrop = function(ev,location) {
+        // var prevLocation = ev.dataTransfer.getData("location");
+        // if (checkValidDrop(prevLocation,location)){
+            ev.preventDefault();
+        // }
+    };
+
+    $scope.drag = function(ev,location) {
+        ev.dataTransfer.setData("text", ev.target.textContent);
+        ev.dataTransfer.setData("location", location);
+    };
+
+    $scope.drop = function(ev,location) {
+        var prevLocation = ev.dataTransfer.getData("location");
+        if (checkValidDrop(prevLocation,location)){
+            ev.preventDefault();
+            var value = ev.dataTransfer.getData("text");
+            
+            moveData(prevLocation,location,value);
+        }
+    };
+
+    function checkValidDrop(prevLocation,curLocation){
+        var prevContainer = prevLocation.split(".")[0];
+        var prevType = prevLocation.split(".")[1];
+
+        var curContainer = curLocation.split(".")[0];
+        var curType = curLocation.split(".")[1];
+
+        if ((prevContainer !== curContainer) && (prevType === curType)){
+            return true;
+        }
+        else
+        {
+            return false;
+        }
+    }
+
+    function moveData(prevLocation,curLocation,value){
+        var mapLocationData = {
+            "chooser.dimension":"chooserDimensions",
+            "chooser.measure":"chooserMeasures",
+            "chosen.dimension":"chosenDimension",
+            "chosen.measure":"chosenMeasure"
+        };
+
+        var prevContainer = prevLocation.split(".")[0];
+        var curContainer = curLocation.split(".")[0];
+
+        var prevDataName = mapLocationData[prevLocation];
+        var curDataName = mapLocationData[curLocation];
+
+        if (prevContainer === "chooser"){
+            var index = $scope.data[prevDataName].indexOf(value);
+            if (index > -1) {
+                $scope.data[prevDataName].splice(index, 1);
+            }
+        }
+        else
+        {
+                        $scope.data[prevDataName] = undefined;   
+        }
+
+        if (curContainer === "chooser"){
+            $scope.data[curDataName].push(value);
+        }
+        else
+        {   
+            prevValue = $scope.data[curDataName];
+            if (prevValue){
+                $scope.data[prevDataName].push(prevValue);
+            }
+
+            $scope.data[curDataName] = value;   
+        }
+
+    }
+}]);

app/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 (d3Tip) {
+    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 = d3Tip.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 = d3Tip.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 = d3Tip.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
+   }; 
+});

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

@@ -0,0 +1,324 @@
+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){
+      drawFunc(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(""),
+      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);
+      
+      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("");
+}

app/directives/dynamic-chart/dynamic-chart.css

@@ -0,0 +1,34 @@
+.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;
+}

app/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>

app/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;
+    };
+});

app/ng-drag.js

@@ -0,0 +1,33 @@
+(function(){
+    var ngDragEventDirectives = {};
+
+    angular.forEach(
+        'drag dragend dragenter dragexit dragleave dragover dragstart drop'.split(' '),
+        function(eventName) {
+            var directiveName = 'ng' + eventName.charAt(0).toUpperCase() + eventName.slice(1);
+
+            ngDragEventDirectives[directiveName] = ['$parse', '$rootScope', function($parse, $rootScope) {
+                return {
+                    restrict: 'A',
+                    compile: function($element, attr) {
+                        var fn = $parse(attr[directiveName], null, true);
+
+                        return function ngDragEventHandler(scope, element) {
+                            element.on(eventName, function(event) {
+                                var callback = function() {
+                                    fn(scope, {$event: event});
+                                };
+
+                                scope.$apply(callback);
+                            });
+                        };
+                    }
+                };
+            }];
+        }
+    );
+
+    angular
+        .module('ngDrag', [])
+        .directive(ngDragEventDirectives);
+}());

app/services/services.js

@@ -0,0 +1,5 @@
+var app = angular.module("chart-builder.services",[]);
+
+app.service("d3Tip", function () {
+    this.tip = d3.tip();
+});

app/todo.md

@@ -0,0 +1,11 @@
+Left to do
+==========
+
+3. Move d3 and other src files to chart directive
+2. Use better DnD logic and make it directive - better logic for draggable
+4. Fix pie label position logic
+5. Rename filters/services.js to actual thing name
+
+Done
+-----
+-- 1. Make d3-tip a service