https://impostometro.com.br/Content/js/d3-chart/scripts/radialProgress.js

1/**
2 Copyright (c) 2014 BrightPoint Consulting, Inc.
3
4 Permission is hereby granted, free of charge, to any person
5 obtaining a copy of this software and associated documentation
6 files (the "Software"), to deal in the Software without
7 restriction, including without limitation the rights to use,
8 copy, modify, merge, publish, distribute, sublicense, and/or sell
9 copies of the Software, and to permit persons to whom the
10 Software is furnished to do so, subject to the following
11 conditions:
12
13 The above copyright notice and this permission notice shall be
14 included in all copies or substantial portions of the Software.
15
16 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
17 EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
18 OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
19 NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
20 HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
21 WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
22 FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
23 OTHER DEALINGS IN THE SOFTWARE.
24 */
25
26function radialProgress(parent) {
27    var _data=null,
28        _duration= 1000,
29        _selection,
30        _margin = {top:0, right:0, bottom:30, left:0},
31        __width = 300,
32        __height = 300,
33        _diameter,
34        _label="",
35        _fontSize=10;
36
37
38    var _mouseClick;
39
40    var _value= 0,
41        _minValue = 0,
42        _maxValue = 100;
43
44    var  _currentArc= 0, _currentArc2= 0, _currentValue=0;
45
46    var _arc = d3.svg.arc()
47        .startAngle(0 * (Math.PI/180)); //just radians
48
49    var _arc2 = d3.svg.arc()
50        .startAngle(0 * (Math.PI/180))
51        .endAngle(0); //just radians
52
53
54    _selection=d3.select(parent);
55
56
57    function component() {
58
59        _selection.each(function (data) {
60
61            // Select the svg element, if it exists.
62            var svg = d3.select(this).selectAll("svg").data([data]);
63
64            var enter = svg.enter().append("svg").attr("class","radial-svg").append("g");
65
66            measure();
67
68            svg.attr("width", __width)
69                .attr("height", __height);
70
71
72            var background = enter.append("g").attr("class","component")
73                .attr("cursor","pointer")
74                .on("click",onMouseClick);
75
76
77            _arc.endAngle(360 * (Math.PI/180))
78
79            background.append("rect")
80                .attr("class","background")
81                .attr("width", _width)
82                .attr("height", _height);
83
84            background.append("path")
85                .attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
86                .attr("d", _arc);
87
88            background.append("text")
89                .attr("class", "label")
90                .attr("transform", "translate(" + _width/2 + "," + (_width + _fontSize) + ")")
91                .text(_label);
92           var g = svg.select("g")
93                .attr("transform", "translate(" + _margin.left + "," + _margin.top + ")");
94
95
96            _arc.endAngle(_currentArc);
97            enter.append("g").attr("class", "arcs");
98            var path = svg.select(".arcs").selectAll(".arc").data(data);
99            path.enter().append("path")
100                .attr("class","arc")
101                .attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
102                .attr("d", _arc);
103
104            //Another path in case we exceed 100%
105            var path2 = svg.select(".arcs").selectAll(".arc2").data(data);
106            path2.enter().append("path")
107                .attr("class","arc2")
108                .attr("transform", "translate(" + _width/2 + "," + _width/2 + ")")
109                .attr("d", _arc2);
110
111
112            enter.append("g").attr("class", "labels");
113            var label = svg.select(".labels").selectAll(".label").data(data);
114            label.enter().append("text")
115                .attr("class","label")
116                .attr("y",_width/2+_fontSize/3)
117                .attr("x",_width/2)
118                .attr("cursor","pointer")
119                .attr("width",_width)
120                // .attr("x",(3*_fontSize/2))
121                .text(function (d) { return (_value-_minValue)/(_maxValue-_minValue)*100 + "%" })
122                .style("font-size",_fontSize+"px")
123                .on("click",onMouseClick);
124
125            path.exit().transition().duration(500).attr("x",1000).remove();
126
127
128            layout(svg);
129
130            function layout(svg) {
131
132                var ratio=(_value-_minValue)/(_maxValue-_minValue);
133                var endAngle=Math.min(360*ratio,360);
134                endAngle=endAngle * Math.PI/180;

135
136                path.datum(endAngle);
137                path.transition().duration(_duration)
138                    .attrTween("d", arcTween);
139
140                if (ratio > 1) {
141                    path2.datum(Math.min(360*(ratio-1),360) * Math.PI/180);
142                    path2.transition().delay(_duration).duration(_duration)
143                        .attrTween("d", arcTween2);
144                }
145
146                label.datum(ratio * 100);
147                label.transition().duration(0).tween("text", labelTween);
148
149            }
150
151        });
152
153        function onMouseClick(d) {
154            if (typeof _mouseClick == "function") {
155                _mouseClick.call();
156            }
157        }
158    }
159
160    function labelTween(a) {
161        var i = d3.interpolate(_currentValue, a);
162        _currentValue = i(0);
163
164        return function (t) {
165             _currentValue = i(t);
166            this.textContent = parseFloat(i(t)).toFixed(2) + "%";
167        }
168    }
169
170    function arcTween(a) {
171        var i = d3.interpolate(_currentArc, a);
172
173        return function(t) {
174            _currentArc=i(t);
175            return _arc.endAngle(i(t))();
176        };
177    }
178
179    function arcTween2(a) {
180        var i = d3.interpolate(_currentArc2, a);
181
182        return function(t) {
183            return _arc2.endAngle(i(t))();
184        };
185    }
186
187
188    function measure() {
189        _width=_diameter - _margin.right - _margin.left - _margin.top - _margin.bottom;
190        _height=_width;
191        _fontSize=_width*.2;
192        _arc.outerRadius(_width/2);
193        _arc.innerRadius(_width/2 * .85);
194        _arc2.outerRadius(_width/2 * .85);
195        _arc2.innerRadius(_width/2 * .85 - (_width/2 * .15));
196    }
197
198
199    component.render = function() {
200        measure();
201        component();
202        return component;
203    }
204
205    component.value = function (_) {
206        if (!arguments.length) return _value;
207        _value = [_];
208        _selection.datum([_value]);
209        return component;
210    }
211
212
213    component.margin = function(_) {
214        if (!arguments.length) return _margin;
215        _margin = _;
216        return component;
217    };
218
219    component.diameter = function(_) {
220        if (!arguments.length) return _diameter
221        _diameter =  _;
222        return component;
223    };
224
225    component.minValue = function(_) {
226        if (!arguments.length) return _minValue;
227        _minValue = _;
228        return component;
229    };
230
231    component.maxValue = function(_) {
232        if (!arguments.length) return _maxValue;
233        _maxValue = _;
234        return component;
235    };
236
237    component.label = function(_) {
238        if (!arguments.length) return _label;
239        _label = _;
240        return component;
241    };
242
243    component._duration = function(_) {
244        if (!arguments.length) return _duration;
245        _duration = _;
246        return component;
247    };
248
249    component.onClick = function (_) {
250        if (!arguments.length) return _mouseClick;
251        _mouseClick=_;
252        return component;
253    }
254
255    return component;
256
257}