Adding tooltips to graphs

app/coffee/modules/backlog/main.coffee

@@ -994,6 +994,7 @@ tgBacklogGraphDirective = ->
             grid: {
                 borderWidth: { top: 0, right: 1, left:0, bottom: 0 }
                 borderColor: "#ccc"
+                hoverable: true
             }
             xaxis: {
                 ticks: dataToDraw.milestones.length
@@ -1018,6 +1019,22 @@ tgBacklogGraphDirective = ->
                 }
             }
             colors: colors
+            tooltip: true
+            tooltipOpts: {
+                content: (label, xval, yval, flotItem) ->
+                    #TODO: i18n
+                    if flotItem.seriesIndex == 1
+                        return "Optimal pending points for sprint #{xval} should be #{yval}"
+
+                    else if flotItem.seriesIndex == 2
+                        return "Real pending points for sprint #{xval} is #{yval}"
+
+                    else if flotItem.seriesIndex == 3
+                        return "Incremented points by team requirements for sprint #{xval} is #{Math.abs(yval)}"
+
+                    else
+                        return "Incremented points by client requirements for sprint #{xval} is #{Math.abs(yval)}"
+            }
         }
 
         element.empty()

app/coffee/modules/taskboard/charts.coffee

@@ -57,6 +57,7 @@ SprintGraphDirective = ->
             grid:
                 borderWidth: { top: 0, right: 1, left:0, bottom: 0 }
                 borderColor: '#ccc'
+                hoverable: true
             xaxis:
                 tickSize: [1, "day"]
                 min: days[0]
@@ -81,6 +82,17 @@ SprintGraphDirective = ->
                     radius: 4
                     lineWidth: 2
             colors: ["rgba(102,153,51,1)", "rgba(120,120,120,0.2)"]
+            tooltip: true
+            tooltipOpts:
+                content: (label, xval, yval, flotItem) ->
+                    #TODO: i18n
+                    formattedDate = moment(xval).format("DD MMM")
+                    roundedValue = Math.round(yval)
+                    if flotItem.seriesIndex == 1
+                        return "Optimal pending points for day #{formattedDate} should be #{roundedValue}"
+
+                    else
+                        return "Real pending points for day #{formattedDate} is #{roundedValue}"
 
         element.empty()
         element.plot(data, options).data("plot")

bower.json

@@ -67,6 +67,7 @@
     "jquery-textcomplete": "yuku-t/jquery-textcomplete#~0.1.1",
     "flot-orderBars": "emmerich/flot-orderBars",
     "flot-axislabels": "markrcote/flot-axislabels",
+    "flot.tooltip": "~0.8.4",
     "moment": "~2.6.0",
     "isMobile": "~0.3.1",
     "favico.js": "0.3.4",

gulpfile.coffee

@@ -96,8 +96,8 @@ paths.js = [
     paths.app + "vendor/jquery-flot/jquery.flot.js",
     paths.app + "vendor/jquery-flot/jquery.flot.pie.js",
     paths.app + "vendor/jquery-flot/jquery.flot.time.js",
-    paths.app + "vendor/jquery-flot/jquery.flot.time.js",
     paths.app + "vendor/flot-axislabels/jquery.flot.axislabels.js",
+    paths.app + "vendor/flot.tooltip/js/jquery.flot.tooltip.js",
     paths.app + "vendor/jquery-textcomplete/jquery.textcomplete.js",
     paths.app + "vendor/markitup-1x/markitup/jquery.markitup.js",
     paths.app + "vendor/malihu-custom-scrollbar-plugin/jquery.mCustomScrollbar.concat.min.js",