DevTools: Turn pie chart into a donut chart.

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

 /*
  * 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
@@ skipping 25 matching lines @@
    * @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');
     var root = this._shadowRoot.createChild('div', 'root');
     var svg = this._createSVGChild(root, 'svg');
     this._group = this._createSVGChild(svg, 'g');
-    var background = this._createSVGChild(this._group, 'circle');
-    background.setAttribute('r', 1.01);
-    background.setAttribute('fill', 'hsl(0, 0%, 90%)');
+    this._innerR = 0.618;
+    var strokeWidth = 1 / size;
+    var 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);
   }
 
   /**
@@ skipping 31 matching lines @@
     var sliceAngle = value / this._totalValue * 2 * Math.PI;
     if (!isFinite(sliceAngle))
       return;
     sliceAngle = Math.min(sliceAngle, 2 * Math.PI * 0.9999);
     var path = this._createSVGChild(this._group, 'path');
     var x1 = Math.cos(this._lastAngle);
     var y1 = Math.sin(this._lastAngle);
     this._lastAngle += sliceAngle;
     var x2 = Math.cos(this._lastAngle);
     var y2 = Math.sin(this._lastAngle);
+    var r2 = this._innerR;
+    var x3 = x2 * r2;
+    var y3 = y2 * r2;
+    var x4 = x1 * r2;
+    var y4 = y1 * r2;
     var largeArc = sliceAngle > Math.PI ? 1 : 0;
-    path.setAttribute('d', 'M0,0 L' + x1 + ',' + y1 + ' A1,1,0,' + largeArc + ',1,' + x2 + ',' + y2 + ' Z');
+    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) {
     var child = parent.ownerDocument.createElementNS('http://www.w3.org/2000/svg', childType);
     parent.appendChild(child);
     return child;
   }
 };