Commit 3fed829b by Torkel Ödegaard Committed by GitHub

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

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

* Updated tests
parent 31001a01
...@@ -3,7 +3,7 @@ import { shallow } from 'enzyme'; ...@@ -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) => { ...@@ -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' }],
......
...@@ -8,9 +8,11 @@ import { ...@@ -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> { ...@@ -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> { ...@@ -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!;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment