From d611f9a4f5f73c64a37ee08e6305d2fd1a27591f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Torkel=20=C3=96degaard?= <torkel@grafana.com>
Date: Fri, 15 Feb 2019 17:33:31 +0100
Subject: [PATCH] Began work on adding options

---
 .../panel/bargauge/BarGaugePanelOptions.tsx   | 46 +++++++++++++++++++
 public/app/plugins/panel/bargauge/module.tsx  |  3 +-
 public/app/plugins/panel/bargauge/types.ts    |  4 +-
 3 files changed, 50 insertions(+), 3 deletions(-)
 create mode 100644 public/app/plugins/panel/bargauge/BarGaugePanelOptions.tsx

diff --git a/public/app/plugins/panel/bargauge/BarGaugePanelOptions.tsx b/public/app/plugins/panel/bargauge/BarGaugePanelOptions.tsx
new file mode 100644
index 00000000000..d3faf458868
--- /dev/null
+++ b/public/app/plugins/panel/bargauge/BarGaugePanelOptions.tsx
@@ -0,0 +1,46 @@
+// Libraries
+import React, { PureComponent } from 'react';
+
+// Components
+import { ValueOptions } from 'app/plugins/panel/gauge/ValueOptions';
+import { ThresholdsEditor, ValueMappingsEditor, PanelOptionsGrid, PanelOptionsGroup, FormField } from '@grafana/ui';
+
+// Types
+import { PanelOptionsProps, Threshold, ValueMapping } from '@grafana/ui';
+import { BarGaugeOptions } from './types';
+
+export class BarGaugePanelOptions extends PureComponent<PanelOptionsProps<BarGaugeOptions>> {
+  onThresholdsChanged = (thresholds: Threshold[]) =>
+    this.props.onChange({
+      ...this.props.options,
+      thresholds,
+    });
+
+  onValueMappingsChanged = (valueMappings: ValueMapping[]) =>
+    this.props.onChange({
+      ...this.props.options,
+      valueMappings,
+    });
+
+  onMinValueChange = ({ target }) => this.props.onChange({ ...this.props.options, minValue: target.value });
+  onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value });
+
+  render() {
+    const { onChange, options } = this.props;
+
+    return (
+      <>
+        <PanelOptionsGrid>
+          <ValueOptions onChange={onChange} options={options} />
+          <PanelOptionsGroup title="Gauge">
+            <FormField label="Min value" labelWidth={8} onChange={this.onMinValueChange} value={options.minValue} />
+            <FormField label="Max value" labelWidth={8} onChange={this.onMaxValueChange} value={options.maxValue} />
+          </PanelOptionsGroup>
+          <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} />
+        </PanelOptionsGrid>
+
+        <ValueMappingsEditor onChange={this.onValueMappingsChanged} valueMappings={options.valueMappings} />
+      </>
+    );
+  }
+}
diff --git a/public/app/plugins/panel/bargauge/module.tsx b/public/app/plugins/panel/bargauge/module.tsx
index ba074427c41..10eaffc8c83 100644
--- a/public/app/plugins/panel/bargauge/module.tsx
+++ b/public/app/plugins/panel/bargauge/module.tsx
@@ -1,4 +1,5 @@
 import { BarGaugePanel } from './BarGaugePanel';
+import { BarGaugePanelOptions } from './BarGaugePanelOptions';
 import { PanelDefaults } from './types';
 
-export { BarGaugePanel as Panel, PanelDefaults };
+export { BarGaugePanel as Panel, BarGaugePanelOptions as PanelOptions, PanelDefaults };
diff --git a/public/app/plugins/panel/bargauge/types.ts b/public/app/plugins/panel/bargauge/types.ts
index 799a37741ba..dcef36716a4 100644
--- a/public/app/plugins/panel/bargauge/types.ts
+++ b/public/app/plugins/panel/bargauge/types.ts
@@ -19,9 +19,9 @@ export const PanelDefaults: BarGaugeOptions = {
   stat: 'avg',
   unit: 'none',
   thresholds: [
-    { index: 0, value: -Infinity, color: 'green' },
-    { index: 1, value: 50, color: 'orange' },
     { index: 2, value: 80, color: 'red' },
+    { index: 1, value: 50, color: 'orange' },
+    { index: 0, value: -Infinity, color: 'green' },
   ],
   valueMappings: [],
 };