<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;
<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>
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;
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);
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();
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();
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);
+ });
+ });
});
projects / tech-radar.git / commitdiff