added radar graphing and vertical line
authorBruno Trecenti <btrecent@thoughtworks.com>
Tue, 25 Feb 2014 13:47:04 +0000 (10:47 -0300)
committerBruno Trecenti <btrecent@thoughtworks.com>
Tue, 25 Feb 2014 13:47:04 +0000 (10:47 -0300)
examples/default.html [new file with mode: 0644]
src/graphing/radar.js [new file with mode: 0644]
test/graphing/radar-spec.js [new file with mode: 0644]

diff --git a/examples/default.html b/examples/default.html
new file mode 100644 (file)
index 0000000..abe29ca
--- /dev/null
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <script src="../bower_components/d3/d3.min.js"></script>
+  <script src="../src/namespaces.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;
+    }
+    svg circle {
+      fill: transparent;
+      stroke: #cacaca;
+    }
+    svg text {
+      font: 14px 'Open Sans';
+      fill: #7a7a7a;
+    }
+    svg line {
+      stroke: #cacaca;
+    }
+
+  </style>
+</head>
+<body>
+</body>
+  <script>
+    var radarGraph = new tr.graphing.Radar(d3.select("body").append("svg"), 500);
+    radarGraph.plot();
+  </script>
+</html>
diff --git a/src/graphing/radar.js b/src/graphing/radar.js
new file mode 100644 (file)
index 0000000..2f472f9
--- /dev/null
@@ -0,0 +1,21 @@
+tr.graphing.Radar = function (svg, size, radar) {
+  var self = {};
+
+  svg.attr('width', size).attr('height', size);
+
+  function plotLines() {
+    svg.append('line')
+      .attr('x1', size / 2)
+      .attr('y1', 0)
+      .attr('x2', size / 2)
+      .attr('y2', size)
+      .attr('stroke-width', 5);
+  };
+
+  self.plot = function () {
+    plotLines();
+
+  };
+
+  return self;
+};
diff --git a/test/graphing/radar-spec.js b/test/graphing/radar-spec.js
new file mode 100644 (file)
index 0000000..f5747c6
--- /dev/null
@@ -0,0 +1,34 @@
+describe('tr.graphing.Radar', function () {
+  function buildSvg() {
+    return d3.select("body").append("svg");
+  }
+
+  it('sets the size', function () {
+    var svg = buildSvg();
+    spyOn(svg, 'attr').andReturn(svg);
+
+    var radarGraph = new tr.graphing.Radar(svg, 500);
+
+    expect(svg.attr).toHaveBeenCalledWith('width', 500);
+    expect(svg.attr).toHaveBeenCalledWith('height', 500);
+  });
+
+  describe('lines', function () {
+    it('plots a vertical line in the center', function () {
+      var svg = buildSvg();
+      spyOn(svg, 'append').andReturn(svg);
+      spyOn(svg, 'attr').andReturn(svg);
+
+      var radarGraph = new tr.graphing.Radar(svg, 500);
+
+      radarGraph.plot();
+
+      expect(svg.append).toHaveBeenCalledWith('line');
+      expect(svg.attr).toHaveBeenCalledWith('x1', 500 / 2);
+      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);
+    });
+  })
+});