Ensure that tooltip and legend have same parameters to calculate and display label equally (#53176)

packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx

@@ -25,6 +25,7 @@ import { findMidPointYPosition, pluginLog } from '../utils';
 interface TooltipPluginProps {
   timeZone: TimeZone;
   data: DataFrame;
+  frames?: DataFrame[];
   config: UPlotConfigBuilder;
   mode?: TooltipDisplayMode;
   sortOrder?: SortOrder;
@@ -203,7 +204,7 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
           series={[
             {
               color: display.color || FALLBACK_COLOR,
-              label: getFieldDisplayName(field, otherProps.data),
+              label: getFieldDisplayName(field, otherProps.data, otherProps.frames),
               value: display ? formattedValueToString(display) : null,
             },
           ]}
@@ -237,7 +238,7 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
         sortIdx.push(v);
         series.push({
           color: display.color || FALLBACK_COLOR,
-          label: getFieldDisplayName(field, frame),
+          label: getFieldDisplayName(field, frame, otherProps.frames),
           value: display ? formattedValueToString(display) : null,
           isActive: focusedSeriesIdx === i,
         });

public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx

@@ -71,6 +71,7 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
             <ZoomPlugin config={config} onZoom={onChangeTimeRange} />
             {options.tooltip.mode === TooltipDisplayMode.None || (
               <TooltipPlugin
+                frames={frames}
                 data={alignedDataFrame}
                 config={config}
                 mode={options.tooltip.mode}
@@ -117,6 +118,7 @@ export const TimeSeriesPanel: React.FC<TimeSeriesPanelProps> = ({
             ) : (
               <ContextMenuPlugin
                 data={alignedDataFrame}
+                frames={frames}
                 config={config}
                 timeZone={timeZone}
                 replaceVariables={replaceVariables}

public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx

@@ -24,6 +24,7 @@ export interface ContextMenuItemClickPayload {
 
 interface ContextMenuPluginProps {
   data: DataFrame;
+  frames?: DataFrame[];
   config: UPlotConfigBuilder;
   defaultItems?: Array<MenuItemsGroup<ContextMenuItemClickPayload>>;
   timeZone: TimeZone;
@@ -179,6 +180,7 @@ export const ContextMenuPlugin: React.FC<ContextMenuPluginProps> = ({
       {isOpen && coords && (
         <ContextMenuView
           data={data}
+          frames={otherProps.frames}
           defaultItems={defaultItems}
           timeZone={timeZone}
           selection={{ point, coords }}
@@ -196,8 +198,9 @@ export const ContextMenuPlugin: React.FC<ContextMenuPluginProps> = ({
   );
 };
 
-interface ContextMenuProps {
+interface ContextMenuViewProps {
   data: DataFrame;
+  frames?: DataFrame[];
   defaultItems?: MenuItemsGroup[];
   timeZone: TimeZone;
   onClose?: () => void;
@@ -208,7 +211,7 @@ interface ContextMenuProps {
   replaceVariables?: InterpolateFunction;
 }
 
-export const ContextMenuView: React.FC<ContextMenuProps> = ({
+export const ContextMenuView: React.FC<ContextMenuViewProps> = ({
   selection,
   timeZone,
   defaultItems,
@@ -274,7 +277,7 @@ export const ContextMenuView: React.FC<ContextMenuProps> = ({
           timestamp={xFieldFmt(xField.values.get(dataIdx)).text}
           displayValue={displayValue}
           seriesColor={displayValue.color!}
-          displayName={getFieldDisplayName(field, data)}
+          displayName={getFieldDisplayName(field, data, otherProps.frames)}
         />
       );
     }