Skip to content

N
nexpie-grafana-theme
Commit d65569f5 by Torkel Ödegaard Committed by GitHub
Options

StatPanel: Option showing name instead of value and more (#25676) 

* StatPanel: Option showing name instead of value and more

* rename option to textMode

* Move the logic of only showing name if more than one value to gauge and bar gauge panels

* Got tooltip working

* Updated devenv test dashboard

* Added docs for text mode

* Added migration logic

* Update docs/sources/panels/visualizations/stat-panel.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/panels/visualizations/stat-panel.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/panels/visualizations/stat-panel.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/panels/visualizations/stat-panel.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/panels/visualizations/stat-panel.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/panels/visualizations/stat-panel.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* Update docs/sources/panels/visualizations/stat-panel.md

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>

* docs fix

* Fixed ts issue

* review changes

Co-authored-by: Diana Payton <52059945+oddlittlebird@users.noreply.github.com>
parent 285c22ee
Showing with 709 additions and 287 deletions
devenv/dev-dashboards/panel-stat/panel-stat-tests.json
......@@ -19,6 +19,42 @@
"panels": [
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 10
},
{
"color": "purple",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
]
},
"unit": "areaM2"
},
"overrides": []
},
"gridPos": {
"h": 3,
"w": 24,
......@@ -29,51 +65,20 @@
"interval": "6m",
"options": {
"colorMode": "background",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 10
},
{
"color": "purple",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
]
},
"unit": "areaM2"
},
"overrides": [],
"values": false
},
"graphMode": "area",
"justifyMode": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": ["mean"],
"fields": "",
"values": false
},
"sparkline": {
"show": true
}
},
"textMode": "auto"
},
"pluginVersion": "6.6.0-pre",
"pluginVersion": "7.1.0-pre",
"targets": [
{
"alias": "__house_locations",
......@@ -93,6 +98,42 @@
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 10
},
{
"color": "purple",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
]
},
"unit": "areaM2"
},
"overrides": []
},
"gridPos": {
"h": 6,
"w": 24,
......@@ -103,51 +144,20 @@
"interval": "7m",
"options": {
"colorMode": "background",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 10
},
{
"color": "purple",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
]
},
"unit": "areaM2"
},
"overrides": [],
"values": false
},
"graphMode": "area",
"justifyMode": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": ["mean"],
"fields": "",
"values": false
},
"sparkline": {
"show": true
}
},
"textMode": "auto"
},
"pluginVersion": "6.6.0-pre",
"pluginVersion": "7.1.0-pre",
"targets": [
{
"alias": "__house_locations",
......@@ -166,6 +176,42 @@
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 10
},
{
"color": "purple",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
]
},
"unit": "areaM2"
},
"overrides": []
},
"gridPos": {
"h": 6,
"w": 24,
......@@ -176,51 +222,20 @@
"interval": "7m",
"options": {
"colorMode": "value",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 10
},
{
"color": "purple",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
]
},
"unit": "areaM2"
},
"overrides": [],
"values": false
},
"graphMode": "area",
"justifyMode": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": ["mean"],
"fields": "",
"values": false
},
"sparkline": {
"show": true
}
},
"textMode": "auto"
},
"pluginVersion": "6.6.0-pre",
"pluginVersion": "7.1.0-pre",
"targets": [
{
"alias": "__house_locations",
......@@ -239,8 +254,44 @@
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 10
},
{
"color": "purple",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
]
},
"unit": "areaM2"
},
"overrides": []
},
"gridPos": {
"h": 14,
"h": 18,
"w": 6,
"x": 0,
"y": 15
......@@ -249,51 +300,20 @@
"interval": "5m",
"options": {
"colorMode": "background",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 10
},
{
"color": "purple",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
]
},
"unit": "areaM2"
},
"overrides": [],
"values": false
},
"graphMode": "area",
"justifyMode": "auto",
"orientation": "horizontal",
"reduceOptions": {
"calcs": ["mean"],
"fields": "",
"values": false
},
"sparkline": {
"show": true
}
},
"textMode": "auto"
},
"pluginVersion": "6.6.0-pre",
"pluginVersion": "7.1.0-pre",
"targets": [
{
"alias": "__server_names",
......@@ -306,13 +326,49 @@
],
"timeFrom": null,
"timeShift": null,
"title": "Panel Title",
"title": "Horizontal with graph",
"type": "stat"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 10
},
{
"color": "purple",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
]
},
"unit": "areaM2"
},
"overrides": []
},
"gridPos": {
"h": 11,
"h": 9,
"w": 4,
"x": 6,
"y": 15
......@@ -321,51 +377,20 @@
"interval": "10m",
"options": {
"colorMode": "background",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 10
},
{
"color": "purple",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
]
},
"unit": "areaM2"
},
"overrides": [],
"values": false
},
"graphMode": "line",
"justifyMode": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": ["mean"],
"fields": "",
"values": false
},
"sparkline": {
"show": true
}
},
"textMode": "auto"
},
"pluginVersion": "6.6.0-pre",
"pluginVersion": "7.1.0-pre",
"targets": [
{
"refId": "A",
......@@ -398,14 +423,50 @@
],
"timeFrom": null,
"timeShift": null,
"title": "Panel Title",
"title": "Auto grid",
"type": "stat"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 10
},
{
"color": "purple",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
]
},
"unit": "areaM2"
},
"overrides": []
},
"gridPos": {
"h": 9,
"w": 8,
"w": 6,
"x": 10,
"y": 15
},
......@@ -413,51 +474,20 @@
"interval": "10m",
"options": {
"colorMode": "background",
"fieldOptions": {
"calcs": ["mean"],
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 10
},
{
"color": "purple",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
]
},
"unit": "areaM2"
},
"overrides": [],
"values": false
},
"graphMode": "line",
"justifyMode": "auto",
"orientation": "horizontal",
"reduceOptions": {
"calcs": ["mean"],
"fields": "",
"values": false
},
"sparkline": {
"show": true
}
},
"textMode": "auto"
},
"pluginVersion": "6.6.0-pre",
"pluginVersion": "7.1.0-pre",
"targets": [
{
"refId": "A",
......@@ -490,11 +520,257 @@
],
"timeFrom": null,
"timeShift": null,
"title": "Panel Title",
"title": "Horizontal",
"type": "stat"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {},
"mappings": [],
"max": 200,
"min": 0,
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 10
},
{
"color": "purple",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
]
},
"unit": "areaM2"
},
"overrides": []
},
"gridPos": {
"h": 9,
"w": 8,
"x": 16,
"y": 15
},
"id": 15,
"interval": "5m",
"options": {
"colorMode": "background",
"graphMode": "none",
"justifyMode": "auto",
"orientation": "horizontal",
"reduceOptions": {
"calcs": ["mean"],
"fields": "",
"values": false
},
"sparkline": {
"show": true
},
"textMode": "name"
},
"pluginVersion": "7.1.0-pre",
"targets": [
{
"alias": "__server_names",
"max": 200,
"min": 0,
"noise": 5,
"refId": "A",
"scenarioId": "random_walk",
"seriesCount": 7,
"spread": 20,
"startValue": 0
}
],
"timeFrom": null,
"timeShift": null,
"title": "Text mode name",
"type": "stat"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {},
"mappings": [],
"max": 200,
"min": 0,
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 10
},
{
"color": "purple",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
]
},
"unit": "areaM2"
},
"overrides": []
},
"gridPos": {
"h": 9,
"w": 18,
"x": 6,
"y": 24
},
"id": 16,
"interval": "5m",
"options": {
"colorMode": "background",
"graphMode": "none",
"justifyMode": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": ["mean"],
"fields": "",
"values": false
},
"sparkline": {
"show": true
},
"textMode": "value"
},
"pluginVersion": "7.1.0-pre",
"targets": [
{
"alias": "__server_names",
"max": 200,
"min": 0,
"noise": 15,
"refId": "A",
"scenarioId": "random_walk",
"seriesCount": 45,
"spread": 1,
"startValue": 0
}
],
"timeFrom": null,
"timeShift": null,
"title": "Value only",
"type": "stat"
},
{
"datasource": null,
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {},
"mappings": [],
"max": 200,
"min": 0,
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "blue",
"value": null
},
{
"color": "green",
"value": 10
},
{
"color": "purple",
"value": 20
},
{
"color": "orange",
"value": 40
},
{
"color": "red",
"value": 80
}
]
},
"unit": "areaM2"
},
"overrides": []
},
"gridPos": {
"h": 5,
"w": 24,
"x": 0,
"y": 33
},
"id": 17,
"interval": "5m",
"options": {
"colorMode": "background",
"graphMode": "none",
"justifyMode": "auto",
"orientation": "auto",
"reduceOptions": {
"calcs": ["mean"],
"fields": "",
"values": false
},
"sparkline": {
"show": true
},
"textMode": "none"
},
"pluginVersion": "7.1.0-pre",
"targets": [
{
"alias": "__server_names",
"max": 200,
"min": 0,
"noise": 15,
"refId": "A",
"scenarioId": "random_walk",
"seriesCount": 200,
"spread": 1,
"startValue": 0
}
],
"timeFrom": null,
"timeShift": null,
"title": "No text",
"type": "stat"
}
],
"schemaVersion": 22,
"schemaVersion": 26,
"style": "dark",
"tags": ["gdev", "panel-tests"],
"templating": {
......@@ -508,5 +784,7 @@
"refresh_intervals": ["5s", "10s", "30s", "1m", "5m", "15m", "30m", "1h", "2h", "1d"]
},
"timezone": "",
"title": "Panel Tests - Stat"
"title": "Panel Tests - Stat",
"uid": "EJ8_d9jZk",
"version": 1
}
docs/sources/panels/visualizations/stat-panel.md
......@@ -48,3 +48,24 @@ Use the following options to refine your visualization:
- **Alignment mode -** Choose an alignment mode.
- **Auto -** If only a single value is shown (no repeat), then the value is centered. If multiple series or rows are shown, then the value is left-aligned.
- **Center -** Stat value is centered.
- **Text mode** (Only available in Grafana 7.1+.)
- **Auto -** If the data contains multiple series or fields, show both name and value..
- **Value -** Show only value, never name. Name is displayed in the hover tooltip instead.
- **Value and name -** Always show value and name.
- **Name -** Show name instead of value. Value is displayed in the hover tooltip.
- **None -** Show nothing (empty). Name and value are displayed in the hover tooltip.
## Text mode
> Only available in Grafana 7.1+.
By default, the Stat panel displays:
- Just the value for a single series or field.
- Both the value and name for multiple series or fields.
You can use the Text mode option to control what text the panel renders. If the value is not important, only name and color is, then change the `Text mode` to **Name**. The value will still be used to determine color and is displayed in a tooltip.
Example screenshot:
{{< docs-imagebox img="/img/docs/v71/stat-panel-text-modes.png" max-width="1025px" caption="Stat panel" >}}
packages/grafana-data/src/field/fieldDisplay.ts
......@@ -84,7 +84,7 @@ export interface GetFieldDisplayValuesOptions {
export const DEFAULT_FIELD_DISPLAY_VALUES_LIMIT = 25;
export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): FieldDisplay[] => {
const { replaceVariables, reduceOptions, fieldConfig, timeZone } = options;
const { replaceVariables, reduceOptions, timeZone } = options;
const calcs = reduceOptions.calcs.length ? reduceOptions.calcs : [ReducerID.last];
const values: FieldDisplay[] = [];
......@@ -223,9 +223,6 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
if (values.length === 0) {
values.push(createNoValuesFieldDisplay(options));
} else if (values.length === 1 && !fieldConfig.defaults.displayName) {
// Don't show title for single item
values[0].display.title = undefined;
}
return values;
......
packages/grafana-ui/src/components/BigValue/BigValue.story.tsx
import { text, select, number, color } from '@storybook/addon-knobs';
import { BigValue, BigValueColorMode, BigValueGraphMode } from './BigValue';
import { BigValue, BigValueColorMode, BigValueGraphMode, BigValueTextMode } from './BigValue';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { renderComponentWithTheme } from '../../utils/storybook/withTheme';
......@@ -8,10 +8,15 @@ const getKnobs = () => {
value: text('value', '$5022'),
title: text('title', 'Total Earnings'),
colorMode: select('Color mode', [BigValueColorMode.Value, BigValueColorMode.Background], BigValueColorMode.Value),
graphMode: select('Graph mode', [BigValueGraphMode.Area, BigValueGraphMode.Line], BigValueGraphMode.Area),
graphMode: select('Graph mode', [BigValueGraphMode.Area, BigValueGraphMode.None], BigValueGraphMode.Area),
width: number('Width', 400, { range: true, max: 800, min: 200 }),
height: number('Height', 300, { range: true, max: 800, min: 200 }),
color: color('Value color', 'red'),
textMode: select(
'Text mode',
[BigValueTextMode.Auto, BigValueTextMode.Name, BigValueTextMode.ValueAndName, BigValueTextMode.None],
BigValueTextMode.Auto
),
};
};
......@@ -22,13 +27,14 @@ export default {
};
export const basic = () => {
const { value, title, colorMode, graphMode, height, width, color } = getKnobs();
const { value, title, colorMode, graphMode, height, width, color, textMode } = getKnobs();
return renderComponentWithTheme(BigValue, {
width: width,
height: height,
colorMode: colorMode,
graphMode: graphMode,
textMode,
value: {
text: value,
numeric: 5022,
......
packages/grafana-ui/src/components/BigValue/BigValue.tsx
......@@ -32,6 +32,17 @@ export enum BigValueJustifyMode {
Center = 'center',
}
/**
* Options for how the value & title are to be displayed
*/
export enum BigValueTextMode {
Auto = 'auto',
Value = 'value',
ValueAndName = 'value_and_name',
Name = 'name',
None = 'none',
}
export interface Props extends Themeable {
height: number;
width: number;
......@@ -43,6 +54,7 @@ export interface Props extends Themeable {
graphMode: BigValueGraphMode;
justifyMode?: BigValueJustifyMode;
alignmentFactors?: DisplayValueAlignmentFactors;
textMode?: BigValueTextMode;
}
export class BigValue extends PureComponent<Props> {
......@@ -51,19 +63,20 @@ export class BigValue extends PureComponent<Props> {
};
render() {
const { value, onClick, className } = this.props;
const { onClick, className } = this.props;
const layout = buildLayout(this.props);
const panelStyles = layout.getPanelStyles();
const valueAndTitleContainerStyles = layout.getValueAndTitleContainerStyles();
const valueStyles = layout.getValueStyles();
const titleStyles = layout.getTitleStyles();
const textValues = layout.textValues;
return (
<div className={className} style={panelStyles} onClick={onClick}>
<div className={className} style={panelStyles} onClick={onClick} title={textValues.tooltip}>
<div style={valueAndTitleContainerStyles}>
{value.title && <div style={titleStyles}>{value.title}</div>}
<FormattedValueDisplay value={value} style={valueStyles} />
{textValues.title && <div style={titleStyles}>{textValues.title}</div>}
<FormattedValueDisplay value={textValues} style={valueStyles} />
</div>
{layout.renderChart()}
</div>
......
packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx
......@@ -4,11 +4,11 @@ import tinycolor from 'tinycolor2';
import { Chart, Geom } from 'bizcharts';
// Utils
import { getColorFromHexRgbOrName, formattedValueToString } from '@grafana/data';
import { getColorFromHexRgbOrName, formattedValueToString, DisplayValue } from '@grafana/data';
import { calculateFontSize } from '../../utils/measureText';
// Types
import { BigValueColorMode, Props, BigValueJustifyMode } from './BigValue';
import { BigValueColorMode, Props, BigValueJustifyMode, BigValueTextMode } from './BigValue';
const LINE_HEIGHT = 1.2;
const MAX_TITLE_SIZE = 30;
......@@ -25,16 +25,17 @@ export abstract class BigValueLayout {
valueToAlignTo: string;
maxTextWidth: number;
maxTextHeight: number;
textValues: BigValueTextValues;
constructor(private props: Props) {
const { width, height, value, alignmentFactors, theme } = props;
const { width, height, value, theme } = props;
this.valueColor = getColorFromHexRgbOrName(value.color || 'green', theme.type);
this.justifyCenter = shouldJustifyCenter(props);
this.panelPadding = height > 100 ? 12 : 8;
this.titleToAlignTo = alignmentFactors ? alignmentFactors.title : value.title;
this.valueToAlignTo = formattedValueToString(alignmentFactors ? alignmentFactors : value);
this.textValues = getTextValues(props);
this.justifyCenter = shouldJustifyCenter(props.justifyMode, this.textValues.title);
this.valueToAlignTo = this.textValues.valueToAlignTo;
this.titleToAlignTo = this.textValues.titleToAlignTo;
this.titleFontSize = 14;
this.valueFontSize = 14;
this.chartHeight = 0;
......@@ -447,10 +448,61 @@ export function buildLayout(props: Props): BigValueLayout {
}
}
export function shouldJustifyCenter(props: Props) {
const { value, justifyMode } = props;
export function shouldJustifyCenter(justifyMode?: BigValueJustifyMode, title?: string) {
if (justifyMode === BigValueJustifyMode.Center) {
return true;
}
return (value.title ?? '').length === 0;
return (title ?? '').length === 0;
}
export interface BigValueTextValues extends DisplayValue {
valueToAlignTo: string;
titleToAlignTo?: string;
tooltip?: string;
}
function getTextValues(props: Props): BigValueTextValues {
const { textMode: nameAndValue, value, alignmentFactors } = props;
const titleToAlignTo = alignmentFactors ? alignmentFactors.title : value.title;
const valueToAlignTo = formattedValueToString(alignmentFactors ? alignmentFactors : value);
switch (nameAndValue) {
case BigValueTextMode.Name:
return {
...value,
title: undefined,
prefix: undefined,
suffix: undefined,
text: value.title || '',
titleToAlignTo: undefined,
valueToAlignTo: titleToAlignTo ?? '',
tooltip: formattedValueToString(value),
};
case BigValueTextMode.Value:
return {
...value,
title: undefined,
titleToAlignTo: undefined,
valueToAlignTo,
tooltip: value.title,
};
case BigValueTextMode.None:
return {
numeric: value.numeric,
color: value.color,
title: undefined,
text: '',
titleToAlignTo: undefined,
valueToAlignTo: '1',
tooltip: `Name: ${value.title}\nValue: ${formattedValueToString(value)}`,
};
default:
return {
...value,
titleToAlignTo,
valueToAlignTo,
};
}
}
packages/grafana-ui/src/components/BigValue/__snapshots__/BigValue.test.tsx.snap
......@@ -40,6 +40,8 @@ exports[`BigValue Render with basic options should render 1`] = `
Object {
"numeric": 25,
"text": "25",
"titleToAlignTo": undefined,
"valueToAlignTo": "25",
}
}
/>
......
packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx
......@@ -32,6 +32,10 @@ export interface VizRepeaterRenderValueProps<V, D = {}> {
height: number;
orientation: VizOrientation;
alignmentFactors: D;
/**
* Total number of values being shown in repeater
*/
count: number;
}
interface DefaultProps {
......@@ -110,7 +114,14 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
items.push(
<div key={i} style={itemStyles}>
{renderValue({ value, width: itemWidth, height: itemHeight, alignmentFactors, orientation })}
{renderValue({
value,
width: itemWidth,
height: itemHeight,
alignmentFactors,
orientation,
count: values.length,
})}
</div>
);
......@@ -178,6 +189,7 @@ export class VizRepeater<V, D = {}> extends PureComponent<Props<V, D>, State<V>>
height: vizHeight,
alignmentFactors,
orientation: resolvedOrientation,
count: values.length,
})}
</div>
);
......
packages/grafana-ui/src/components/index.ts
......@@ -65,6 +65,7 @@ export {
BigValueSparkline,
BigValueGraphMode,
BigValueJustifyMode,
BigValueTextMode,
} from './BigValue/BigValue';
export { Gauge } from './Gauge/Gauge';
......
public/app/plugins/panel/bargauge/BarGaugePanel.tsx
......@@ -5,6 +5,8 @@ import {
getDisplayValueAlignmentFactors,
getFieldDisplayValues,
PanelProps,
FieldConfig,
DisplayValue,
} from '@grafana/data';
import { BarGauge, DataLinksContextMenu, VizRepeater, VizRepeaterRenderValueProps } from '@grafana/ui';
......@@ -18,13 +20,13 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
menuProps: DataLinksContextMenuApi
): JSX.Element => {
const { options } = this.props;
const { value, alignmentFactors, orientation, width, height } = valueProps;
const { value, alignmentFactors, orientation, width, height, count } = valueProps;
const { field, display, view, colIndex } = value;
const { openMenu, targetClassName } = menuProps;
return (
<BarGauge
value={display}
value={clearNameForSingleSeries(count, field, display)}
width={width}
height={height}
orientation={orientation}
......@@ -97,3 +99,14 @@ export class BarGaugePanel extends PureComponent<PanelProps<BarGaugeOptions>> {
);
}
}
export function clearNameForSingleSeries(count: number, field: FieldConfig<any>, display: DisplayValue): DisplayValue {
if (count === 1 && !field.displayName) {
return {
...display,
title: undefined,
};
}
return display;
}
public/app/plugins/panel/gauge/GaugePanel.tsx
......@@ -5,6 +5,7 @@ import { DataLinksContextMenuApi } from '@grafana/ui/src/components/DataLinks/Da
import { config } from 'app/core/config';
import { GaugeOptions } from './types';
import { clearNameForSingleSeries } from '../bargauge/BarGaugePanel';
export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
renderComponent = (
......@@ -12,13 +13,13 @@ export class GaugePanel extends PureComponent<PanelProps<GaugeOptions>> {
menuProps: DataLinksContextMenuApi
): JSX.Element => {
const { options } = this.props;
const { value, width, height } = valueProps;
const { width, height, count, value } = valueProps;
const { field, display } = value;
const { openMenu, targetClassName } = menuProps;
return (
<Gauge
value={display}
value={clearNameForSingleSeries(count, field, display)}
width={width}
height={height}
field={field}
......
public/app/plugins/panel/stat/StatMigrations.test.ts
import { PanelModel } from '@grafana/data';
import { statPanelChangedHandler } from './StatMigrations';
import { BigValueGraphMode, BigValueColorMode } from '@grafana/ui';
import { BigValueTextMode } from '@grafana/ui/src/components/BigValue/BigValue';
describe('Stat Panel Migrations', () => {
it('change from angular singlestat sparkline disabled', () => {
......@@ -48,4 +49,16 @@ describe('Stat Panel Migrations', () => {
const options = statPanelChangedHandler(panel, 'singlestat', old);
expect(options.colorMode).toBe(BigValueColorMode.Background);
});
it('change from angular singlestat with name stat', () => {
const old: any = {
angular: {
valueName: 'name',
},
};
const panel = {} as PanelModel;
const options = statPanelChangedHandler(panel, 'singlestat', old);
expect(options.textMode).toBe(BigValueTextMode.Name);
});
});
public/app/plugins/panel/stat/StatMigrations.ts
import { sharedSingleStatPanelChangedHandler, BigValueGraphMode, BigValueColorMode } from '@grafana/ui';
import { PanelModel } from '@grafana/data';
import { StatPanelOptions } from './types';
import { BigValueTextMode } from '@grafana/ui/src/components/BigValue/BigValue';
// This is called when the panel changes from another panel
export const statPanelChangedHandler = (
......@@ -23,6 +24,10 @@ export const statPanelChangedHandler = (
} else {
options.colorMode = BigValueColorMode.Value;
}
if (oldOptions.valueName === 'name') {
options.textMode = BigValueTextMode.Name;
}
}
return options;
......
public/app/plugins/panel/stat/StatPanel.tsx
......@@ -52,6 +52,7 @@ export class StatPanel extends PureComponent<PanelProps<StatPanelOptions>> {
colorMode={options.colorMode}
graphMode={options.graphMode}
justifyMode={options.justifyMode}
textMode={options.textMode}
alignmentFactors={alignmentFactors}
width={width}
height={height}
......
public/app/plugins/panel/stat/module.tsx
import { sharedSingleStatMigrationHandler } from '@grafana/ui';
import { sharedSingleStatMigrationHandler, BigValueTextMode } from '@grafana/ui';
import { PanelPlugin } from '@grafana/data';
import { StatPanelOptions, addStandardDataReduceOptions } from './types';
import { StatPanel } from './StatPanel';
......@@ -9,6 +9,22 @@ export const plugin = new PanelPlugin<StatPanelOptions>(StatPanel)
.setPanelOptions(builder => {
addStandardDataReduceOptions(builder);
builder.addSelect({
path: 'textMode',
name: 'Text mode',
description: 'Control if name and value is displayed or just name',
settings: {
options: [
{ value: BigValueTextMode.Auto, label: 'Auto' },
{ value: BigValueTextMode.Value, label: 'Value' },
{ value: BigValueTextMode.ValueAndName, label: 'Value and name' },
{ value: BigValueTextMode.Name, label: 'Name' },
{ value: BigValueTextMode.None, label: 'None' },
],
},
defaultValue: 'auto',
});
builder
.addRadio({
path: 'colorMode',
......
public/app/plugins/panel/stat/types.ts
import { SingleStatBaseOptions, BigValueColorMode, BigValueGraphMode, BigValueJustifyMode } from '@grafana/ui';
import {
SingleStatBaseOptions,
BigValueColorMode,
BigValueGraphMode,
BigValueJustifyMode,
BigValueTextMode,
} from '@grafana/ui';
import {
ReducerID,
SelectableValue,
standardEditorsRegistry,
FieldOverrideContext,
getFieldDisplayName,
......@@ -14,23 +19,9 @@ export interface StatPanelOptions extends SingleStatBaseOptions {
graphMode: BigValueGraphMode;
colorMode: BigValueColorMode;
justifyMode: BigValueJustifyMode;
textMode: BigValueTextMode;
}
export const colorModes: Array<SelectableValue<BigValueColorMode>> = [
{ value: BigValueColorMode.Value, label: 'Value' },
{ value: BigValueColorMode.Background, label: 'Background' },
];
export const graphModes: Array<SelectableValue<BigValueGraphMode>> = [
{ value: BigValueGraphMode.None, label: 'None' },
{ value: BigValueGraphMode.Area, label: 'Area graph' },
];
export const justifyModes: Array<SelectableValue<BigValueJustifyMode>> = [
{ value: BigValueJustifyMode.Auto, label: 'Auto' },
{ value: BigValueJustifyMode.Center, label: 'Center' },
];
export function addStandardDataReduceOptions(
builder: PanelOptionsEditorBuilder<SingleStatBaseOptions>,
includeOrientation = true,
......@@ -65,7 +56,7 @@ export function addStandardDataReduceOptions(
builder.addCustomEditor({
id: 'reduceOptions.calcs',
path: 'reduceOptions.calcs',
name: 'Value',
name: 'Calculation',
description: 'Choose a reducer function / calculation',
editor: standardEditorsRegistry.get('stats-picker').editor as any,
defaultValue: [ReducerID.mean],
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment