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

Gauge: Improve text sizing and support non threshold color modes (#28256)

Browse Source 
* Gauge: Improve text sizing and support non threshold color modes

* Updated tests
This commit is contained in:
Torkel Ödegaard 2020-10-14 16:17:41 +02:00 committed by GitHub
parent 31001a016c
commit 3fed829b8b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -3,7 +3,7 @@ import { shallow } from 'enzyme';
import { Gauge, Props } from './Gauge'; import { Gauge, Props } from './Gauge';
import { getTheme } from '../../themes'; import { getTheme } from '../../themes';
import { ThresholdsMode, FieldConfig } from '@grafana/data'; import { ThresholdsMode, FieldConfig, FieldColorModeId } from '@grafana/data';
jest.mock('jquery', () => ({ jest.mock('jquery', () => ({
plot: jest.fn(), plot: jest.fn(),
@ -13,6 +13,9 @@ const setup = (propOverrides?: FieldConfig) => {
const field: FieldConfig = { const field: FieldConfig = {
min: 0, min: 0,
max: 100, max: 100,
color: {
mode: FieldColorModeId.Thresholds,
},
thresholds: { thresholds: {
mode: ThresholdsMode.Absolute, mode: ThresholdsMode.Absolute,
steps: [{ value: -Infinity, color: '#7EB26D' }], steps: [{ value: -Infinity, color: '#7EB26D' }],

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

@ -8,9 +8,11 @@ import {
getActiveThreshold, getActiveThreshold,
Threshold, Threshold,
getColorForTheme, getColorForTheme,
FieldColorModeId,
FALLBACK_COLOR,
} from '@grafana/data'; } from '@grafana/data';
import { Themeable } from '../../types'; import { Themeable } from '../../types';
import { selectThemeVariant } from '../../themes'; import { calculateFontSize } from '../../utils/measureText';
export interface Props extends Themeable { export interface Props extends Themeable {
height: number; height: number;
@ -53,12 +55,18 @@ export class Gauge extends PureComponent<Props> {
} }
getFormattedThresholds(decimals: number): Threshold[] { getFormattedThresholds(decimals: number): Threshold[] {
const { field, theme } = this.props; const { field, theme, value } = this.props;
if (field.color?.mode !== FieldColorModeId.Thresholds) {
return [{ value: field.min ?? 0, color: value.color ?? FALLBACK_COLOR }];
}
const thresholds = field.thresholds ?? Gauge.defaultProps.field?.thresholds!; const thresholds = field.thresholds ?? Gauge.defaultProps.field?.thresholds!;
const isPercent = thresholds.mode === ThresholdsMode.Percentage; const isPercent = thresholds.mode === ThresholdsMode.Percentage;
const steps = thresholds.steps; const steps = thresholds.steps;
let min = field.min!; let min = field.min!;
let max = field.max!; let max = field.max!;
if (isPercent) { if (isPercent) {
min = 0; min = 0;
max = 100; max = 100;
@ -99,21 +107,12 @@ export class Gauge extends PureComponent<Props> {
const autoProps = calculateGaugeAutoProps(width, height, value.title); const autoProps = calculateGaugeAutoProps(width, height, value.title);
const dimension = Math.min(width, autoProps.gaugeHeight); const dimension = Math.min(width, autoProps.gaugeHeight);
const backgroundColor = theme.colors.bg2;
const backgroundColor = selectThemeVariant(
{
dark: theme.palette.dark8,
light: theme.palette.gray6,
},
theme.type
);
const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1; const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1;
const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio; const gaugeWidth = Math.min(dimension / 5.5, 40) / gaugeWidthReduceRatio;
const thresholdMarkersWidth = gaugeWidth / 5; const thresholdMarkersWidth = gaugeWidth / 5;
const text = formattedValueToString(value); const text = formattedValueToString(value);
const fontSize = Math.min(dimension / 4, 100) * (text !== null ? this.getFontScale(text.length) : 1); const fontSize = calculateFontSize(text, dimension - gaugeWidth * 3, dimension, 1, 48);
const thresholdLabelFontSize = fontSize / 2.5; const thresholdLabelFontSize = fontSize / 2.5;
let min = field.min!; let min = field.min!;