IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #14934 from grafana/hugoh/refactor-gauge-to-work-with-thresholds

Browse Source 
Refactor gauge to work with thresholds
This commit is contained in:
Torkel Ödegaard
2019-01-18 13:24:52 +01:00
committed by GitHub
parent bc8f3374a3 3a827fc2f1
commit a0eddad323
17 changed files with 1811 additions and 469 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
public/app/core/services/context_srv.ts
View File

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

1
public/app/features/dashboard/panel_model.ts
View File

@@ -55,7 +55,6 @@ const mustKeepProps: { [str: string]: boolean } = {
hasRefreshed: true,
events: true,
cacheTimeout: true,
nullPointMode: true,
cachedPluginOptions: true,
transparent: true,
};

19
public/app/plugins/panel/gauge/GaugePanel.tsx
View File

@@ -1,22 +1,30 @@
// Libraries
import React, { PureComponent } from 'react';
import { PanelProps, NullValueMode } from '@grafana/ui';
import { getTimeSeriesVMs } from 'app/viz/state/timeSeries';
import Gauge from 'app/viz/Gauge';
// Services & Utils
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> {}
export class GaugePanel extends PureComponent<Props> {
render() {
const { timeSeries, width, height, onInterpolate, options } = this.props;
const prefix = onInterpolate(options.prefix);
const suffix = onInterpolate(options.suffix);
const vmSeries = getTimeSeriesVMs({
const vmSeries = processTimeSeries({
timeSeries: timeSeries,
nullValueMode: NullValueMode.Ignore,
nullValueMode: NullValueMode.Null,
});
return (
@@ -27,6 +35,7 @@ export class GaugePanel extends PureComponent<Props> {
height={height}
prefix={prefix}
suffix={suffix}
theme={contextSrv.getTheme()}
/>
);
}

2
public/app/plugins/panel/gauge/GaugePanelOptions.tsx
View File

@@ -1,6 +1,5 @@
import React, { PureComponent } from 'react';
import {
BasicGaugeColor,
PanelOptionsProps,
ThresholdsEditor,
Threshold,
@@ -15,7 +14,6 @@ import { GaugeOptions } from './types';
export const defaultProps = {
options: {
baseColor: BasicGaugeColor.Green,
minValue: 0,
maxValue: 100,
prefix: '',

1
public/app/plugins/panel/gauge/types.ts
View File

@@ -1,7 +1,6 @@
import { Threshold, ValueMapping } from '@grafana/ui';
export interface GaugeOptions {
baseColor: string;
decimals: number;
valueMappings: ValueMapping[];
maxValue: number;

2
public/app/plugins/panel/graph2/GraphPanel.tsx
View File

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

55
public/app/viz/Gauge.test.tsx
View File

@@ -1,55 +0,0 @@
import React from 'react';
import { shallow } from 'enzyme';
import { BasicGaugeColor, TimeSeriesVMs } from '@grafana/ui';
import { Gauge, Props } from './Gauge';
jest.mock('jquery', () => ({
plot: jest.fn(),
}));
const setup = (propOverrides?: object) => {
const props: Props = {
baseColor: BasicGaugeColor.Green,
maxValue: 100,
valueMappings: [],
minValue: 0,
prefix: '',
showThresholdMarkers: true,
showThresholdLabels: false,
suffix: '',
thresholds: [],
unit: 'none',
stat: 'avg',
height: 300,
width: 300,
timeSeries: {} as TimeSeriesVMs,
decimals: 0,
};
Object.assign(props, propOverrides);
const wrapper = shallow(<Gauge {...props} />);
const instance = wrapper.instance() as Gauge;
return {
instance,
wrapper,
};
};
describe('Get font color', () => {
it('should get base color if no threshold', () => {
const { instance } = setup();
expect(instance.getFontColor(40)).toEqual(BasicGaugeColor.Green);
});
it('should be f2f2f2', () => {
const { instance } = setup({
thresholds: [{ value: 59, color: '#f2f2f2' }],
});
expect(instance.getFontColor(58)).toEqual('#f2f2f2');
});
});

216
public/app/viz/Gauge.tsx
View File

@@ -1,216 +0,0 @@
import React, { PureComponent } from 'react';
import $ from 'jquery';
import { BasicGaugeColor, Threshold, TimeSeriesVMs, MappingType, ValueMapping } from '@grafana/ui';
import config from '../core/config';
import kbn from '../core/utils/kbn';
export interface Props {
baseColor: string;
decimals: number;
height: number;
valueMappings: ValueMapping[];
maxValue: number;
minValue: number;
prefix: string;
timeSeries: TimeSeriesVMs;
thresholds: Threshold[];
showThresholdMarkers: boolean;
showThresholdLabels: boolean;
stat: string;
suffix: string;
unit: string;
width: number;
}
export class Gauge extends PureComponent<Props> {
canvasElement: any;
static defaultProps = {
baseColor: BasicGaugeColor.Green,
maxValue: 100,
valueMappings: [],
minValue: 0,
prefix: '',
showThresholdMarkers: true,
showThresholdLabels: false,
suffix: '',
thresholds: [],
unit: 'none',
stat: 'avg',
};
componentDidMount() {
this.draw();
}
componentDidUpdate() {
this.draw();
}
formatWithMappings(mappings, value) {
const valueMaps = mappings.filter(m => m.type === MappingType.ValueToText);
const rangeMaps = mappings.filter(m => m.type === MappingType.RangeToText);
const valueMap = valueMaps.map(mapping => {
if (mapping.value && value === mapping.value) {
return mapping.text;
}
})[0];
const rangeMap = rangeMaps.map(mapping => {
if (mapping.from && mapping.to && value > mapping.from && value < mapping.to) {
return mapping.text;
}
})[0];
return { rangeMap, valueMap };
}
formatValue(value) {
const { decimals, valueMappings, prefix, suffix, unit } = this.props;
const formatFunc = kbn.valueFormats[unit];
const formattedValue = formatFunc(value, decimals);
if (valueMappings.length > 0) {
const { rangeMap, valueMap } = this.formatWithMappings(valueMappings, formattedValue);
if (valueMap) {
return `${prefix} ${valueMap} ${suffix}`;
} else if (rangeMap) {
return `${prefix} ${rangeMap} ${suffix}`;
}
}
if (isNaN(value)) {
return '-';
}
return `${prefix} ${formattedValue} ${suffix}`;
}
getFontColor(value) {
const { baseColor, maxValue, thresholds } = this.props;
if (thresholds.length > 0) {
const atThreshold = thresholds.filter(threshold => value <= threshold.value);
if (atThreshold.length > 0) {
return atThreshold[0].color;
} else if (value <= maxValue) {
return BasicGaugeColor.Red;
}
}
return baseColor;
}
draw() {
const {
baseColor,
maxValue,
minValue,
timeSeries,
showThresholdLabels,
showThresholdMarkers,
thresholds,
width,
height,
stat,
} = this.props;
let value: string | number = '';
if (timeSeries[0]) {
value = timeSeries[0].stats[stat];
} else {
value = 'N/A';
}
const dimension = Math.min(width, height * 1.3);
const backgroundColor = config.bootData.user.lightTheme ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
const fontScale = parseInt('80', 10) / 100;
const fontSize = Math.min(dimension / 5, 100) * fontScale;
const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
const gaugeWidth = Math.min(dimension / 6, 60) / gaugeWidthReduceRatio;
const thresholdMarkersWidth = gaugeWidth / 5;
const thresholdLabelFontSize = fontSize / 2.5;
const formattedThresholds = [
{ value: minValue, color: BasicGaugeColor.Green },
...thresholds.map((threshold, index) => {
return {
value: threshold.value,
color: index === 0 ? threshold.color : thresholds[index].color,
};
}),
{ value: maxValue, color: thresholds.length > 0 ? BasicGaugeColor.Red : baseColor },
];
const options = {
series: {
gauges: {
gauge: {
min: minValue,
max: maxValue,
background: { color: backgroundColor },
border: { color: null },
shadow: { show: false },
width: gaugeWidth,
},
frame: { show: false },
label: { show: false },
layout: { margin: 0, thresholdWidth: 0 },
cell: { border: { width: 0 } },
threshold: {
values: formattedThresholds,
label: {
show: showThresholdLabels,
margin: thresholdMarkersWidth + 1,
font: { size: thresholdLabelFontSize },
},
show: showThresholdMarkers,
width: thresholdMarkersWidth,
},
value: {
color: this.getFontColor(value),
formatter: () => {
return this.formatValue(value);
},
font: { size: fontSize, family: '"Helvetica Neue", Helvetica, Arial, sans-serif' },
},
show: true,
},
},
};
const plotSeries = { data: [[0, value]] };
try {
$.plot(this.canvasElement, [plotSeries], options);
} catch (err) {
console.log('Gauge rendering error', err, options, timeSeries);
}
}
render() {
const { height, width } = this.props;
return (
<div className="singlestat-panel">
<div
style={{
height: `${height * 0.9}px`,
width: `${Math.min(width, height * 1.3)}px`,
top: '10px',
margin: 'auto',
}}
ref={element => (this.canvasElement = element)}
/>
</div>
);
}
}
export default Gauge;

168
public/app/viz/state/timeSeries.ts
View File

@@ -1,168 +0,0 @@
// 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],
stats: {
total,
min,
max,
current,
logmin,
avg,
diff,
delta,
timeStep,
range,
count,
first,
allIsZero,
allIsNull,
},
};
});
return vmSeries;
}