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

BarGauge: Limit title width when name is really long (#42346) (#42354)

Browse Source 
(cherry picked from commit 5c4fd91cd3)

Co-authored-by: Torkel Ödegaard <torkel@grafana.org>
This commit is contained in:
Grot (@grafanabot) 2021-11-26 08:15:46 -05:00 committed by GitHub
parent b35fac5905
commit b5960313fb
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 17 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/grafana-ui/src/components/BarGauge/BarGauge.test.tsx
View File

@ -218,9 +218,7 @@ describe('BarGauge', () => {
const styles = getTitleStyles(props);
expect(styles.wrapper.flexDirection).toBe('column');
});
});
describe('Horizontal bar with title', () => {
it('should place below if height < 40', () => {
const props = getProps({
height: 30,
@ -249,6 +247,19 @@ describe('BarGauge', () => {
expect(styles2.title.width).toBe('43px');
});
it('Should limit text length to 40%', () => {
const props = getProps({
height: 30,
value: getValue(
100,
'saaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'
),
orientation: VizOrientation.Horizontal,
});
const styles = getTitleStyles(props);
expect(styles.title.width).toBe('119px');
});
it('should use alignmentFactors if provided', () => {
const props = getProps({
height: 30,

5
packages/grafana-ui/src/components/BarGauge/BarGauge.tsx
View File

@ -268,10 +268,13 @@ function calculateTitleDimensions(props: Props): TitleDimensions {
const titleFontSize = titleHeight / TITLE_LINE_HEIGHT;
const textSize = measureText(title, titleFontSize);
// Do not allow title to take up more than 40% width
const textWidth = Math.min(textSize.width + 15, width * 0.4);
return {
fontSize: text?.titleSize ?? titleFontSize,
height: 0,
width: textSize.width + 15,
width: textWidth,
placement: 'left',
};
}