added blip name on blip hovering, fixed rings in the example

[tech-radar.git] / src / graphing / radar.js

diff --git a/src/graphing/radar.js b/src/graphing/radar.js
index e588663..3bfd700 100644 (file)
--- a/src/graphing/radar.js
+++ b/src/graphing/radar.js
@@ -1,6 +1,7 @@
-tr.graphing.Radar = function (size, radar) {
-  var self, fib, svg;
+tr.graphing.Radar = function (size, radar, toolTipDescription) {
+  var self, fib, svg, texts;
 
+  texts = [];
   fib = new tr.util.Fib();
 
   self = {};
@@ -68,25 +69,25 @@ tr.graphing.Radar = function (size, radar) {
     });
   };
 
-  function triangle(x, y, cssClass) {
-    return svg.append('path')
-      .attr('d', 'M412.201,311.406c0.021,0,0.042,0,0.063,0c0.067,0,0.135,0,0.201,0c4.052,0,6.106-0.051,8.168-0.102c2.053-0.051,4.115-0.102,8.176-0.102h0.103c6.976-0.183,10.227-5.306,6.306-11.53c-3.988-6.121-4.97-5.407-8.598-11.224c-1.631-3.008-3.872-4.577-6.179-4.577c-2.276,0-4.613,1.528-6.48,4.699c-3.578,6.077-3.26,6.014-7.306,11.723C402.598,306.067,405.426,311.406,412.201,311.406')
-      .attr('transform', 'translate(' + ((-421 * .73) + x) + ',' + ((-299 * 0.73) + y) + ') scale(0.73) ')
-      .attr('class', cssClass)
-      .attr('stroke-width', 2);
+  function triangle(x, y, cssClass, group) {
+    var tsize, top, left, right, bottom, points;
 
-    var tsize = 7
+    tsize = 13
+    top = y - tsize;
+    left = (x - tsize + 1);
+    right = (x + tsize + 1);
+    bottom = (y + tsize - tsize / 2.5);
 
-    var top = y - tsize + 2;
-    var left = (x - tsize);
-    var right = (x + tsize);
-    var bottom = (y + tsize);
+    points = x + 1 + ',' + top + ' ' + left + ',' + bottom + ' ' + right + ',' + bottom;
 
-    var points = x + ',' + top + ' ' + left + ',' + bottom + ' ' + right + ',' + bottom;
+    return (group || svg).append('polygon')
+      .attr('points', points)
+      .attr('class', cssClass)
+      .attr('stroke-width', 1.5);
   }
 
-  function circle(x, y, cssClass) {
-    svg.append('circle')
+  function circle(x, y, cssClass, group) {
+    return (group || svg).append('circle')
       .attr('cx', x)
       .attr('cy', y)
       .attr('class', cssClass)
@@ -94,7 +95,7 @@ tr.graphing.Radar = function (size, radar) {
       .attr('r', 10);
   }
 
-  function plotBlips(cycles, quadrant, adjustX, adjustY) {
+  function plotBlips(cycles, quadrant, adjustX, adjustY, cssClass) {
     var blips;
     blips = quadrant.blips();
     cycles.forEach(function (cycle, i) {
@@ -120,40 +121,57 @@ tr.graphing.Radar = function (size, radar) {
         var x = center() + radius * Math.cos(angleInRad) * adjustX;
         var y = center() + radius * Math.sin(angleInRad) * adjustY;
 
+        var group = svg.append('g').attr('class', 'blip-group');
+
         if (blip.isNew()) {
-          triangle(x, y, cssClassFor(quadrant.name()));
+          triangle(x, y, cssClass, group);
         } else {
-          circle(x, y, cssClassFor(quadrant.name()));
+          circle(x, y, cssClass, group);
         }
 
-        svg.append('text')
+        texts.push(function () {
+          var name;
+
+          name = svg.append('text')
+            .attr('x', x + 15)
+            .attr('y', y + 4)
+            .attr('class', 'blip-name')
+            .attr('text-anchor', 'left')
+            .text(blip.name())
+
+          group
+            .on('mouseover', function () { name.style('display', 'block'); })
+            .on('mouseout', function () { name.style('display', 'none'); });
+        });
+
+        group.append('text')
           .attr('x', x)
           .attr('y', y + 4)
           .attr('class', 'blip-text')
           .attr('text-anchor', 'middle')
           .text(blip.number())
+          .append("svg:title")
+          .text(blip.name() + ((toolTipDescription && blip.description())
+              ? ': ' + blip.description().replace(/(<([^>]+)>)/ig, '')
+              : '' ))
       });
     });
   };
 
-  function cssClassFor(string) {
-    return string.toLowerCase().replace(/\s\&/g, '').replace(/\s/g, '-');
-  }
-
   function plotQuadrantNames(quadrants) {
-    function plotName(name, anchor, x, y) {
+    function plotName(name, anchor, x, y, cssClass) {
       svg.append('text')
         .attr('x', x)
         .attr('y', y)
-        .attr('class', cssClassFor(name))
+        .attr('class', cssClass)
         .attr('text-anchor', anchor)
         .text(name);
     }
 
-    plotName(quadrants.I.name(), 'end', size - 10, 10)
-    plotName(quadrants.II.name(), 'start', 10, 10)
-    plotName(quadrants.III.name(), 'start', 10, size - 10)
-    plotName(quadrants.IV.name(), 'end', size -10, size - 10)
+    plotName(quadrants.I.name(), 'end', size - 10, 10, 'first')
+    plotName(quadrants.II.name(), 'start', 10, 10, 'second')
+    plotName(quadrants.III.name(), 'start', 10, size - 10, 'third')
+    plotName(quadrants.IV.name(), 'end', size -10, size - 10, 'fourth')
   }
 
   self.init = function (selector) {
@@ -175,11 +193,15 @@ tr.graphing.Radar = function (size, radar) {
 
     if (radar.hasQuadrants()) {
       plotQuadrantNames(quadrants);
-      plotBlips(cycles, quadrants.I, 1, -1);
-      plotBlips(cycles, quadrants.II, -1, -1);
-      plotBlips(cycles, quadrants.III, -1, 1);
-      plotBlips(cycles, quadrants.IV, 1, 1);
+      plotBlips(cycles, quadrants.I, 1, -1, 'first');
+      plotBlips(cycles, quadrants.II, -1, -1, 'second');
+      plotBlips(cycles, quadrants.III, -1, 1, 'third');
+      plotBlips(cycles, quadrants.IV, 1, 1, 'fourth');
     }
+
+    texts.forEach(function (fn) {
+      fn();
+    });
   };
 
   return self;