X-Git-Url: https://pwan.org/git/?a=blobdiff_plain;ds=sidebyside;f=src%2Fgraphing%2Fradar.js;h=3bfd70030aecfb4c410b329aa81893191466a22f;hb=4e488d92209240532d080c10f46c6db9f0e42cf2;hp=2ae2f4decb1a428b573d25e1f7217ba4afeada34;hpb=45a27393f3497537d3cd7e8d9cd639cf12d7ae98;p=tech-radar.git diff --git a/src/graphing/radar.js b/src/graphing/radar.js index 2ae2f4d..3bfd700 100644 --- a/src/graphing/radar.js +++ b/src/graphing/radar.js @@ -1,9 +1,13 @@ -tr.graphing.Radar = function (svg, size, radar) { - var self, fib; - self = {}; +tr.graphing.Radar = function (size, radar, toolTipDescription) { + var self, fib, svg, texts; + + texts = []; fib = new tr.util.Fib(); - svg.attr('width', size).attr('height', size); + self = {}; + self.svg = function () { + return svg; + } function center () { return Math.round(size/2); @@ -65,25 +69,25 @@ tr.graphing.Radar = function (svg, size, radar) { }); }; - 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); + function triangle(x, y, cssClass, group) { + var tsize, top, left, right, bottom, points; - var tsize = 7 + tsize = 13 + top = y - tsize; + left = (x - tsize + 1); + right = (x + tsize + 1); + bottom = (y + tsize - tsize / 2.5); - var top = y - tsize + 2; - var left = (x - tsize); - var right = (x + tsize); - var bottom = (y + tsize); + points = x + 1 + ',' + top + ' ' + left + ',' + bottom + ' ' + right + ',' + bottom; - var points = x + ',' + top + ' ' + left + ',' + bottom + ' ' + right + ',' + bottom; + return (group || svg).append('polygon') + .attr('points', points) + .attr('class', cssClass) + .attr('stroke-width', 1.5); } - function circle(x, y, cssClass) { - svg.append('circle') + function circle(x, y, cssClass, group) { + return (group || svg).append('circle') .attr('cx', x) .attr('cy', y) .attr('class', cssClass) @@ -91,10 +95,9 @@ tr.graphing.Radar = function (svg, size, radar) { .attr('r', 10); } - function plotBlips(cycles, quadrant, adjustX, adjustY) { - var blips, number; + function plotBlips(cycles, quadrant, adjustX, adjustY, cssClass) { + var blips; blips = quadrant.blips(); - number = 0; cycles.forEach(function (cycle, i) { var maxRadius, minRadius, cycleBlips; @@ -110,7 +113,7 @@ tr.graphing.Radar = function (svg, size, radar) { 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); + chance = new Chance(sum * cycle.name().length * blip.number()); angleInRad = Math.PI * chance.integer({ min: 13, max: 85 }) / 180; radius = chance.floating({ min: minRadius + 25, max: maxRadius - 10 }); @@ -118,58 +121,87 @@ tr.graphing.Radar = function (svg, size, radar) { var x = center() + radius * Math.cos(angleInRad) * adjustX; var y = center() + radius * Math.sin(angleInRad) * adjustY; + var group = svg.append('g').attr('class', 'blip-group'); + if (blip.isNew()) { - triangle(x, y, cssClassFor(quadrant.name())); + triangle(x, y, cssClass, group); } else { - circle(x, y, cssClassFor(quadrant.name())); + circle(x, y, cssClass, group); } - svg.append('text') + texts.push(function () { + var name; + + name = svg.append('text') + .attr('x', x + 15) + .attr('y', y + 4) + .attr('class', 'blip-name') + .attr('text-anchor', 'left') + .text(blip.name()) + + group + .on('mouseover', function () { name.style('display', 'block'); }) + .on('mouseout', function () { name.style('display', 'none'); }); + }); + + group.append('text') .attr('x', x) .attr('y', y + 4) .attr('class', 'blip-text') .attr('text-anchor', 'middle') - .text(++number) + .text(blip.number()) + .append("svg:title") + .text(blip.name() + ((toolTipDescription && blip.description()) + ? ': ' + blip.description().replace(/(<([^>]+)>)/ig, '') + : '' )) }); }); }; - function cssClassFor(string) { - return string.toLowerCase().replace(/\s\&/g, '').replace(/\s/g, '-'); - } - function plotQuadrantNames(quadrants) { - function plotName(name, anchor, x, y) { + function plotName(name, anchor, x, y, cssClass) { svg.append('text') .attr('x', x) .attr('y', y) - .attr('class', cssClassFor(name)) + .attr('class', cssClass) .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) + plotName(quadrants.I.name(), 'end', size - 10, 10, 'first') + plotName(quadrants.II.name(), 'start', 10, 10, 'second') + plotName(quadrants.III.name(), 'start', 10, size - 10, 'third') + plotName(quadrants.IV.name(), 'end', size -10, size - 10, 'fourth') } + self.init = function (selector) { + svg = d3.select(selector || 'body').append("svg"); + return self; + }; + self.plot = function () { var cycles, quadrants; + cycles = radar.cycles().reverse(); quadrants = radar.quadrants(); + svg.attr('width', size).attr('height', size); + plotCircles(cycles); plotLines(); plotTexts(cycles); 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); + plotBlips(cycles, quadrants.I, 1, -1, 'first'); + plotBlips(cycles, quadrants.II, -1, -1, 'second'); + plotBlips(cycles, quadrants.III, -1, 1, 'third'); + plotBlips(cycles, quadrants.IV, 1, 1, 'fourth'); } + + texts.forEach(function (fn) { + fn(); + }); }; return self;