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

BarChart: Fix incorrect legend field labels (#78511)

Browse Source 
Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
This commit is contained in:
Nathan Marrs 2023-12-13 20:54:02 -07:00 committed by GitHub
parent 2818be33ab
commit 590bab21b0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 922 additions and 635 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

911
devenv/dev-dashboards/panel-barchart/barchart-tooltips-legends.json Normal file
View File

File diff suppressed because one or more lines are too long

593
devenv/dev-dashboards/panel-barchart/barchart-tooltips.json
View File

@ -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": ""
}

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

@ -107,7 +107,7 @@ local dashboard = grafana.dashboard;
id: 0, 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') + resource.addMetadata('folder', 'dev-dashboards') +
{ {
spec+: { spec+: {

2
public/app/plugins/panel/barchart/BarChartPanel.tsx
View File

@ -213,7 +213,7 @@ export const BarChartPanel = ({ data, options, fieldConfig, width, height, timeZ
} }
} }
return <PlotLegend data={[info.legend]} config={config} maxHeight="35%" maxWidth="60%" {...options.legend} />; return <PlotLegend data={info.viz} config={config} maxHeight="35%" maxWidth="60%" {...options.legend} />;
}; };
const rawValue = (seriesIdx: number, valueIdx: number) => { const rawValue = (seriesIdx: number, valueIdx: number) => {

6
public/app/plugins/panel/barchart/types.ts
View File

@ -10,12 +10,6 @@ export interface BarChartDisplayValues {
*/ */
viz: [DataFrame]; 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 */ /** Potentialy color by a field value */
colorByField?: Field; colorByField?: Field;
} }

15
public/app/plugins/panel/barchart/utils.test.ts
View File

@ -211,19 +211,6 @@ describe('BarChart utils', () => {
null, 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', () => { it('should remove unit from legend values when stacking is percent', () => {
@ -239,7 +226,7 @@ describe('BarChart utils', () => {
const resultAsc = prepareBarChartDisplayValues([frame], createTheme(), { const resultAsc = prepareBarChartDisplayValues([frame], createTheme(), {
stacking: StackingMode.Percent, stacking: StackingMode.Percent,
} as Options); } 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[1].config.unit).toBeUndefined();
expect(displayLegendValuesAsc.fields[2].config.unit).toBeUndefined(); expect(displayLegendValuesAsc.fields[2].config.unit).toBeUndefined();

28
public/app/plugins/panel/barchart/utils.ts
View File

@ -13,6 +13,7 @@ import {
outerJoinDataFrames, outerJoinDataFrames,
TimeZone, TimeZone,
VizOrientation, VizOrientation,
getFieldDisplayName,
} from '@grafana/data'; } from '@grafana/data';
import { maybeSortFrame } from '@grafana/data/src/transformations/transformers/joinDataFrames'; import { maybeSortFrame } from '@grafana/data/src/transformations/transformers/joinDataFrames';
import { 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) { if (options.stacking === StackingMode.Percent) {
legendFields = fields.map((field) => { fields.map((field) => {
const alignedFrameField = frame.fields.find((f) => f.state?.displayName === field.state?.displayName)!; const alignedFrameField = frame.fields.find(
(f) => getFieldDisplayName(f, frame) === getFieldDisplayName(f, frame)
);
const copy = { field.config.unit = alignedFrameField?.config?.unit ?? undefined;
...field, field.display = getDisplayProcessor({ field: field, theme });
config: {
...alignedFrameField.config,
},
values: field.values,
};
copy.display = getDisplayProcessor({ field: copy, theme });
return copy;
}); });
legendFields.unshift(firstField);
} }
// String field is first // String field is first
@ -523,10 +515,6 @@ export function prepareBarChartDisplayValues(
fields: fields, // ideally: fields.filter((f) => !Boolean(f.config.custom?.hideFrom?.viz)), fields: fields, // ideally: fields.filter((f) => !Boolean(f.config.custom?.hideFrom?.viz)),
}, },
], ],
legend: {
fields: legendFields,
length: firstField.values.length,
},
}; };
} }