IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-25 18:30:41 -06:00
Code Issues Packages Projects Releases Wiki Activity

Time series panel: Position tooltip correctly when window scrolled or resized (#34782)

Browse Source 
* Position GraphNG tooltip correctly when window scrolled or resized

* Use syncRect uPlot hook instead of polling

* update snap?!
This commit is contained in:
Dominik Prokop 2021-05-27 10:51:06 +02:00 committed by GitHub
parent 23cf31a567
commit 1fa755bada
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 20 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
packages/grafana-ui/src/components/TimeSeries/utils.ts
View File

@ -229,6 +229,7 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursor
data: frame,
};
const hoverEvent = new DataHoverEvent(payload);
builder.setSync();
builder.setCursor({
sync: {
key: '__global_',

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

@ -36,7 +36,9 @@ export class UPlotChart extends React.Component<PlotProps, UPlotChartState> {
this.state = {
ctx: {
plot: null,
getCanvasBoundingBox: () => this.plotCanvasBBox.current,
getCanvasBoundingBox: () => {
return this.plotCanvasBBox.current;
},
},
};
}
@ -50,6 +52,11 @@ export class UPlotChart extends React.Component<PlotProps, UPlotChartState> {
if (width === 0 && height === 0) {
return;
}
this.props.config.addHook('syncRect', (u, rect) => {
(this.plotCanvasBBox as MutableRefObject<any>).current = rect;
});
this.props.config.addHook('setSize', (u) => {
const canvas = u.over;
if (!canvas) {

9
packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.ts
View File

@ -29,6 +29,7 @@ export class UPlotConfigBuilder {
private hasBottomAxis = false;
private hooks: Hooks.Arrays = {};
private tz: string | undefined = undefined;
private sync = false;
// to prevent more than one threshold per scale
private thresholds: Record<string, UPlotThresholdOptions> = {};
/**
@ -134,6 +135,14 @@ export class UPlotConfigBuilder {
this.tooltipInterpolator = interpolator;
}
setSync() {
this.sync = true;
}
hasSync() {
return this.sync;
}
getConfig() {
const config: PlotConfig = { series: [{}] };
config.axes = this.ensureNonOverlappingAxes(Object.values(this.axes)).map((a) => a.getConfig());

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

@ -39,7 +39,6 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
const [focusedSeriesIdx, setFocusedSeriesIdx] = useState<number | null>(null);
const [focusedPointIdx, setFocusedPointIdx] = useState<number | null>(null);
const [coords, setCoords] = useState<CartesianCoords2D | null>(null);
const pluginId = `TooltipPlugin`;
// Debug logs
@ -88,20 +87,19 @@ export const TooltipPlugin: React.FC<TooltipPluginProps> = ({
} else {
// default series/datapoint idx retireval
config.addHook('setCursor', (u) => {
setFocusedPointIdx(u.cursor.idx === undefined ? u.posToIdx(u.cursor.left || 0) : u.cursor.idx);
const bbox = plotCtx.getCanvasBoundingBox();
if (!bbox) {
return;
}
const { x, y } = positionTooltip(u, bbox);
if (x !== undefined && y !== undefined) {
setCoords({ x, y });
} else {
setCoords(null);
}
setFocusedPointIdx(u.cursor.idx === undefined ? u.posToIdx(u.cursor.left || 0) : u.cursor.idx);
});
config.addHook('setSeries', (_, idx) => {