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

Stat Panel: Fix issue with clipping text values (#64300)

Browse Source
This commit is contained in:
Joao Silva 2023-03-07 15:29:01 +01:00 committed by GitHub
parent 9276f11388
commit e5f6c80379
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 25 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
);
}

15
packages/grafana-ui/src/utils/measureText.ts
View File

@ -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;