Review fixes

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

@@ -3,12 +3,18 @@ import React, { PureComponent } from 'react';
 import { GrafanaThemeType } from '../../types';
 import { Themeable } from '../../index';
 
+export interface PieChartDataPoint {
+  value: number;
+  name: string;
+  color: string;
+}
+
 export interface Props extends Themeable {
   height: number;
   width: number;
+  datapoints: PieChartDataPoint[];
 
   unit: string;
-  value: number;
   pieType: string;
   format: string;
   stat: string;
@@ -21,7 +27,7 @@ export class Piechart extends PureComponent<Props> {
   static defaultProps = {
     pieType: 'pie',
     format: 'short',
-    valueName: 'current',
+    stat: 'current',
     strokeWidth: 1,
     theme: GrafanaThemeType.Dark,
   };

public/app/plugins/panel/piechart/PiechartPanel.tsx

@@ -5,38 +5,54 @@ import React, { PureComponent } from 'react';
 import { processTimeSeries, ThemeContext } from '@grafana/ui';
 
 // Components
-import { Piechart } from '@grafana/ui';
+import { Piechart, PieChartDataPoint } from '@grafana/ui';
 
 // Types
 import { PiechartOptions } from './types';
-import { PanelProps, NullValueMode, TimeSeriesValue } from '@grafana/ui/src/types';
+import { PanelProps, NullValueMode } from '@grafana/ui/src/types';
 
 interface Props extends PanelProps<PiechartOptions> {}
 
 export class PiechartPanel extends PureComponent<Props> {
   render() {
     const { panelData, width, height, options } = this.props;
+    const { valueOptions } = options;
 
-    let value: TimeSeriesValue;
-
+    let datapoints: PieChartDataPoint[] = [];
     if (panelData.timeSeries) {
       const vmSeries = processTimeSeries({
         timeSeries: panelData.timeSeries,
         nullValueMode: NullValueMode.Null,
       });
 
-      if (vmSeries[0]) {
-        value = vmSeries[0].stats[options.stat];
-      } else {
-        value = null;
-      }
-    } else if (panelData.tableData) {
-      value = panelData.tableData.rows[0].find(prop => prop > 0);
+      vmSeries.forEach(serie => {
+        if (serie) {
+          datapoints.push({
+            value: serie.stats[valueOptions.stat],
+            // TODO: get name
+            name: 'tmpName',
+            // TODO: add color option
+            color: 'tmpColor'
+          });
+        }
+      });
     }
+    // TODO: support table data
 
     return (
       <ThemeContext.Consumer>
-        {theme => <Piechart value={value} {...this.props.options} width={width} height={height} theme={theme} />}
+        {theme => (
+          <Piechart
+            width={width}
+            height={height}
+            datapoints={datapoints}
+            pieType={options.pieType}
+            unit={options.unit}
+            stat={options.stat}
+            strokeWidth={options.strokeWidth}
+            theme={theme}
+          />
+        )}
       </ThemeContext.Consumer>
     );
   }