vertical and horizontal, removed mode option

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

@@ -12,9 +12,10 @@ import {
 import { GaugeOptions } from './types';
 
 export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>> {
-  multiSeriesOptions: SelectOptionItem[] = [
-    { value: 'repeat', label: 'Repeat' },
-    { value: 'combine', label: 'Combine' },
+  directionOptions: SelectOptionItem[] = [
+    { value: 'auto', label: 'Auto' },
+    { value: 'horizontal', label: 'Horizontal' },
+    { value: 'vertical', label: 'Vertical' },
   ];
 
   labelWidth = 9;
@@ -29,11 +30,11 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
 
   onMaxValueChange = ({ target }) => this.props.onChange({ ...this.props.options, maxValue: target.value });
 
-  onMultiSeriesModeChange = ({ value }) => this.props.onChange({ ...this.props.options, multiSeriesMode: value });
+  onDirectionChange = ({ value }) => this.props.onChange({ ...this.props.options, direction: value });
 
   render() {
     const { options } = this.props;
-    const { maxValue, minValue, multiSeriesMode, showThresholdLabels, showThresholdMarkers } = options;
+    const { direction, maxValue, minValue, showThresholdLabels, showThresholdMarkers } = options;
 
     return (
       <PanelOptionsGroup title="Gauge">
@@ -52,12 +53,12 @@ export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<
           onChange={this.onToggleThresholdMarkers}
         />
         <div className="gf-form">
-          <FormLabel width={this.labelWidth}>Multi series mode</FormLabel>
+          <FormLabel width={this.labelWidth}>Direction</FormLabel>
           <Select
-            defaultValue={this.multiSeriesOptions[0]}
-            onChange={this.onMultiSeriesModeChange}
-            options={this.multiSeriesOptions}
-            value={this.multiSeriesOptions.find(option => option.value === multiSeriesMode)}
+            defaultValue={this.directionOptions[0]}
+            onChange={this.onDirectionChange}
+            options={this.directionOptions}
+            value={this.directionOptions.find(option => option.value === direction)}
             width={12}
           />
         </div>

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

@@ -15,22 +15,43 @@ import { ThemeProvider } from 'app/core/utils/ConfigProvider';
 interface Props extends PanelProps<GaugeOptions> {}
 
 export class GaugePanel extends PureComponent<Props> {
-  renderMultipleGauge(vmSeries, theme) {
-    const { options, width } = this.props;
+  renderMultipleGauge(timeSeries, theme) {
+    const { options, height, width } = this.props;
     const gauges = [];
 
-    for (let i = 0; i < vmSeries.length; i++) {
-      const singleStatWidth = 1 / vmSeries.length * 100;
-      const gaugeWidth = Math.floor(width / vmSeries.length) - 10; // make Gauge slightly smaller than panel.
+    for (let i = 0; i < timeSeries.length; i++) {
+      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.
+      const repeatingGaugeHeight = Math.floor(height / timeSeries.length) - 10;
+
+      const horizontalPanels = {
+        display: 'inline-block',
+        height: height,
+        width: `${singleStatWidth}%`,
+      };
+
+      const verticalPanels = {
+        display: 'block',
+        width: width,
+        height: `${singleStatHeight}%`,
+      };
+
+      let style = {};
+      let gaugeWidth = width;
+      let gaugeHeight = height;
+
+      if (options.direction === 'horizontal' || (options.direction === 'auto' && width > height)) {
+        style = horizontalPanels;
+        gaugeWidth = repeatingGaugeWidth;
+      } else if (options.direction === 'vertical' || (options.direction === 'auto' && height > width)) {
+        style = verticalPanels;
+        gaugeHeight = repeatingGaugeHeight;
+      }
 
       gauges.push(
-        <div
-          className="singlestat-panel"
-          key={`gauge-${i}`}
-          style={{ display: 'inline-block', width: `${singleStatWidth}%` }}
-        >
-          {this.renderGauge(vmSeries[i].stats[options.stat], gaugeWidth, theme)}
-
+        <div className="singlestat-panel" key={`gauge-${i}`} style={style}>
+          {this.renderGauge(timeSeries[i].stats[options.stat], gaugeWidth, gaugeHeight, theme)}
           <div style={{ textAlign: 'center' }}>Gauge {i}</div>
         </div>
       );
@@ -38,35 +59,42 @@ export class GaugePanel extends PureComponent<Props> {
     return gauges;
   }
 
-  renderGauge(value, width, theme) {
-    const { height, onInterpolate, options } = this.props;
+  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} width={width} height={height} prefix={prefix} suffix={suffix} theme={theme} />
+      <Gauge value={value} {...options} prefix={prefix} suffix={suffix} theme={theme} width={width} height={height} />
     );
   }
 
   renderSingleGauge(timeSeries, theme) {
-    const { options, width } = this.props;
+    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] / timeSeries.length;
+      timeSeriesValue = {
+        ...timeSeriesValue,
+        stats: { [options.stat]: timeSeriesValue.stats[options.stat] / timeSeries.length },
+      };
     }
 
-    return <div className="singlestat-panel">{this.renderGauge(timeSeriesValue, width, theme)}</div>;
+    return (
+      <div className="singlestat-panel">
+        {this.renderGauge(timeSeriesValue.stats[options.stat], width, height, theme)}
+      </div>
+    );
   }
 
   renderGaugeWithTableData(panelData, theme) {
-    const { width } = this.props;
+    const { width, height } = this.props;
 
     const firstTableDataValue = panelData.tableData.rows[0].find(prop => prop > 0);
-    return <div className="singlestat-panel">{this.renderGauge(firstTableDataValue, width, theme)}</div>;
+    return <div className="singlestat-panel">{this.renderGauge(firstTableDataValue, width, height, theme)}</div>;
   }
 
   renderPanel(theme) {

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

@@ -27,6 +27,7 @@ export const defaultProps = {
     valueMappings: [],
     thresholds: [],
     multiSeriesMode: 'repeat',
+    direction: 'auto',
   },
 };
 

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

@@ -13,4 +13,5 @@ export interface GaugeOptions {
   thresholds: Threshold[];
   unit: string;
   multiSeriesMode: string;
+  direction: string;
 }