third_party/WebKit/Source/devtools/front_end/ui_lazy/PieChart.js

   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  * @param {boolean=} showTotal
  36  */
  37 WebInspector.PieChart = function(size, formatter, showTotal)
  38 {
  39     var shadowSize = WebInspector.PieChart._ShadowSizePercent;
  40     this.element = createElement("div");
  41     this._shadowRoot = WebInspector.createShadowRootWithCoreStyles(this.element);
  42     this._shadowRoot.appendChild(WebInspector.Widget.createStyleElement("ui_lazy/pieChart.css"));
  43     var root = this._shadowRoot.createChild("div", "root");
  44     var svg = this._createSVGChild(root, "svg");
  45     svg.setAttribute("width", (100 * (1 + 2 * shadowSize)) + "%");
  46     svg.setAttribute("height", (100 * (1 + 2 * shadowSize)) + "%");
  47     this._group = this._createSVGChild(svg, "g");
  48     var shadow = this._createSVGChild(this._group, "circle");
  49     shadow.setAttribute("r", 1 + shadowSize);
  50     shadow.setAttribute("cy", shadowSize);
  51     shadow.setAttribute("fill", "hsl(0,0%,70%)");
  52     var background = this._createSVGChild(this._group, "circle");
  53     background.setAttribute("r", 1);
  54     background.setAttribute("fill", "hsl(0,0%,92%)");
  55     this._foregroundElement = root.createChild("div", "pie-chart-foreground");
  56     if (showTotal)
  57         this._totalElement = this._foregroundElement.createChild("div", "pie-chart-total");
  58     this._formatter = formatter;
  59     this._slices = [];
  60     this._lastAngle = -Math.PI/2;
  61     this._setSize(size);
  62 }
  63
  64 WebInspector.PieChart._ShadowSizePercent = 0.02;
  65
  66 WebInspector.PieChart.prototype = {
  67     /**
  68      * @param {number} totalValue
  69      */
  70     setTotal: function(totalValue)
  71     {
  72         for (var i = 0; i < this._slices.length; ++i)
  73             this._slices[i].remove();
  74         this._slices = [];
  75         this._totalValue = totalValue;
  76         var totalString;
  77         if (totalValue)
  78             totalString = this._formatter ? this._formatter(totalValue) : totalValue;
  79         else
  80             totalString = "";
  81         if (this._totalElement)
  82             this._totalElement.textContent = totalString;
  83     },
  84
  85     /**
  86      * @param {number} value
  87      */
  88     _setSize: function(value)
  89     {
  90         this._group.setAttribute("transform", "scale(" + (value / 2) + ") translate(" + (1 + WebInspector.PieChart._ShadowSizePercent) + ",1)");
  91         var size = value + "px";
  92         this.element.style.width = size;
  93         this.element.style.height = size;
  94     },
  95
  96     /**
  97      * @param {number} value
  98      * @param {string} color
  99      */
 100     addSlice: function(value, color)
 101     {
 102         var sliceAngle = value / this._totalValue * 2 * Math.PI;
 103         if (!isFinite(sliceAngle))
 104             return;
 105         sliceAngle = Math.min(sliceAngle, 2 * Math.PI * 0.9999);
 106         var path = this._createSVGChild(this._group, "path");
 107         var x1 = Math.cos(this._lastAngle);
 108         var y1 = Math.sin(this._lastAngle);
 109         this._lastAngle += sliceAngle;
 110         var x2 = Math.cos(this._lastAngle);
 111         var y2 = Math.sin(this._lastAngle);
 112         var largeArc = sliceAngle > Math.PI ? 1 : 0;
 113         path.setAttribute("d", "M0,0 L" + x1 + "," + y1 + " A1,1,0," + largeArc + ",1," + x2 + "," + y2 + " Z");
 114         path.setAttribute("fill", color);
 115         this._slices.push(path);
 116     },
 117
 118     /**
 119      * @param {!Element} parent
 120      * @param {string} childType
 121      * @return {!Element}
 122      */
 123     _createSVGChild: function(parent, childType)
 124     {
 125         var child = parent.ownerDocument.createElementNS("http://www.w3.org/2000/svg", childType);
 126         parent.appendChild(child);
 127         return child;
 128     }
 129 }