combine mode with avg value

packages/grafana-ui/src/components/Switch/Switch.tsx

@@ -34,7 +34,7 @@ export class Switch extends PureComponent<Props, State> {
     const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`;
 
     return (
-      <label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className}`}>
+      <label htmlFor={labelId} className={`gf-form gf-form-switch-container ${className ? className : ''}`}>
         {label && <div className={labelClassName}>{label}</div>}
         <div className={switchClassName}>
           <input id={labelId} type="checkbox" checked={checked} onChange={this.internalOnChange} />

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

@@ -1,9 +1,24 @@
 import React, { PureComponent } from 'react';
-import { FormField, PanelOptionsProps, PanelOptionsGroup, Switch } from '@grafana/ui';
+import {
+  FormField,
+  FormLabel,
+  PanelOptionsProps,
+  PanelOptionsGroup,
+  Select,
+  SelectOptionItem,
+  Switch,
+} from '@grafana/ui';
 
 import { GaugeOptions } from './types';
 
 export default class GaugeOptionsEditor extends PureComponent<PanelOptionsProps<GaugeOptions>> {
+  multiSeriesOptions: SelectOptionItem[] = [
+    { value: 'repeat', label: 'Repeat' },
+    { value: 'combine', label: 'Combine' },
+  ];
+
+  labelWidth = 9;
+
   onToggleThresholdLabels = () =>
     this.props.onChange({ ...this.props.options, showThresholdLabels: !this.props.options.showThresholdLabels });
 
@@ -14,26 +29,38 @@ 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 });
+
   render() {
     const { options } = this.props;
-    const { maxValue, minValue, showThresholdLabels, showThresholdMarkers } = options;
+    const { maxValue, minValue, multiSeriesMode, showThresholdLabels, showThresholdMarkers } = options;
 
     return (
       <PanelOptionsGroup title="Gauge">
-        <FormField label="Min value" labelWidth={8} onChange={this.onMinValueChange} value={minValue} />
+        <FormField label="Min value" labelWidth={this.labelWidth} onChange={this.onMinValueChange} value={minValue} />
-        <FormField label="Max value" labelWidth={8} onChange={this.onMaxValueChange} value={maxValue} />
+        <FormField label="Max value" labelWidth={this.labelWidth} onChange={this.onMaxValueChange} value={maxValue} />
         <Switch
           label="Show labels"
-          labelClass="width-8"
+          labelClass={`width-${this.labelWidth}`}
           checked={showThresholdLabels}
           onChange={this.onToggleThresholdLabels}
         />
         <Switch
           label="Show markers"
-          labelClass="width-8"
+          labelClass={`width-${this.labelWidth}`}
           checked={showThresholdMarkers}
           onChange={this.onToggleThresholdMarkers}
         />
+        <div className="gf-form">
+          <FormLabel width={this.labelWidth}>Multi series mode</FormLabel>
+          <Select
+            defaultValue={this.multiSeriesOptions[0]}
+            onChange={this.onMultiSeriesModeChange}
+            options={this.multiSeriesOptions}
+            value={this.multiSeriesOptions.find(option => option.value === multiSeriesMode)}
+            width={12}
+          />
+        </div>
       </PanelOptionsGroup>
     );
   }

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

@@ -50,7 +50,15 @@ export class GaugePanel extends PureComponent<Props> {
 
   renderSingleGauge(timeSeries, theme) {
     const { options, width } = this.props;
-    const timeSeriesValue = timeSeries[0].stats[options.stat];
+
+    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;
+    }
+
     return <div className="singlestat-panel">{this.renderGauge(timeSeriesValue, width, theme)}</div>;
   }
 
@@ -62,7 +70,7 @@ export class GaugePanel extends PureComponent<Props> {
   }
 
   renderPanel(theme) {
-    const { panelData } = this.props;
+    const { panelData, options } = this.props;
 
     if (panelData.timeSeries) {
       const timeSeries = processTimeSeries({
@@ -71,7 +79,10 @@ export class GaugePanel extends PureComponent<Props> {
       });
 
       if (timeSeries.length > 1) {
-        return this.renderMultipleGauge(timeSeries, theme);
+        if (options.multiSeriesMode === 'repeat') {
+          return this.renderMultipleGauge(timeSeries, theme);
+        }
+        return this.renderSingleGauge(timeSeries, theme);
       } else if (timeSeries.length > 0) {
         return this.renderSingleGauge(timeSeries, theme);
       } else {

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

@@ -26,6 +26,7 @@ export const defaultProps = {
     unit: 'none',
     valueMappings: [],
     thresholds: [],
+    multiSeriesMode: 'repeat',
   },
 };
 
@@ -48,16 +49,12 @@ export default class GaugePanelOptions extends PureComponent<PanelOptionsProps<G
     const { onChange, options } = this.props;
     return (
       <ThemeProvider>
-        {(theme) => (
+        {theme => (
           <>
             <PanelOptionsGrid>
               <ValueOptions onChange={onChange} options={options} />
               <GaugeOptionsEditor onChange={onChange} options={options} />
-              <ThresholdsEditor
+              <ThresholdsEditor onChange={this.onThresholdsChanged} thresholds={options.thresholds} theme={theme} />
-                onChange={this.onThresholdsChanged}
-                thresholds={options.thresholds}
-                theme={theme}
-              />
             </PanelOptionsGrid>
 
             <ValueMappingsEditor onChange={this.onValueMappingsChanged} valueMappings={options.valueMappings} />

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

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