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
2 changed files with 25 additions and 9 deletions
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 LINE_HEIGHT = 1.2;
const MAX_TITLE_SIZE = 30; const MAX_TITLE_SIZE = 30;
const VALUE_FONT_WEIGHT = 500;
export abstract class BigValueLayout { export abstract class BigValueLayout {
titleFontSize: number; titleFontSize: number;
@@ -76,7 +77,7 @@ export abstract class BigValueLayout {
getValueStyles(): CSSProperties { getValueStyles(): CSSProperties {
const styles: CSSProperties = { const styles: CSSProperties = {
fontSize: this.valueFontSize, fontSize: this.valueFontSize,
fontWeight: 500, fontWeight: VALUE_FONT_WEIGHT,
lineHeight: LINE_HEIGHT, lineHeight: LINE_HEIGHT,
position: 'relative', position: 'relative',
zIndex: 1, zIndex: 1,
@@ -220,7 +221,9 @@ export class WideNoChartLayout extends BigValueLayout {
this.valueToAlignTo, this.valueToAlignTo,
this.maxTextWidth * valueWidthPercent, this.maxTextWidth * valueWidthPercent,
this.maxTextHeight, this.maxTextHeight,
LINE_HEIGHT LINE_HEIGHT,
undefined,
VALUE_FONT_WEIGHT
); );
} }
@@ -292,7 +295,9 @@ export class WideWithChartLayout extends BigValueLayout {
this.valueToAlignTo, this.valueToAlignTo,
this.maxTextWidth * valueWidthPercent, this.maxTextWidth * valueWidthPercent,
this.maxTextHeight * chartHeightPercent, this.maxTextHeight * chartHeightPercent,
LINE_HEIGHT LINE_HEIGHT,
undefined,
VALUE_FONT_WEIGHT
); );
} }
} }
@@ -346,7 +351,9 @@ export class StackedWithChartLayout extends BigValueLayout {
this.valueToAlignTo, this.valueToAlignTo,
this.maxTextWidth, this.maxTextWidth,
this.maxTextHeight - this.chartHeight - titleHeight, 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.valueToAlignTo,
this.maxTextWidth, this.maxTextWidth,
this.maxTextHeight - titleHeight, 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 * @beta
*/ */
export function measureText(text: string, fontSize: number): TextMetrics { export function measureText(text: string, fontSize: number, fontWeight = 400): TextMetrics {
const fontStyle = `${fontSize}px 'Inter'`; const fontStyle = `${fontWeight} ${fontSize}px 'Inter'`;
const cacheKey = text + fontStyle; const cacheKey = text + fontStyle;
const fromCache = cache.get(cacheKey); const fromCache = cache.get(cacheKey);
@@ -45,9 +45,16 @@ export function measureText(text: string, fontSize: number): TextMetrics {
/** /**
* @beta * @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 // 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 // how much bigger than 14px can we make it while staying within our width constraints
const fontSizeBasedOnWidth = (width / (textSize.width + 2)) * 14; const fontSizeBasedOnWidth = (width / (textSize.width + 2)) * 14;
const fontSizeBasedOnHeight = height / lineHeight; const fontSizeBasedOnHeight = height / lineHeight;