reuse more gauge settings in bargauge

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

@@ -1,23 +1,12 @@
 import { ReactPanelPlugin } from '@grafana/ui';
-import cloneDeep from 'lodash/cloneDeep';
 
 import { BarGaugePanel } from './BarGaugePanel';
 import { BarGaugePanelEditor } from './BarGaugePanelEditor';
 import { BarGaugeOptions, defaults } from './types';
+import { gaugePreserveOptionsHandler } from '../gauge/module';
 
 export const reactPanel = new ReactPanelPlugin<BarGaugeOptions>(BarGaugePanel);
 
 reactPanel.setEditor(BarGaugePanelEditor);
 reactPanel.setDefaults(defaults);
-reactPanel.setPreserveOptionsHandler((pluginId: string, prevOptions: any) => {
-  const options: Partial<BarGaugeOptions> = {};
-
-  if (prevOptions.display) {
-    options.stat = prevOptions.stat;
-    options.display = cloneDeep(prevOptions.display);
-    options.maxValue = prevOptions.maxValue;
-    options.minValue = prevOptions.minValue;
-  }
-
-  return options;
-});
+reactPanel.setPreserveOptionsHandler(gaugePreserveOptionsHandler);

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

@@ -1,12 +1,8 @@
 import { SelectOptionItem, VizOrientation } from '@grafana/ui';
 
-import { SingleStatOptions } from '@grafana/ui';
+import { GaugeOptions, defaults as gaugeDefaults } from '../gauge/types';
 
-export interface BarGaugeOptions extends SingleStatOptions {
-  maxValue: number;
-  minValue: number;
-  showThresholdLabels: boolean;
-  showThresholdMarkers: boolean;
+export interface BarGaugeOptions extends GaugeOptions {
   orientation: VizOrientation;
 }
 
@@ -16,19 +12,6 @@ export const orientationOptions: SelectOptionItem[] = [
 ];
 
 export const defaults: BarGaugeOptions = {
-  minValue: 0,
-  maxValue: 100,
-  showThresholdMarkers: true,
-  showThresholdLabels: false,
+  ...gaugeDefaults,
   orientation: VizOrientation.Horizontal,
-
-  stat: 'avg',
-  display: {
-    prefix: '',
-    suffix: '',
-    decimals: null,
-    unit: 'none',
-    mappings: [],
-    thresholds: [{ index: 0, value: -Infinity, color: 'green' }, { index: 1, value: 80, color: 'red' }],
-  },
 };

public/app/plugins/panel/gauge/GaugePanelEditor.tsx

@@ -43,7 +43,6 @@ export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOption
         <PanelOptionsGrid>
           {/* This just sets the 'stats', that should be moved to somethign more general */}
           <SingleStatValueEditor onChange={onOptionsChange} options={options} />
-
           <DisplayValueEditor onChange={this.onDisplayOptionsChanged} options={display} />
           <GaugeOptionsBox onOptionsChange={onOptionsChange} options={options} />
           <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={display.thresholds} />

public/app/plugins/panel/gauge/SingleStatPanel.tsx

@@ -16,10 +16,6 @@ export class SingleStatPanel<T extends SingleStatOptions> extends PureComponent<
   constructor(props: PanelProps<T>) {
     super(props);
 
-    // if (props.options.valueOptions) {
-    //   console.warn('TODO!! how do we best migration options?');
-    // }
-
     this.state = {
       values: this.findDisplayValues(props),
     };
@@ -49,11 +45,7 @@ export class SingleStatPanel<T extends SingleStatOptions> extends PureComponent<
   }
 
   /**
-   * Subclasses can render this function
-   *
-   * @param value
-   * @param width
-   * @param height
+   * Subclasses will fill in appropriatly
    */
   renderStat(value: DisplayValue, width: number, height: number) {
     return <div style={{ width, height, border: '1px solid red' }}>{value.text}</div>;

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

@@ -7,11 +7,20 @@ import { GaugeOptions, defaults } from './types';
 
 export const reactPanel = new ReactPanelPlugin<GaugeOptions>(GaugePanel);
 
-reactPanel.setEditor(GaugePanelEditor);
-reactPanel.setDefaults(defaults);
-reactPanel.setPreserveOptionsHandler((pluginId: string, prevOptions: any) => {
+// Bar Gauge uses the same handler
+export const gaugePreserveOptionsHandler = (pluginId: string, prevOptions: any) => {
   const options: Partial<GaugeOptions> = {};
 
+  // TODO! migrate to new settings format
+  //
+  // thresholds?: Threshold[];
+  // valueMappings?: ValueMapping[];
+  // valueOptions?: SingleStatValueOptions;
+  //
+  // if (props.options.valueOptions) {
+  //   console.warn('TODO!! how do we best migration options?');
+  // }
+
   if (prevOptions.display) {
     options.stat = prevOptions.stat;
     options.display = cloneDeep(prevOptions.display);
@@ -20,4 +29,8 @@ reactPanel.setPreserveOptionsHandler((pluginId: string, prevOptions: any) => {
   }
 
   return options;
-});
+};
+
+reactPanel.setEditor(GaugePanelEditor);
+reactPanel.setDefaults(defaults);
+reactPanel.setPreserveOptionsHandler(gaugePreserveOptionsHandler);

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

@@ -5,11 +5,6 @@ export interface GaugeOptions extends SingleStatOptions {
   minValue: number;
   showThresholdLabels: boolean;
   showThresholdMarkers: boolean;
-
-  // TODO: migrate to DisplayValueOptions
-  // thresholds?: Threshold[];
-  // valueMappings?: ValueMapping[];
-  // valueOptions?: SingleStatValueOptions;
 }
 
 export const defaults: GaugeOptions = {