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

GraphNG: Bring back plot instance getter on the Plot context (#33516)

Browse Source 
* Bring back plot instnace getter on the Plot context

* Update plot context usage
This commit is contained in:
Dominik Prokop 2021-04-29 13:51:21 +02:00 committed by GitHub
parent d32fcbe2bc
commit 45c763a76b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 16 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/grafana-ui/src/components/uPlot/Plot.tsx
View File

@ -74,9 +74,9 @@ export const UPlotChart: React.FC<PlotProps> = (props) => {
// Memoize plot context
const plotCtx = useMemo(() => {
return {
plot: plotInstance.current,
getPlot: () => plotInstance.current,
};
}, [plotInstance.current, props.data]);
}, []);
return (
<PlotContext.Provider value={plotCtx}>

2
packages/grafana-ui/src/components/uPlot/context.ts
View File

@ -2,7 +2,7 @@ import React, { useContext } from 'react';
import uPlot from 'uplot';
interface PlotContextType {
plot: uPlot | undefined;
getPlot: () => uPlot | undefined;
}
/**

5
packages/grafana-ui/src/components/uPlot/geometries/EventsCanvas.tsx
View File

@ -27,7 +27,8 @@ export function EventsCanvas({ id, events, renderEventMarker, mapEventToXYCoords
const eventMarkers = useMemo(() => {
const markers: React.ReactNode[] = [];
if (!plotCtx.plot || events.length === 0) {
const plotInstance = plotCtx.getPlot();
if (!plotInstance || events.length === 0) {
return markers;
}
@ -49,7 +50,7 @@ export function EventsCanvas({ id, events, renderEventMarker, mapEventToXYCoords
return <>{markers}</>;
}, [events, renderEventMarker, renderToken, plotCtx]);
if (!plotCtx.plot) {
if (!plotCtx.getPlot()) {
return null;
}

2
packages/grafana-ui/src/components/uPlot/geometries/XYCanvas.tsx
View File

@ -10,7 +10,7 @@ interface XYCanvasProps {}
*/
export const XYCanvas: React.FC<XYCanvasProps> = ({ children }) => {
const plotCtx = usePlotContext();
const plotInstance = plotCtx.plot;
const plotInstance = plotCtx.getPlot();
if (!plotInstance) {
return null;

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

@ -74,7 +74,8 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
});
}, [config]);
if (!plotCtx.plot || focusedPointIdx === null) {
const plotInstance = plotCtx.getPlot();
if (!plotInstance || focusedPointIdx === null) {
return null;
}
@ -91,10 +92,10 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
// when interacting with a point in single mode
if (mode === TooltipDisplayMode.Single && focusedSeriesIdx !== null) {
const field = otherProps.data.fields[focusedSeriesIdx];
const plotSeries = plotCtx.plot.series;
const plotSeries = plotInstance.series;
const fieldFmt = field.display || getDisplayProcessor({ field, timeZone, theme });
const value = fieldFmt(plotCtx.plot.data[focusedSeriesIdx!][focusedPointIdx]);
const value = fieldFmt(plotInstance.data[focusedSeriesIdx!][focusedPointIdx]);
tooltip = (
<SeriesTable
@ -113,7 +114,7 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
if (mode === TooltipDisplayMode.Multi) {
let series: SeriesTableRowProps[] = [];
const plotSeries = plotCtx.plot.series;
const plotSeries = plotInstance.series;
for (let i = 0; i < plotSeries.length; i++) {
const frame = otherProps.data;
@ -127,7 +128,7 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
continue;
}
const value = field.display!(plotCtx.plot.data[i][focusedPointIdx]);
const value = field.display!(plotInstance.data[i][focusedPointIdx]);
series.push({
// TODO: align with uPlot typings

4
public/app/plugins/panel/timeseries/plugins/AnnotationsPlugin.tsx
View File

@ -84,7 +84,7 @@ export const AnnotationsPlugin: React.FC<AnnotationsPluginProps> = ({ annotation
(frame: DataFrame, index: number) => {
const view = new DataFrameView<AnnotationsDataFrameViewDTO>(frame);
const annotation = view.get(index);
const plotInstance = plotCtx.plot;
const plotInstance = plotCtx.getPlot();
if (!annotation.time || !plotInstance) {
return undefined;
}
@ -94,7 +94,7 @@ export const AnnotationsPlugin: React.FC<AnnotationsPluginProps> = ({ annotation
y: plotInstance.bbox.height / window.devicePixelRatio + 4,
};
},
[plotCtx.plot]
[plotCtx]
);
const renderMarker = useCallback(

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

@ -22,7 +22,7 @@ export const ExemplarsPlugin: React.FC<ExemplarsPluginProps> = ({ exemplars, tim
const mapExemplarToXYCoords = useCallback(
(dataFrame: DataFrame, index: number) => {
const plotInstance = plotCtx.plot;
const plotInstance = plotCtx.getPlot();
const time = dataFrame.fields.find((f) => f.name === TIME_SERIES_TIME_FIELD_NAME);
const value = dataFrame.fields.find((f) => f.name === TIME_SERIES_VALUE_FIELD_NAME);