From 2c6e76ea65109b83d80ca1d51088cbb040960711 Mon Sep 17 00:00:00 2001
From: Bruno Trecenti <btrecent@thoughtworks.com>
Date: Tue, 25 Feb 2014 11:11:07 -0300
Subject: [PATCH] added the plot of circles to to the radar
---
examples/default.html | 18 +++++++++++---
src/graphing/radar.js | 27 +++++++++++++++++----
test/graphing/radar-spec.js | 48 +++++++++++++++++++++++++++++++++----
3 files changed, 81 insertions(+), 12 deletions(-)
diff --git a/examples/default.html b/examples/default.html
index abe29ca..cdf94aa 100644
--- 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>
+ <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>
-
- <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;
@@ -28,7 +30,17 @@
<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>
diff --git a/src/graphing/radar.js b/src/graphing/radar.js
index 0b97019..ee8a14b 100644
--- 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() {
+ var center = Math.round(size / 2);
+
svg.append('line')
- .attr('x1', size / 2)
+ .attr('x1', center)
.attr('y1', 0)
- .attr('x2', size / 2)
+ .attr('x2', center)
.attr('y2', size)
.attr('stroke-width', 5);
svg.append('line')
.attr('x1', 0)
- .attr('y1', size / 2)
+ .attr('y1', center)
.attr('x2', size)
- .attr('y2', size / 2)
+ .attr('y2', center)
.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();
-
+ plotCircles();
};
return self;
diff --git a/test/graphing/radar-spec.js b/test/graphing/radar-spec.js
index 7608988..5c7d3b5 100644
--- a/test/graphing/radar-spec.js
+++ b/test/graphing/radar-spec.js
@@ -1,13 +1,20 @@
describe('tr.graphing.Radar', function () {
+ var radar;
+
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);
- 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);
@@ -19,7 +26,7 @@ describe('tr.graphing.Radar', function () {
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();
@@ -36,7 +43,7 @@ describe('tr.graphing.Radar', function () {
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();
@@ -47,5 +54,38 @@ describe('tr.graphing.Radar', function () {
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);
+ });
+ });
});
--
2.39.5