Minor refactoring and name changes

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

@@ -4,10 +4,10 @@ import $ from 'jquery';
 import {
 import {
   ValueMapping,
   ValueMapping,
   Threshold,
   Threshold,
-  Theme,
+  ThemeName,
   MappingType,
   MappingType,
   BasicGaugeColor,
   BasicGaugeColor,
-  Themes,
+  ThemeNames,
   ValueMap,
   ValueMap,
   RangeMap,
   RangeMap,
 } from '../../types/panel';
 } from '../../types/panel';
@@ -31,7 +31,7 @@ export interface Props {
   suffix: string;
   suffix: string;
   unit: string;
   unit: string;
   width: number;
   width: number;
-  theme?: Theme;
+  theme?: ThemeName;
 }
 }
 
 
 export class Gauge extends PureComponent<Props> {
 export class Gauge extends PureComponent<Props> {
@@ -48,6 +48,7 @@ export class Gauge extends PureComponent<Props> {
     thresholds: [],
     thresholds: [],
     unit: 'none',
     unit: 'none',
     stat: 'avg',
     stat: 'avg',
+    theme: ThemeNames.Dark,
   };
   };
 
 
   componentDidMount() {
   componentDidMount() {
@@ -207,7 +208,7 @@ export class Gauge extends PureComponent<Props> {
     }
     }
 
 
     const dimension = Math.min(width, height * 1.3);
     const dimension = Math.min(width, height * 1.3);
-    const backgroundColor = theme === Themes.Light ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
+    const backgroundColor = theme === ThemeNames.Light ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
     const fontScale = parseInt('80', 10) / 100;
     const fontScale = parseInt('80', 10) / 100;
     const fontSize = Math.min(dimension / 5, 100) * fontScale;
     const fontSize = Math.min(dimension / 5, 100) * fontScale;
     const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
     const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;

packages/grafana-ui/src/types/panel.ts

@@ -67,9 +67,9 @@ export interface RangeMap extends BaseMap {
   to: string;
   to: string;
 }
 }
 
 
-export type Theme = 'dark' | 'light';
+export type ThemeName = 'dark' | 'light';
 
 
-export enum Themes {
+export enum ThemeNames {
   Dark = 'dark',
   Dark = 'dark',
   Light = 'light',
   Light = 'light',
 }
 }

packages/grafana-ui/src/utils/processTimeSeries.ts

 // Libraries
 // Libraries
 import _ from 'lodash';
 import _ from 'lodash';
 
 
+import { colors } from './colors';
+
 // Types
 // Types
 import { TimeSeries, TimeSeriesVMs, NullValueMode, TimeSeriesValue } from '../types';
 import { TimeSeries, TimeSeriesVMs, NullValueMode, TimeSeriesValue } from '../types';
 
 
 interface Options {
 interface Options {
   timeSeries: TimeSeries[];
   timeSeries: TimeSeries[];
   nullValueMode: NullValueMode;
   nullValueMode: NullValueMode;
-  colorPalette: string[];
 }
 }
 
 
-export function processTimeSeries({ timeSeries, nullValueMode, colorPalette }: Options): TimeSeriesVMs {
+export function processTimeSeries({ timeSeries, nullValueMode }: Options): TimeSeriesVMs {
   const vmSeries = timeSeries.map((item, index) => {
   const vmSeries = timeSeries.map((item, index) => {
-    const colorIndex = index % colorPalette.length;
+    const colorIndex = index % colors.length;
     const label = item.target;
     const label = item.target;
     const result = [];
     const result = [];
 
 
@@ -150,7 +151,7 @@ export function processTimeSeries({ timeSeries, nullValueMode, colorPalette }: O
     return {
     return {
       data: result,
       data: result,
       label: label,
       label: label,
-      color: colorPalette[colorIndex],
+      color: colors[colorIndex],
       allIsZero,
       allIsZero,
       allIsNull,
       allIsNull,
       stats: {
       stats: {

public/app/core/services/context_srv.ts

@@ -2,6 +2,7 @@ import config from 'app/core/config';
 import _ from 'lodash';
 import _ from 'lodash';
 import coreModule from 'app/core/core_module';
 import coreModule from 'app/core/core_module';
 import store from 'app/core/store';
 import store from 'app/core/store';
+import { ThemeNames, ThemeName } from '@grafana/ui';
 
 
 export class User {
 export class User {
   isGrafanaAdmin: any;
   isGrafanaAdmin: any;
@@ -59,6 +60,10 @@ export class ContextSrv {
     this.sidemenu = !this.sidemenu;
     this.sidemenu = !this.sidemenu;
     store.set('grafana.sidemenu', this.sidemenu);
     store.set('grafana.sidemenu', this.sidemenu);
   }
   }
+
+  getTheme(): ThemeName {
+    return this.user.lightTheme ? ThemeNames.Light : ThemeNames.Dark;
+  }
 }
 }
 
 
 const contextSrv = new ContextSrv();
 const contextSrv = new ContextSrv();

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

+// Libraries
 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
-import { PanelProps, NullValueMode, Gauge, Themes } from '@grafana/ui';
 
 
-import { getTimeSeriesVMs } from './timeSeries';
-import { GaugeOptions } from './types';
+// Services & Utils
 import { contextSrv } from 'app/core/core';
 import { contextSrv } from 'app/core/core';
+import { processTimeSeries } from '@grafana/ui';
+
+// Components
+import { Gauge } from '@grafana/ui';
+
+// Types
+import { GaugeOptions } from './types';
+import { PanelProps, NullValueMode } from '@grafana/ui/src/types';
 
 
 interface Props extends PanelProps<GaugeOptions> {}
 interface Props extends PanelProps<GaugeOptions> {}
 
 
 export class GaugePanel extends PureComponent<Props> {
 export class GaugePanel extends PureComponent<Props> {
-  getTheme() {
-    return contextSrv.user.lightTheme ? Themes.Light : Themes.Dark;
-  }
 
 
   render() {
   render() {
     const { timeSeries, width, height, onInterpolate, options } = this.props;
     const { timeSeries, width, height, onInterpolate, options } = this.props;
@@ -18,7 +22,7 @@ export class GaugePanel extends PureComponent<Props> {
     const prefix = onInterpolate(options.prefix);
     const prefix = onInterpolate(options.prefix);
     const suffix = onInterpolate(options.suffix);
     const suffix = onInterpolate(options.suffix);
 
 
-    const vmSeries = getTimeSeriesVMs({
+    const vmSeries = processTimeSeries({
       timeSeries: timeSeries,
       timeSeries: timeSeries,
       nullValueMode: NullValueMode.Ignore,
       nullValueMode: NullValueMode.Ignore,
     });
     });
@@ -31,7 +35,7 @@ export class GaugePanel extends PureComponent<Props> {
         height={height}
         height={height}
         prefix={prefix}
         prefix={prefix}
         suffix={suffix}
         suffix={suffix}
-        theme={this.getTheme()}
+        theme={contextSrv.getTheme()}
       />
       />
     );
     );
   }
   }

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

-// Libraries
-import _ from 'lodash';
-
-// Utils
-import { colors } from '@grafana/ui';
-
-// Types
-import { TimeSeries, TimeSeriesVMs, NullValueMode } from '@grafana/ui';
-
-interface Options {
-  timeSeries: TimeSeries[];
-  nullValueMode: NullValueMode;
-}
-
-export function getTimeSeriesVMs({ timeSeries, nullValueMode }: Options): TimeSeriesVMs {
-  const vmSeries = timeSeries.map((item, index) => {
-    const colorIndex = index % colors.length;
-    const label = item.target;
-    const result = [];
-
-    // stat defaults
-    let total = 0;
-    let max = -Number.MAX_VALUE;
-    let min = Number.MAX_VALUE;
-    let logmin = Number.MAX_VALUE;
-    let avg = null;
-    let current = null;
-    let first = null;
-    let delta = 0;
-    let diff = null;
-    let range = null;
-    let timeStep = Number.MAX_VALUE;
-    let allIsNull = true;
-    let allIsZero = true;
-
-    const ignoreNulls = nullValueMode === NullValueMode.Ignore;
-    const nullAsZero = nullValueMode === NullValueMode.AsZero;
-
-    let currentTime;
-    let currentValue;
-    let nonNulls = 0;
-    let previousTime;
-    let previousValue = 0;
-    let previousDeltaUp = true;
-
-    for (let i = 0; i < item.datapoints.length; i++) {
-      currentValue = item.datapoints[i][0];
-      currentTime = item.datapoints[i][1];
-
-      // Due to missing values we could have different timeStep all along the series
-      // so we have to find the minimum one (could occur with aggregators such as ZimSum)
-      if (previousTime !== undefined) {
-        const currentStep = currentTime - previousTime;
-        if (currentStep < timeStep) {
-          timeStep = currentStep;
-        }
-      }
-
-      previousTime = currentTime;
-
-      if (currentValue === null) {
-        if (ignoreNulls) {
-          continue;
-        }
-        if (nullAsZero) {
-          currentValue = 0;
-        }
-      }
-
-      if (currentValue !== null) {
-        if (_.isNumber(currentValue)) {
-          total += currentValue;
-          allIsNull = false;
-          nonNulls++;
-        }
-
-        if (currentValue > max) {
-          max = currentValue;
-        }
-
-        if (currentValue < min) {
-          min = currentValue;
-        }
-
-        if (first === null) {
-          first = currentValue;
-        } else {
-          if (previousValue > currentValue) {
-            // counter reset
-            previousDeltaUp = false;
-            if (i === item.datapoints.length - 1) {
-              // reset on last
-              delta += currentValue;
-            }
-          } else {
-            if (previousDeltaUp) {
-              delta += currentValue - previousValue; // normal increment
-            } else {
-              delta += currentValue; // account for counter reset
-            }
-            previousDeltaUp = true;
-          }
-        }
-        previousValue = currentValue;
-
-        if (currentValue < logmin && currentValue > 0) {
-          logmin = currentValue;
-        }
-
-        if (currentValue !== 0) {
-          allIsZero = false;
-        }
-      }
-
-      result.push([currentTime, currentValue]);
-    }
-
-    if (max === -Number.MAX_VALUE) {
-      max = null;
-    }
-
-    if (min === Number.MAX_VALUE) {
-      min = null;
-    }
-
-    if (result.length && !allIsNull) {
-      avg = total / nonNulls;
-      current = result[result.length - 1][1];
-      if (current === null && result.length > 1) {
-        current = result[result.length - 2][1];
-      }
-    }
-
-    if (max !== null && min !== null) {
-      range = max - min;
-    }
-
-    if (current !== null && first !== null) {
-      diff = current - first;
-    }
-
-    const count = result.length;
-
-    return {
-      data: result,
-      label: label,
-      color: colors[colorIndex],
-      allIsZero,
-      allIsNull,
-      stats: {
-        total,
-        min,
-        max,
-        current,
-        logmin,
-        avg,
-        diff,
-        delta,
-        timeStep,
-        range,
-        count,
-        first,
-      },
-    };
-  });
-
-  return vmSeries;
-}

public/app/plugins/panel/graph2/GraphPanel.tsx

 // Libraries
 // Libraries
 import _ from 'lodash';
 import _ from 'lodash';
 import React, { PureComponent } from 'react';
 import React, { PureComponent } from 'react';
-import { colors } from '@grafana/ui';
 
 
 // Utils
 // Utils
 import { processTimeSeries } from '@grafana/ui/src/utils';
 import { processTimeSeries } from '@grafana/ui/src/utils';
@@ -23,7 +22,6 @@ export class GraphPanel extends PureComponent<Props> {
     const vmSeries = processTimeSeries({
     const vmSeries = processTimeSeries({
       timeSeries: timeSeries,
       timeSeries: timeSeries,
       nullValueMode: NullValueMode.Ignore,
       nullValueMode: NullValueMode.Ignore,
-      colorPalette: colors,
     });
     });
 
 
     return (
     return (