change valueOptions

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

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
-import { FormLabel, PanelOptionsProps, PanelOptionsGroup, Select } from '@grafana/ui';
+import { FormLabel, PanelOptionsGroup, Select } from '@grafana/ui';
 import UnitPicker from 'app/core/components/Select/UnitPicker';
-import { PiechartOptions } from './types';
+import { PiechartValueOptions } from './types';
 
 const statOptions = [
   { value: 'min', label: 'Min' },
@@ -13,10 +13,23 @@ const statOptions = [
 
 const labelWidth = 6;
 
-export default class ValueOptions extends PureComponent<PanelOptionsProps<PiechartOptions>> {
-  onUnitChange = unit => this.props.onChange({ ...this.props.options, unit: unit.value });
+export interface Props {
+  options: PiechartValueOptions;
+  onChange: (valueOptions: PiechartValueOptions) => void;
+}
+
+export default class ValueOptions extends PureComponent<Props> {
+  onUnitChange = unit =>
+    this.props.onChange({
+      ...this.props.options,
+      unit: unit.value,
+    });
 
-  onStatChange = stat => this.props.onChange({ ...this.props.options, stat: stat.value });
+  onStatChange = stat =>
+    this.props.onChange({
+      ...this.props.options,
+      stat: stat.value,
+    });
 
   render() {
     const { stat, unit } = this.props.options;

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

@@ -1,14 +1,21 @@
 export interface PiechartOptions {
   pieType: string;
-  unit: string;
-  stat: string;
   strokeWidth: number;
+
+  valueOptions: PiechartValueOptions;
   // TODO: Options for Legend / Combine components
 }
 
+export interface PiechartValueOptions {
+  unit: string;
+  stat: string;
+}
+
 export const defaults: PiechartOptions = {
   pieType: 'pie',
-  unit: 'short',
-  stat: 'current',
   strokeWidth: 1,
+  valueOptions: {
+    unit: 'short',
+    stat: 'current',
+  },
 };