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

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

Browse Source
This commit is contained in:
Beto Muniz
2022-08-03 14:47:22 -03:00
committed by GitHub
parent ae101bf935
commit 4c02d072e3
3 changed files with 11 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -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,
});

2
public/app/plugins/panel/timeseries/TimeSeriesPanel.tsx
View File

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

9
public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx
View File

@@ -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)}
/>
);
}