1 /* 2 * Copyright (C) 2013 Google Inc. All rights reserved. 3 * 4 * Redistribution and use in source and binary forms, with or without 5 * modification, are permitted provided that the following conditions are 6 * met: 7 * 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 13 * distribution. 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. 17 * 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. 29 */ 30 31 /** 32 * @constructor 33 * @param {number} size 34 * @param {function(number):string=} formatter 35 */ 36 WebInspector.PieChart = function(size, formatter) 37 { 38 var shadowSize = WebInspector.PieChart._ShadowSizePercent; 39 this.element = document.createElementWithClass("div", "pie-chart"); 40 this.element.appendChild(WebInspector.View.createStyleElement("pieChart.css")); 41 var svg = this._createSVGChild(this.element, "svg"); 42 svg.setAttribute("width", (100 * (1 + 2 * shadowSize)) + "%"); 43 svg.setAttribute("height", (100 * (1 + 2 * shadowSize)) + "%"); 44 this._group = this._createSVGChild(svg, "g"); 45 var shadow = this._createSVGChild(this._group, "circle"); 46 shadow.setAttribute("r", 1 + shadowSize); 47 shadow.setAttribute("cy", shadowSize); 48 shadow.setAttribute("fill", "hsl(0,0%,70%)"); 49 var background = this._createSVGChild(this._group, "circle"); 50 background.setAttribute("r", 1); 51 background.setAttribute("fill", "hsl(0,0%,92%)"); 52 this._foregroundElement = this.element.createChild("div", "pie-chart-foreground"); 53 this._totalElement = this._foregroundElement.createChild("div", "pie-chart-total"); 54 this._formatter = formatter; 55 this._slices = []; 56 this._lastAngle = -Math.PI/2; 57 this._setSize(size); 58 } 59 60 WebInspector.PieChart._ShadowSizePercent = 0.02; 61 62 WebInspector.PieChart.prototype = { 63 /** 64 * @param {number} totalValue 65 */ 66 setTotal: function(totalValue) 67 { 68 for (var i = 0; i < this._slices.length; ++i) 69 this._slices[i].remove(); 70 this._slices = []; 71 this._totalValue = totalValue; 72 var totalString; 73 if (totalValue) 74 totalString = this._formatter ? this._formatter(totalValue) : totalValue; 75 else 76 totalString = ""; 77 this._totalElement.textContent = totalString; 78 }, 79 80 /** 81 * @param {number} value 82 */ 83 _setSize: function(value) 84 { 85 this._group.setAttribute("transform", "scale(" + (value / 2) + ") translate(" + (1 + WebInspector.PieChart._ShadowSizePercent) + ",1)"); 86 var size = value + "px"; 87 this.element.style.width = size; 88 this.element.style.height = size; 89 }, 90 91 /** 92 * @param {number} value 93 * @param {string} color 94 */ 95 addSlice: function(value, color) 96 { 97 var sliceAngle = value / this._totalValue * 2 * Math.PI; 98 if (!isFinite(sliceAngle)) 99 return; 100 sliceAngle = Math.min(sliceAngle, 2 * Math.PI * 0.9999); 101 var path = this._createSVGChild(this._group, "path"); 102 var x1 = Math.cos(this._lastAngle); 103 var y1 = Math.sin(this._lastAngle); 104 this._lastAngle += sliceAngle; 105 var x2 = Math.cos(this._lastAngle); 106 var y2 = Math.sin(this._lastAngle); 107 var largeArc = sliceAngle > Math.PI ? 1 : 0; 108 path.setAttribute("d", "M0,0 L" + x1 + "," + y1 + " A1,1,0," + largeArc + ",1," + x2 + "," + y2 + " Z"); 109 path.setAttribute("fill", color); 110 this._slices.push(path); 111 }, 112 113 /** 114 * @param {!Element} parent 115 * @param {string} childType 116 * @return {!Element} 117 */ 118 _createSVGChild: function(parent, childType) 119 { 120 var child = document.createElementNS("http://www.w3.org/2000/svg", childType); 121 parent.appendChild(child); 122 return child; 123 } 124 } 125
