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: Fix inconsistent center padding (#79389)

Browse Source
This commit is contained in:
Torkel Ödegaard 2023-12-12 18:59:49 +01:00 committed by GitHub
parent 1a5c2cb55b
commit eec4fd623d
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 4 additions and 10 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,7 +1,7 @@
import { cx } from '@emotion/css'; import { cx } from '@emotion/css';
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { DisplayValue, DisplayValueAlignmentFactors, FieldSparkline, VizOrientation } from '@grafana/data'; import { DisplayValue, DisplayValueAlignmentFactors, FieldSparkline } from '@grafana/data';
import { VizTextDisplayOptions } from '@grafana/schema'; import { VizTextDisplayOptions } from '@grafana/schema';
import { Themeable2 } from '../../types'; import { Themeable2 } from '../../types';
@ -66,8 +66,6 @@ export interface Props extends Themeable2 {
textMode?: BigValueTextMode; textMode?: BigValueTextMode;
/** If true disables the tooltip */ /** If true disables the tooltip */
hasLinks?: boolean; hasLinks?: boolean;
/** The orientation of the parent container */
parentOrientation?: VizOrientation;
/** /**
* If part of a series of stat panes, this is the total number. * If part of a series of stat panes, this is the total number.

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

@ -1,7 +1,7 @@
import React, { CSSProperties } from 'react'; import React, { CSSProperties } from 'react';
import tinycolor from 'tinycolor2'; import tinycolor from 'tinycolor2';
import { formattedValueToString, DisplayValue, FieldConfig, FieldType, VizOrientation } from '@grafana/data'; import { formattedValueToString, DisplayValue, FieldConfig, FieldType } from '@grafana/data';
import { GraphDrawStyle, GraphFieldConfig } from '@grafana/schema'; import { GraphDrawStyle, GraphFieldConfig } from '@grafana/schema';
import { getTextColorForAlphaBackground } from '../../utils'; import { getTextColorForAlphaBackground } from '../../utils';
@ -63,10 +63,6 @@ export abstract class BigValueLayout {
lineHeight: LINE_HEIGHT, lineHeight: LINE_HEIGHT,
}; };
if (this.props.parentOrientation === VizOrientation.Horizontal && this.justifyCenter) {
styles.paddingRight = '0.75ch';
}
if ( if (
this.props.colorMode === BigValueColorMode.Background || this.props.colorMode === BigValueColorMode.Background ||
this.props.colorMode === BigValueColorMode.BackgroundSolid this.props.colorMode === BigValueColorMode.BackgroundSolid
@ -115,6 +111,7 @@ export abstract class BigValueLayout {
styles.alignItems = 'center'; styles.alignItems = 'center';
styles.justifyContent = 'center'; styles.justifyContent = 'center';
styles.flexGrow = 1; styles.flexGrow = 1;
styles.gap = '0.75ch';
} }
return styles; return styles;

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

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