From: Bruno Trecenti Date: Thu, 27 Feb 2014 10:45:34 +0000 (-0300) Subject: added styles and geometries X-Git-Url: https://pwan.org/git/?p=tech-radar.git;a=commitdiff_plain;h=45a27393f3497537d3cd7e8d9cd639cf12d7ae98 added styles and geometries --- diff --git a/bower.json b/bower.json index 9de5e2f..48945d0 100644 --- a/bower.json +++ b/bower.json @@ -8,6 +8,7 @@ "license": "MIT", "private": true, "dependencies": { - "d3": "~3.4.2" + "d3": "~3.4.2", + "chance": "~0.5.4" } } diff --git a/examples/default.html b/examples/default.html index c3f5843..398dafe 100644 --- a/examples/default.html +++ b/examples/default.html @@ -3,6 +3,8 @@ Thoughtworks Radar 2014 + + @@ -12,6 +14,9 @@ diff --git a/src/graphing/radar.js b/src/graphing/radar.js index 10e2483..2ae2f4d 100644 --- a/src/graphing/radar.js +++ b/src/graphing/radar.js @@ -51,11 +51,13 @@ tr.graphing.Radar = function (svg, size, radar) { cycles.forEach(function (cycle, i) { svg.append('text') + .attr('class', 'line-text') .attr('y', center() + 4) .attr('x', center() - getRadius(cycles, i) + 10) .text(cycle.name()); svg.append('text') + .attr('class', 'line-text') .attr('y', center() + 4) .attr('x', center() + getRadius(cycles, i) - 10) .attr('text-anchor', 'end') @@ -63,11 +65,36 @@ tr.graphing.Radar = function (svg, size, radar) { }); }; - function random(min, max) { - return Math.floor(Math.random() * (max - min + 1)) + min; + function triangle(x, y, cssClass) { + return svg.append('path') + .attr('d', 'M412.201,311.406c0.021,0,0.042,0,0.063,0c0.067,0,0.135,0,0.201,0c4.052,0,6.106-0.051,8.168-0.102c2.053-0.051,4.115-0.102,8.176-0.102h0.103c6.976-0.183,10.227-5.306,6.306-11.53c-3.988-6.121-4.97-5.407-8.598-11.224c-1.631-3.008-3.872-4.577-6.179-4.577c-2.276,0-4.613,1.528-6.48,4.699c-3.578,6.077-3.26,6.014-7.306,11.723C402.598,306.067,405.426,311.406,412.201,311.406') + .attr('transform', 'translate(' + ((-421 * .73) + x) + ',' + ((-299 * 0.73) + y) + ') scale(0.73) ') + .attr('class', cssClass) + .attr('stroke-width', 2); + + var tsize = 7 + + var top = y - tsize + 2; + var left = (x - tsize); + var right = (x + tsize); + var bottom = (y + tsize); + + var points = x + ',' + top + ' ' + left + ',' + bottom + ' ' + right + ',' + bottom; } - function plotBlips(cycles, blips, adjustX, adjustY) { + function circle(x, y, cssClass) { + svg.append('circle') + .attr('cx', x) + .attr('cy', y) + .attr('class', cssClass) + .attr('stroke-width', 1.5) + .attr('r', 10); + } + + function plotBlips(cycles, quadrant, adjustX, adjustY) { + var blips, number; + blips = quadrant.blips(); + number = 0; cycles.forEach(function (cycle, i) { var maxRadius, minRadius, cycleBlips; @@ -81,28 +108,68 @@ tr.graphing.Radar = function (svg, size, radar) { cycleBlips.forEach(function (blip) { var angleInRad, radius; - angleInRad = Math.PI * random(5, 85) / 180; - radius = random(minRadius + 5, maxRadius - 5); + var split = blip.name().split(''); + var sum = split.reduce(function (p, c) { return p + c.charCodeAt(0); }, 0); + chance = new Chance(sum * cycle.name().length * number); + + angleInRad = Math.PI * chance.integer({ min: 13, max: 85 }) / 180; + radius = chance.floating({ min: minRadius + 25, max: maxRadius - 10 }); + + var x = center() + radius * Math.cos(angleInRad) * adjustX; + var y = center() + radius * Math.sin(angleInRad) * adjustY; - svg.append('circle') - .attr('cx', center() + radius * Math.cos(angleInRad) * adjustX) - .attr('cy', center() + radius * Math.sin(angleInRad) * adjustY) - .attr('r', 5) - .append('title').text(blip.name()); + if (blip.isNew()) { + triangle(x, y, cssClassFor(quadrant.name())); + } else { + circle(x, y, cssClassFor(quadrant.name())); + } + + svg.append('text') + .attr('x', x) + .attr('y', y + 4) + .attr('class', 'blip-text') + .attr('text-anchor', 'middle') + .text(++number) }); }); }; + function cssClassFor(string) { + return string.toLowerCase().replace(/\s\&/g, '').replace(/\s/g, '-'); + } + + function plotQuadrantNames(quadrants) { + function plotName(name, anchor, x, y) { + svg.append('text') + .attr('x', x) + .attr('y', y) + .attr('class', cssClassFor(name)) + .attr('text-anchor', anchor) + .text(name); + } + + plotName(quadrants.I.name(), 'end', size - 10, 10) + plotName(quadrants.II.name(), 'start', 10, 10) + plotName(quadrants.III.name(), 'start', 10, size - 10) + plotName(quadrants.IV.name(), 'end', size -10, size - 10) + } + self.plot = function () { - var cycles = radar.cycles().reverse(); + var cycles, quadrants; + cycles = radar.cycles().reverse(); + quadrants = radar.quadrants(); plotCircles(cycles); plotLines(); plotTexts(cycles); - plotBlips(cycles, radar.quadrants().I.blips(), 1, -1); - plotBlips(cycles, radar.quadrants().II.blips(), -1, -1); - plotBlips(cycles, radar.quadrants().III.blips(), -1, 1); - plotBlips(cycles, radar.quadrants().IV.blips(), 1, 1); + + if (radar.hasQuadrants()) { + plotQuadrantNames(quadrants); + plotBlips(cycles, quadrants.I, 1, -1); + plotBlips(cycles, quadrants.II, -1, -1); + plotBlips(cycles, quadrants.III, -1, 1); + plotBlips(cycles, quadrants.IV, 1, 1); + } }; return self; diff --git a/src/models/radar.js b/src/models/radar.js index c6bfdbd..71af014 100644 --- a/src/models/radar.js +++ b/src/models/radar.js @@ -38,6 +38,10 @@ tr.models.Radar = function() { }, []); } + self.hasQuadrants = function () { + return !!quadrants.I || !!quadrants.II || !!quadrants.III || !!quadrants.IV; + } + self.cycles = function () { var cycleHash, cycleArray;