grafana/public/app/plugins/panel/gauge/GaugePanelOptions.tsx

import React, { PureComponent } from 'react';
import {
  PanelOptionsProps,
  ThresholdsEditor,
  Threshold,
  PanelOptionsGrid,
  ValueMappingsEditor,
  ValueMapping,
} from '@grafana/ui';

import ValueOptions from 'app/plugins/panel/gauge/ValueOptions';
import GaugeOptionsEditor from './GaugeOptionsEditor';
import { GaugeOptions } from './types';
import { ThemeProvider } from 'app/core/utils/ConfigProvider';

export const defaultProps = {
  options: {
    minValue: 0,
    maxValue: 100,
    prefix: '',
    showThresholdMarkers: true,
    showThresholdLabels: false,
    suffix: '',
    decimals: 0,
    stat: 'avg',
    unit: 'none',
    valueMappings: [],
    thresholds: [],
  },
};

export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<GaugeOptions>> {
  static defaultProps = defaultProps;

  onThresholdsChanged = (thresholds: Threshold[]) =>
    this.props.onChange({
      ...this.props.options,
      thresholds,
    });

  onValueMappingsChanged = (valueMappings: ValueMapping[]) =>
    this.props.onChange({
      ...this.props.options,
      valueMappings,
    });

  render() {
    const { onChange, options } = this.props;
    return (
      <ThemeProvider>
        {(theme) => (
          <>
            <PanelOptionsGrid>
              <ValueOptions onChange={onChange} options={options} />
              <GaugeOptionsEditor onChange={onChange} options={options} />
              <ThresholdsEditor
                onChange={this.onThresholdsChanged}
                thresholds={options.thresholds}
                theme={theme}
              />
            </PanelOptionsGrid>

            <ValueMappingsEditor onChange={this.onValueMappingsChanged} valueMappings={options.valueMappings} />
          </>
        )}
      </ThemeProvider>
    );
  }
}