Made d3Tip a service, so there wont be multiple dom elements created for it anymore

index.html

@@ -63,6 +63,7 @@
     <script type="text/javascript" src="./js/ng-drag.js"></script>
     
     <script type="text/javascript" src="./js/filters/filters.js"></script>
+    <script type="text/javascript" src="./js/services/services.js"></script>
     <script type="text/javascript" src="./js/directives/directives.js"></script>
     <script type="text/javascript" src="./js/app.js"></script>
 </body>

js/app.js

@@ -1,4 +1,4 @@
-var app = angular.module("chart-builder",["ngDrag","chart-builder.filters","chart-builder.directives"]);
+var app = angular.module("chart-builder",["ngDrag","chart-builder.filters","chart-builder.directives","chart-builder.services"]);
 
 app.value("allData",{
     "values":{

js/directives/directives.js

@@ -2,7 +2,7 @@ var app = angular.module("chart-builder.directives",["chart-builder.filters"]);
 
 app.value("chartTypes",["column","bar","pie"]);
 
-app.directive("dynamicChart", function () {
+app.directive("dynamicChart", function (d3Tip) {
     var controller = function (chartTypes,$scope) {
         $scope.chartTypes = chartTypes;
         $scope.chartTypeChosen = $scope.chartTypes[0];
@@ -124,7 +124,7 @@ app.directive("dynamicChart", function () {
             .attr("shape-rendering","crispEdges")
             .text(yLabel);
 
-          var tip_points = d3.tip()
+          var tip_points = d3Tip.tip
             .attr('class', 'd3-tip')
             .html(function(d) { return d.y; });
 
@@ -207,7 +207,7 @@ app.directive("dynamicChart", function () {
             .attr("shape-rendering","crispEdges")
             .text(yLabel);
 
-          var tip_points = d3.tip()
+          var tip_points = d3Tip.tip
             .attr('class', 'd3-tip')
             .html(function(d) { return d.x; })
             .direction("e")
@@ -290,7 +290,7 @@ app.directive("dynamicChart", function () {
             .attr('text-anchor', 'middle')
             .text(""+yLabel+" vs. "+xLabel);
 
-            var tip_points = d3.tip()
+            var tip_points = d3Tip.tip
             .attr('class', 'd3-tip')
             .html(function(d) {return d.data.y; })
             .direction(function(d){

js/services/services.js

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

js/todo.md

@@ -1,7 +1,11 @@
 Left to do
 ==========
 
-1. Make d3-tip a service
-2. Use better DnD logic and make it directive - better logic for draggable
 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