From 4cd91ff979d7078e2f6d7aa23d5046e8a86c0b0c Mon Sep 17 00:00:00 2001
From: corpglory-dev <dev@corpglory.com>
Date: Wed, 6 Mar 2019 16:49:03 +0300
Subject: [PATCH] Render svg instead of canvas

---
 .../src/components/Piechart/Piechart.tsx      | 54 ++++++++++---------
 public/sass/components/_panel_piechart.scss   |  2 +-
 2 files changed, 30 insertions(+), 26 deletions(-)

diff --git a/packages/grafana-ui/src/components/Piechart/Piechart.tsx b/packages/grafana-ui/src/components/Piechart/Piechart.tsx
index bd824188a4d..d8c92ddbc59 100644
--- a/packages/grafana-ui/src/components/Piechart/Piechart.tsx
+++ b/packages/grafana-ui/src/components/Piechart/Piechart.tsx
@@ -26,7 +26,7 @@ export interface Props extends Themeable {
 }
 
 export class Piechart extends PureComponent<Props> {
-  canvasElement: any;
+  containerElement: any;
 
   static defaultProps = {
     pieType: 'pie',
@@ -50,46 +50,51 @@ export class Piechart extends PureComponent<Props> {
     const data = datapoints.map(datapoint => datapoint.value);
     const colors = datapoints.map(datapoint => datapoint.color);
 
-    const width = this.canvasElement.width;
-    const height = this.canvasElement.height;
+    const width = this.containerElement.offsetWidth;
+    const height = this.containerElement.offsetHeight;
     const radius = Math.min(width, height) / 2;
-
     const innerRadius = pieType === PiechartType.PIE ? 0 : radius;
 
-    const context = this.canvasElement.getContext('2d');
-    context.translate(width / 2, height / 2);
-    context.globalAlpha = 0.5;
+    d3.select('.piechart-container svg').remove();
+    const svg = d3.select('.piechart-container')
+      .append('svg')
+      .attr('width', width)
+      .attr('height', height)
+      .attr('class', 'shadow')
+      .append('g')
+      .attr('transform', `translate(${width / 2},${height / 2})`);
 
-    const pie = d3.pie();
-
-    const arcs = pie(data);
     const arc = d3
       .arc()
       .outerRadius(radius - 10)
       .innerRadius(innerRadius)
-      .padAngle(0.03)
-      .context(context);
+      .padAngle(0);
 
-    arcs.forEach((d, idx) => {
-      context.beginPath();
-      arc(d as any);
-      context.fillStyle = colors[idx];
-      context.fill();
-    });
+    const pie = d3.pie();
 
-    context.globalAlpha = 1;
-    context.beginPath();
-    arcs.forEach(arc as any);
-    context.lineWidth = strokeWidth;
-    context.stroke();
+    svg.selectAll('path')
+      .data(pie(data))
+      .enter()
+      .append('path')
+      .attr('d', arc as any)
+      .attr('fill', (d: any, i: any) => {
+        return colors[i];
+      })
+      .style('fill-opacity', 0.15)
+      .style('stroke', (d: any, i: any) => {
+        return colors[i];
+      })
+      .style('stroke-width', `${strokeWidth}px`);
   }
 
   render() {
     const { height, width } = this.props;
 
     return (
-      <div className="piechart-panel">
+      <div className='piechart-panel'>
         <div
+          ref={element => (this.containerElement = element)}
+          className='piechart-container'
           style={{
             height: `${height * 0.9}px`,
             width: `${Math.min(width, height * 1.3)}px`,
@@ -97,7 +102,6 @@ export class Piechart extends PureComponent<Props> {
             margin: 'auto',
           }}
         >
-          <canvas ref={element => (this.canvasElement = element)} />
         </div>
       </div>
     );
diff --git a/public/sass/components/_panel_piechart.scss b/public/sass/components/_panel_piechart.scss
index e09cb31b92e..c12fa6b027e 100644
--- a/public/sass/components/_panel_piechart.scss
+++ b/public/sass/components/_panel_piechart.scss
@@ -4,7 +4,7 @@
   width: 100%;
   height: 100%;
 
-  canvas {
+  svg {
     width: 100%;
     height: 100%;
   }