projects / tech-radar.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: a38bbd1)
better organizing the cycle names
authorBruno Trecenti <btrecent@thoughtworks.com>
Wed, 26 Feb 2014 12:41:21 +0000 (09:41 -0300)
committerBruno Trecenti <btrecent@thoughtworks.com>
Wed, 26 Feb 2014 12:41:21 +0000 (09:41 -0300)
examples/default.html patch | blob | history
src/graphing/radar.js patch | blob | history
test/graphing/radar-spec.js patch | blob | history

diff --git a/examples/default.html b/examples/default.html
index cdf94aa..87fa986 100644 (file)
--- a/examples/default.html
+++ b/examples/default.html
@@ -14,15 +14,17 @@
       padding: 20px;
     }
     svg circle {
-      fill: transparent;
-      stroke: #cacaca;
+      stroke: #fff;
+      fill: #cacaca;
     }
     svg text {
-      font: 14px 'Open Sans';
-      fill: #7a7a7a;
+      font: 11px 'Open Sans';
+      font-variant: small-caps;
+      text-transform:uppercase;
+      fill: #000;
     }
     svg line {
-      stroke: #cacaca;
+      stroke: #fff;
     }
 
   </style>
@@ -30,13 +32,18 @@
 <body>
 </body>
   <script>
+    var adopt = new tr.models.Cycle('Adopt', 0);
+    var assess = new tr.models.Cycle('Assess', 1);
+    var trial = new tr.models.Cycle('Trial', 2);
+    var hold = new tr.models.Cycle('Hold', 3);
+
     var radar = new tr.models.Radar();
     var toolsQuadrant = new tr.models.Quadrant('Tools');
     toolsQuadrant.add([
-        new tr.models.Blip('A', new tr.models.Cycle('Adopt')),
-        new tr.models.Blip('B', new tr.models.Cycle('Trial')),
-        new tr.models.Blip('C', new tr.models.Cycle('Asses')),
-        new tr.models.Blip('D', new tr.models.Cycle('Hold')),
+        new tr.models.Blip('A', adopt),
+        new tr.models.Blip('B', trial),
+        new tr.models.Blip('C', assess),
+        new tr.models.Blip('D', hold),
     ]);
     radar.setFirstQuadrant(toolsQuadrant);
 
diff --git a/src/graphing/radar.js b/src/graphing/radar.js
index ee8a14b..b6386c6 100644 (file)
--- a/src/graphing/radar.js
+++ b/src/graphing/radar.js
@@ -3,42 +3,64 @@ tr.graphing.Radar = function (svg, size, radar) {
 
   svg.attr('width', size).attr('height', size);
 
-  function plotLines() {
-    var center = Math.round(size / 2);
+  function center () {
+    return Math.round(size/2);
+  }
 
+  function plotLines() {
     svg.append('line')
-      .attr('x1', center)
+      .attr('x1', center())
       .attr('y1', 0)
-      .attr('x2', center)
+      .attr('x2', center())
       .attr('y2', size)
-      .attr('stroke-width', 5);
+      .attr('stroke-width', 14);
 
     svg.append('line')
       .attr('x1', 0)
-      .attr('y1', center)
+      .attr('y1', center())
       .attr('x2', size)
-      .attr('y2', center)
-      .attr('stroke-width', 5);
+      .attr('y2', center())
+      .attr('stroke-width', 14);
   };
 
-  function plotCircles() {
-    var center, cycles, increment;
+  function plotCircles(cycles) {
+    var increment;
 
-    center = Math.round(size / 2);
-    cycles = radar.cycles();
-    increment = Math.round(center / cycles.length);
+    increment = Math.round(center() / cycles.length);
 
     cycles.forEach(function (cycle, i) {
       svg.append('circle')
-        .attr('cx', center)
-        .attr('cy', center)
-        .attr('r', (i + 1) * increment);
+        .attr('cx', center())
+        .attr('cy', center())
+        .attr('r', center() - increment * i);
     });
   }
 
+  function plotTexts(cycles) {
+    var increment;
+
+    increment = Math.round(center() / cycles.length);
+
+    cycles.forEach(function (cycle, i) {
+      svg.append('text')
+        .attr('y', center() + 4)
+        .attr('x', (i * increment) + 10)
+        .text(cycle.name());
+
+      svg.append('text')
+        .attr('y', center() + 4)
+        .attr('x', size - (i * increment) - 10)
+        .attr('text-anchor', 'end')
+        .text(cycle.name());
+    });
+  };
+
   self.plot = function () {
+    var cycles = radar.cycles().reverse();
+
+    plotCircles(cycles);
     plotLines();
-    plotCircles();
+    plotTexts(cycles);
   };
 
   return self;
diff --git a/test/graphing/radar-spec.js b/test/graphing/radar-spec.js
index 02c3e29..f02ef06 100644 (file)
--- a/test/graphing/radar-spec.js
+++ b/test/graphing/radar-spec.js
@@ -38,7 +38,7 @@ describe('tr.graphing.Radar', function () {
       expect(svg.attr).toHaveBeenCalledWith('y1', 0);
       expect(svg.attr).toHaveBeenCalledWith('x2', 500 / 2);
       expect(svg.attr).toHaveBeenCalledWith('y2', 500);
-      expect(svg.attr).toHaveBeenCalledWith('stroke-width', 5);
+      expect(svg.attr).toHaveBeenCalledWith('stroke-width', 14);
     });
 
     it('plots a horizontal line in the center', function () {
@@ -57,7 +57,7 @@ describe('tr.graphing.Radar', function () {
       expect(svg.attr).toHaveBeenCalledWith('y1', 500 / 2);
       expect(svg.attr).toHaveBeenCalledWith('x2', 500);
       expect(svg.attr).toHaveBeenCalledWith('y2', 500 / 2);
-      expect(svg.attr).toHaveBeenCalledWith('stroke-width', 5);
+      expect(svg.attr).toHaveBeenCalledWith('stroke-width', 14);
     });
   });
 
@@ -79,7 +79,7 @@ describe('tr.graphing.Radar', function () {
       radarGraph = new tr.graphing.Radar(svg, 500, radar);
     });
 
-    it('plots the circles for the cicles', function () {
+    it('plots the circles for the cycles', function () {
       radarGraph.plot();
 
       expect(svg.append).toHaveBeenCalledWith('circle');
@@ -92,5 +92,39 @@ describe('tr.graphing.Radar', function () {
       expect(svg.attr).toHaveBeenCalledWith('cy', 500 / 2);
       expect(svg.attr).toHaveBeenCalledWith('r', 250);
     });
+
+    it('adds the name of each cycle for the right side', function () {
+      var center = 500 / 2;
+      spyOn(svg, 'text').andReturn(svg);
+      radarGraph.plot();
+
+      expect(svg.append).toHaveBeenCalledWith('text');
+      expect(svg.attr).toHaveBeenCalledWith('y', center + 4);
+      expect(svg.attr).toHaveBeenCalledWith('x', 0 + 10);
+      expect(svg.text).toHaveBeenCalledWith('Adopt');
+
+      expect(svg.append).toHaveBeenCalledWith('text');
+      expect(svg.attr).toHaveBeenCalledWith('y', center + 4);
+      expect(svg.attr).toHaveBeenCalledWith('x', 0 + (center / 2) + 10);
+      expect(svg.text).toHaveBeenCalledWith('Hold');
+    });
+
+    it('adds the name of each cycle for the right side', function () {
+      var center = 500 / 2;
+      spyOn(svg, 'text').andReturn(svg);
+      radarGraph.plot();
+
+      expect(svg.append).toHaveBeenCalledWith('text');
+      expect(svg.attr).toHaveBeenCalledWith('y', center + 4);
+      expect(svg.attr).toHaveBeenCalledWith('x', 500 - 10);
+      expect(svg.attr).toHaveBeenCalledWith('text-anchor', 'end');
+      expect(svg.text).toHaveBeenCalledWith('Adopt');
+
+      expect(svg.append).toHaveBeenCalledWith('text');
+      expect(svg.attr).toHaveBeenCalledWith('y', center + 4);
+      expect(svg.attr).toHaveBeenCalledWith('x', 500 - (center / 2) - 10);
+      expect(svg.attr).toHaveBeenCalledWith('text-anchor', 'end');
+      expect(svg.text).toHaveBeenCalledWith('Hold');
+    });
   });
 });
A fork of https://github.com/trecenti/tech-radar with CSV input support