Fade language label in distribution graph
[gitphp.git] / js / modules / languagedistgraph.js
blob:a/js/modules/languagedistgraph.js -> blob:b/js/modules/languagedistgraph.js
/* /*
* GitPHP language distribution graph * GitPHP language distribution graph
* *
* Display language distribution graph * Display language distribution graph
* *
* @author Christopher Han <xiphux@gmail.com> * @author Christopher Han <xiphux@gmail.com>
* @copyright Copyright (c) 2012 Christopher Han * @copyright Copyright (c) 2012 Christopher Han
* @package GitPHP * @package GitPHP
* @subpackage Javascript * @subpackage Javascript
*/ */
   
define(["modules/geturl", "modules/getproject", "d3"], define(["modules/geturl", "modules/getproject", "d3"],
function(getUrl, getProject) { function(url, project) {
   
var url = null;  
var project = null;  
   
var width = 600; var width = 600;
var height = 600; var height = 600;
var radius = 200; var radius = 200;
var innerRadius = 100; var innerRadius = 100;
var growRadius = 20; var growRadius = 20;
   
var pie = null; var pie = null;
var color = null; var color = null;
var svg = null; var svg = null;
   
var arcGroup = null; var arcGroup = null;
var arc = null; var arc = null;
var grownArc = null; var grownArc = null;
   
var placeholderGroup = null; var placeholderGroup = null;
var placeholder = null; var placeholder = null;
   
var centerGroup = null; var centerGroup = null;
var langLabel = null; var langLabel = null;
var countLabel = null; var countLabel = null;
var filesLabel = null; var filesLabel = null;
   
var pieTween = function(d, i) { var pieTween = function(d, i) {
var i = d3.interpolate({startAngle: 0, endAngle: 0}, {startAngle: d.startAngle, endAngle: d.endAngle}); var i = d3.interpolate({startAngle: 0, endAngle: 0}, {startAngle: d.startAngle, endAngle: d.endAngle});
return function(t) { return function(t) {
return arc(i(t)); return arc(i(t));
}; };
}; };
   
var init = function(graphContainer) { var init = function(graphContainer) {
   
pie = d3.layout.pie().value(function(d) { pie = d3.layout.pie().value(function(d) {
return d.value; return d.value;
}); });
   
color = d3.scale.category20(); color = d3.scale.category20();
   
svg = d3.select(graphContainer).append("svg") svg = d3.select(graphContainer).append("svg")
.attr("width", width) .attr("width", width)
.attr("height", height); .attr("height", height);
   
placeholderGroup = svg.append("g") placeholderGroup = svg.append("g")
.attr("transform", "translate(" + (width/2) + "," + (height/2) + ")"); .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");
   
arcGroup = svg.append("g") arcGroup = svg.append("g")
.attr("transform", "translate(" + (width/2) + "," + (height/2) + ")"); .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");
   
centerGroup = svg.append("g") centerGroup = svg.append("g")
.attr("transform", "translate(" + (width/2) + "," + (height/2) + ")"); .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");
   
langLabel = centerGroup.append("text") langLabel = centerGroup.append("text")
.attr("dy", -25) .attr("dy", -25)
.attr("font-size", "16") .attr("font-size", "16")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.style('opacity', 0); .style('opacity', 0);
   
countLabel = centerGroup.append("text") countLabel = centerGroup.append("text")
.attr("dy", 0) .attr("dy", 0)
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("font-size", "20") .attr("font-size", "20")
.text("Loading"); .text("Loading");
   
filesLabel = centerGroup.append("text") filesLabel = centerGroup.append("text")
.attr("dy", 20) .attr("dy", 20)
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("fill", "gray") .attr("fill", "gray")
.attr("font-size", "12") .attr("font-size", "12")
.text("files"); .text("files");
   
placeholder = placeholderGroup.append("path") placeholder = placeholderGroup.append("path")
.attr("fill", "#EFEFEF") .attr("fill", "#EFEFEF")
.attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(radius).startAngle(0).endAngle(6.28318531)()); .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(radius).startAngle(0).endAngle(6.28318531)());
   
arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(radius); arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(radius);
grownArc = d3.svg.arc().innerRadius(innerRadius).outerRadius(radius + growRadius); grownArc = d3.svg.arc().innerRadius(innerRadius).outerRadius(radius + growRadius);
   
url = getUrl();  
project = getProject();  
   
d3.json(url + "?p=" + project + "&a=graphdata&g=languagedist", function(data) { d3.json(url + "?p=" + project + "&a=graphdata&g=languagedist", function(data) {
var dataEntries = d3.entries(data); var dataEntries = d3.entries(data);
var count = 0; var count = 0;
if (dataEntries.length > 0) { if (dataEntries.length > 0) {
dataEntries.forEach(function(d) { dataEntries.forEach(function(d) {
count += d.value; count += d.value;
}); });
} }
countLabel.text(count); countLabel.text(count);
   
var paths = arcGroup.selectAll("path").data(pie(dataEntries)); var paths = arcGroup.selectAll("path").data(pie(dataEntries));
paths.enter().append("path") paths.enter().append("path")
.attr("stroke", "white") .attr("stroke", "white")
.attr("stroke-width", 0.5) .attr("stroke-width", 0.5)
.attr("fill", function(d, i) { return color(i); }) .attr("fill", function(d, i) { return color(i); })
.transition() .transition()
.duration(750) .duration(750)
.attrTween("d", pieTween) .attrTween("d", pieTween)
.each("end", function() { .each("end", function() {
placeholderGroup.remove(); placeholderGroup.remove();
}); });
   
arcGroup.selectAll("path").on("mouseover", function(d) { arcGroup.selectAll("path").on("mouseover", function(d) {
d3.select(this).transition() d3.select(this).transition()
.duration(250) .duration(250)
.attr("d", grownArc); .attr("d", grownArc);
langLabel.transition().style('opacity', 1).text(d.data.key); langLabel.transition().style('opacity', 1).text(d.data.key);
countLabel.text(d.data.value); countLabel.text(d.data.value);
}) })
.on("mouseout", function(d) { .on("mouseout", function(d) {
d3.select(this).transition() d3.select(this).transition()
.duration(250) .duration(250)
.attr("d", arc); .attr("d", arc);
langLabel.transition().style('opacity', 0); langLabel.transition().style('opacity', 0);
countLabel.text(count); countLabel.text(count);
}); });
   
}); });
}; };
   
return { return {
init: init init: init
}; };
} }
); );
   
comments