Initial rendering

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

 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
+import * as d3 from 'd3';
 
 
 import { GrafanaThemeType } from '../../types';
 import { GrafanaThemeType } from '../../types';
 import { Themeable } from '../../index';
 import { Themeable } from '../../index';
 
 
+
+export enum PiechartType {
+  PIE = 'pie',
+  DONUT = 'donut'
+}
+
 export interface PiechartDataPoint {
 export interface PiechartDataPoint {
   value: number;
   value: number;
   name: string;
   name: string;
@@ -15,7 +22,7 @@ export interface Props extends Themeable {
   datapoints: PiechartDataPoint[];
   datapoints: PiechartDataPoint[];
 
 
   unit: string;
   unit: string;
-  pieType: string;
+  pieType: PiechartType;
   strokeWidth: number;
   strokeWidth: number;
 }
 }
 
 
@@ -39,7 +46,42 @@ export class Piechart extends PureComponent<Props> {
   }
   }
 
 
   draw() {
   draw() {
-    // const { width, height, theme, value } = this.props;
+    const { datapoints, pieType, strokeWidth } = this.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 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;
+
+    const pie = d3.pie();
+
+    const arcs = pie(data);
+    const arc = d3.arc()
+      .outerRadius(radius - 10)
+      .innerRadius(innerRadius)
+      .padAngle(0.03)
+      .context(context);
+
+    arcs.forEach((d, idx) => {
+      context.beginPath();
+      arc(d as any);
+      context.fillStyle = colors[idx];
+      context.fill();
+    });
+
+    context.globalAlpha = 1;
+    context.beginPath();
+    arcs.forEach(arc as any);
+    context.lineWidth = strokeWidth;
+    context.stroke();
   }
   }
 
 
   render() {
   render() {
@@ -54,8 +96,9 @@ export class Piechart extends PureComponent<Props> {
             top: '10px',
             top: '10px',
             margin: 'auto',
             margin: 'auto',
           }}
           }}
-          ref={element => (this.canvasElement = element)}
-        />
+        >
+          <canvas ref={element => (this.canvasElement = element)} />
+        </div>
       </div>
       </div>
     );
     );
   }
   }

public/sass/_grafana.scss

@@ -54,6 +54,7 @@
 @import 'components/panel_alertlist';
 @import 'components/panel_alertlist';
 @import 'components/panel_dashlist';
 @import 'components/panel_dashlist';
 @import 'components/panel_gettingstarted';
 @import 'components/panel_gettingstarted';
+@import 'components/panel_piechart';
 @import 'components/panel_pluginlist';
 @import 'components/panel_pluginlist';
 @import 'components/panel_singlestat';
 @import 'components/panel_singlestat';
 @import 'components/panel_table';
 @import 'components/panel_table';

public/sass/components/_panel_piechart.scss

+.piechart-panel {
+  position: relative;
+  display: table;
+  width: 100%;
+  height: 100%;
+
+  canvas {
+    width: 100%;
+    height: 100%;
+  }
+}