Fade language label in distribution graph
[gitphp.git] / js / modules / languagedistgraph.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
/*
 * GitPHP language distribution graph
 * 
 * Display language distribution graph
 *
 * @author Christopher Han <xiphux@gmail.com>
 * @copyright Copyright (c) 2012 Christopher Han
 * @package GitPHP
 * @subpackage Javascript
 */
 
define(["modules/geturl", "modules/getproject", "d3"],
        function(getUrl, getProject) {
 
                var url = null;
                var project = null;
 
                var width = 600;
                var height = 600;
                var radius = 200;
                var innerRadius = 100;
                var growRadius = 20;
 
                var pie = null;
                var color = null;
                var svg = null;
 
                var arcGroup = null;
                var arc = null;
                var grownArc = null;
 
                var placeholderGroup = null;
                var placeholder = null;
 
                var centerGroup = null;
                var langLabel = null;
                var countLabel = null;
                var filesLabel = null;
 
                var pieTween = function(d, i) {
                        var i = d3.interpolate({startAngle: 0, endAngle: 0}, {startAngle: d.startAngle, endAngle: d.endAngle});
                        return function(t) {
                                return arc(i(t));
                        };
                };
 
                var init = function(graphContainer) {
 
                        pie = d3.layout.pie().value(function(d) {
                                return d.value;
                        });
 
                        color = d3.scale.category20();
 
                        svg = d3.select(graphContainer).append("svg")
                                .attr("width", width)
                                .attr("height", height);
 
                        placeholderGroup = svg.append("g")
                                .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");
 
                        arcGroup = svg.append("g")
                                .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");
 
                        centerGroup = svg.append("g")
                                .attr("transform", "translate(" + (width/2) + "," + (height/2) + ")");
 
                        langLabel = centerGroup.append("text")
                                .attr("dy", -25)
                                .attr("font-size", "16")
                                .attr("text-anchor", "middle")
                                .style('opacity', 0);
 
                        countLabel = centerGroup.append("text")
                                .attr("dy", 0)
                                .attr("text-anchor", "middle")
                                .attr("font-size", "20")
                                .text("Loading");
 
                        filesLabel = centerGroup.append("text")
                                .attr("dy", 20)
                                .attr("text-anchor", "middle")
                                .attr("fill", "gray")
                                .attr("font-size", "12")
                                .text("files");
 
                        placeholder = placeholderGroup.append("path")
                                .attr("fill", "#EFEFEF")
                                .attr("d", d3.svg.arc().innerRadius(innerRadius).outerRadius(radius).startAngle(0).endAngle(6.28318531)());
 
                        arc = d3.svg.arc().innerRadius(innerRadius).outerRadius(radius);
                        grownArc = d3.svg.arc().innerRadius(innerRadius).outerRadius(radius + growRadius);
 
                        url = getUrl();
                        project = getProject();
 
                        d3.json(url + "?p=" + project + "&a=graphdata&g=languagedist", function(data) {
                                var dataEntries = d3.entries(data);
                                var count = 0;
                                if (dataEntries.length > 0) {
                                        dataEntries.forEach(function(d) {
                                                count += d.value;
                                        });
                                }
                                countLabel.text(count);
 
                                var paths = arcGroup.selectAll("path").data(pie(dataEntries));
                                
                                paths.enter().append("path")
                                        .attr("stroke", "white")
                                        .attr("stroke-width", 0.5)
                                        .attr("fill", function(d, i) { return color(i); })
                                        .transition()
                                        .duration(750)
                                        .attrTween("d", pieTween)
                                        .each("end", function() {
                                                placeholderGroup.remove();
                                        });
 
                                arcGroup.selectAll("path").on("mouseover", function(d) {
                                                d3.select(this).transition()
                                                        .duration(250)
                                                        .attr("d", grownArc);
                                                langLabel.transition().style('opacity', 1).text(d.data.key);
                                                countLabel.text(d.data.value);
                                        })
                                        .on("mouseout", function(d) {
                                                d3.select(this).transition()
                                                        .duration(250)
                                                        .attr("d", arc);
                                                langLabel.transition().style('opacity', 0);
                                                countLabel.text(count);
                                        });
 
                        });
                };
 
                return {
                        init: init
                };
        }
);
 
comments