From 58f04178a36f5dc839ef087a765efaef2fed7f15 Mon Sep 17 00:00:00 2001
From: Peter Holmberg <peter.hlmbrg@gmail.com>
Date: Thu, 7 Feb 2019 09:20:17 +0100
Subject: [PATCH] removed direction and series mode options, cleaned up the
 code somewhat

---
 .../panel/gauge/GaugeOptionsEditor.tsx        | 32 ++------------
 public/app/plugins/panel/gauge/GaugePanel.tsx | 44 ++++++-------------
 .../plugins/panel/gauge/GaugePanelOptions.tsx |  2 -
 public/app/plugins/panel/gauge/types.ts       |  2 -
 4 files changed, 16 insertions(+), 64 deletions(-)

diff --git a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
index 418cb06388c..5294b9e62bc 100644
--- a/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
+++ b/public/app/plugins/panel/gauge/GaugeOptionsEditor.tsx
@@ -1,24 +1,10 @@
 import React, { PureComponent } from 'react';
-import {
-  FormField,
-  FormLabel,
-  PanelOptionsProps,
-  PanelOptionsGroup,
-  Select,
-  SelectOptionItem,
-  Switch,
-} from '@grafana/ui';
+import { FormField, PanelOptionsProps, PanelOptionsGroup, Switch } from '@grafana/ui';
 
 import { GaugeOptions } from './types';
 
 export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>> {
-  directionOptions: SelectOptionItem[] = [
-    { value: 'auto', label: 'Auto' },
-    { value: 'horizontal', label: 'Horizontal' },
-    { value: 'vertical', label: 'Vertical' },
-  ];
-
-  labelWidth = 9;
+  labelWidth = 8;
 
   onToggleThresholdLabels = () =>
     this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
@@ -30,11 +16,9 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
 
   onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value });
 
-  onDirectionChange = ({ value }) => this.props.onChange({ ...this.props.options, direction: value });
-
   render() {
     const { options } = this.props;
-    const { direction, maxValue, minValue, showThresholdLabels, showThresholdMarkers } = options;
+    const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = options;
 
     return (
       <PanelOptionsGroup title="Gauge">
@@ -52,16 +36,6 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
           checked={showThresholdMarkers}
           onChange={this.onToggleThresholdMarkers}
         />
-        <div className="gf-form">
-          <FormLabel width={this.labelWidth}>Direction</FormLabel>
-          <Select
-            defaultValue={this.directionOptions[0]}
-            onChange={this.onDirectionChange}
-            options={this.directionOptions}
-            value={this.directionOptions.find(option => option.value === direction)}
-            width={12}
-          />
-        </div>
       </PanelOptionsGroup>
     );
   }
diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx
index 0a2595369df..a1d68167d4b 100644
--- a/public/app/plugins/panel/gauge/GaugePanel.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanel.tsx
@@ -17,9 +17,8 @@ interface Props extends PanelProps<GaugeOptions> {}
 export class GaugePanel extends PureComponent<Props> {
   renderMultipleGauge(timeSeries, theme) {
     const { options, height, width } = this.props;
-    const gauges = [];
 
-    for (let i = 0; i < timeSeries.length; i++) {
+    return timeSeries.map((series, index) => {
       const singleStatWidth = 1 / timeSeries.length * 100;
       const singleStatHeight = 1 / timeSeries.length * 100;
       const repeatingGaugeWidth = Math.floor(width / timeSeries.length) - 10; // make Gauge slightly smaller than panel.
@@ -41,29 +40,28 @@ export class GaugePanel extends PureComponent<Props> {
       let gaugeWidth = width;
       let gaugeHeight = height;
 
-      if (options.direction === 'horizontal' || (options.direction === 'auto' && width > height)) {
+      if (width > height) {
         style = horizontalPanels;
         gaugeWidth = repeatingGaugeWidth;
-      } else if (options.direction === 'vertical' || (options.direction === 'auto' && height > width)) {
+      } else if (height > width) {
         style = verticalPanels;
         gaugeHeight = repeatingGaugeHeight;
       }
 
-      gauges.push(
-        <div className="singlestat-panel" key={`gauge-${i}`} style={style}>
-          {this.renderGauge(timeSeries[i].stats[options.stat], gaugeWidth, gaugeHeight, theme)}
-          <div style={{ textAlign: 'center' }}>{timeSeries[i].label}</div>
+      return (
+        <div className="singlestat-panel" key={`${timeSeries.label}-${index}`} style={style}>
+          {this.renderGauge(series.stats[options.stat], gaugeWidth, gaugeHeight, theme)}
+          <div style={{ textAlign: 'center' }}>{series.label}</div>
         </div>
       );
-    }
-    return gauges;
+    });
   }
 
   renderGauge(value, width, height, theme) {
     const { onInterpolate, options } = this.props;
-
     const prefix = onInterpolate(options.prefix);
     const suffix = onInterpolate(options.suffix);
+
     return (
       <Gauge value={value} {...options} prefix={prefix} suffix={suffix} theme={theme} width={width} height={height} />
     );
@@ -72,33 +70,20 @@ export class GaugePanel extends PureComponent<Props> {
   renderSingleGauge(timeSeries, theme) {
     const { options, width, height } = this.props;
 
-    let timeSeriesValue = timeSeries.reduce((accumulator, currentValue) => {
-      return { stats: { [options.stat]: accumulator.stats[options.stat] + currentValue.stats[options.stat] } };
-    });
-
-    if (options.stat === 'avg') {
-      timeSeriesValue = {
-        ...timeSeriesValue,
-        stats: { [options.stat]: timeSeriesValue.stats[options.stat] / timeSeries.length },
-      };
-    }
-
     return (
-      <div className="singlestat-panel">
-        {this.renderGauge(timeSeriesValue.stats[options.stat], width, height, theme)}
-      </div>
+      <div className="singlestat-panel">{this.renderGauge(timeSeries.stats[options.stat], width, height, theme)}</div>
     );
   }
 
   renderGaugeWithTableData(panelData, theme) {
     const { width, height } = this.props;
-
     const firstTableDataValue = panelData.tableData.rows[0].find(prop => prop > 0);
+
     return <div className="singlestat-panel">{this.renderGauge(firstTableDataValue, width, height, theme)}</div>;
   }
 
   renderPanel(theme) {
-    const { panelData, options } = this.props;
+    const { panelData } = this.props;
 
     if (panelData.timeSeries) {
       const timeSeries = processTimeSeries({
@@ -107,10 +92,7 @@ export class GaugePanel extends PureComponent<Props> {
       });
 
       if (timeSeries.length > 1) {
-        if (options.multiSeriesMode === 'repeat') {
-          return this.renderMultipleGauge(timeSeries, theme);
-        }
-        return this.renderSingleGauge(timeSeries, theme);
+        return this.renderMultipleGauge(timeSeries, theme);
       } else if (timeSeries.length > 0) {
         return this.renderSingleGauge(timeSeries, theme);
       } else {
diff --git a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
index 72f037ac728..35789f2821b 100644
--- a/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
+++ b/public/app/plugins/panel/gauge/GaugePanelOptions.tsx
@@ -26,8 +26,6 @@ export const defaultProps = {
     unit: 'none',
     valueMappings: [],
     thresholds: [],
-    multiSeriesMode: 'repeat',
-    direction: 'auto',
   },
 };
 
diff --git a/public/app/plugins/panel/gauge/types.ts b/public/app/plugins/panel/gauge/types.ts
index be55fa75a93..42262178dc8 100644
--- a/public/app/plugins/panel/gauge/types.ts
+++ b/public/app/plugins/panel/gauge/types.ts
@@ -12,6 +12,4 @@ export interface GaugeOptions {
   suffix: string;
   thresholds: Threshold[];
   unit: string;
-  multiSeriesMode: string;
-  direction: string;
 }