@dcloudio/uni-debugger
Version:
uni-app debugger
133 lines (127 loc) • 4.92 kB
JavaScript
/*
* Copyright (C) 2013 Google Inc. All rights reserved.
*
* Redistribution and use in source and binary forms, with or without
* modification, are permitted provided that the following conditions are
* met:
*
* * Redistributions of source code must retain the above copyright
* notice, this list of conditions and the following disclaimer.
* * Redistributions in binary form must reproduce the above
* copyright notice, this list of conditions and the following disclaimer
* in the documentation and/or other materials provided with the
* distribution.
* * Neither the name of Google Inc. nor the names of its
* contributors may be used to endorse or promote products derived from
* this software without specific prior written permission.
*
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
* "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
* LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
* A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
* OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
* SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
* LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
* DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
* THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
* (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
* OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
*/
/**
* @unrestricted
*/
PerfUI.PieChart = class {
/**
* @param {number} size
* @param {function(number):string=} formatter
* @param {boolean=} showTotal
*/
constructor(size, formatter, showTotal) {
this.element = createElement('div');
this._shadowRoot = UI.createShadowRootWithCoreStyles(this.element, 'perf_ui/pieChart.css');
const root = this._shadowRoot.createChild('div', 'root');
const svg = this._createSVGChild(root, 'svg');
this._group = this._createSVGChild(svg, 'g');
this._innerR = 0.618;
const strokeWidth = 1 / size;
let circle = this._createSVGChild(this._group, 'circle');
circle.setAttribute('r', 1);
circle.setAttribute('stroke', 'hsl(0, 0%, 80%)');
circle.setAttribute('fill', 'transparent');
circle.setAttribute('stroke-width', strokeWidth);
circle = this._createSVGChild(this._group, 'circle');
circle.setAttribute('r', this._innerR);
circle.setAttribute('stroke', 'hsl(0, 0%, 80%)');
circle.setAttribute('fill', 'transparent');
circle.setAttribute('stroke-width', strokeWidth);
this._foregroundElement = root.createChild('div', 'pie-chart-foreground');
if (showTotal)
this._totalElement = this._foregroundElement.createChild('div', 'pie-chart-total');
this._formatter = formatter;
this._slices = [];
this._lastAngle = -Math.PI / 2;
this._setSize(size);
}
/**
* @param {number} totalValue
*/
setTotal(totalValue) {
for (let i = 0; i < this._slices.length; ++i)
this._slices[i].remove();
this._slices = [];
this._totalValue = totalValue;
this._lastAngle = -Math.PI / 2;
let totalString;
if (totalValue)
totalString = this._formatter ? this._formatter(totalValue) : totalValue;
else
totalString = '';
if (this._totalElement)
this._totalElement.textContent = totalString;
}
/**
* @param {number} value
*/
_setSize(value) {
this._group.setAttribute('transform', 'scale(' + (value / 2) + ') translate(1, 1) scale(0.99, 0.99)');
const size = value + 'px';
this.element.style.width = size;
this.element.style.height = size;
}
/**
* @param {number} value
* @param {string} color
*/
addSlice(value, color) {
let sliceAngle = value / this._totalValue * 2 * Math.PI;
if (!isFinite(sliceAngle))
return;
sliceAngle = Math.min(sliceAngle, 2 * Math.PI * 0.9999);
const path = this._createSVGChild(this._group, 'path');
const x1 = Math.cos(this._lastAngle);
const y1 = Math.sin(this._lastAngle);
this._lastAngle += sliceAngle;
const x2 = Math.cos(this._lastAngle);
const y2 = Math.sin(this._lastAngle);
const r2 = this._innerR;
const x3 = x2 * r2;
const y3 = y2 * r2;
const x4 = x1 * r2;
const y4 = y1 * r2;
const largeArc = sliceAngle > Math.PI ? 1 : 0;
path.setAttribute('d',
`M${x1},${y1} A1,1,0,${largeArc},1,${x2},${y2} L${x3},${y3} A${r2},${r2},0,${largeArc},0,${x4},${y4} Z`);
path.setAttribute('fill', color);
this._slices.push(path);
}
/**
* @param {!Element} parent
* @param {string} childType
* @return {!Element}
*/
_createSVGChild(parent, childType) {
const child = parent.ownerDocument.createElementNS('http://www.w3.org/2000/svg', childType);
parent.appendChild(child);
return child;
}
};