mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
StatPanel: Fixes font size issue when there is only 1 sparkline data point (#47075)
* StatPanel: Fixes font size issue when there is only 1 sparkline data point * Fixed wide layout case
This commit is contained in:
parent
8ede6161d4
commit
05098ec38e
@ -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({
|
||||
|
@ -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);
|
||||
|
Loading…
Reference in New Issue
Block a user