mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Stat Panel: Fix issue with clipping text values (#64300)
This commit is contained in:
parent
9276f11388
commit
e5f6c80379
@ -12,6 +12,7 @@ import { BigValueColorMode, Props, BigValueJustifyMode, BigValueTextMode } from
|
||||
|
||||
const LINE_HEIGHT = 1.2;
|
||||
const MAX_TITLE_SIZE = 30;
|
||||
const VALUE_FONT_WEIGHT = 500;
|
||||
|
||||
export abstract class BigValueLayout {
|
||||
titleFontSize: number;
|
||||
@ -76,7 +77,7 @@ export abstract class BigValueLayout {
|
||||
getValueStyles(): CSSProperties {
|
||||
const styles: CSSProperties = {
|
||||
fontSize: this.valueFontSize,
|
||||
fontWeight: 500,
|
||||
fontWeight: VALUE_FONT_WEIGHT,
|
||||
lineHeight: LINE_HEIGHT,
|
||||
position: 'relative',
|
||||
zIndex: 1,
|
||||
@ -220,7 +221,9 @@ export class WideNoChartLayout extends BigValueLayout {
|
||||
this.valueToAlignTo,
|
||||
this.maxTextWidth * valueWidthPercent,
|
||||
this.maxTextHeight,
|
||||
LINE_HEIGHT
|
||||
LINE_HEIGHT,
|
||||
undefined,
|
||||
VALUE_FONT_WEIGHT
|
||||
);
|
||||
}
|
||||
|
||||
@ -292,7 +295,9 @@ export class WideWithChartLayout extends BigValueLayout {
|
||||
this.valueToAlignTo,
|
||||
this.maxTextWidth * valueWidthPercent,
|
||||
this.maxTextHeight * chartHeightPercent,
|
||||
LINE_HEIGHT
|
||||
LINE_HEIGHT,
|
||||
undefined,
|
||||
VALUE_FONT_WEIGHT
|
||||
);
|
||||
}
|
||||
}
|
||||
@ -346,7 +351,9 @@ export class StackedWithChartLayout extends BigValueLayout {
|
||||
this.valueToAlignTo,
|
||||
this.maxTextWidth,
|
||||
this.maxTextHeight - this.chartHeight - titleHeight,
|
||||
LINE_HEIGHT
|
||||
LINE_HEIGHT,
|
||||
undefined,
|
||||
VALUE_FONT_WEIGHT
|
||||
);
|
||||
}
|
||||
|
||||
@ -398,7 +405,9 @@ export class StackedWithNoChartLayout extends BigValueLayout {
|
||||
this.valueToAlignTo,
|
||||
this.maxTextWidth,
|
||||
this.maxTextHeight - titleHeight,
|
||||
LINE_HEIGHT
|
||||
LINE_HEIGHT,
|
||||
undefined,
|
||||
VALUE_FONT_WEIGHT
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -16,8 +16,8 @@ export function getCanvasContext() {
|
||||
/**
|
||||
* @beta
|
||||
*/
|
||||
export function measureText(text: string, fontSize: number): TextMetrics {
|
||||
const fontStyle = `${fontSize}px 'Inter'`;
|
||||
export function measureText(text: string, fontSize: number, fontWeight = 400): TextMetrics {
|
||||
const fontStyle = `${fontWeight} ${fontSize}px 'Inter'`;
|
||||
const cacheKey = text + fontStyle;
|
||||
const fromCache = cache.get(cacheKey);
|
||||
|
||||
@ -45,9 +45,16 @@ export function measureText(text: string, fontSize: number): TextMetrics {
|
||||
/**
|
||||
* @beta
|
||||
*/
|
||||
export function calculateFontSize(text: string, width: number, height: number, lineHeight: number, maxSize?: number) {
|
||||
export function calculateFontSize(
|
||||
text: string,
|
||||
width: number,
|
||||
height: number,
|
||||
lineHeight: number,
|
||||
maxSize?: number,
|
||||
fontWeight?: number
|
||||
) {
|
||||
// calculate width in 14px
|
||||
const textSize = measureText(text, 14);
|
||||
const textSize = measureText(text, 14, fontWeight);
|
||||
// how much bigger than 14px can we make it while staying within our width constraints
|
||||
const fontSizeBasedOnWidth = (width / (textSize.width + 2)) * 14;
|
||||
const fontSizeBasedOnHeight = height / lineHeight;
|
||||
|
Loading…
Reference in New Issue
Block a user