2 * Copyright (C) 2013 Google Inc. All rights reserved.
4 * Redistribution and use in source and binary forms, with or without
5 * modification, are permitted provided that the following conditions are
8 * * Redistributions of source code must retain the above copyright
9 * notice, this list of conditions and the following disclaimer.
10 * * Redistributions in binary form must reproduce the above
11 * copyright notice, this list of conditions and the following disclaimer
12 * in the documentation and/or other materials provided with the
14 * * Neither the name of Google Inc. nor the names of its
15 * contributors may be used to endorse or promote products derived from
16 * this software without specific prior written permission.
18 * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
19 * "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
20 * LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
21 * A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
22 * OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
23 * SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
24 * LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
25 * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
26 * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
27 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
28 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
33 * @param {number=} totalValue
34 * @param {function(number):string=} formatter
36 WebInspector.PieChart = function(totalValue, formatter)
38 const shadowOffset = 0.04;
39 this.element = document.createElementWithClass("div", "pie-chart");
40 var svg = this._createSVGChild(this.element, "svg");
41 svg.setAttribute("width", "100%");
42 svg.setAttribute("height", (100 * (1 + shadowOffset)) + "%");
43 this._group = this._createSVGChild(svg, "g");
44 var shadow = this._createSVGChild(this._group, "circle");
45 shadow.setAttribute("r", 1);
46 shadow.setAttribute("cy", shadowOffset);
47 shadow.setAttribute("fill", "hsl(0,0%,70%)");
48 var background = this._createSVGChild(this._group, "circle");
49 background.setAttribute("r", 1);
50 background.setAttribute("fill", "hsl(0,0%,92%)");
52 var totalString = formatter ? formatter(totalValue) : totalValue;
53 this._totalElement = this.element.createChild("div", "pie-chart-foreground");
54 this._totalElement.textContent = totalString;
55 this._totalValue = totalValue;
57 this._lastAngle = -Math.PI/2;
61 WebInspector.PieChart.prototype = {
63 * @param {number} value
65 setTotal: function(value)
67 this._totalValue = value;
71 * @param {number} value
73 setSize: function(value)
75 this._group.setAttribute("transform", "scale(" + (value / 2) + ") translate(1,1)");
76 var size = value + "px";
77 this.element.style.width = size;
78 this.element.style.height = size;
79 if (this._totalElement)
80 this._totalElement.style.lineHeight = size;
84 * @param {number} value
85 * @param {string} color
87 addSlice: function(value, color)
89 var sliceAngle = value / this._totalValue * 2 * Math.PI;
90 if (!isFinite(sliceAngle))
92 sliceAngle = Math.min(sliceAngle, 2 * Math.PI * 0.9999);
93 var path = this._createSVGChild(this._group, "path");
94 var x1 = Math.cos(this._lastAngle);
95 var y1 = Math.sin(this._lastAngle);
96 this._lastAngle += sliceAngle;
97 var x2 = Math.cos(this._lastAngle);
98 var y2 = Math.sin(this._lastAngle);
99 var largeArc = sliceAngle > Math.PI ? 1 : 0;
100 path.setAttribute("d", "M0,0 L" + x1 + "," + y1 + " A1,1,0," + largeArc + ",1," + x2 + "," + y2 + " Z");
101 path.setAttribute("fill", color);
105 * @param {!Element} parent
106 * @param {string} childType
109 _createSVGChild: function(parent, childType)
111 var child = document.createElementNS("http://www.w3.org/2000/svg", childType);
112 parent.appendChild(child);