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: apply decimal limits to gauge min/max labels (#24192)

Browse Source 
* limit label size

* fix tests
This commit is contained in:
Ryan McKinley 2020-05-04 03:13:12 -07:00 committed by GitHub
parent 4a5434bffa
commit 7e1bf0e7e2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 12 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -48,7 +48,7 @@ describe('Get thresholds formatted', () => {
thresholds: { mode: ThresholdsMode.Absolute, steps: [{ value: -Infinity, color: '#7EB26D' }] }, thresholds: { mode: ThresholdsMode.Absolute, steps: [{ value: -Infinity, color: '#7EB26D' }] },
}); });
expect(instance.getFormattedThresholds()).toEqual([ expect(instance.getFormattedThresholds(2)).toEqual([
{ value: 0, color: '#7EB26D' }, { value: 0, color: '#7EB26D' },
{ value: 100, color: '#7EB26D' }, { value: 100, color: '#7EB26D' },
]); ]);
@ -66,7 +66,7 @@ describe('Get thresholds formatted', () => {
}, },
}); });
expect(instance.getFormattedThresholds()).toEqual([ expect(instance.getFormattedThresholds(2)).toEqual([
{ value: 0, color: '#7EB26D' }, { value: 0, color: '#7EB26D' },
{ value: 50, color: '#7EB26D' }, { value: 50, color: '#7EB26D' },
{ value: 75, color: '#EAB839' }, { value: 75, color: '#EAB839' },

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

@ -52,7 +52,7 @@ export class Gauge extends PureComponent<Props> {
this.draw(); this.draw();
} }
getFormattedThresholds(): Threshold[] { getFormattedThresholds(decimals: number): Threshold[] {
const { field, theme } = this.props; const { field, theme } = this.props;
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;
@ -67,7 +67,7 @@ export class Gauge extends PureComponent<Props> {
const first = getActiveThreshold(min, steps); const first = getActiveThreshold(min, steps);
const last = getActiveThreshold(max, steps); const last = getActiveThreshold(max, steps);
const formatted: Threshold[] = []; const formatted: Threshold[] = [];
formatted.push({ value: min, color: getColorFromHexRgbOrName(first.color, theme.type) }); formatted.push({ value: +min.toFixed(decimals), color: getColorFromHexRgbOrName(first.color, theme.type) });
let skip = true; let skip = true;
for (let i = 0; i < steps.length; i++) { for (let i = 0; i < steps.length; i++) {
const step = steps[i]; const step = steps[i];
@ -83,7 +83,7 @@ export class Gauge extends PureComponent<Props> {
break; break;
} }
} }
formatted.push({ value: max, color: getColorFromHexRgbOrName(last.color, theme.type) }); formatted.push({ value: +max.toFixed(decimals), color: getColorFromHexRgbOrName(last.color, theme.type) });
return formatted; return formatted;
} }
@ -129,6 +129,12 @@ export class Gauge extends PureComponent<Props> {
} }
} }
const decimals = field.decimals === undefined ? 2 : field.decimals!;
if (showThresholdMarkers) {
min = +min.toFixed(decimals);
max = +max.toFixed(decimals);
}
const options: any = { const options: any = {
series: { series: {
gauges: { gauges: {
@ -145,7 +151,7 @@ export class Gauge extends PureComponent<Props> {
layout: { margin: 0, thresholdWidth: 0, vMargin: 0 }, layout: { margin: 0, thresholdWidth: 0, vMargin: 0 },
cell: { border: { width: 0 } }, cell: { border: { width: 0 } },
threshold: { threshold: {
values: this.getFormattedThresholds(), values: this.getFormattedThresholds(decimals),
label: { label: {
show: showThresholdLabels, show: showThresholdLabels,
margin: thresholdMarkersWidth + 1, margin: thresholdMarkersWidth + 1,