IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-01-10 08:03:58 -06:00
Code Issues Packages Projects Releases Wiki Activity

BarGauge: Fixed minor margin issue (#16419)

Browse Source 
Fixed margin issue that was not accounted for in width calc (#16419)
This commit is contained in:
Torkel Ödegaard 2019-04-07 14:32:41 +02:00 committed by GitHub
parent a5a0352dcc
commit 59c081e896
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 9 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -286,7 +286,7 @@ export function getTitleStyles(props: Props): { wrapper: CSSProperties; title: C
titleStyles.width = `${titleDim.width}px`;
titleStyles.textAlign = 'right';
titleStyles.marginRight = '10px';
titleStyles.paddingRight = '10px';
}
}
@ -344,6 +344,11 @@ function calculateBarAndValueDimensions(props: Props): BarAndValueDimensions {
}
}
// console.log('titleDim', titleDim);
// console.log('valueWidth', valueWidth);
// console.log('width', width);
// console.log('total', titleDim.width + maxBarWidth + valueWidth);
return {
valueWidth,
valueHeight,
@ -409,7 +414,8 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
barStyles.transition = 'width 1s';
barStyles.height = `${maxBarHeight}px`;
barStyles.width = `${barWidth}px`;
barStyles.marginRight = '10px';
valueStyles.paddingLeft = '10px';
if (isBasic) {
// Basic styles

2
packages/grafana-ui/src/components/BarGauge/__snapshots__/BarGauge.test.tsx.snap
View File

@ -20,6 +20,7 @@ exports[`BarGauge Render with basic options should render 1`] = `
"display": "flex",
"fontSize": "27.27px",
"height": "300px",
"paddingLeft": "10px",
"width": "60px",
}
}
@ -33,7 +34,6 @@ exports[`BarGauge Render with basic options should render 1`] = `
"borderRadius": "3px",
"borderRight": "2px solid #73BF69",
"height": "300px",
"marginRight": "10px",
"transition": "width 1s",
"width": "60px",
}