Improve rendering

packages/grafana-ui/src/components/PieChart/PieChart.tsx

@@ -27,6 +27,9 @@ export interface Props extends Themeable {
 
 export class PieChart extends PureComponent<Props> {
   containerElement: any;
+  svgElement: any;
+  tooltipElement: any;
+  tooltipValueElement: any;
 
   static defaultProps = {
     pieType: 'pie',
@@ -58,12 +61,10 @@ export class PieChart extends PureComponent<Props> {
     const outerRadius = radius - radius / 10;
     const innerRadius = pieType === PieChartType.PIE ? 0 : radius - radius / 3;
 
-    select('.piechart-container svg').remove();
-    const svg = select('.piechart-container')
-      .append('svg')
+    const svg = select(this.svgElement)
+      .html('')
       .attr('width', width)
       .attr('height', height)
-      .attr('class', 'shadow')
       .append('g')
       .attr('transform', `translate(${width / 2},${height / 2})`);
 
@@ -85,20 +86,18 @@ export class PieChart extends PureComponent<Props> {
       .style('stroke', (d: any, idx: number) => colors[idx])
       .style('stroke-width', `${strokeWidth}px`)
       .on('mouseover', (d: any, idx: any) => {
-        select('#tooltip')
-          .style('opacity', 1)
-          .select('#tooltip-value')
-          // TODO: show percents
-          .text(`${names[idx]} (${data[idx]})`);
+        select(this.tooltipElement).style('opacity', 1);
+        // TODO: show percents
+        select(this.tooltipValueElement).text(`${names[idx]} (${data[idx]})`);
       })
       .on('mousemove', () => {
-        select('#tooltip')
+        select(this.tooltipElement)
           // TODO: right position
           .style('top', `${event.pageY}px`)
           .style('left', `${event.pageX}px`);
       })
       .on('mouseout', () => {
-        select('#tooltip').style('opacity', 0);
+        select(this.tooltipElement).style('opacity', 0);
       });
   }
 
@@ -113,13 +112,17 @@ export class PieChart extends PureComponent<Props> {
           style={{
             height: `${height * 0.9}px`,
             width: `${Math.min(width, height * 1.3)}px`,
-            top: '10px',
-            margin: 'auto',
           }}
-        />
-        <div id="tooltip" className="piechart-tooltip">
+        >
+          <svg ref={element => (this.svgElement = element)} />
+        </div>
+        <div className="piechart-tooltip" ref={element => (this.tooltipElement = element)}>
           <div className="piechart-tooltip-time">
-            <div id="tooltip-value" className="piechart-tooltip-value" />
+            <div
+              id="tooltip-value"
+              className="piechart-tooltip-value"
+              ref={element => (this.tooltipValueElement = element)}
+            />
           </div>
         </div>
       </div>

public/sass/components/_panel_piechart.scss

@@ -4,9 +4,14 @@
   width: 100%;
   height: 100%;
 
-  svg {
-    width: 100%;
-    height: 100%;
+  .piechart-container {
+    top: 10px;
+    margin: auto;
+
+    svg {
+      width: 100%;
+      height: 100%;
+    }
   }
 
   .piechart-tooltip {
@@ -15,21 +20,23 @@
     background-color: #141414;
     color: #d8d9da;
     opacity: 0;
-  }
+    position: absolute;
+    width: 300px;
 
-  .piechart-tooltip .piechart-tooltip-time {
-    text-align: center;
-    position: relative;
-    top: -3px;
-    padding: 0.2rem;
-    font-weight: bold;
-    color: #d8d9da;
-  }
+    .piechart-tooltip-time {
+      text-align: center;
+      position: relative;
+      top: -3px;
+      padding: 0.2rem;
+      font-weight: bold;
+      color: #d8d9da;
 
-  .piechart-tooltip .piechart-tooltip-value {
-    display: table-cell;
-    font-weight: bold;
-    padding-left: 15px;
-    text-align: right;
+      .piechart-tooltip-value {
+        display: table-cell;
+        font-weight: bold;
+        padding-left: 15px;
+        text-align: right;
+      }
+    }
   }
 }