IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 16:15:42 -06:00
Code Issues Packages Projects Releases Wiki Activity

Singlestat-v2/Gauge: Show title when repeating (#16477)

Browse Source 
* show title in singlestat2

* show title in gauge

* use CSS class for emotion

* use emotion not scss
This commit is contained in:
Ryan McKinley 2019-04-10 01:19:44 -07:00 committed by Torkel Ödegaard
parent 06dfbb382b
commit 5e7f7e658d
6 changed files with 81 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
// Library
import React, { PureComponent, ReactNode, CSSProperties } from 'react';
import $ from 'jquery';
import { css } from 'emotion';
// Utils
import { getColorFromHexRgbOrName } from '../../utils';
@ -98,36 +99,67 @@ export class BigValue extends PureComponent<Props> {
return <span style={css}>{value.text}</span>;
};
render() {
const { height, width, value, prefix, suffix, sparkline, backgroundColor } = this.props;
renderSparkline(sparkline: BigValueSparkline) {
const { height, width } = this.props;
const plotCss: CSSProperties = {};
plotCss.position = 'absolute';
plotCss.bottom = '0px';
plotCss.left = '0px';
plotCss.width = width + 'px';
if (sparkline) {
if (sparkline.full) {
plotCss.bottom = '5px';
plotCss.left = '-5px';
plotCss.width = width - 10 + 'px';
const dynamicHeightMargin = height <= 100 ? 5 : Math.round(height / 100) * 15 + 5;
plotCss.height = height - dynamicHeightMargin + 'px';
} else {
plotCss.bottom = '0px';
plotCss.left = '-5px';
plotCss.width = width - 10 + 'px';
plotCss.height = Math.floor(height * 0.25) + 'px';
}
if (sparkline.full) {
const dynamicHeightMargin = height <= 100 ? 5 : Math.round(height / 100) * 15 + 5;
plotCss.height = height - dynamicHeightMargin + 'px';
} else {
plotCss.height = Math.floor(height * 0.25) + 'px';
}
return <div style={plotCss} ref={element => (this.canvasElement = element)} />;
}
render() {
const { height, width, value, prefix, suffix, sparkline, backgroundColor } = this.props;
return (
<div className="big-value" style={{ width, height, backgroundColor }}>
<span className="big-value__value">
<div
className={css({
position: 'relative',
display: 'table',
})}
style={{ width, height, backgroundColor }}
>
{value.title && (
<div
className={css({
lineHeight: 1,
textAlign: 'center',
zIndex: 1,
display: 'block',
width: '100%',
position: 'absolute',
})}
>
{value.title}
</div>
)}
<span
className={css({
lineHeight: 1,
textAlign: 'center',
zIndex: 1,
display: 'table-cell',
verticalAlign: 'middle',
position: 'relative',
fontSize: '3em',
fontWeight: 500, // TODO: $font-weight-semi-bold
})}
>
{this.renderText(prefix, '0px 2px 0px 0px')}
{this.renderText(value)}
{this.renderText(suffix)}
</span>
{sparkline && <div style={plotCss} ref={element => (this.canvasElement = element)} />}
{sparkline && this.renderSparkline(sparkline)}
</div>
);
}

15
packages/grafana-ui/src/components/BigValue/_BigValue.scss
View File

@ -1,15 +0,0 @@
.big-value {
position: relative;
display: table;
}
.big-value__value {
line-height: 1;
display: table-cell;
vertical-align: middle;
text-align: center;
position: relative;
z-index: 1;
font-size: 3em;
font-weight: $font-weight-semi-bold;
}

20
packages/grafana-ui/src/components/Gauge/Gauge.tsx
View File

@ -1,5 +1,6 @@
import React, { PureComponent } from 'react';
import $ from 'jquery';
import { css } from 'emotion';
import { getColorFromHexRgbOrName } from '../../utils';
import { DisplayValue, Threshold, GrafanaThemeType, Themeable } from '../../types';
@ -119,18 +120,31 @@ export class Gauge extends PureComponent<Props> {
}
render() {
const { height, width } = this.props;
const { height, width, value } = this.props;
return (
<div
style={{
height: `${Math.min(height, width * 1.3)}px`,
width: `${Math.min(width, height * 1.3)}px`,
top: '10px',
margin: 'auto',
marginTop: '-8px',
}}
ref={element => (this.canvasElement = element)}
/>
>
{value.title && (
<div
className={css({
textAlign: 'center',
bottom: -8,
width: '100%',
position: 'absolute',
})}
>
{value.title}
</div>
)}
</div>
);
}
}

7
packages/grafana-ui/src/components/SingleStatShared/shared.ts
View File

@ -74,7 +74,9 @@ export const getSingleStatDisplayValues = (options: GetSingleStatDisplayValueOpt
});
const displayValue = display(stats[stat]);
displayValue.title = series.name;
if (series.name) {
displayValue.title = replaceVariables(series.name);
}
values.push(displayValue);
}
}
@ -86,6 +88,9 @@ export const getSingleStatDisplayValues = (options: GetSingleStatDisplayValueOpt
numeric: 0,
text: 'No data',
});
} else if (values.length === 1) {
// Don't show title for single item
values[0].title = undefined;
}
return values;

1
packages/grafana-ui/src/components/index.scss
View File

@ -1,5 +1,4 @@
@import 'CustomScrollbar/CustomScrollbar';
@import 'BigValue/BigValue';
@import 'DeleteButton/DeleteButton';
@import 'ThresholdsEditor/ThresholdsEditor';
@import 'Table/Table';

10
public/app/plugins/panel/singlestat2/SingleStatPanel.tsx
View File

@ -55,10 +55,10 @@ export class SingleStatPanel extends PureComponent<PanelProps<SingleStatOptions>
const timeColumn = sparkline.show ? getFirstTimeField(series) : -1;
for (let i = 0; i < series.fields.length; i++) {
const column = series.fields[i];
const field = series.fields[i];
// Show all fields that are not 'time'
if (column.type === FieldType.number) {
if (field.type === FieldType.number) {
const stats = calculateStats({
series,
fieldIndex: i,
@ -69,6 +69,7 @@ export class SingleStatPanel extends PureComponent<PanelProps<SingleStatOptions>
const v: SingleStatDisplay = {
value: display(stats[stat]),
};
v.value.title = replaceVariables(field.name);
const color = v.value.color;
if (!colorValue) {
@ -121,6 +122,11 @@ export class SingleStatPanel extends PureComponent<PanelProps<SingleStatOptions>
}
}
// Don't show a title if there is only one item
if (values.length === 1) {
values[0].value.title = null;
}
return values;
};