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

BarGuage: Fixes vertical view flip and bar misalignment when used with datalinks (#43655)

Browse Source 
* BarGauge: fix vertical view flip issue

* fix bar misalignment in vertical and horizontal orientations

* add test to prevent bar misalignment in the future
This commit is contained in:
Uchechukwu Obasi 2022-01-04 17:21:29 +01:00 committed by GitHub
parent c509c32091
commit 8aa496dfb4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 32 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -170,6 +170,18 @@ describe('BarGauge', () => {
});
});
describe('Vertical bar', () => {
it('should adjust empty region to always have same width as colored bar', () => {
const props = getProps({
width: 150,
value: getValue(100),
orientation: VizOrientation.Vertical,
});
const styles = getBasicAndGradientStyles(props);
expect(styles.emptyBar.width).toBe('150px');
});
});
describe('Vertical bar without title', () => {
it('should not include title height in height', () => {
const props = getProps({
@ -273,6 +285,16 @@ describe('BarGauge', () => {
const styles = getTitleStyles(props);
expect(styles.title.width).toBe('37px');
});
it('should adjust empty region to always have same height as colored bar', () => {
const props = getProps({
height: 150,
value: getValue(100),
orientation: VizOrientation.Horizontal,
});
const styles = getBasicAndGradientStyles(props);
expect(styles.emptyBar.height).toBe('150px');
});
});
describe('Gradient', () => {

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

@ -486,6 +486,9 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
// adjust so that filled in bar is at the bottom
emptyBar.bottom = '-3px';
//adjust empty region to always have same width as colored bar
emptyBar.width = `${valueWidth}px`;
if (isBasic) {
// Basic styles
barStyles.background = `${tinycolor(valueColor).setAlpha(0.35).toRgbString()}`;
@ -509,6 +512,9 @@ export function getBasicAndGradientStyles(props: Props): BasicAndGradientStyles
// shift empty region back to fill gaps due to border radius
emptyBar.left = '-3px';
//adjust empty region to always have same height as colored bar
emptyBar.height = `${valueHeight}px`;
if (isBasic) {
// Basic styles
barStyles.background = `${tinycolor(valueColor).setAlpha(0.35).toRgbString()}`;

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

@ -56,6 +56,7 @@ exports[`BarGauge Render with basic options should render 1`] = `
"borderRadius": "3px",
"display": "flex",
"flexGrow": 1,
"height": "300px",
"left": "-3px",
"position": "relative",
}

5
public/app/plugins/panel/bargauge/BarGaugePanel.tsx
View File

@ -8,6 +8,7 @@ import {
FieldConfig,
DisplayProcessor,
DisplayValue,
VizOrientation,
} from '@grafana/data';
import { BarGauge, DataLinksContextMenu, VizRepeater, VizRepeaterRenderValueProps } from '@grafana/ui';
@ -52,12 +53,12 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
};
renderValue = (valueProps: VizRepeaterRenderValueProps<FieldDisplay, DisplayValueAlignmentFactors>): JSX.Element => {
const { value } = valueProps;
const { value, orientation } = valueProps;
const { hasLinks, getLinks } = value;
if (hasLinks && getLinks) {
return (
<div style={{ width: '100%' }}>
<div style={{ width: '100%', display: orientation === VizOrientation.Vertical ? 'flex' : 'initial' }}>
<DataLinksContextMenu links={getLinks} config={value.field}>
{(api) => this.renderComponent(valueProps, api)}
</DataLinksContextMenu>