public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[v11.2.x] Stat: Fix double-zero percent render (#92108)

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

fix(stat): percent zero case

(cherry picked from commit 5233e4b47f)

Co-authored-by: Ihor Yeromin <yeryomin.igor@gmail.com>
This commit is contained in:
grafana-delivery-bot[bot]
2024-08-21 12:55:57 +02:00
committed by GitHub
co-authored by Ihor Yeromin
parent ab8925f269
commit eb8515406b
2 changed files with 120 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files
devenv/dev-dashboards/panel-stat/panel-stat-tests.json
+111 -24
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": ""
}
packages/grafana-ui/src/components/BigValue/PercentChange.tsx
+9 -3
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 });
};