diff --git a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx b/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx index 8b207d119b3..48759d79eb5 100755 --- a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx +++ b/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx @@ -188,6 +188,7 @@ class UnthemedGraphNG extends React.Component { value={{ mapSeriesIndexToDataFrameFieldIndex: this.mapSeriesIndexToDataFrameFieldIndex, dimFields: this.state.dimFields, + data: this.state.alignedDataFrame, }} > diff --git a/packages/grafana-ui/src/components/GraphNG/hooks.ts b/packages/grafana-ui/src/components/GraphNG/hooks.ts index 9d200116da3..3d35a95e797 100644 --- a/packages/grafana-ui/src/components/GraphNG/hooks.ts +++ b/packages/grafana-ui/src/components/GraphNG/hooks.ts @@ -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({} as Grap * Exposes API for data frame inspection in Plot plugins */ export const useGraphNGContext = () => { - const graphCtx = useContext(GraphNGContext); + const { data, dimFields, mapSeriesIndexToDataFrameFieldIndex } = useContext(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, }; }; diff --git a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx index be5c2cdb23b..6559e6e274e 100644 --- a/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx +++ b/packages/grafana-ui/src/components/uPlot/plugins/TooltipPlugin.tsx @@ -29,7 +29,7 @@ export const TooltipPlugin: React.FC = ({ 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 = ({ 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 = ( = ({ 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 = ({ 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 diff --git a/public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx b/public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx index da13cfaa28b..f4dcc731feb 100644 --- a/public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx +++ b/public/app/plugins/panel/timeseries/plugins/ContextMenuPlugin.tsx @@ -102,7 +102,7 @@ export const ContextMenuView: React.FC = ({ onClose(); }); - const xField = graphContext.getXAxisField(data); + const xField = graphContext.getXAxisField(); if (!xField) { return null;