projects / tech-radar.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: d38f0a1)
added the plot of circles to to the radar
authorBruno Trecenti <btrecent@thoughtworks.com>
Tue, 25 Feb 2014 14:11:07 +0000 (11:11 -0300)
committerBruno Trecenti <btrecent@thoughtworks.com>
Tue, 25 Feb 2014 14:11:07 +0000 (11:11 -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 abe29ca..cdf94aa 100644 (file)
--- a/examples/default.html
+++ b/examples/default.html
@@ -4,9 +4,11 @@
   <meta charset="utf-8">
   <script src="../bower_components/d3/d3.min.js"></script>
   <script src="../src/namespaces.js"></script>
   <meta charset="utf-8">
   <script src="../bower_components/d3/d3.min.js"></script>
   <script src="../src/namespaces.js"></script>
+  <script src="../src/models/cycle.js"></script>
+  <script src="../src/models/blip.js"></script>
+  <script src="../src/models/quadrant.js"></script>
+  <script src="../src/models/radar.js"></script>
   <script src="../src/graphing/radar.js"></script>
   <script src="../src/graphing/radar.js"></script>
-
-  <link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,700italic,400,300,700' rel='stylesheet' type='text/css'>
   <style>
     svg {
       padding: 20px;
   <style>
     svg {
       padding: 20px;
@@ -28,7 +30,17 @@
 <body>
 </body>
   <script>
 <body>
 </body>
   <script>
-    var radarGraph = new tr.graphing.Radar(d3.select("body").append("svg"), 500);
+    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')),
+    ]);
+    radar.setFirstQuadrant(toolsQuadrant);
+
+    var radarGraph = new tr.graphing.Radar(d3.select("body").append("svg"), 800, radar);
     radarGraph.plot();
   </script>
 </html>
     radarGraph.plot();
   </script>
 </html>
diff --git a/src/graphing/radar.js b/src/graphing/radar.js
index 0b97019..ee8a14b 100644 (file)
--- a/src/graphing/radar.js
+++ b/src/graphing/radar.js
@@ -4,24 +4,41 @@ tr.graphing.Radar = function (svg, size, radar) {
   svg.attr('width', size).attr('height', size);
 
   function plotLines() {
   svg.attr('width', size).attr('height', size);
 
   function plotLines() {
+    var center = Math.round(size / 2);
+
     svg.append('line')
     svg.append('line')
-      .attr('x1', size / 2)
+      .attr('x1', center)
       .attr('y1', 0)
       .attr('y1', 0)
-      .attr('x2', size / 2)
+      .attr('x2', center)
       .attr('y2', size)
       .attr('stroke-width', 5);
 
     svg.append('line')
       .attr('x1', 0)
       .attr('y2', size)
       .attr('stroke-width', 5);
 
     svg.append('line')
       .attr('x1', 0)
-      .attr('y1', size / 2)
+      .attr('y1', center)
       .attr('x2', size)
       .attr('x2', size)
-      .attr('y2', size / 2)
+      .attr('y2', center)
       .attr('stroke-width', 5);
   };
 
       .attr('stroke-width', 5);
   };
 
+  function plotCircles() {
+    var center, cycles, increment;
+
+    center = Math.round(size / 2);
+    cycles = radar.cycles();
+    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);
+    });
+  }
+
   self.plot = function () {
     plotLines();
   self.plot = function () {
     plotLines();
-
+    plotCircles();
   };
 
   return self;
   };
 
   return self;
diff --git a/test/graphing/radar-spec.js b/test/graphing/radar-spec.js
index 7608988..5c7d3b5 100644 (file)
--- a/test/graphing/radar-spec.js
+++ b/test/graphing/radar-spec.js
@@ -1,13 +1,20 @@
 describe('tr.graphing.Radar', function () {
 describe('tr.graphing.Radar', function () {
+  var radar;
+
   function buildSvg() {
     return d3.select("body").append("svg");
   }
 
   function buildSvg() {
     return d3.select("body").append("svg");
   }
 
+  beforeEach(function () {
+    radar = new tr.models.Radar();
+    spyOn(radar, 'cycles').andReturn([]);
+  });
+
   it('sets the size', function () {
     var svg = buildSvg();
     spyOn(svg, 'attr').andReturn(svg);
 
   it('sets the size', function () {
     var svg = buildSvg();
     spyOn(svg, 'attr').andReturn(svg);
 
-    var radarGraph = new tr.graphing.Radar(svg, 500);
+    var radarGraph = new tr.graphing.Radar(svg, 500, radar);
 
     expect(svg.attr).toHaveBeenCalledWith('width', 500);
     expect(svg.attr).toHaveBeenCalledWith('height', 500);
 
     expect(svg.attr).toHaveBeenCalledWith('width', 500);
     expect(svg.attr).toHaveBeenCalledWith('height', 500);
@@ -19,7 +26,7 @@ describe('tr.graphing.Radar', function () {
       spyOn(svg, 'append').andReturn(svg);
       spyOn(svg, 'attr').andReturn(svg);
 
       spyOn(svg, 'append').andReturn(svg);
       spyOn(svg, 'attr').andReturn(svg);
 
-      var radarGraph = new tr.graphing.Radar(svg, 500);
+      var radarGraph = new tr.graphing.Radar(svg, 500, radar);
 
       radarGraph.plot();
 
 
       radarGraph.plot();
 
@@ -36,7 +43,7 @@ describe('tr.graphing.Radar', function () {
       spyOn(svg, 'append').andReturn(svg);
       spyOn(svg, 'attr').andReturn(svg);
 
       spyOn(svg, 'append').andReturn(svg);
       spyOn(svg, 'attr').andReturn(svg);
 
-      var radarGraph = new tr.graphing.Radar(svg, 500);
+      var radarGraph = new tr.graphing.Radar(svg, 500, radar);
 
       radarGraph.plot();
 
 
       radarGraph.plot();
 
@@ -47,5 +54,38 @@ describe('tr.graphing.Radar', function () {
       expect(svg.attr).toHaveBeenCalledWith('y2', 500 / 2);
       expect(svg.attr).toHaveBeenCalledWith('stroke-width', 5);
     });
       expect(svg.attr).toHaveBeenCalledWith('y2', 500 / 2);
       expect(svg.attr).toHaveBeenCalledWith('stroke-width', 5);
     });
-  })
+  });
+
+  describe('circles', function () {
+    var svg, radarGraph;
+
+    beforeEach(function () {
+      var radar;
+
+      svg = buildSvg();
+      spyOn(svg, 'append').andReturn(svg);
+      spyOn(svg, 'attr').andReturn(svg);
+
+      radar = new tr.models.Radar();
+      spyOn(radar, 'cycles').andReturn([
+        new tr.models.Cycle('Adopt'),
+        new tr.models.Cycle('Hold')
+      ]);
+      radarGraph = new tr.graphing.Radar(svg, 500, radar);
+    });
+
+    it('plots the circles for the cicles', function () {
+      radarGraph.plot();
+
+      expect(svg.append).toHaveBeenCalledWith('circle');
+      expect(svg.attr).toHaveBeenCalledWith('cx', 500 / 2);
+      expect(svg.attr).toHaveBeenCalledWith('cy', 500 / 2);
+      expect(svg.attr).toHaveBeenCalledWith('r', Math.round(250 / 2));
+
+      expect(svg.append).toHaveBeenCalledWith('circle');
+      expect(svg.attr).toHaveBeenCalledWith('cx', 500 / 2);
+      expect(svg.attr).toHaveBeenCalledWith('cy', 500 / 2);
+      expect(svg.attr).toHaveBeenCalledWith('r', 250);
+    });
+  });
 });
 });
A fork of https://github.com/trecenti/tech-radar with CSV input support