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

StatPanel: Add padding between horizontal name and value (#55299)

Browse Source
This commit is contained in:
Joao Silva 2022-09-16 17:53:09 +01:00 committed by GitHub
parent c0c4409abc
commit bf5b21563c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,6 @@
import React, { PureComponent } from 'react';
import { DisplayValue, DisplayValueAlignmentFactors, FieldSparkline } from '@grafana/data';
import { DisplayValue, DisplayValueAlignmentFactors, FieldSparkline, VizOrientation } from '@grafana/data';
import { VizTextDisplayOptions } from '@grafana/schema';
import { Themeable2 } from '../../types';
@ -63,6 +63,8 @@ export interface Props extends Themeable2 {
textMode?: BigValueTextMode;
/** If true disables the tooltip */
hasLinks?: boolean;
/** The orientation of the parent container */
parentOrientation?: VizOrientation;
/**
* If part of a series of stat panes, this is the total number.

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

@ -1,7 +1,7 @@
import React, { CSSProperties } from 'react';
import tinycolor from 'tinycolor2';
import { formattedValueToString, DisplayValue, FieldConfig, FieldType } from '@grafana/data';
import { formattedValueToString, DisplayValue, FieldConfig, FieldType, VizOrientation } from '@grafana/data';
import { GraphDrawStyle, GraphFieldConfig } from '@grafana/schema';
import { getTextColorForBackground } from '../../utils';
@ -62,6 +62,10 @@ export abstract class BigValueLayout {
lineHeight: LINE_HEIGHT,
};
if (this.props.parentOrientation === VizOrientation.Horizontal && this.justifyCenter) {
styles.paddingRight = '0.75ch';
}
if (this.props.colorMode === BigValueColorMode.Background) {
styles.color = getTextColorForBackground(this.valueColor);
}

3
public/app/plugins/panel/stat/StatPanel.tsx
View File

@ -24,7 +24,7 @@ export class StatPanel extends PureComponent<PanelProps<PanelOptions>> {
menuProps: DataLinksContextMenuApi
): JSX.Element => {
const { timeRange, options } = this.props;
const { value, alignmentFactors, width, height, count } = valueProps;
const { value, alignmentFactors, width, height, count, orientation } = valueProps;
const { openMenu, targetClassName } = menuProps;
let sparkline = value.sparkline;
if (sparkline) {
@ -41,6 +41,7 @@ export class StatPanel extends PureComponent<PanelProps<PanelOptions>> {
justifyMode={options.justifyMode}
textMode={this.getTextMode()}
alignmentFactors={alignmentFactors}
parentOrientation={orientation}
text={options.text}
width={width}
height={height}