Added code comments

Author: smtryingcode

app/directives/distribution-graph/distribution-graph.directive.js

@@ -182,6 +182,7 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.js
 
       var mousemoveInterval = null
 
+	  /* render react tooltip component */
       ReactDOM.unmountComponentAtNode(document.getElementById('chart-tooltip'))
       ReactDOM.render(<Tooltip popMethod='click'>
           <div className='tooltip-target'></div>
@@ -193,7 +194,8 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.js
           </div>
           </div>
         </Tooltip>
-        , document.getElementById('chart-tooltip'))   
+        , document.getElementById('chart-tooltip'))
+		
       $scope.isFocused = false 
       svg.selectAll('rect.hover')
          .data(ranges)
@@ -216,6 +218,8 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.js
            $scope.highlightedRating = d.start
            $scope.displayCoders = true
            $scope.numCoders = d.number
+		   
+		   /* update tooltip location on mouseover, feature currently not inbuilt in react tooltip component */
            d3.select('#chart-tooltip')
               .style('left', (d3.event.pageX-4) + 'px')    
               .style('top', (d3.event.pageY-4) + 'px')
@@ -236,9 +240,12 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.js
            $scope.$digest()
          })
          .on('mousemove', function(d) {
-           window.clearTimeout(mousemoveInterval)
+		   
+		   /* update tooltip on mousemove, using interval of 50ms to improve performance */
+		   window.clearTimeout(mousemoveInterval)
            var left = (d3.event.pageX-4)
            var top = (d3.event.pageY-4)
+		   
            mousemoveInterval = window.setTimeout(function(){
              d3.select('#chart-tooltip')
                .style('left', left + 'px')    
@@ -260,7 +267,8 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.js
            $scope.isFocused = false 
            $scope.$digest()
          })
-         
+      
+      /* hide tooltip when clicked anywhere outside */  
       d3.select('body').on('click', function(){
         if((d3.event.target.classList[0] != 'tooltip-target') && !$('#chart-tooltip .tooltip-container').hasClass('tooltip-hide') &&
           !isInArray(d3.event.target.classList[0], ['tooltip-content-container', 'tooltip-container', 'tooltip-body', 'Tooltip']) &&

app/directives/history-graph/history-graph.directive.js

@@ -245,6 +245,8 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.js
           return y
         }
       }
+	  
+	  /* render react tooltip component */
       ReactDOM.unmountComponentAtNode(document.getElementById('chart-tooltip'))
       ReactDOM.render(<Tooltip popMethod='click'>
           <div className='tooltip-target'></div>
@@ -280,7 +282,9 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.js
                location.href = $filter('challengeLinks')({'rounds': [{id: d.challengeId, forumId: null}], 'track': $state.params.track, 'subTrack': $state.params.subTrack}, 'detail')
              else
                location.href = $filter('challengeLinks')({id: d.challengeId, 'track': $state.params.track, 'subTrack': $state.params.subTrack}, 'detail')
-           })           
+           })
+		   
+		   /* update tooltip location on mouseover, feature currently not inbuilt in react tooltip component */
            d3.select('#chart-tooltip')
               .style('left', (d3.event.pageX-5) + 'px')    
               .style('top', (d3.event.pageY-5) + 'px')
@@ -302,7 +306,8 @@ import Tooltip from 'appirio-tech-react-components/components/Tooltip/Tooltip.js
            $scope.historyRating = undefined
            $scope.$digest()
          })
-         
+
+      /* hide tooltip when clicked anywhere outside */           
       d3.select('body').on('click', function(){
         if((d3.event.target.classList[0] != 'tooltip-target') && !$('#chart-tooltip .tooltip-container').hasClass('tooltip-hide') &&
           (d3.event.target.tagName.toLowerCase()!='circle') && !(d3.event.target.tagName.toLowerCase()=='rect' && d3.event.target.classList[0] == 'hover')) {