IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-22 08:56:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

GraphNG: Fix tooltip displaying wrong or no data (#32312)

Browse Source
This commit is contained in:
Dominik Prokop 2021-03-26 09:56:40 +01:00 committed by GitHub
parent a0db4dce32
commit 95c65a1f4a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 23 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-ui/src/components/GraphNG/GraphNG.tsx
View File

@ -188,6 +188,7 @@ class UnthemedGraphNG extends React.Component<GraphNGProps, GraphNGState> {
value={{
mapSeriesIndexToDataFrameFieldIndex: this.mapSeriesIndexToDataFrameFieldIndex,
dimFields: this.state.dimFields,
data: this.state.alignedDataFrame,
}}
>
<VizLayout width={width} height={height} legend={this.renderLegend()}>

32
packages/grafana-ui/src/components/GraphNG/hooks.ts
View File

@ -6,6 +6,7 @@ import React, { useCallback, useContext } from 'react';
interface GraphNGContextType {
mapSeriesIndexToDataFrameFieldIndex: (index: number) => DataFrameFieldIndex;
dimFields: XYFieldMatchers;
data: DataFrame;
}
/** @alpha */
@ -16,30 +17,25 @@ export const GraphNGContext = React.createContext<GraphNGContextType>({} as Grap
* Exposes API for data frame inspection in Plot plugins
*/
export const useGraphNGContext = () => {
const graphCtx = useContext<GraphNGContextType>(GraphNGContext);
const { data, dimFields, mapSeriesIndexToDataFrameFieldIndex } = useContext<GraphNGContextType>(GraphNGContext);
const getXAxisField = useCallback(
(data: DataFrame[]) => {
const xFieldMatcher = graphCtx.dimFields.x;
let xField: Field | null = null;
const getXAxisField = useCallback(() => {
const xFieldMatcher = dimFields.x;
let xField: Field | null = null;
for (let i = 0; i < data.length; i++) {
const frame = data[i];
for (let j = 0; j < frame.fields.length; j++) {
if (xFieldMatcher(frame.fields[j], frame, data)) {
xField = frame.fields[j];
break;
}
}
for (let j = 0; j < data.fields.length; j++) {
if (xFieldMatcher(data.fields[j], data, [data])) {
xField = data.fields[j];
break;
}
}
return xField;
},
[graphCtx]
);
return xField;
}, [data, dimFields]);
return {
...graphCtx,
dimFields,
mapSeriesIndexToDataFrameFieldIndex,
getXAxisField,
};
};

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

@ -29,7 +29,7 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({ mode = 'single', t
const plotContext = usePlotContext();
const graphContext = useGraphNGContext();
let xField = graphContext.getXAxisField(otherProps.data);
let xField = graphContext.getXAxisField();
if (!xField) {
return null;
}
@ -60,8 +60,9 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({ mode = 'single', t
if (mode === 'single' && originFieldIndex !== null) {
const field = otherProps.data[originFieldIndex.frameIndex].fields[originFieldIndex.fieldIndex];
const plotSeries = plotContext.getSeries();
const fieldFmt = field.display || getDisplayProcessor({ field, timeZone });
const value = fieldFmt(plotContext.data[focusedSeriesIdx!][focusedPointIdx]);
tooltip = (
<SeriesTable
series={[
@ -69,7 +70,7 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({ mode = 'single', t
// TODO: align with uPlot typings
color: (plotSeries[focusedSeriesIdx!].stroke as any)(),
label: getFieldDisplayName(field, otherProps.data[originFieldIndex.frameIndex]),
value: fieldFmt(field.values.get(focusedPointIdx)).text,
value: value ? formattedValueToString(value) : null,
},
]}
timestamp={xVal}
@ -94,11 +95,13 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({ mode = 'single', t
continue;
}
const value = field.display!(plotContext.data[i][focusedPointIdx]);
series.push({
// TODO: align with uPlot typings
color: (plotSeries[i].stroke as any)!(),
label: getFieldDisplayName(field, frame),
value: formattedValueToString(field.display!(field.values.get(focusedPointIdx!))),
value: value ? formattedValueToString(value) : null,
isActive: originFieldIndex
? dataFrameFieldIndex.frameIndex === originFieldIndex.frameIndex &&
dataFrameFieldIndex.fieldIndex === originFieldIndex.fieldIndex

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

@ -102,7 +102,7 @@ export const ContextMenuView: React.FC<ContextMenuProps> = ({
onClose();
});
const xField = graphContext.getXAxisField(data);
const xField = graphContext.getXAxisField();
if (!xField) {
return null;