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 branch 'master' into 15053/gauge-value-font-size

Browse Source
This commit is contained in:
Peter Holmberg
2019-01-29 11:20:16 +01:00
parent 462bdb6d13 433c88a616
commit b0984cd503
287 changed files with 12552 additions and 6039 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
packages/grafana-ui/src/components/Gauge/Gauge.tsx
View File

@@ -1,10 +1,11 @@
import React, { PureComponent } from 'react';
import $ from 'jquery';
import { BasicGaugeColor, ThemeName, ThemeNames, Threshold, ValueMapping } from '../../types';
import { TimeSeriesVMs } from '../../types';
import { getValueFormat } from '../../utils';
import { getMappedValue, TimeSeriesValue } from '../../utils/valueMappings';
import { ValueMapping, Threshold, BasicGaugeColor, TimeSeriesVMs, GrafanaTheme } from '../../types';
import { getMappedValue } from '../../utils/valueMappings';
import { getColorFromHexRgbOrName, getValueFormat } from '../../utils';
type TimeSeriesValue = string | number | null;
export interface Props {
decimals: number;
@@ -21,7 +22,7 @@ export interface Props {
suffix: string;
unit: string;
width: number;
theme?: ThemeName;
theme?: GrafanaTheme;
}
const FONT_SCALE = 1;
@@ -40,7 +41,7 @@ export class Gauge extends PureComponent<Props> {
thresholds: [],
unit: 'none',
stat: 'avg',
theme: ThemeNames.Dark,
theme: GrafanaTheme.Dark,
};
componentDidMount() {
@@ -73,29 +74,29 @@ export class Gauge extends PureComponent<Props> {
}
getFontColor(value: TimeSeriesValue) {
const { thresholds } = this.props;
const { thresholds, theme } = this.props;
if (thresholds.length === 1) {
return thresholds[0].color;
return getColorFromHexRgbOrName(thresholds[0].color, theme);
}
const atThreshold = thresholds.filter(threshold => (value as number) === threshold.value)[0];
if (atThreshold) {
return atThreshold.color;
return getColorFromHexRgbOrName(atThreshold.color, theme);
}
const belowThreshold = thresholds.filter(threshold => (value as number) > threshold.value);
if (belowThreshold.length > 0) {
const nearestThreshold = belowThreshold.sort((t1, t2) => t2.value - t1.value)[0];
return nearestThreshold.color;
return getColorFromHexRgbOrName(nearestThreshold.color, theme);
}
return BasicGaugeColor.Red;
}
getFormattedThresholds() {
const { maxValue, minValue, thresholds } = this.props;
const { maxValue, minValue, thresholds, theme } = this.props;
const thresholdsSortedByIndex = [...thresholds].sort((t1, t2) => t1.index - t2.index);
const lastThreshold = thresholdsSortedByIndex[thresholdsSortedByIndex.length - 1];
@@ -103,13 +104,13 @@ export class Gauge extends PureComponent<Props> {
return [
...thresholdsSortedByIndex.map(threshold => {
if (threshold.index === 0) {
return { value: minValue, color: threshold.color };
return { value: minValue, color: getColorFromHexRgbOrName(threshold.color, theme) };
}
const previousThreshold = thresholdsSortedByIndex[threshold.index - 1];
return { value: threshold.value, color: previousThreshold.color };
return { value: threshold.value, color: getColorFromHexRgbOrName(previousThreshold.color, theme) };
}),
{ value: maxValue, color: lastThreshold.color },
{ value: maxValue, color: getColorFromHexRgbOrName(lastThreshold.color, theme) },
];
}
@@ -143,7 +144,7 @@ export class Gauge extends PureComponent<Props> {
const formattedValue = this.formatValue(value) as string;
const dimension = Math.min(width, height * 1.3);
const backgroundColor = theme === ThemeNames.Light ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
const backgroundColor = theme === GrafanaTheme.Light ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
const gaugeWidth = Math.min(dimension / 6, 60) / gaugeWidthReduceRatio;
const thresholdMarkersWidth = gaugeWidth / 5;