IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-21 16:38:03 -06:00
Code Issues Packages Projects Releases Wiki Activity

Stat: Fix double-zero percent render (#91848)

Browse Source 
fix(stat): percent zero case
This commit is contained in:
Ihor Yeromin 2024-08-20 03:25:15 +02:00 committed by GitHub
parent a0e1028ae6
commit 5233e4b47f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 120 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
devenv/dev-dashboards/panel-stat/panel-stat-tests.json
View File

@ -18,7 +18,6 @@
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 0,
"id": 508,
"links": [],
"liveNow": false,
"panels": [
@ -88,6 +87,7 @@
"graphMode": "area",
"justifyMode": "auto",
"orientation": "auto",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -102,7 +102,7 @@
"textMode": "auto",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"alias": "__house_locations",
@ -174,6 +174,7 @@
"graphMode": "area",
"justifyMode": "auto",
"orientation": "auto",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -188,7 +189,7 @@
"textMode": "auto",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"alias": "__house_locations",
@ -260,6 +261,7 @@
"graphMode": "area",
"justifyMode": "auto",
"orientation": "auto",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -274,7 +276,7 @@
"textMode": "auto",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"alias": "__house_locations",
@ -346,6 +348,7 @@
"graphMode": "area",
"justifyMode": "auto",
"orientation": "horizontal",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -360,7 +363,7 @@
"textMode": "auto",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"alias": "__server_names",
@ -431,6 +434,7 @@
"graphMode": "line",
"justifyMode": "auto",
"orientation": "auto",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -445,7 +449,7 @@
"textMode": "auto",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"datasource": {
@ -560,6 +564,7 @@
"graphMode": "line",
"justifyMode": "auto",
"orientation": "horizontal",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -574,7 +579,7 @@
"textMode": "auto",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"datasource": {
@ -691,6 +696,7 @@
"graphMode": "none",
"justifyMode": "auto",
"orientation": "horizontal",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -705,7 +711,7 @@
"textMode": "name",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"alias": "__server_names",
@ -781,6 +787,7 @@
"graphMode": "none",
"justifyMode": "auto",
"orientation": "auto",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -795,7 +802,7 @@
"textMode": "value",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"alias": "__server_names",
@ -871,6 +878,7 @@
"graphMode": "none",
"justifyMode": "auto",
"orientation": "auto",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -885,7 +893,7 @@
"textMode": "none",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"alias": "__server_names",
@ -972,6 +980,7 @@
"graphMode": "area",
"justifyMode": "auto",
"orientation": "auto",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -986,7 +995,7 @@
"textMode": "auto",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"alias": "__house_locations",
@ -1058,6 +1067,7 @@
"graphMode": "area",
"justifyMode": "auto",
"orientation": "auto",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -1072,7 +1082,7 @@
"textMode": "auto",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"alias": "__house_locations",
@ -1144,6 +1154,7 @@
"graphMode": "area",
"justifyMode": "auto",
"orientation": "auto",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -1158,7 +1169,7 @@
"textMode": "auto",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"alias": "__house_locations",
@ -1230,6 +1241,7 @@
"graphMode": "area",
"justifyMode": "auto",
"orientation": "horizontal",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -1244,7 +1256,7 @@
"textMode": "auto",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"alias": "__server_names",
@ -1315,6 +1327,7 @@
"graphMode": "line",
"justifyMode": "auto",
"orientation": "auto",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -1329,7 +1342,7 @@
"textMode": "auto",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"datasource": {
@ -1444,6 +1457,7 @@
"graphMode": "line",
"justifyMode": "auto",
"orientation": "horizontal",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -1458,7 +1472,7 @@
"textMode": "auto",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"datasource": {
@ -1575,6 +1589,7 @@
"graphMode": "none",
"justifyMode": "auto",
"orientation": "horizontal",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -1589,7 +1604,7 @@
"textMode": "name",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"alias": "__server_names",
@ -1665,6 +1680,7 @@
"graphMode": "none",
"justifyMode": "auto",
"orientation": "auto",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -1679,7 +1695,7 @@
"textMode": "value",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"alias": "__server_names",
@ -1755,6 +1771,7 @@
"graphMode": "none",
"justifyMode": "auto",
"orientation": "auto",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"mean"
@ -1769,7 +1786,7 @@
"textMode": "none",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"alias": "__server_names",
@ -1819,7 +1836,7 @@
},
"gridPos": {
"h": 8,
"w": 8,
"w": 4,
"x": 0,
"y": 78
},
@ -1829,6 +1846,7 @@
"graphMode": "area",
"justifyMode": "auto",
"orientation": "auto",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"lastNotNull"
@ -1840,7 +1858,7 @@
"textMode": "value",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"csvContent": "time, value\n2023-12-13T00:00:00Z, 0\n2023-12-13T00:00:00Z, 100",
@ -1855,6 +1873,73 @@
"title": "Infinity Percent Change",
"type": "stat"
},
{
"datasource": {
"default": true,
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green",
"value": null
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 8,
"w": 4,
"x": 4,
"y": 78
},
"id": 32,
"options": {
"colorMode": "value",
"graphMode": "area",
"justifyMode": "auto",
"orientation": "auto",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"lastNotNull"
],
"fields": "",
"values": false
},
"showPercentChange": true,
"textMode": "value",
"wideLayout": true
},
"pluginVersion": "11.2.0-pre",
"targets": [
{
"csvContent": "time, value\n2023-12-13T00:00:00Z, 50\n2023-12-13T00:00:00Z, 100\n2023-12-13T00:00:00Z, 50",
"datasource": {
"type": "grafana-testdata-datasource",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "csv_content"
}
],
"title": "Zero Percent Change",
"type": "stat"
},
{
"datasource": {
"type": "grafana-testdata-datasource",
@ -1894,6 +1979,7 @@
"graphMode": "area",
"justifyMode": "auto",
"orientation": "auto",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"lastNotNull"
@ -1905,7 +1991,7 @@
"textMode": "value",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"csvContent": "time, value\n2023-12-13T00:00:00Z, 0\n2023-12-13T00:00:00Z, 0",
@ -1959,6 +2045,7 @@
"graphMode": "area",
"justifyMode": "auto",
"orientation": "auto",
"percentChangeColorMode": "standard",
"reduceOptions": {
"calcs": [
"lastNotNull"
@ -1970,7 +2057,7 @@
"textMode": "auto",
"wideLayout": true
},
"pluginVersion": "10.3.0-pre",
"pluginVersion": "11.2.0-pre",
"targets": [
{
"csvContent": "Name, value\nName1, 10\nName2, 20",
@ -2017,6 +2104,6 @@
"timezone": "",
"title": "Panel Tests - Stat",
"uid": "EJ8_d9jZk",
"version": 11,
"version": 15,
"weekStart": ""
}

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

@ -1,3 +1,5 @@
import { IconName } from '@grafana/data';
import { Icon } from '../Icon/Icon';
import { PercentChangeStyles } from './BigValueLayout';
@ -8,8 +10,12 @@ export interface Props {
}
export const PercentChange = ({ percentChange, styles }: Props) => {
const percentChangeIcon =
percentChange && (percentChange > 0 ? 'arrow-up' : percentChange < 0 ? 'arrow-down' : undefined);
let percentChangeIcon: IconName | undefined = undefined;
if (percentChange > 0) {
percentChangeIcon = 'arrow-up';
} else if (percentChange < 0) {
percentChangeIcon = 'arrow-down';
}
return (
<div style={styles.containerStyles}>
@ -22,5 +28,5 @@ export const PercentChange = ({ percentChange, styles }: Props) => {
};
export const percentChangeString = (percentChange: number) => {
return percentChange?.toLocaleString(undefined, { style: 'percent', maximumSignificantDigits: 3 }) ?? '';
return percentChange.toLocaleString(undefined, { style: 'percent', maximumSignificantDigits: 3 });
};