StatPanels: Refactoring DisplayValueOptions and renaming & adding new panel options to react panels (#23153)

* StatPanels: Refactoring DisplayValueOptions and renaming

* added return

* Progress

* Updated

* Made radio groups full width by default in panel options

* Fixed ts issue

* Updated

* Added remaining options

* Removed unused type

* Updated snapshot

* Renamed to ReduceDataOptions

public/app/plugins/panel/bargauge/BarGaugeMigrations.test.ts

@@ -45,7 +45,9 @@ describe('BarGauge Panel Migrations', () => {
       type: 'bargauge',
     } as Omit<PanelModel, 'fieldConfig'>;
 
-    expect(barGaugePanelMigrationHandler(panel as PanelModel)).toMatchSnapshot();
+    const newOptions = barGaugePanelMigrationHandler(panel as PanelModel);
+
+    // should mutate panel model and move field config out of panel.options
     expect((panel as any).fieldConfig).toMatchInlineSnapshot(`
       Object {
         "defaults": Object {
@@ -81,5 +83,20 @@ describe('BarGauge Panel Migrations', () => {
         "overrides": Array [],
       }
     `);
+
+    // should options options
+    expect(newOptions).toMatchInlineSnapshot(`
+      Object {
+        "displayMode": "lcd",
+        "orientation": "vertical",
+        "reduceOptions": Object {
+          "calcs": Array [
+            "mean",
+          ],
+          "limit": undefined,
+          "values": false,
+        },
+      }
+    `);
   });
 });

public/app/plugins/panel/bargauge/BarGaugePanel.test.tsx

@@ -65,7 +65,7 @@ function createBarGaugePanelWithData(data: PanelData): ReactWrapper<PanelProps<B
 
   const options: BarGaugeOptions = {
     displayMode: BarGaugeDisplayMode.Lcd,
-    fieldOptions: {
+    reduceOptions: {
       calcs: ['mean'],
       values: false,
     },

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

@@ -50,7 +50,7 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
     const { data, options, replaceVariables, fieldConfig } = this.props;
     return getFieldDisplayValues({
       fieldConfig,
-      fieldOptions: options.fieldOptions,
+      reduceOptions: options.reduceOptions,
       replaceVariables,
       theme: config.theme,
       data: data.series,

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

@@ -16,7 +16,7 @@ import {
 import {
   DataLink,
   FieldConfig,
-  FieldDisplayOptions,
+  ReduceDataOptions,
   PanelEditorProps,
   ThresholdsConfig,
   ValueMapping,
@@ -30,10 +30,10 @@ import {
 import { NewPanelEditorContext } from '../../../features/dashboard/components/PanelEditor/PanelEditor';
 
 export class BarGaugePanelEditor extends PureComponent<PanelEditorProps<BarGaugeOptions>> {
-  onDisplayOptionsChanged = (fieldOptions: FieldDisplayOptions) =>
+  onDisplayOptionsChanged = (fieldOptions: ReduceDataOptions) =>
     this.props.onOptionsChange({
       ...this.props.options,
-      fieldOptions,
+      reduceOptions: fieldOptions,
     });
 
   onOrientationChange = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, orientation: value });
@@ -84,7 +84,7 @@ export class BarGaugePanelEditor extends PureComponent<PanelEditorProps<BarGauge
 
   render() {
     const { options, fieldConfig } = this.props;
-    const { fieldOptions } = options;
+    const { reduceOptions: fieldOptions } = options;
     const { defaults } = fieldConfig;
 
     const labelWidth = 6;

public/app/plugins/panel/bargauge/__snapshots__/BarGaugeMigrations.test.ts.snap

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`BarGauge Panel Migrations from 6.2 1`] = `
-Object {
-  "displayMode": "lcd",
-  "fieldOptions": Object {
-    "calcs": Array [
-      "mean",
-    ],
-    "thresholds": Array [
-      Object {
-        "color": "green",
-        "index": 0,
-        "value": -Infinity,
-      },
-      Object {
-        "color": "orange",
-        "index": 1,
-        "value": 40,
-      },
-      Object {
-        "color": "red",
-        "index": 2,
-        "value": 80,
-      },
-    ],
-    "values": false,
-  },
-  "orientation": "vertical",
-}
-`;

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

@@ -2,7 +2,7 @@ import { sharedSingleStatPanelChangedHandler } from '@grafana/ui';
 import { PanelPlugin } from '@grafana/data';
 import { BarGaugePanel } from './BarGaugePanel';
 import { BarGaugeOptions, defaults } from './types';
-import { standardFieldConfig } from '../stat/types';
+import { standardFieldConfig, addStandardDataReduceOptions } from '../stat/types';
 import { BarGaugePanelEditor } from './BarGaugePanelEditor';
 import { barGaugePanelMigrationHandler } from './BarGaugeMigrations';
 
@@ -11,20 +11,26 @@ export const plugin = new PanelPlugin<BarGaugeOptions>(BarGaugePanel)
   .setEditor(BarGaugePanelEditor)
   .setFieldConfigDefaults(standardFieldConfig)
   .setPanelOptions(builder => {
-    /* addStandardSingleValueOptions(builder); */
+    addStandardDataReduceOptions(builder);
 
-    builder.addRadio({
-      id: 'orientation',
-      name: 'Orientation',
-      description: 'Stacking direction for multiple bars',
-      settings: {
-        options: [
-          { value: 'auto', label: 'Auto' },
-          { value: 'horizontal', label: 'Horizontal' },
-          { value: 'vertical', label: 'Vertical' },
-        ],
-      },
-    });
+    builder
+      .addRadio({
+        id: 'displayMode',
+        name: 'Display mode',
+        description: 'Controls the bar style',
+        settings: {
+          options: [
+            { value: 'basic', label: 'Basic' },
+            { value: 'gradient', label: 'Gradient' },
+            { value: 'lcd', label: 'Retro LCD' },
+          ],
+        },
+      })
+      .addBooleanSwitch({
+        id: 'showUnfilled',
+        name: 'Show unfilled area',
+        description: 'When enabled renders the unfilled region as gray',
+      });
   })
   .setPanelChangeHandler(sharedSingleStatPanelChangedHandler)
   .setMigrationHandler(barGaugePanelMigrationHandler);

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

@@ -1,5 +1,5 @@
 import { SingleStatBaseOptions, BarGaugeDisplayMode } from '@grafana/ui';
-import { standardGaugeFieldOptions } from '../gauge/types';
+import { commonValueOptionDefaults } from '../stat/types';
 import { VizOrientation, SelectableValue } from '@grafana/data';
 
 export interface BarGaugeOptions extends SingleStatBaseOptions {
@@ -16,6 +16,6 @@ export const displayModes: Array<SelectableValue<string>> = [
 export const defaults: BarGaugeOptions = {
   displayMode: BarGaugeDisplayMode.Lcd,
   orientation: VizOrientation.Horizontal,
-  fieldOptions: standardGaugeFieldOptions,
+  reduceOptions: commonValueOptionDefaults,
   showUnfilled: true,
 };

public/app/plugins/panel/gauge/GaugeMigrations.test.ts

@@ -82,10 +82,10 @@ describe('Gauge Panel Migrations', () => {
 
     // Ignored due to the API change
     //@ts-ignore
-    expect(result.fieldOptions.defaults).toBeUndefined();
+    expect(result.reduceOptions.defaults).toBeUndefined();
     // Ignored due to the API change
     //@ts-ignore
-    expect(result.fieldOptions.overrides).toBeUndefined();
+    expect(result.reduceOptions.overrides).toBeUndefined();
 
     expect((panel as PanelModel).fieldConfig).toMatchInlineSnapshot(`
       Object {

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

@@ -43,7 +43,7 @@ export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
     const { data, options, replaceVariables, fieldConfig } = this.props;
     return getFieldDisplayValues({
       fieldConfig,
-      fieldOptions: options.fieldOptions,
+      reduceOptions: options.reduceOptions,
       replaceVariables,
       theme: config.theme,
       data: data.series,

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

@@ -12,7 +12,7 @@ import {
 } from '@grafana/ui';
 import {
   PanelEditorProps,
-  FieldDisplayOptions,
+  ReduceDataOptions,
   ThresholdsConfig,
   DataLink,
   FieldConfig,
@@ -39,14 +39,14 @@ export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOption
     });
 
   onDisplayOptionsChanged = (
-    fieldOptions: FieldDisplayOptions,
+    fieldOptions: ReduceDataOptions,
     event?: React.SyntheticEvent<HTMLElement>,
     callback?: () => void
   ) => {
     this.props.onOptionsChange(
       {
         ...this.props.options,
-        fieldOptions,
+        reduceOptions: fieldOptions,
       },
       callback
     );
@@ -94,24 +94,28 @@ export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOption
 
   render() {
     const { options, fieldConfig } = this.props;
-    const { showThresholdLabels, showThresholdMarkers, fieldOptions } = options;
+    const { showThresholdLabels, showThresholdMarkers, reduceOptions: valueOptions } = options;
 
     const { defaults } = fieldConfig;
 
-    const suggestions = fieldOptions.values
+    const suggestions = valueOptions.values
       ? getDataLinksVariableSuggestions(this.props.data.series)
       : getCalculationValueDataLinksVariableSuggestions(this.props.data.series);
 
     return (
       <NewPanelEditorContext.Consumer>
         {useNewEditor => {
+          if (useNewEditor) {
+            return null;
+          }
+
           return (
             <>
               <PanelOptionsGrid>
                 <PanelOptionsGroup title="Display">
                   <FieldDisplayEditor
                     onChange={this.onDisplayOptionsChanged}
-                    value={fieldOptions}
+                    value={valueOptions}
                     labelWidth={this.labelWidth}
                   />
                   <Switch
@@ -128,36 +132,27 @@ export class GaugePanelEditor extends PureComponent<PanelEditorProps<GaugeOption
                   />
                 </PanelOptionsGroup>
 
-                <>
-                  {!useNewEditor && (
-                    <>
-                      <PanelOptionsGroup title="Field">
-                        <FieldPropertiesEditor
-                          showMinMax={true}
-                          showTitle={true}
-                          onChange={this.onDefaultsChange}
-                          value={defaults}
-                        />
-                      </PanelOptionsGroup>
+                <PanelOptionsGroup title="Field">
+                  <FieldPropertiesEditor
+                    showMinMax={true}
+                    showTitle={true}
+                    onChange={this.onDefaultsChange}
+                    value={defaults}
+                  />
+                </PanelOptionsGroup>
 
-                      <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={defaults.thresholds} />
-                    </>
-                  )}
-                </>
+                <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={defaults.thresholds} />
               </PanelOptionsGrid>
-              {!useNewEditor && (
-                <>
-                  <LegacyValueMappingsEditor onChange={this.onValueMappingsChanged} valueMappings={defaults.mappings} />
-                  <PanelOptionsGroup title="Data links">
-                    <DataLinksEditor
-                      value={defaults.links}
-                      onChange={this.onDataLinksChanged}
-                      suggestions={suggestions}
-                      maxLinks={10}
-                    />
-                  </PanelOptionsGroup>
-                </>
-              )}
+
+              <LegacyValueMappingsEditor onChange={this.onValueMappingsChanged} valueMappings={defaults.mappings} />
+              <PanelOptionsGroup title="Data links">
+                <DataLinksEditor
+                  value={defaults.links}
+                  onChange={this.onDataLinksChanged}
+                  suggestions={suggestions}
+                  maxLinks={10}
+                />
+              </PanelOptionsGroup>
             </>
           );
         }}

public/app/plugins/panel/gauge/__snapshots__/GaugeMigrations.test.ts.snap

@@ -2,12 +2,14 @@
 
 exports[`Gauge Panel Migrations from 6.1.1 1`] = `
 Object {
-  "fieldOptions": Object {
+  "orientation": "auto",
+  "reduceOptions": Object {
     "calcs": Array [
       "last",
     ],
+    "limit": undefined,
+    "values": undefined,
   },
-  "orientation": "auto",
   "showThresholdLabels": true,
   "showThresholdMarkers": true,
 }

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

@@ -2,12 +2,27 @@ import { PanelPlugin } from '@grafana/data';
 import { GaugePanelEditor } from './GaugePanelEditor';
 import { GaugePanel } from './GaugePanel';
 import { GaugeOptions, defaults } from './types';
-import { standardFieldConfig } from '../stat/types';
+import { standardFieldConfig, addStandardDataReduceOptions } from '../stat/types';
 import { gaugePanelMigrationHandler, gaugePanelChangedHandler } from './GaugeMigrations';
 
 export const plugin = new PanelPlugin<GaugeOptions>(GaugePanel)
   .setDefaults(defaults)
   .setFieldConfigDefaults(standardFieldConfig)
   .setEditor(GaugePanelEditor)
+  .setPanelOptions(builder => {
+    addStandardDataReduceOptions(builder);
+
+    builder
+      .addBooleanSwitch({
+        id: 'showThresholdLabels',
+        name: 'Show threshold Labels',
+        description: 'Render the threshold values around the gauge bar',
+      })
+      .addBooleanSwitch({
+        id: 'showThresholdMarkers',
+        name: 'Show threshold markers',
+        description: 'Renders the thresholds as an outer bar',
+      });
+  })
   .setPanelChangeHandler(gaugePanelChangedHandler)
   .setMigrationHandler(gaugePanelMigrationHandler);

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

@@ -1,16 +1,12 @@
-import { VizOrientation, FieldDisplayOptions, SelectableValue } from '@grafana/data';
+import { VizOrientation, SelectableValue } from '@grafana/data';
 import { SingleStatBaseOptions } from '@grafana/ui/src/components/SingleStatShared/SingleStatBaseOptions';
-import { standardFieldDisplayOptions } from '../stat/types';
+import { commonValueOptionDefaults } from '../stat/types';
 
 export interface GaugeOptions extends SingleStatBaseOptions {
   showThresholdLabels: boolean;
   showThresholdMarkers: boolean;
 }
 
-export const standardGaugeFieldOptions: FieldDisplayOptions = {
-  ...standardFieldDisplayOptions,
-};
-
 export const orientationOptions: Array<SelectableValue<VizOrientation>> = [
   { value: VizOrientation.Auto, label: 'Auto' },
   { value: VizOrientation.Horizontal, label: 'Horizontal' },
@@ -20,6 +16,6 @@ export const orientationOptions: Array<SelectableValue<VizOrientation>> = [
 export const defaults: GaugeOptions = {
   showThresholdMarkers: true,
   showThresholdLabels: false,
-  fieldOptions: standardGaugeFieldOptions,
+  reduceOptions: commonValueOptionDefaults,
   orientation: VizOrientation.Auto,
 };

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

@@ -1,9 +1,6 @@
 import { LegendOptions, GraphTooltipOptions } from '@grafana/ui';
-import { YAxis, FieldDisplayOptions } from '@grafana/data';
-
+import { YAxis } from '@grafana/data';
 import { GraphLegendEditorLegendOptions } from './GraphLegendEditor';
-// TODO move out from single stat
-import { standardFieldDisplayOptions } from '../stat/types';
 
 export interface SeriesOptions {
   color?: string;
@@ -22,7 +19,6 @@ export interface Options {
   series: {
     [alias: string]: SeriesOptions;
   };
-  fieldOptions: FieldDisplayOptions;
   tooltipOptions: GraphTooltipOptions;
 }
 
@@ -38,6 +34,5 @@ export const defaults: Options = {
     placement: 'under',
   },
   series: {},
-  fieldOptions: { ...standardFieldDisplayOptions },
   tooltipOptions: { mode: 'single' },
 };

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

@@ -20,7 +20,7 @@ export class PieChartPanel extends PureComponent<Props> {
 
     const values = getFieldDisplayValues({
       fieldConfig,
-      fieldOptions: options.fieldOptions,
+      reduceOptions: options.reduceOptions,
       data: data.series,
       theme: config.theme,
       replaceVariables: replaceVariables,

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

@@ -6,7 +6,7 @@ import {
   FieldPropertiesEditor,
   LegacyValueMappingsEditor,
 } from '@grafana/ui';
-import { PanelEditorProps, FieldDisplayOptions, ValueMapping, FieldConfig } from '@grafana/data';
+import { PanelEditorProps, ReduceDataOptions, ValueMapping, FieldConfig } from '@grafana/data';
 
 import { PieChartOptionsBox } from './PieChartOptionsBox';
 import { PieChartOptions } from './types';
@@ -23,10 +23,10 @@ export class PieChartPanelEditor extends PureComponent<PanelEditorProps<PieChart
     });
   };
 
-  onDisplayOptionsChanged = (fieldOptions: FieldDisplayOptions) =>
+  onDisplayOptionsChanged = (fieldOptions: ReduceDataOptions) =>
     this.props.onOptionsChange({
       ...this.props.options,
-      fieldOptions,
+      reduceOptions: fieldOptions,
     });
 
   onDefaultsChange = (field: FieldConfig) => {
@@ -38,7 +38,7 @@ export class PieChartPanelEditor extends PureComponent<PanelEditorProps<PieChart
 
   render() {
     const { onOptionsChange, options, data, fieldConfig, onFieldConfigChange } = this.props;
-    const { fieldOptions } = options;
+    const { reduceOptions: fieldOptions } = options;
     const { defaults } = fieldConfig;
 
     return (

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

@@ -1,6 +1,6 @@
 import { PieChartType, SingleStatBaseOptions } from '@grafana/ui';
-import { standardFieldDisplayOptions } from '../stat/types';
-import { ReducerID, VizOrientation } from '@grafana/data';
+import { commonValueOptionDefaults } from '../stat/types';
+import { VizOrientation } from '@grafana/data';
 
 export interface PieChartOptions extends SingleStatBaseOptions {
   pieType: PieChartType;
@@ -11,8 +11,5 @@ export const defaults: PieChartOptions = {
   pieType: PieChartType.PIE,
   strokeWidth: 1,
   orientation: VizOrientation.Auto,
-  fieldOptions: {
-    ...standardFieldDisplayOptions,
-    calcs: [ReducerID.last],
-  },
+  reduceOptions: commonValueOptionDefaults,
 };

public/app/plugins/panel/stat/StatPanel.tsx

@@ -42,7 +42,7 @@ export class StatPanel extends PureComponent<PanelProps<StatPanelOptions>> {
         yMax: value.field.max,
       };
 
-      const calc = options.fieldOptions.calcs[0];
+      const calc = options.reduceOptions.calcs[0];
       if (calc === ReducerID.last) {
         sparkline.highlightIndex = sparkline.data.length - 1;
       }
@@ -76,7 +76,7 @@ export class StatPanel extends PureComponent<PanelProps<StatPanelOptions>> {
 
     return getFieldDisplayValues({
       fieldConfig,
-      fieldOptions: options.fieldOptions,
+      reduceOptions: options.reduceOptions,
       replaceVariables,
       theme: config.theme,
       data: data.series,

public/app/plugins/panel/stat/StatPanelEditor.tsx

@@ -15,7 +15,7 @@ import {
 
 import {
   PanelEditorProps,
-  FieldDisplayOptions,
+  ReduceDataOptions,
   FieldConfig,
   ValueMapping,
   ThresholdsConfig,
@@ -53,10 +53,10 @@ export class StatPanelEditor extends PureComponent<PanelEditorProps<StatPanelOpt
     });
   };
 
-  onDisplayOptionsChanged = (fieldOptions: FieldDisplayOptions) =>
+  onDisplayOptionsChanged = (fieldOptions: ReduceDataOptions) =>
     this.props.onOptionsChange({
       ...this.props.options,
-      fieldOptions,
+      reduceOptions: fieldOptions,
     });
 
   onColorModeChanged = ({ value }: any) => this.props.onOptionsChange({ ...this.props.options, colorMode: value });
@@ -84,21 +84,25 @@ export class StatPanelEditor extends PureComponent<PanelEditorProps<StatPanelOpt
 
   render() {
     const { options, fieldConfig } = this.props;
-    const { fieldOptions } = options;
+    const { reduceOptions: valueOptions } = options;
     const { defaults } = fieldConfig;
 
-    const suggestions = fieldOptions.values
+    const suggestions = valueOptions.values
       ? getDataLinksVariableSuggestions(this.props.data.series)
       : getCalculationValueDataLinksVariableSuggestions(this.props.data.series);
 
     return (
       <NewPanelEditorContext.Consumer>
         {useNewEditor => {
+          if (useNewEditor) {
+            return null;
+          }
+
           return (
             <>
               <PanelOptionsGrid>
                 <PanelOptionsGroup title="Display">
-                  <FieldDisplayEditor onChange={this.onDisplayOptionsChanged} value={fieldOptions} labelWidth={8} />
+                  <FieldDisplayEditor onChange={this.onDisplayOptionsChanged} value={valueOptions} labelWidth={8} />
                   <div className="form-field">
                     <FormLabel width={8}>Orientation</FormLabel>
                     <Select
@@ -140,36 +144,28 @@ export class StatPanelEditor extends PureComponent<PanelEditorProps<StatPanelOpt
                     />
                   </div>
                 </PanelOptionsGroup>
-                <>
-                  {!useNewEditor && (
-                    <>
-                      <PanelOptionsGroup title="Field">
-                        <FieldPropertiesEditor
-                          showMinMax={true}
-                          onChange={this.onDefaultsChange}
-                          value={defaults}
-                          showTitle={true}
-                        />
-                      </PanelOptionsGroup>
-                      <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={defaults.thresholds} />
-                    </>
-                  )}
-                </>
-              </PanelOptionsGrid>
-              {!useNewEditor && (
-                <>
-                  <LegacyValueMappingsEditor onChange={this.onValueMappingsChanged} valueMappings={defaults.mappings} />
 
-                  <PanelOptionsGroup title="Data links">
-                    <DataLinksEditor
-                      value={defaults.links}
-                      onChange={this.onDataLinksChanged}
-                      suggestions={suggestions}
-                      maxLinks={10}
-                    />
-                  </PanelOptionsGroup>
-                </>
-              )}
+                <PanelOptionsGroup title="Field">
+                  <FieldPropertiesEditor
+                    showMinMax={true}
+                    onChange={this.onDefaultsChange}
+                    value={defaults}
+                    showTitle={true}
+                  />
+                </PanelOptionsGroup>
+                <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={defaults.thresholds} />
+              </PanelOptionsGrid>
+
+              <LegacyValueMappingsEditor onChange={this.onValueMappingsChanged} valueMappings={defaults.mappings} />
+
+              <PanelOptionsGroup title="Data links">
+                <DataLinksEditor
+                  value={defaults.links}
+                  onChange={this.onDataLinksChanged}
+                  suggestions={suggestions}
+                  maxLinks={10}
+                />
+              </PanelOptionsGroup>
             </>
           );
         }}

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

@@ -1,6 +1,6 @@
 import { sharedSingleStatMigrationHandler, sharedSingleStatPanelChangedHandler } from '@grafana/ui';
 import { PanelPlugin } from '@grafana/data';
-import { StatPanelOptions, defaults, standardFieldConfig } from './types';
+import { StatPanelOptions, defaults, standardFieldConfig, addStandardDataReduceOptions } from './types';
 import { StatPanel } from './StatPanel';
 import { StatPanelEditor } from './StatPanelEditor';
 
@@ -8,6 +8,56 @@ export const plugin = new PanelPlugin<StatPanelOptions>(StatPanel)
   .setDefaults(defaults)
   .setFieldConfigDefaults(standardFieldConfig)
   .setEditor(StatPanelEditor)
+  .setPanelOptions(builder => {
+    addStandardDataReduceOptions(builder);
+
+    builder
+      .addRadio({
+        id: 'orientation',
+        name: 'Orientation',
+        description: 'Stacking direction for multiple bars',
+        settings: {
+          options: [
+            { value: 'auto', label: 'Auto' },
+            { value: 'horizontal', label: 'Horizontal' },
+            { value: 'vertical', label: 'Vertical' },
+          ],
+        },
+      })
+      .addRadio({
+        id: 'colorMode',
+        name: 'Color mode',
+        description: 'Color either the value or the background',
+        settings: {
+          options: [
+            { value: 'value', label: 'Value' },
+            { value: 'background', label: 'Background' },
+          ],
+        },
+      })
+      .addRadio({
+        id: 'graphMode',
+        name: 'Graph mode',
+        description: 'Stat panel graph / sparkline mode',
+        settings: {
+          options: [
+            { value: 'none', label: 'None' },
+            { value: 'area', label: 'Area' },
+          ],
+        },
+      })
+      .addRadio({
+        id: 'justifyMode',
+        name: 'Justify mode',
+        description: 'Value & title posititioning',
+        settings: {
+          options: [
+            { value: 'auto', label: 'Auto' },
+            { value: 'center', label: 'Center' },
+          ],
+        },
+      });
+  })
   .setNoPadding()
   .setPanelChangeHandler(sharedSingleStatPanelChangedHandler)
   .setMigrationHandler(sharedSingleStatMigrationHandler);

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

@@ -2,10 +2,11 @@ import { SingleStatBaseOptions, BigValueColorMode, BigValueGraphMode, BigValueJu
 import {
   VizOrientation,
   ReducerID,
-  FieldDisplayOptions,
+  ReduceDataOptions,
   SelectableValue,
   FieldConfigSource,
   ThresholdsMode,
+  standardEditorsRegistry,
 } from '@grafana/data';
 import { PanelOptionsEditorBuilder } from '@grafana/data/src/utils/OptionsUIBuilders';
 
@@ -31,7 +32,7 @@ export const justifyModes: Array<SelectableValue<BigValueJustifyMode>> = [
   { value: BigValueJustifyMode.Center, label: 'Center' },
 ];
 
-export const standardFieldDisplayOptions: FieldDisplayOptions = {
+export const commonValueOptionDefaults: ReduceDataOptions = {
   values: false,
   calcs: [ReducerID.mean],
 };
@@ -50,9 +51,9 @@ export const standardFieldConfig: FieldConfigSource = {
   overrides: [],
 };
 
-export function addStandardSingleValueOptions(builder: PanelOptionsEditorBuilder) {
+export function addStandardDataReduceOptions(builder: PanelOptionsEditorBuilder) {
   builder.addRadio({
-    id: 'values',
+    id: 'reduceOptions.values',
     name: 'Show',
     description: 'Calculate a single value per colum or series or show each row',
     settings: {
@@ -62,12 +63,44 @@ export function addStandardSingleValueOptions(builder: PanelOptionsEditorBuilder
       ],
     },
   });
+
+  builder.addNumberInput({
+    id: 'reduceOptions.limit',
+    name: 'Limit',
+    description: 'Max number of rows to display',
+    settings: {
+      placeholder: '5000',
+      integer: true,
+      min: 1,
+      max: 5000,
+    },
+  });
+
+  builder.addCustomEditor({
+    id: 'reduceOptions.calcs',
+    name: 'Value',
+    description: 'Choose a reducer function / calculation',
+    editor: standardEditorsRegistry.get('stats-picker').editor as any,
+  });
+
+  builder.addRadio({
+    id: 'orientation',
+    name: 'Orientation',
+    description: 'Stacking direction in case of multiple series or fields',
+    settings: {
+      options: [
+        { value: 'auto', label: 'Auto' },
+        { value: 'horizontal', label: 'Horizontal' },
+        { value: 'vertical', label: 'Vertical' },
+      ],
+    },
+  });
 }
 
 export const defaults: StatPanelOptions = {
   graphMode: BigValueGraphMode.Area,
   colorMode: BigValueColorMode.Value,
   justifyMode: BigValueJustifyMode.Auto,
-  fieldOptions: standardFieldDisplayOptions,
+  reduceOptions: commonValueOptionDefaults,
   orientation: VizOrientation.Auto,
 };