From 590bab21b0357a0fbef85f1705f365b6e07d8820 Mon Sep 17 00:00:00 2001 From: Nathan Marrs Date: Wed, 13 Dec 2023 20:54:02 -0700 Subject: [PATCH] BarChart: Fix incorrect legend field labels (#78511) Co-authored-by: Leon Sorokin --- .../barchart-tooltips-legends.json | 911 ++++++++++++++++++ .../panel-barchart/barchart-tooltips.json | 593 ------------ devenv/jsonnet/dev-dashboards.libsonnet | 2 +- .../plugins/panel/barchart/BarChartPanel.tsx | 2 +- public/app/plugins/panel/barchart/types.ts | 6 - .../app/plugins/panel/barchart/utils.test.ts | 15 +- public/app/plugins/panel/barchart/utils.ts | 28 +- 7 files changed, 922 insertions(+), 635 deletions(-) create mode 100644 devenv/dev-dashboards/panel-barchart/barchart-tooltips-legends.json delete mode 100644 devenv/dev-dashboards/panel-barchart/barchart-tooltips.json diff --git a/devenv/dev-dashboards/panel-barchart/barchart-tooltips-legends.json b/devenv/dev-dashboards/panel-barchart/barchart-tooltips-legends.json new file mode 100644 index 00000000000..70deb1af0df --- /dev/null +++ b/devenv/dev-dashboards/panel-barchart/barchart-tooltips-legends.json @@ -0,0 +1,911 @@ +{ + "annotations": { + "list": [ + { + "builtIn": 1, + "datasource": { + "type": "grafana", + "uid": "-- Grafana --" + }, + "enable": true, + "hide": true, + "iconColor": "rgba(0, 211, 255, 1)", + "name": "Annotations & Alerts", + "type": "dashboard" + } + ] + }, + "editable": true, + "fiscalYearStartMonth": 0, + "graphTooltip": 0, + "links": [], + "liveNow": false, + "panels": [ + { + "collapsed": false, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 0 + }, + "id": 4, + "panels": [], + "title": "Field Override - Data Links", + "type": "row" + }, + { + "datasource": {}, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "fillOpacity": 80, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineWidth": 1, + "scaleDistribution": { + "type": "linear" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "column1" + }, + "properties": [ + { + "id": "links", + "value": [ + { + "title": "google", + "url": "google.com" + }, + { + "targetBlank": true, + "title": "youtube", + "url": "youtube.com" + } + ] + }, + { + "id": "custom.fillOpacity", + "value": 14 + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "column2" + }, + "properties": [ + { + "id": "links", + "value": [ + { + "title": "datalink column 2", + "url": "grafana.com" + } + ] + }, + { + "id": "color", + "value": { + "fixedColor": "purple", + "mode": "shades" + } + } + ] + } + ] + }, + "gridPos": { + "h": 6, + "w": 9, + "x": 0, + "y": 1 + }, + "id": 1, + "options": { + "barRadius": 0, + "barWidth": 0.97, + "fullHighlight": false, + "groupWidth": 0.7, + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "orientation": "auto", + "showValue": "auto", + "stacking": "none", + "tooltip": { + "mode": "single", + "sort": "none" + }, + "xTickLabelRotation": 0, + "xTickLabelSpacing": 0 + }, + "pluginVersion": "9.5.0-cloud.4.a016665c", + "targets": [ + { + "csvContent": "id,column1,column2\r\nA,1,2", + "datasource": { + "type": "testdata", + "uid": "o63ntNT4z" + }, + "refId": "A", + "scenarioId": "csv_content" + }, + { + "csvContent": "id,column1,column2\r\nB,2,1", + "datasource": { + "type": "testdata", + "uid": "o63ntNT4z" + }, + "hide": false, + "refId": "B", + "scenarioId": "csv_content" + } + ], + "title": "Tooltip mode: Single", + "transformations": [ + { + "id": "merge", + "options": {} + } + ], + "type": "barchart" + }, + { + "datasource": {}, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "fillOpacity": 80, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineWidth": 1, + "scaleDistribution": { + "type": "linear" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "column1" + }, + "properties": [ + { + "id": "links", + "value": [ + { + "title": "google", + "url": "google.com" + }, + { + "targetBlank": true, + "title": "youtube", + "url": "youtube.com" + } + ] + }, + { + "id": "custom.fillOpacity", + "value": 14 + } + ] + }, + { + "matcher": { + "id": "byName", + "options": "column2" + }, + "properties": [ + { + "id": "links", + "value": [ + { + "title": "datalink column 2", + "url": "grafana.com" + } + ] + }, + { + "id": "color", + "value": { + "fixedColor": "purple", + "mode": "shades" + } + } + ] + } + ] + }, + "gridPos": { + "h": 6, + "w": 9, + "x": 9, + "y": 1 + }, + "id": 6, + "options": { + "barRadius": 0, + "barWidth": 0.97, + "fullHighlight": false, + "groupWidth": 0.7, + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "orientation": "auto", + "showValue": "auto", + "stacking": "none", + "tooltip": { + "mode": "multi", + "sort": "none" + }, + "xTickLabelRotation": 0, + "xTickLabelSpacing": 0 + }, + "pluginVersion": "9.5.0-cloud.4.a016665c", + "targets": [ + { + "csvContent": "id,column1,column2\r\nA,1,2", + "datasource": { + "type": "testdata", + "uid": "o63ntNT4z" + }, + "refId": "A", + "scenarioId": "csv_content" + }, + { + "csvContent": "id,column1,column2\r\nB,2,1", + "datasource": { + "type": "testdata", + "uid": "o63ntNT4z" + }, + "hide": false, + "refId": "B", + "scenarioId": "csv_content" + } + ], + "title": "Tooltip mode: All", + "transformations": [ + { + "id": "merge", + "options": {} + } + ], + "type": "barchart" + }, + { + "collapsed": false, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 7 + }, + "id": 3, + "panels": [], + "title": "Field Override - Hide Tooltip", + "type": "row" + }, + { + "datasource": { + "type": "testdata", + "uid": "PD8C576611E62080A" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "fillOpacity": 80, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineWidth": 1, + "scaleDistribution": { + "type": "linear" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "field 3" + }, + "properties": [ + { + "id": "custom.hideFrom", + "value": { + "legend": false, + "tooltip": true, + "viz": false + } + } + ] + } + ] + }, + "gridPos": { + "h": 6, + "w": 9, + "x": 0, + "y": 8 + }, + "id": 5, + "options": { + "barRadius": 0, + "barWidth": 0.97, + "fullHighlight": false, + "groupWidth": 0.7, + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "orientation": "auto", + "showValue": "auto", + "stacking": "none", + "tooltip": { + "mode": "multi", + "sort": "none" + }, + "xTickLabelRotation": 0, + "xTickLabelSpacing": 0 + }, + "targets": [ + { + "csvContent": "id, field 1, field 2, field 3\na, 20, 30, 40\nb, 40, 50, 60", + "datasource": { + "type": "testdata", + "uid": "PD8C576611E62080A" + }, + "refId": "A", + "scenarioId": "csv_content" + } + ], + "title": "Hide 'field 3'", + "type": "barchart" + }, + { + "datasource": { + "type": "testdata", + "uid": "PD8C576611E62080A" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "fillOpacity": 80, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineWidth": 1, + "scaleDistribution": { + "type": "linear" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "id" + }, + "properties": [ + { + "id": "custom.hideFrom", + "value": { + "legend": false, + "tooltip": true, + "viz": false + } + } + ] + } + ] + }, + "gridPos": { + "h": 6, + "w": 9, + "x": 9, + "y": 8 + }, + "id": 7, + "options": { + "barRadius": 0, + "barWidth": 0.97, + "fullHighlight": false, + "groupWidth": 0.7, + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "orientation": "auto", + "showValue": "auto", + "stacking": "none", + "tooltip": { + "mode": "multi", + "sort": "none" + }, + "xTickLabelRotation": 0, + "xTickLabelSpacing": 0 + }, + "targets": [ + { + "csvContent": "id, field 1, field 2, field 3\na, 20, 30, 40\nb, 40, 50, 60", + "datasource": { + "type": "testdata", + "uid": "PD8C576611E62080A" + }, + "refId": "A", + "scenarioId": "csv_content" + } + ], + "title": "Hide 'id'", + "type": "barchart" + }, + { + "collapsed": false, + "gridPos": { + "h": 1, + "w": 24, + "x": 0, + "y": 14 + }, + "id": 8, + "panels": [], + "title": "Legends - Stacking 100%", + "type": "row" + }, + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "PD8C576611E62080A" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "fixed" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "fillOpacity": 80, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineWidth": 1, + "scaleDistribution": { + "type": "linear" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + }, + "unit": "accFS2" + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 7, + "x": 0, + "y": 15 + }, + "id": 9, + "options": { + "barRadius": 0, + "barWidth": 0.97, + "fullHighlight": false, + "groupWidth": 0.7, + "legend": { + "calcs": [ + "min", + "max", + "mean", + "variance" + ], + "displayMode": "table", + "placement": "bottom", + "showLegend": true + }, + "orientation": "auto", + "showValue": "auto", + "stacking": "percent", + "tooltip": { + "mode": "single", + "sort": "none" + }, + "xTickLabelRotation": 0, + "xTickLabelSpacing": 0 + }, + "targets": [ + { + "csvContent": "time, value\n100000, 10\n200000, 20\n300000, 30\n400000, 40", + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "PD8C576611E62080A" + }, + "refId": "A", + "scenarioId": "csv_content" + }, + { + "csvContent": "time, value\n100000, 500\n200000, 220\n300000, 10\n400000, 550", + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "PD8C576611E62080A" + }, + "hide": false, + "refId": "B", + "scenarioId": "csv_content" + } + ], + "title": "Stacking 100% Correct Legend Units (no %)", + "type": "barchart" + }, + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "PD8C576611E62080A" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "auto", + "fillOpacity": 80, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineWidth": 1, + "scaleDistribution": { + "type": "linear" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [ + { + "matcher": { + "id": "byName", + "options": "Total B" + }, + "properties": [ + { + "id": "color", + "value": { + "fixedColor": "red", + "mode": "fixed" + } + } + ] + } + ] + }, + "gridPos": { + "h": 8, + "w": 7, + "x": 7, + "y": 15 + }, + "id": 10, + "options": { + "barRadius": 0, + "barWidth": 0.97, + "fullHighlight": false, + "groupWidth": 0.7, + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "orientation": "auto", + "showValue": "auto", + "stacking": "percent", + "tooltip": { + "mode": "single", + "sort": "none" + }, + "xTickLabelRotation": 0, + "xTickLabelSpacing": 0 + }, + "targets": [ + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "PD8C576611E62080A" + }, + "rawFrameContent": "[\n {\n \"fields\": [\n {\n \"name\": \"TimeGenerated\",\n \"type\": \"time\",\n \"values\": [\n 1687200000000\n ]\n },\n {\n \"name\": \"Total\",\n \"type\": \"number\",\n \"values\": [\n 200\n ],\n \"labels\": {\n \"name\": \"A\"\n }\n },\n {\n \"name\": \"Total\",\n \"type\": \"number\",\n \"values\": [\n 180\n ],\n \"labels\": {\n \"name\": \"B\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"custom\": {\n \"azureColumnTypes\": [\n \"string\",\n \"datetime\",\n \"long\"\n ]\n },\n \"type\": \"timeseries-wide\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n }\n]", + "refId": "A", + "scenarioId": "raw_frame" + } + ], + "title": "Stacking 100% Legend Label Color Override", + "type": "barchart" + }, + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "PD8C576611E62080A" + }, + "fieldConfig": { + "defaults": { + "color": { + "mode": "palette-classic" + }, + "custom": { + "axisBorderShow": false, + "axisCenteredZero": false, + "axisColorMode": "text", + "axisLabel": "", + "axisPlacement": "hidden", + "fillOpacity": 80, + "gradientMode": "none", + "hideFrom": { + "legend": false, + "tooltip": false, + "viz": false + }, + "lineWidth": 1, + "scaleDistribution": { + "type": "linear" + }, + "thresholdsStyle": { + "mode": "off" + } + }, + "mappings": [], + "thresholds": { + "mode": "absolute", + "steps": [ + { + "color": "green", + "value": null + }, + { + "color": "red", + "value": 80 + } + ] + } + }, + "overrides": [] + }, + "gridPos": { + "h": 8, + "w": 10, + "x": 14, + "y": 15 + }, + "id": 11, + "options": { + "barRadius": 0.5, + "barWidth": 0.97, + "fullHighlight": false, + "groupWidth": 0.7, + "legend": { + "calcs": [], + "displayMode": "list", + "placement": "bottom", + "showLegend": true + }, + "orientation": "horizontal", + "showValue": "auto", + "stacking": "percent", + "tooltip": { + "mode": "multi", + "sort": "none" + }, + "xTickLabelRotation": 0, + "xTickLabelSpacing": 0 + }, + "targets": [ + { + "datasource": { + "type": "grafana-testdata-datasource", + "uid": "PD8C576611E62080A" + }, + "rawFrameContent": "[\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"f141\"\n },\n \"values\": [\n 11834,\n 26195,\n 27496,\n 21417\n ],\n \"labels\": {\n \"nodename\": \"z141\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"f131\"\n },\n \"values\": [\n 11042,\n 26646,\n 27120,\n 21508,\n 19905\n ],\n \"labels\": {\n \"nodename\": \"t131\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"f121\"\n },\n \"values\": [\n 12095,\n 26718,\n 26907,\n 21483,\n 20272\n ],\n \"labels\": {\n \"nodename\": \"k121\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"f111\"\n },\n \"values\": [\n 641,\n 1015,\n 791,\n 752,\n 758\n ],\n \"labels\": {\n \"nodename\": \"n111\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"f102\"\n },\n \"values\": [\n 101,\n 167,\n 205,\n 181,\n 172\n ],\n \"labels\": {\n \"nodename\": \"a102\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"f100\"\n },\n \"values\": [\n 89,\n 137,\n 161,\n 150,\n 161\n ],\n \"labels\": {\n \"nodename\": \"v100\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"d141\"\n },\n \"values\": [\n 11616,\n 26053,\n 25586,\n 21023,\n 19787\n ],\n \"labels\": {\n \"nodename\": \"e141\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"d131\"\n },\n \"values\": [\n 11682,\n 26851,\n 26985,\n 22475,\n 20852\n ],\n \"labels\": {\n \"nodename\": \"r131\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"d121\"\n },\n \"values\": [\n 12108,\n 26379,\n 25734,\n 20145,\n 19310\n ],\n \"labels\": {\n \"nodename\": \"g121\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"d111\"\n },\n \"values\": [\n 11254,\n 24739,\n 25406,\n 21239,\n 19426\n ],\n \"labels\": {\n \"nodename\": \"q111\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n },\n {\n \"fields\": [\n {\n \"name\": \"Time\",\n \"type\": \"time\",\n \"config\": {},\n \"values\": [\n 1700488200000,\n 1700488500000,\n 1700488800000,\n 1700489100000,\n 1700489400000\n ]\n },\n {\n \"name\": \"Value\",\n \"type\": \"number\",\n \"config\": {\n \"displayNameFromDS\": \"d102\"\n },\n \"values\": [\n 168,\n 264,\n 288,\n 283,\n 267\n ],\n \"labels\": {\n \"nodename\": \"d102\"\n }\n }\n ],\n \"refId\": \"A\",\n \"meta\": {\n \"type\": \"timeseries-multi\",\n \"typeVersion\": [\n 0,\n 0\n ]\n }\n }\n]", + "refId": "A", + "scenarioId": "raw_frame" + } + ], + "title": "Stacking 100% unique legend field label when duplicate field names are present", + "type": "barchart" + } + ], + "refresh": "", + "schemaVersion": 39, + "tags": [ + "gdev", + "panel-tests", + "barchart", + "graph-ng" + ], + "templating": { + "list": [] + }, + "time": { + "from": "now-6h", + "to": "now" + }, + "timepicker": {}, + "timezone": "", + "title": "Panel Tests - Bar Chart Tooltips & Legends", + "uid": "ea33320b-bd97-4fe1-a27c-24bc61a48b41", + "version": 1, + "weekStart": "" +} \ No newline at end of file diff --git a/devenv/dev-dashboards/panel-barchart/barchart-tooltips.json b/devenv/dev-dashboards/panel-barchart/barchart-tooltips.json deleted file mode 100644 index af7820bab35..00000000000 --- a/devenv/dev-dashboards/panel-barchart/barchart-tooltips.json +++ /dev/null @@ -1,593 +0,0 @@ -{ - "annotations": { - "list": [ - { - "builtIn": 1, - "datasource": { - "type": "grafana", - "uid": "-- Grafana --" - }, - "enable": true, - "hide": true, - "iconColor": "rgba(0, 211, 255, 1)", - "name": "Annotations & Alerts", - "type": "dashboard" - } - ] - }, - "editable": true, - "fiscalYearStartMonth": 0, - "graphTooltip": 0, - "id": 301, - "links": [], - "liveNow": false, - "panels": [ - { - "collapsed": false, - "gridPos": { - "h": 1, - "w": 24, - "x": 0, - "y": 0 - }, - "id": 4, - "panels": [], - "title": "Field Override - Data Links", - "type": "row" - }, - { - "datasource": {}, - "fieldConfig": { - "defaults": { - "color": { - "mode": "palette-classic" - }, - "custom": { - "axisCenteredZero": false, - "axisColorMode": "text", - "axisLabel": "", - "axisPlacement": "auto", - "fillOpacity": 80, - "gradientMode": "none", - "hideFrom": { - "legend": false, - "tooltip": false, - "viz": false - }, - "lineWidth": 1, - "scaleDistribution": { - "type": "linear" - }, - "thresholdsStyle": { - "mode": "off" - } - }, - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "red", - "value": 80 - } - ] - } - }, - "overrides": [ - { - "matcher": { - "id": "byName", - "options": "column1" - }, - "properties": [ - { - "id": "links", - "value": [ - { - "title": "google", - "url": "google.com" - }, - { - "targetBlank": true, - "title": "youtube", - "url": "youtube.com" - } - ] - }, - { - "id": "custom.fillOpacity", - "value": 14 - } - ] - }, - { - "matcher": { - "id": "byName", - "options": "column2" - }, - "properties": [ - { - "id": "links", - "value": [ - { - "title": "datalink column 2", - "url": "grafana.com" - } - ] - }, - { - "id": "color", - "value": { - "fixedColor": "purple", - "mode": "shades" - } - } - ] - } - ] - }, - "gridPos": { - "h": 6, - "w": 9, - "x": 0, - "y": 1 - }, - "id": 1, - "options": { - "barRadius": 0, - "barWidth": 0.97, - "fullHighlight": false, - "groupWidth": 0.7, - "legend": { - "calcs": [], - "displayMode": "list", - "placement": "bottom", - "showLegend": true - }, - "orientation": "auto", - "showValue": "auto", - "stacking": "none", - "tooltip": { - "mode": "single", - "sort": "none" - }, - "xTickLabelRotation": 0, - "xTickLabelSpacing": 0 - }, - "pluginVersion": "9.5.0-cloud.4.a016665c", - "targets": [ - { - "csvContent": "id,column1,column2\r\nA,1,2", - "datasource": { - "type": "testdata", - "uid": "o63ntNT4z" - }, - "refId": "A", - "scenarioId": "csv_content" - }, - { - "csvContent": "id,column1,column2\r\nB,2,1", - "datasource": { - "type": "testdata", - "uid": "o63ntNT4z" - }, - "hide": false, - "refId": "B", - "scenarioId": "csv_content" - } - ], - "title": "Tooltip mode: Single", - "transformations": [ - { - "id": "merge", - "options": {} - } - ], - "type": "barchart" - }, - { - "datasource": {}, - "fieldConfig": { - "defaults": { - "color": { - "mode": "palette-classic" - }, - "custom": { - "axisCenteredZero": false, - "axisColorMode": "text", - "axisLabel": "", - "axisPlacement": "auto", - "fillOpacity": 80, - "gradientMode": "none", - "hideFrom": { - "legend": false, - "tooltip": false, - "viz": false - }, - "lineWidth": 1, - "scaleDistribution": { - "type": "linear" - }, - "thresholdsStyle": { - "mode": "off" - } - }, - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "red", - "value": 80 - } - ] - } - }, - "overrides": [ - { - "matcher": { - "id": "byName", - "options": "column1" - }, - "properties": [ - { - "id": "links", - "value": [ - { - "title": "google", - "url": "google.com" - }, - { - "targetBlank": true, - "title": "youtube", - "url": "youtube.com" - } - ] - }, - { - "id": "custom.fillOpacity", - "value": 14 - } - ] - }, - { - "matcher": { - "id": "byName", - "options": "column2" - }, - "properties": [ - { - "id": "links", - "value": [ - { - "title": "datalink column 2", - "url": "grafana.com" - } - ] - }, - { - "id": "color", - "value": { - "fixedColor": "purple", - "mode": "shades" - } - } - ] - } - ] - }, - "gridPos": { - "h": 6, - "w": 9, - "x": 9, - "y": 1 - }, - "id": 6, - "options": { - "barRadius": 0, - "barWidth": 0.97, - "fullHighlight": false, - "groupWidth": 0.7, - "legend": { - "calcs": [], - "displayMode": "list", - "placement": "bottom", - "showLegend": true - }, - "orientation": "auto", - "showValue": "auto", - "stacking": "none", - "tooltip": { - "mode": "multi", - "sort": "none" - }, - "xTickLabelRotation": 0, - "xTickLabelSpacing": 0 - }, - "pluginVersion": "9.5.0-cloud.4.a016665c", - "targets": [ - { - "csvContent": "id,column1,column2\r\nA,1,2", - "datasource": { - "type": "testdata", - "uid": "o63ntNT4z" - }, - "refId": "A", - "scenarioId": "csv_content" - }, - { - "csvContent": "id,column1,column2\r\nB,2,1", - "datasource": { - "type": "testdata", - "uid": "o63ntNT4z" - }, - "hide": false, - "refId": "B", - "scenarioId": "csv_content" - } - ], - "title": "Tooltip mode: All", - "transformations": [ - { - "id": "merge", - "options": {} - } - ], - "type": "barchart" - }, - { - "collapsed": false, - "gridPos": { - "h": 1, - "w": 24, - "x": 0, - "y": 7 - }, - "id": 3, - "panels": [], - "title": "Field Override - Hide Tooltip", - "type": "row" - }, - { - "datasource": { - "type": "testdata", - "uid": "PD8C576611E62080A" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "palette-classic" - }, - "custom": { - "axisCenteredZero": false, - "axisColorMode": "text", - "axisLabel": "", - "axisPlacement": "auto", - "fillOpacity": 80, - "gradientMode": "none", - "hideFrom": { - "legend": false, - "tooltip": false, - "viz": false - }, - "lineWidth": 1, - "scaleDistribution": { - "type": "linear" - }, - "thresholdsStyle": { - "mode": "off" - } - }, - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "red", - "value": 80 - } - ] - } - }, - "overrides": [ - { - "matcher": { - "id": "byName", - "options": "field 3" - }, - "properties": [ - { - "id": "custom.hideFrom", - "value": { - "legend": false, - "tooltip": true, - "viz": false - } - } - ] - } - ] - }, - "gridPos": { - "h": 6, - "w": 9, - "x": 0, - "y": 8 - }, - "id": 5, - "options": { - "barRadius": 0, - "barWidth": 0.97, - "fullHighlight": false, - "groupWidth": 0.7, - "legend": { - "calcs": [], - "displayMode": "list", - "placement": "bottom", - "showLegend": true - }, - "orientation": "auto", - "showValue": "auto", - "stacking": "none", - "tooltip": { - "mode": "multi", - "sort": "none" - }, - "xTickLabelRotation": 0, - "xTickLabelSpacing": 0 - }, - "targets": [ - { - "csvContent": "id, field 1, field 2, field 3\na, 20, 30, 40\nb, 40, 50, 60", - "datasource": { - "type": "testdata", - "uid": "PD8C576611E62080A" - }, - "refId": "A", - "scenarioId": "csv_content" - } - ], - "title": "Hide 'field 3'", - "type": "barchart" - }, - { - "datasource": { - "type": "testdata", - "uid": "PD8C576611E62080A" - }, - "fieldConfig": { - "defaults": { - "color": { - "mode": "palette-classic" - }, - "custom": { - "axisCenteredZero": false, - "axisColorMode": "text", - "axisLabel": "", - "axisPlacement": "auto", - "fillOpacity": 80, - "gradientMode": "none", - "hideFrom": { - "legend": false, - "tooltip": false, - "viz": false - }, - "lineWidth": 1, - "scaleDistribution": { - "type": "linear" - }, - "thresholdsStyle": { - "mode": "off" - } - }, - "mappings": [], - "thresholds": { - "mode": "absolute", - "steps": [ - { - "color": "green", - "value": null - }, - { - "color": "red", - "value": 80 - } - ] - } - }, - "overrides": [ - { - "matcher": { - "id": "byName", - "options": "id" - }, - "properties": [ - { - "id": "custom.hideFrom", - "value": { - "legend": false, - "tooltip": true, - "viz": false - } - } - ] - } - ] - }, - "gridPos": { - "h": 6, - "w": 9, - "x": 9, - "y": 8 - }, - "id": 7, - "options": { - "barRadius": 0, - "barWidth": 0.97, - "fullHighlight": false, - "groupWidth": 0.7, - "legend": { - "calcs": [], - "displayMode": "list", - "placement": "bottom", - "showLegend": true - }, - "orientation": "auto", - "showValue": "auto", - "stacking": "none", - "tooltip": { - "mode": "multi", - "sort": "none" - }, - "xTickLabelRotation": 0, - "xTickLabelSpacing": 0 - }, - "targets": [ - { - "csvContent": "id, field 1, field 2, field 3\na, 20, 30, 40\nb, 40, 50, 60", - "datasource": { - "type": "testdata", - "uid": "PD8C576611E62080A" - }, - "refId": "A", - "scenarioId": "csv_content" - } - ], - "title": "Hide 'id'", - "type": "barchart" - } - ], - "refresh": "", - "schemaVersion": 38, - "tags": [ - "gdev", - "panel-tests", - "barchart", - "graph-ng" - ], - "templating": { - "list": [] - }, - "time": { - "from": "now-6h", - "to": "now" - }, - "timepicker": {}, - "timezone": "", - "title": "Panel Tests - Bar Chart Tooltip", - "uid": "ea33320b-bd97-4fe1-a27c-24bc61a48b41", - "version": 12, - "weekStart": "" - } \ No newline at end of file diff --git a/devenv/jsonnet/dev-dashboards.libsonnet b/devenv/jsonnet/dev-dashboards.libsonnet index 1ef01464d10..d345f86d873 100644 --- a/devenv/jsonnet/dev-dashboards.libsonnet +++ b/devenv/jsonnet/dev-dashboards.libsonnet @@ -107,7 +107,7 @@ local dashboard = grafana.dashboard; id: 0, } }, - dashboard.new('barchart-tooltips', import '../dev-dashboards/panel-barchart/barchart-tooltips.json') + + dashboard.new('barchart-tooltips-legends', import '../dev-dashboards/panel-barchart/barchart-tooltips-legends.json') + resource.addMetadata('folder', 'dev-dashboards') + { spec+: { diff --git a/public/app/plugins/panel/barchart/BarChartPanel.tsx b/public/app/plugins/panel/barchart/BarChartPanel.tsx index 27d7a366e17..30e25731c1f 100644 --- a/public/app/plugins/panel/barchart/BarChartPanel.tsx +++ b/public/app/plugins/panel/barchart/BarChartPanel.tsx @@ -213,7 +213,7 @@ export const BarChartPanel = ({ data, options, fieldConfig, width, height, timeZ } } - return ; + return ; }; const rawValue = (seriesIdx: number, valueIdx: number) => { diff --git a/public/app/plugins/panel/barchart/types.ts b/public/app/plugins/panel/barchart/types.ts index 347ae56edc0..f694f369a19 100644 --- a/public/app/plugins/panel/barchart/types.ts +++ b/public/app/plugins/panel/barchart/types.ts @@ -10,12 +10,6 @@ export interface BarChartDisplayValues { */ viz: [DataFrame]; - /** - * The fields we can display, first field is X axis. - * Contains same data as viz, but without config modifications (e.g: unit override) - */ - legend: DataFrame; - /** Potentialy color by a field value */ colorByField?: Field; } diff --git a/public/app/plugins/panel/barchart/utils.test.ts b/public/app/plugins/panel/barchart/utils.test.ts index 99edf5007ea..3818df464dc 100644 --- a/public/app/plugins/panel/barchart/utils.test.ts +++ b/public/app/plugins/panel/barchart/utils.test.ts @@ -211,19 +211,6 @@ describe('BarChart utils', () => { null, ] `); - - const displayLegendValuesAsc = assertIsDefined('legend' in result ? result : null).legend; - const legendField = displayLegendValuesAsc.fields[1]; - - expect(legendField.values).toMatchInlineSnapshot(` - [ - -10, - null, - 10, - null, - null, - ] - `); }); it('should remove unit from legend values when stacking is percent', () => { @@ -239,7 +226,7 @@ describe('BarChart utils', () => { const resultAsc = prepareBarChartDisplayValues([frame], createTheme(), { stacking: StackingMode.Percent, } as Options); - const displayLegendValuesAsc = assertIsDefined('legend' in resultAsc ? resultAsc : null).legend; + const displayLegendValuesAsc = assertIsDefined('viz' in resultAsc ? resultAsc : null).viz[0]; expect(displayLegendValuesAsc.fields[1].config.unit).toBeUndefined(); expect(displayLegendValuesAsc.fields[2].config.unit).toBeUndefined(); diff --git a/public/app/plugins/panel/barchart/utils.ts b/public/app/plugins/panel/barchart/utils.ts index 9783cad0849..e999f750022 100644 --- a/public/app/plugins/panel/barchart/utils.ts +++ b/public/app/plugins/panel/barchart/utils.ts @@ -13,6 +13,7 @@ import { outerJoinDataFrames, TimeZone, VizOrientation, + getFieldDisplayName, } from '@grafana/data'; import { maybeSortFrame } from '@grafana/data/src/transformations/transformers/joinDataFrames'; import { @@ -490,25 +491,16 @@ export function prepareBarChartDisplayValues( } } - let legendFields: Field[] = fields; + // If stacking is percent, we need to correct the fields unit and display if (options.stacking === StackingMode.Percent) { - legendFields = fields.map((field) => { - const alignedFrameField = frame.fields.find((f) => f.state?.displayName === field.state?.displayName)!; + fields.map((field) => { + const alignedFrameField = frame.fields.find( + (f) => getFieldDisplayName(f, frame) === getFieldDisplayName(f, frame) + ); - const copy = { - ...field, - config: { - ...alignedFrameField.config, - }, - values: field.values, - }; - - copy.display = getDisplayProcessor({ field: copy, theme }); - - return copy; + field.config.unit = alignedFrameField?.config?.unit ?? undefined; + field.display = getDisplayProcessor({ field: field, theme }); }); - - legendFields.unshift(firstField); } // String field is first @@ -523,10 +515,6 @@ export function prepareBarChartDisplayValues( fields: fields, // ideally: fields.filter((f) => !Boolean(f.config.custom?.hideFrom?.viz)), }, ], - legend: { - fields: legendFields, - length: firstField.values.length, - }, }; }