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

StatPanel: Fixes font size issue when there is only 1 sparkline data point (#47075)

Browse Source 
* StatPanel: Fixes font size issue when there is only 1 sparkline data point

* Fixed wide layout case
This commit is contained in:
Torkel Ödegaard 2022-04-05 15:34:17 +02:00 committed by GitHub
parent 8ede6161d4
commit 05098ec38e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 50 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
packages/grafana-ui/src/components/BigValue/BigValueLayout.test.tsx
View File

@ -1,5 +1,5 @@
import { Props, BigValueColorMode, BigValueGraphMode } from './BigValue';
import { buildLayout, StackedWithChartLayout, WideWithChartLayout } from './BigValueLayout';
import { Props, BigValueColorMode, BigValueGraphMode, BigValueTextMode } from './BigValue';
import { buildLayout, StackedWithChartLayout, StackedWithNoChartLayout, WideWithChartLayout } from './BigValueLayout';
import { ArrayVector, createTheme, FieldType } from '@grafana/data';
function getProps(propOverrides?: Partial<Props>): Props {
@ -20,6 +20,7 @@ function getProps(propOverrides?: Partial<Props>): Props {
config: {},
},
},
count: 1,
theme: createTheme(),
};
@ -39,6 +40,43 @@ describe('BigValueLayout', () => {
expect(layout).toBeInstanceOf(StackedWithChartLayout);
});
it('should not include title height when count is 1 and title is auto hidden', () => {
const layout = buildLayout(
getProps({
value: {
text: '25',
title: '10',
numeric: 25,
},
sparkline: undefined,
textMode: BigValueTextMode.Auto,
count: 1,
})
);
expect(layout.titleFontSize).toBe(0);
});
it('should not use chart layout if only one sparkline point', () => {
const layout = buildLayout(
getProps({
value: {
text: '25',
title: '10',
numeric: 25,
},
sparkline: {
y: {
name: '',
values: new ArrayVector([1]),
type: FieldType.number,
config: {},
},
},
})
);
expect(layout).toBeInstanceOf(StackedWithNoChartLayout);
});
it('should auto select to wide layout', () => {
const layout = buildLayout(
getProps({

17
packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
View File

@ -38,8 +38,8 @@ export abstract class BigValueLayout {
this.justifyCenter = shouldJustifyCenter(props.justifyMode, this.textValues.title);
this.valueToAlignTo = this.textValues.valueToAlignTo;
this.titleToAlignTo = this.textValues.titleToAlignTo;
this.titleFontSize = 14;
this.valueFontSize = 14;
this.titleFontSize = 0;
this.valueFontSize = 0;
this.chartHeight = 0;
this.chartWidth = 0;
this.maxTextWidth = width - this.panelPadding * 2;
@ -335,8 +335,9 @@ export class StackedWithChartLayout extends BigValueLayout {
LINE_HEIGHT,
MAX_TITLE_SIZE
);
titleHeight = this.titleFontSize * LINE_HEIGHT;
}
titleHeight = this.titleFontSize * LINE_HEIGHT;
if (this.valueToAlignTo.length) {
this.valueFontSize = calculateFontSize(
@ -399,8 +400,10 @@ export class StackedWithNoChartLayout extends BigValueLayout {
);
}
// make title fontsize it's a bit smaller than valueFontSize
this.titleFontSize = Math.min(this.valueFontSize * 0.7, this.titleFontSize);
if (this.titleToAlignTo?.length) {
// make title fontsize it's a bit smaller than valueFontSize
this.titleFontSize = Math.min(this.valueFontSize * 0.7, this.titleFontSize);
}
}
getValueAndTitleContainerStyles() {
@ -422,7 +425,7 @@ export function buildLayout(props: Props): BigValueLayout {
const useWideLayout = width / height > 2.5;
if (useWideLayout) {
if (height > 50 && !!sparkline) {
if (height > 50 && !!sparkline && sparkline.y.values.length > 1) {
return new WideWithChartLayout(props);
} else {
return new WideNoChartLayout(props);
@ -430,7 +433,7 @@ export function buildLayout(props: Props): BigValueLayout {
}
// stacked layouts
if (height > 100 && !!sparkline) {
if (height > 100 && sparkline && sparkline.y.values.length > 1) {
return new StackedWithChartLayout(props);
} else {
return new StackedWithNoChartLayout(props);