Make url and project getters precalculated rather than functions
[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
/*
 * 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(url, project) {
 
                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);
 
                        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