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

TimeSeries: Add zoom-out functionality on double click (#68936)

Browse Source
This commit is contained in:
Simon Podlipsky 2023-05-26 04:04:02 +02:00 committed by GitHub
parent bbb0a504db
commit a69ff6c311
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 28 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/grafana-ui/src/components/uPlot/plugins/ZoomPlugin.tsx
View File

@ -1,4 +1,6 @@
import { useEffect, useLayoutEffect, useState } from 'react';
import { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { TimeRange } from '@grafana/data';
import { UPlotConfigBuilder } from '../config/UPlotConfigBuilder';
import { PlotSelection } from '../types';
@ -7,6 +9,7 @@ import { pluginLog } from '../utils';
interface ZoomPluginProps {
onZoom: (range: { from: number; to: number }) => void;
config: UPlotConfigBuilder;
timeRange: TimeRange;
}
// min px width that triggers zoom
@ -15,9 +18,14 @@ const MIN_ZOOM_DIST = 5;
/**
* @alpha
*/
export const ZoomPlugin = ({ onZoom, config }: ZoomPluginProps) => {
export const ZoomPlugin = ({ onZoom, config, timeRange }: ZoomPluginProps) => {
const [selection, setSelection] = useState<PlotSelection | null>(null);
const refTimeRange = useRef<TimeRange>(timeRange);
useEffect(() => {
refTimeRange.current = timeRange;
}, [timeRange]);
useEffect(() => {
if (selection) {
pluginLog('ZoomPlugin', false, 'selected', selection);
@ -48,6 +56,20 @@ export const ZoomPlugin = ({ onZoom, config }: ZoomPluginProps) => {
/* @ts-ignore */
u.setSelect({ left: 0, width: 0 }, false);
});
config.setCursor({
bind: {
dblclick: () => () => {
const frTs = refTimeRange.current.from.valueOf();
const toTs = refTimeRange.current.to.valueOf();
const pad = (toTs - frTs) / 2;
onZoom({ from: frTs - pad, to: toTs + pad });
return null;
},
},
});
}, [config]);
return null;

2
public/app/plugins/panel/candlestick/CandlestickPanel.tsx
View File

@ -260,7 +260,7 @@ export const CandlestickPanel = ({
return (
<>
<ZoomPlugin config={config} onZoom={onChangeTimeRange} />
<ZoomPlugin config={config} onZoom={onChangeTimeRange} timeRange={timeRange} />
<TooltipPlugin
data={alignedDataFrame}
config={config}

2
public/app/plugins/panel/state-timeline/StateTimelinePanel.tsx
View File

@ -191,7 +191,7 @@ export const StateTimelinePanel = ({
return (
<>
<ZoomPlugin config={config} onZoom={onChangeTimeRange} />
<ZoomPlugin config={config} onZoom={onChangeTimeRange} timeRange={timeRange} />
<OutsideRangePlugin config={config} onChangeTimeRange={onChangeTimeRange} />

2
public/app/plugins/panel/status-history/StatusHistoryPanel.tsx
View File

@ -215,7 +215,7 @@ export const StatusHistoryPanel = ({
return (
<>
<ZoomPlugin config={config} onZoom={onChangeTimeRange} />
<ZoomPlugin config={config} onZoom={onChangeTimeRange} timeRange={timeRange} />
{renderTooltip(alignedFrame)}
<OutsideRangePlugin config={config} onChangeTimeRange={onChangeTimeRange} />
</>

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

@ -88,7 +88,7 @@ export const TimeSeriesPanel = ({
return (
<>
<KeyboardPlugin config={config} />
<ZoomPlugin config={config} onZoom={onChangeTimeRange} />
<ZoomPlugin config={config} onZoom={onChangeTimeRange} timeRange={timeRange} />
{options.tooltip.mode === TooltipDisplayMode.None || (
<TooltipPlugin
frames={frames}