Add PiechartOptionsBox

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

@@ -0,0 +1,47 @@
+// Libraries
+import React, { PureComponent } from 'react';
+
+// Components
+import { Select, FormLabel, PanelOptionsGroup } from '@grafana/ui';
+
+// Types
+import { FormField, PanelEditorProps } from '@grafana/ui';
+import { PiechartType } from '@grafana/ui';
+import { PiechartOptions } from './types';
+
+import * as _ from 'lodash';
+
+
+const labelWidth = 8;
+
+const piechartOptions = [
+  { value: PiechartType.PIE, label: 'Pie' },
+  { value: PiechartType.DONUT, label: 'Donut' },
+];
+
+export class PiechartOptionsBox extends PureComponent<PanelEditorProps<PiechartOptions>> {
+  onPieTypeChange = ({ target }) => this.props.onChange({ ...this.props.options, pieType: target.value });
+  onStrokeWidthChange = ({ target }) => this.props.onChange({ ...this.props.options, strokeWidth: target.value });
+
+  render() {
+    const { options } = this.props;
+    const { pieType, strokeWidth } = options;
+
+    return (
+      <PanelOptionsGroup title="Piechart">
+        <div className="gf-form">
+          <FormLabel width={labelWidth}>Type</FormLabel>
+          <Select
+            width={12}
+            options={piechartOptions}
+            onChange={this.onPieTypeChange}
+            value={piechartOptions.find(option => option.value === pieType)}
+          />
+        </div>
+        <div className="gf-form">
+          <FormField label="Divider width" labelWidth={labelWidth} onChange={this.onStrokeWidthChange} value={strokeWidth} />
+        </div>
+      </PanelOptionsGroup>
+    );
+  }
+}

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

@@ -2,6 +2,7 @@ import React, { PureComponent } from 'react';
 import { PanelEditorProps, PanelOptionsGrid } from '@grafana/ui';
 
 import PiechartValueEditor from './PiechartValueEditor';
+import { PiechartOptionsBox } from './PiechartOptionsBox';
 import { PiechartOptions, PiechartValueOptions } from './types';
 
 export default class PiechartPanelEditor extends PureComponent<PanelEditorProps<PiechartOptions>> {
@@ -12,12 +13,13 @@ export default class PiechartPanelEditor extends PureComponent<PanelEditorProps<
     });
 
   render() {
-    const { options } = this.props;
+    const { onChange, options } = this.props;
 
     return (
       <>
         <PanelOptionsGrid>
           <PiechartValueEditor onChange={this.onValueOptionsChanged} options={options.valueOptions} />
+          <PiechartOptionsBox onChange={onChange} options={options} />
         </PanelOptionsGrid>
       </>
     );

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

@@ -37,7 +37,11 @@ export default class PiechartValueEditor extends PureComponent<Props> {
     return (
       <PanelOptionsGroup title="Value">
         <div className="gf-form">
-          <FormLabel width={labelWidth}>Stat</FormLabel>
+          <FormLabel width={labelWidth}>Unit</FormLabel>
+          <UnitPicker defaultValue={unit} onChange={this.onUnitChange} />
+        </div>
+        <div className="gf-form">
+          <FormLabel width={labelWidth}>Value</FormLabel>
           <Select
             width={12}
             options={statOptions}
@@ -45,10 +49,6 @@ export default class PiechartValueEditor extends PureComponent<Props> {
             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>
     );
   }