From 5e7f7e658d272ec165f8dd23cd85e2e95eb51462 Mon Sep 17 00:00:00 2001 From: Ryan McKinley Date: Wed, 10 Apr 2019 01:19:44 -0700 Subject: [PATCH] Singlestat-v2/Gauge: Show title when repeating (#16477) * show title in singlestat2 * show title in gauge * use CSS class for emotion * use emotion not scss --- .../src/components/BigValue/BigValue.tsx | 68 ++++++++++++++----- .../src/components/BigValue/_BigValue.scss | 15 ---- .../grafana-ui/src/components/Gauge/Gauge.tsx | 20 +++++- .../src/components/SingleStatShared/shared.ts | 7 +- packages/grafana-ui/src/components/index.scss | 1 - .../panel/singlestat2/SingleStatPanel.tsx | 10 ++- 6 files changed, 81 insertions(+), 40 deletions(-) delete mode 100644 packages/grafana-ui/src/components/BigValue/_BigValue.scss diff --git a/packages/grafana-ui/src/components/BigValue/BigValue.tsx b/packages/grafana-ui/src/components/BigValue/BigValue.tsx index f232beca108..abc6a2e4e09 100644 --- a/packages/grafana-ui/src/components/BigValue/BigValue.tsx +++ b/packages/grafana-ui/src/components/BigValue/BigValue.tsx @@ -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 { return {value.text}; }; - 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
(this.canvasElement = element)} />; + } + + render() { + const { height, width, value, prefix, suffix, sparkline, backgroundColor } = this.props; return ( -
- +
+ {value.title && ( +
+ {value.title} +
+ )} + {this.renderText(prefix, '0px 2px 0px 0px')} {this.renderText(value)} {this.renderText(suffix)} - {sparkline &&
(this.canvasElement = element)} />} + {sparkline && this.renderSparkline(sparkline)}
); } diff --git a/packages/grafana-ui/src/components/BigValue/_BigValue.scss b/packages/grafana-ui/src/components/BigValue/_BigValue.scss deleted file mode 100644 index 13603daa457..00000000000 --- a/packages/grafana-ui/src/components/BigValue/_BigValue.scss +++ /dev/null @@ -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; -} diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index f8aba6d210b..17aac5992a2 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -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 { } render() { - const { height, width } = this.props; + const { height, width, value } = this.props; return (
(this.canvasElement = element)} - /> + > + {value.title && ( +
+ {value.title} +
+ )} +
); } } diff --git a/packages/grafana-ui/src/components/SingleStatShared/shared.ts b/packages/grafana-ui/src/components/SingleStatShared/shared.ts index f0490d0da17..34836a9f0fd 100644 --- a/packages/grafana-ui/src/components/SingleStatShared/shared.ts +++ b/packages/grafana-ui/src/components/SingleStatShared/shared.ts @@ -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; diff --git a/packages/grafana-ui/src/components/index.scss b/packages/grafana-ui/src/components/index.scss index 7db4206fa27..91e5c88e33e 100644 --- a/packages/grafana-ui/src/components/index.scss +++ b/packages/grafana-ui/src/components/index.scss @@ -1,5 +1,4 @@ @import 'CustomScrollbar/CustomScrollbar'; -@import 'BigValue/BigValue'; @import 'DeleteButton/DeleteButton'; @import 'ThresholdsEditor/ThresholdsEditor'; @import 'Table/Table'; diff --git a/public/app/plugins/panel/singlestat2/SingleStatPanel.tsx b/public/app/plugins/panel/singlestat2/SingleStatPanel.tsx index 40afb634e36..920eef3580b 100644 --- a/public/app/plugins/panel/singlestat2/SingleStatPanel.tsx +++ b/public/app/plugins/panel/singlestat2/SingleStatPanel.tsx @@ -55,10 +55,10 @@ export class SingleStatPanel extends PureComponent 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 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 } } + // Don't show a title if there is only one item + if (values.length === 1) { + values[0].value.title = null; + } + return values; };