IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

StateTimeline: Show correct legend label when value mappings set (#62282)

Browse Source 
* StateTimeline: Show correct legend label when value mappings set

* Add test dashboard for thresholds and value mappings

* run stripnulls.sh
This commit is contained in:
Victor Marin
2023-01-27 14:30:42 +02:00
committed by GitHub
parent bfcf936c38
commit 846acd28ff
3 changed files with 770 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

761
devenv/dev-dashboards/panel-timeline/timeline-thresholds-mappings.json Normal file
View File

@@ -0,0 +1,761 @@
{
"annotations": {
"list": [
{
"builtIn": 1,
"datasource": {
"type": "grafana",
"uid": "-- Grafana --"
},
"enable": true,
"hide": true,
"iconColor": "rgba(0, 211, 255, 1)",
"name": "Annotations & Alerts",
"target": {
"limit": 100,
"matchAny": false,
"tags": [],
"type": "dashboard"
},
"type": "dashboard"
}
]
},
"editable": true,
"fiscalYearStartMonth": 0,
"graphTooltip": 0,
"id": 1263,
"links": [],
"liveNow": false,
"panels": [
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {
"fillOpacity": 70,
"lineWidth": 0,
"spanNulls": false
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 9,
"w": 6,
"x": 0,
"y": 0
},
"id": 11,
"options": {
"alignValue": "left",
"legend": {
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"mergeValues": true,
"rowHeight": 0.9,
"showValue": "auto",
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"targets": [
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "1,20,90,30,5,0"
}
],
"title": "default",
"type": "state-timeline"
},
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {
"fillOpacity": 70,
"lineWidth": 0,
"spanNulls": false
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 10
},
{
"color": "#EAB839",
"value": 20
},
{
"color": "#6ED0E0",
"value": 30
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 9,
"w": 6,
"x": 6,
"y": 0
},
"id": 2,
"options": {
"alignValue": "left",
"legend": {
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"mergeValues": true,
"rowHeight": 0.9,
"showValue": "auto",
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"targets": [
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "5,10,20,30,40"
}
],
"title": "default absolute thresholds",
"type": "state-timeline"
},
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {
"fillOpacity": 70,
"lineWidth": 0,
"spanNulls": false
},
"mappings": [],
"thresholds": {
"mode": "percentage",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 10
},
{
"color": "#EAB839",
"value": 20
},
{
"color": "#6ED0E0",
"value": 30
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 9,
"w": 6,
"x": 12,
"y": 0
},
"id": 8,
"options": {
"alignValue": "left",
"legend": {
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"mergeValues": true,
"rowHeight": 0.9,
"showValue": "auto",
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"targets": [
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "5,10,20,30,40"
}
],
"title": "default percentage thresholds",
"type": "state-timeline"
},
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {
"fillOpacity": 70,
"lineWidth": 0,
"spanNulls": false
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "A-series"
},
"properties": [
{
"id": "thresholds",
"value": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 10
},
{
"color": "#EAB839",
"value": 20
},
{
"color": "#6ED0E0",
"value": 30
}
]
}
}
]
}
]
},
"gridPos": {
"h": 9,
"w": 6,
"x": 18,
"y": 0
},
"id": 3,
"options": {
"alignValue": "left",
"legend": {
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"mergeValues": true,
"rowHeight": 0.9,
"showValue": "auto",
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"targets": [
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "5,10,20,30,40"
}
],
"title": "override thresholds",
"type": "state-timeline"
},
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"fillOpacity": 70,
"lineWidth": 0,
"spanNulls": false
},
"mappings": [
{
"options": {
"from": 0,
"result": {
"color": "green",
"index": 0
},
"to": 9.9999
},
"type": "range"
},
{
"options": {
"from": 10,
"result": {
"color": "yellow",
"index": 1
},
"to": 14.9999
},
"type": "range"
},
{
"options": {
"from": 15,
"result": {
"color": "red",
"index": 2
},
"to": 24.9999
},
"type": "range"
},
{
"options": {
"from": 25,
"result": {
"color": "blue",
"index": 3
},
"to": 100000
},
"type": "range"
}
],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 9,
"w": 6,
"x": 0,
"y": 9
},
"id": 6,
"options": {
"alignValue": "left",
"legend": {
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"mergeValues": true,
"rowHeight": 0.9,
"showValue": "auto",
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"targets": [
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "5,10,20,30,40"
}
],
"title": "default value mappings",
"type": "state-timeline"
},
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "palette-classic"
},
"custom": {
"fillOpacity": 70,
"lineWidth": 0,
"spanNulls": false
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
}
]
}
},
"overrides": [
{
"matcher": {
"id": "byName",
"options": "A-series"
},
"properties": [
{
"id": "mappings",
"value": [
{
"options": {
"from": 0,
"result": {
"color": "green",
"index": 0
},
"to": 9.9999
},
"type": "range"
},
{
"options": {
"from": 10,
"result": {
"color": "yellow",
"index": 1
},
"to": 14.9999
},
"type": "range"
},
{
"options": {
"from": 15,
"result": {
"color": "red",
"index": 2
},
"to": 24.9999
},
"type": "range"
},
{
"options": {
"from": 25,
"result": {
"color": "blue",
"index": 3
},
"to": 100000
},
"type": "range"
}
]
}
]
}
]
},
"gridPos": {
"h": 9,
"w": 6,
"x": 6,
"y": 9
},
"id": 7,
"options": {
"alignValue": "left",
"legend": {
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"mergeValues": true,
"rowHeight": 0.9,
"showValue": "auto",
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"targets": [
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "5,10,20,30,40"
}
],
"title": "override value mappings",
"type": "state-timeline"
},
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {
"fillOpacity": 70,
"lineWidth": 0,
"spanNulls": false
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 9,
"w": 6,
"x": 12,
"y": 9
},
"id": 5,
"options": {
"alignValue": "left",
"legend": {
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"mergeValues": true,
"rowHeight": 0.9,
"showValue": "auto",
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"targets": [
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"rawFrameContent": "[\n {\n \"schema\": {\n \"refId\": \"A\",\n \"fields\": [\n {\n \"name\": \"time\",\n \"type\": \"time\",\n \"typeInfo\": {\n \"frame\": \"time\",\n \"nullable\": true\n },\n \"config\": {}\n },\n {\n \"name\": \"value\",\n \"type\": \"number\",\n \"typeInfo\": {\n \"frame\": \"int64\",\n \"nullable\": true\n },\n \"config\": {\n \"thresholds\": {\n \"mode\": \"absolute\",\n \"steps\": [\n {\n \"color\": \"green\",\n \"value\": null\n },\n {\n \"color\": \"#EAB839\",\n \"value\": 10\n },\n {\n \"color\": \"red\",\n \"value\": 15\n },\n {\n \"color\": \"#6ED0E0\",\n \"value\": 25\n }\n ]\n }\n }\n }\n ]\n },\n \"data\": {\n \"values\": [\n [\n 1674732835000,\n 1674736435000,\n 1674740035000,\n 1674743635000\n ],\n [\n 5,\n 10,\n 20,\n 30\n ]\n ]\n }\n }\n]",
"refId": "A",
"scenarioId": "raw_frame"
}
],
"title": "field thresholds from data",
"type": "state-timeline"
},
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"fieldConfig": {
"defaults": {
"color": {
"mode": "thresholds"
},
"custom": {
"fillOpacity": 70,
"lineWidth": 0,
"spanNulls": false
},
"mappings": [],
"thresholds": {
"mode": "absolute",
"steps": [
{
"color": "green"
},
{
"color": "red",
"value": 80
}
]
}
},
"overrides": []
},
"gridPos": {
"h": 9,
"w": 6,
"x": 18,
"y": 9
},
"id": 9,
"options": {
"alignValue": "left",
"legend": {
"displayMode": "list",
"placement": "bottom",
"showLegend": true
},
"mergeValues": true,
"rowHeight": 0.9,
"showValue": "auto",
"tooltip": {
"mode": "single",
"sort": "none"
}
},
"targets": [
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"refId": "A",
"scenarioId": "csv_metric_values",
"stringInput": "5,10,20,30,40"
},
{
"datasource": {
"type": "testdata",
"uid": "PD8C576611E62080A"
},
"hide": false,
"max": 30,
"min": 0.01,
"noise": 30,
"refId": "B",
"scenarioId": "random_walk",
"startValue": 1
}
],
"title": "threshold from random walk",
"transformations": [
{
"id": "configFromData",
"options": {
"configRefId": "B",
"mappings": [
{
"fieldName": "B-series",
"handlerKey": "threshold1"
}
]
}
}
],
"type": "state-timeline"
}
],
"refresh": false,
"revision": 1,
"schemaVersion": 38,
"style": "dark",
"tags": [
"gdev",
"panel-tests",
"state-timeline",
"graph-ng"
],
"templating": {
"list": []
},
"time": {
"from": "2023-01-26T11:33:55.000Z",
"to": "2023-01-26T14:33:55.000Z"
},
"timepicker": {},
"timezone": "",
"title": "StateTimeline - Thresholds & Mappings",
"uid": "Kce7z9TVz",
"version": 14,
"weekStart": ""
}

7
devenv/jsonnet/dev-dashboards.libsonnet
View File

@@ -632,6 +632,13 @@ local dashboard = grafana.dashboard;
id: 0, id: 0,
} }
}, },
dashboard.new('timeline-thresholds-mappings', import '../dev-dashboards/panel-timeline/timeline-thresholds-mappings.json') +
resource.addMetadata('folder', 'dev-dashboards') +
{
spec+: {
id: 0,
}
},
dashboard.new('timeseries', import '../dev-dashboards/panel-timeseries/timeseries.json') + dashboard.new('timeseries', import '../dev-dashboards/panel-timeseries/timeseries.json') +
resource.addMetadata('folder', 'dev-dashboards') + resource.addMetadata('folder', 'dev-dashboards') +
{ {

3
public/app/core/components/TimelineChart/utils.ts
View File

@@ -556,9 +556,10 @@ export function getFieldLegendItem(fields: Field[], theme: GrafanaTheme2): VizLe
const items: VizLegendItem[] = []; const items: VizLegendItem[] = [];
const fieldConfig = fields[0].config; const fieldConfig = fields[0].config;
const colorMode = fieldConfig.color?.mode ?? FieldColorModeId.Fixed; const colorMode = fieldConfig.color?.mode ?? FieldColorModeId.Fixed;
const thresholds = fieldConfig.thresholds;
// If thresholds are enabled show each step in the legend // If thresholds are enabled show each step in the legend
if (colorMode === FieldColorModeId.Thresholds) { if (colorMode === FieldColorModeId.Thresholds && thresholds?.steps && thresholds.steps.length > 1) {
return getThresholdItems(fieldConfig, theme); return getThresholdItems(fieldConfig, theme);
} }