Initial commit

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

+import React, { PureComponent } from 'react';
+
+import { GrafanaThemeType } from '../../types';
+import { Themeable } from '../../index';
+
+export interface Props extends Themeable {
+  height: number;
+  width: number;
+
+  unit: string;
+  value: number;
+  pieType: string;
+  format: string;
+  stat: string;
+  strokeWidth: number;
+}
+
+export class Piechart extends PureComponent<Props> {
+  canvasElement: any;
+
+  static defaultProps = {
+    pieType: 'pie',
+    format: 'short',
+    valueName: 'current',
+    strokeWidth: 1,
+    theme: GrafanaThemeType.Dark,
+  };
+
+  componentDidMount() {
+    this.draw();
+  }
+
+  componentDidUpdate() {
+    this.draw();
+  }
+
+  draw() {
+    // const { width, height, theme, value } = this.props;
+  }
+
+  render() {
+    const { height, width } = this.props;
+
+    return (
+      <div className="piechart-panel">
+        <div
+          style={{
+            height: `${height * 0.9}px`,
+            width: `${Math.min(width, height * 1.3)}px`,
+            top: '10px',
+            margin: 'auto',
+          }}
+          ref={element => (this.canvasElement = element)}
+        />
+      </div>
+    );
+  }
+}
+
+export default Piechart;

packages/grafana-ui/src/components/index.ts

@@ -24,3 +24,4 @@ export { ValueMappingsEditor } from './ValueMappingsEditor/ValueMappingsEditor';
 export { Gauge } from './Gauge/Gauge';
 export { Switch } from './Switch/Switch';
 export { EmptySearchResult } from './EmptySearchResult/EmptySearchResult';
+export { Piechart } from './Piechart/Piechart';

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

+// Libraries
+import React, { PureComponent } from 'react';
+
+// Services & Utils
+import { processTimeSeries, ThemeContext } from '@grafana/ui';
+
+// Components
+import { Piechart } from '@grafana/ui';
+
+// Types
+import { PiechartOptions } from './types';
+import { PanelProps, NullValueMode, TimeSeriesValue } from '@grafana/ui/src/types';
+
+interface Props extends PanelProps<PiechartOptions> {}
+
+export class PiechartPanel extends PureComponent<Props> {
+  render() {
+    const { panelData, width, height, options } = this.props;
+
+    let value: TimeSeriesValue;
+
+    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);
+    }
+
+    return (
+      <ThemeContext.Consumer>
+        {theme => <Piechart value={value} {...this.props.options} width={width} height={height} theme={theme} />}
+      </ThemeContext.Consumer>
+    );
+  }
+}

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

+import React, { PureComponent } from 'react';
+import { PanelOptionsProps, PanelOptionsGrid } from '@grafana/ui';
+
+import ValueOptions from './ValueOptions';
+import { PiechartOptions } from './types';
+
+export const defaultProps = {
+  options: {
+    pieType: 'pie',
+    unit: 'short',
+    stat: 'current',
+    strokeWidth: 1,
+  },
+};
+
+export default class PiechartPanelOptions extends PureComponent<PanelOptionsProps<PiechartOptions>> {
+  static defaultProps = defaultProps;
+
+  render() {
+    const { onChange, options } = this.props;
+
+    return (
+      <>
+        <PanelOptionsGrid>
+          <ValueOptions onChange={onChange} options={options} />
+        </PanelOptionsGrid>
+      </>
+    );
+  }
+}

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

+import React, { PureComponent } from 'react';
+import { FormLabel, PanelOptionsProps, PanelOptionsGroup, Select } from '@grafana/ui';
+import UnitPicker from 'app/core/components/Select/UnitPicker';
+import { PiechartOptions } from './types';
+
+const statOptions = [
+  { value: 'min', label: 'Min' },
+  { value: 'max', label: 'Max' },
+  { value: 'avg', label: 'Average' },
+  { value: 'current', label: 'Current' },
+  { value: 'total', label: 'Total' },
+];
+
+const labelWidth = 6;
+
+export default class ValueOptions extends PureComponent<PanelOptionsProps<PiechartOptions>> {
+  onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
+
+  onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value });
+
+  render() {
+    const { stat, unit } = this.props.options;
+
+    return (
+      <PanelOptionsGroup title="Value">
+        <div className="gf-form">
+          <FormLabel width={labelWidth}>Stat</FormLabel>
+          <Select
+            width={12}
+            options={statOptions}
+            onChange={this.onStatChange}
+            value={statOptions.find(option => option.value === stat)}
+          />
+        </div>
+        <div className="gf-form">
+          <FormLabel width={labelWidth}>Unit</FormLabel>
+          <UnitPicker defaultValue={unit} onChange={this.onUnitChange} />
+        </div>
+      </PanelOptionsGroup>
+    );
+  }
+}

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

+import PiechartPanelOptions, { defaultProps } from './PiechartPanelOptions';
+import { PiechartPanel } from './PiechartPanel';
+
+export { PiechartPanel as Panel, PiechartPanelOptions as PanelOptions, defaultProps as PanelDefaults };

public/app/plugins/panel/piechart/plugin.json

+{
+  "type": "panel",
+  "name": "PieChart",
+  "id": "piechart",
+
+  "dataFormats": ["time_series"],
+
+  "info": {
+    "author": {
+      "name": "Grafana Project",
+      "url": "https://grafana.com"
+    },
+    "logos": {
+      "small": "img/piechart_logo_small.svg",
+      "large": "img/piechart_logo_large.svg"
+    }
+  }
+}

public/app/plugins/panel/piechart/types.ts

+export interface PiechartOptions {
+  pieType: string;
+  unit: string;
+  stat: string;
+  strokeWidth: number;
+  // TODO: Options for Legend / Combine components
+}