GraphNG: Remove fieldName and hideInLegend properties from UPlotSeriesBuilder (#34901) (#34965)

* Remove fieldName and hideInLegend properties from UPlotSeriesBuilder

* Fix test

(cherry picked from commit 573d7b8893)

Co-authored-by: Dominik Prokop <dominik.prokop@grafana.com>

packages/grafana-ui/src/components/Sparkline/Sparkline.tsx

@@ -7,7 +7,6 @@ import {
   FieldSparkline,
   FieldType,
   getFieldColorModeForField,
-  getFieldDisplayName,
 } from '@grafana/data';
 import {
   AxisPlacement,
@@ -158,7 +157,6 @@ export class Sparkline extends PureComponent<SparklineProps, State> {
       builder.addSeries({
         scaleKey,
         theme,
-        fieldName: getFieldDisplayName(field, data),
         drawStyle: customConfig.drawStyle!,
         lineColor: customConfig.lineColor ?? seriesColor,
         lineWidth: customConfig.lineWidth,

packages/grafana-ui/src/components/TimeSeries/utils.ts

@@ -185,11 +185,8 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursor
       show: !customConfig.hideFrom?.viz,
       gradientMode: customConfig.gradientMode,
       thresholds: config.thresholds,
-
       // The following properties are not used in the uPlot config, but are utilized as transport for legend config
       dataFrameFieldIndex: field.state?.origin,
-      fieldName: getFieldDisplayName(field, frame),
-      hideInLegend: customConfig.hideFrom?.legend,
     });
 
     // Render thresholds in graph

packages/grafana-ui/src/components/uPlot/PlotLegend.tsx

@@ -29,18 +29,17 @@ export const PlotLegend: React.FC<PlotLegendProps> = ({
       const fieldIndex = seriesConfig.dataFrameFieldIndex;
       const axisPlacement = config.getAxisPlacement(s.props.scaleKey);
 
-      if (seriesConfig.hideInLegend || !fieldIndex) {
+      if (!fieldIndex) {
         return undefined;
       }
 
       const field = data[fieldIndex.frameIndex]?.fields[fieldIndex.fieldIndex];
 
-      if (!field) {
+      if (!field || field.config.custom.hideFrom?.legend) {
         return undefined;
       }
 
-      const label = getFieldDisplayName(field, data[fieldIndex.frameIndex]!);
-
+      const label = getFieldDisplayName(field, data[fieldIndex.frameIndex]!, data);
       return {
         disabled: !seriesConfig.show ?? false,
         fieldIndex,

packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts

@@ -405,7 +405,6 @@ describe('UPlotConfigBuilder', () => {
     builder.addSeries({
       drawStyle: DrawStyle.Line,
       scaleKey: 'scale-x',
-      fieldName: 'A-series',
       lineColor: '#0000ff',
       theme: darkTheme,
     });
@@ -418,7 +417,6 @@ describe('UPlotConfigBuilder', () => {
     builder.addSeries({
       drawStyle: DrawStyle.Line,
       scaleKey: 'scale-x',
-      fieldName: 'A-series',
       lineColor: '#FFAABB',
       fillOpacity: 50,
       theme: darkTheme,
@@ -432,7 +430,6 @@ describe('UPlotConfigBuilder', () => {
     builder.addSeries({
       drawStyle: DrawStyle.Line,
       scaleKey: 'scale-x',
-      fieldName: 'A-series',
       lineColor: '#FFAABB',
       fillOpacity: 50,
       fillColor: '#FF0000',
@@ -447,7 +444,6 @@ describe('UPlotConfigBuilder', () => {
     builder.addSeries({
       drawStyle: DrawStyle.Line,
       scaleKey: 'scale-x',
-      fieldName: 'A-series',
       lineColor: '#FFAABB',
       fillOpacity: 50,
       gradientMode: GraphGradientMode.Opacity,
@@ -462,7 +458,6 @@ describe('UPlotConfigBuilder', () => {
     builder.addSeries({
       drawStyle: DrawStyle.Line,
       scaleKey: 'scale-x',
-      fieldName: 'A-series',
       fillOpacity: 50,
       gradientMode: GraphGradientMode.Opacity,
       showPoints: PointVisibility.Auto,
@@ -524,7 +519,6 @@ describe('UPlotConfigBuilder', () => {
       builder.addSeries({
         drawStyle: DrawStyle.Line,
         scaleKey: 'scale-x',
-        fieldName: 'A-series',
         fillOpacity: 50,
         gradientMode: GraphGradientMode.Opacity,
         showPoints: PointVisibility.Auto,
@@ -536,7 +530,6 @@ describe('UPlotConfigBuilder', () => {
       builder.addSeries({
         drawStyle: DrawStyle.Line,
         scaleKey: 'scale-x',
-        fieldName: 'B-series',
         fillOpacity: 50,
         gradientMode: GraphGradientMode.Opacity,
         showPoints: PointVisibility.Auto,
@@ -550,7 +543,6 @@ describe('UPlotConfigBuilder', () => {
       builder.addSeries({
         drawStyle: DrawStyle.Line,
         scaleKey: 'scale-x',
-        fieldName: 'C-series',
         fillOpacity: 50,
         gradientMode: GraphGradientMode.Opacity,
         showPoints: PointVisibility.Auto,

packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts

@@ -23,13 +23,11 @@ export interface SeriesProps extends LineConfig, BarConfig, FillConfig, PointsCo
   thresholds?: ThresholdsConfig;
   /** Used when gradientMode is set to Scheme  */
   colorMode?: FieldColorMode;
-  fieldName: string;
   drawStyle?: DrawStyle;
   pathBuilder?: Series.PathBuilder;
   pointsBuilder?: Series.Points.Show;
   show?: boolean;
   dataFrameFieldIndex?: DataFrameFieldIndex;
-  hideInLegend?: boolean;
   theme: GrafanaTheme2;
 }
 

public/app/plugins/panel/barchart/utils.ts

@@ -3,7 +3,6 @@ import {
   FieldType,
   formattedValueToString,
   getFieldColorModeForField,
-  getFieldDisplayName,
   getFieldSeriesColor,
   MutableDataFrame,
   VizOrientation,
@@ -134,8 +133,6 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<BarChartOptions> = ({
         fieldIndex: i,
         frameIndex: 0,
       },
-      fieldName: getFieldDisplayName(field, frame),
-      hideInLegend: customConfig.hideFrom?.legend,
     });
 
     // The builder will manage unique scaleKeys and combine where appropriate

public/app/plugins/panel/histogram/Histogram.tsx

@@ -4,7 +4,6 @@ import {
   DataFrame,
   formattedValueToString,
   getFieldColorModeForField,
-  getFieldDisplayName,
   getFieldSeriesColor,
   GrafanaTheme2,
 } from '@grafana/data';
@@ -152,8 +151,6 @@ const prepConfig = (frame: DataFrame, theme: GrafanaTheme2) => {
         fieldIndex: i,
         frameIndex: 0,
       },
-      fieldName: getFieldDisplayName(field, frame),
-      hideInLegend: customConfig.hideFrom?.legend,
     });
   }
 

public/app/plugins/panel/state-timeline/utils.ts

@@ -178,11 +178,8 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<TimelineOptions> = ({
       theme,
       show: !customConfig.hideFrom?.viz,
       thresholds: config.thresholds,
-
       // The following properties are not used in the uPlot config, but are utilized as transport for legend config
       dataFrameFieldIndex: field.state?.origin,
-      fieldName: getFieldDisplayName(field, frame),
-      hideInLegend: customConfig.hideFrom?.legend,
     });
   }