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

Timeline: Add time range zoom (#34079)

Browse Source
This commit is contained in:
Torkel Ödegaard 2021-05-13 20:57:45 +02:00 committed by GitHub
parent fc90c36d50
commit 36c4083264
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 13 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/app/plugins/panel/timeline/TimelinePanel.tsx
View File

@ -1,6 +1,6 @@
import React from 'react'; import React from 'react';
import { PanelProps } from '@grafana/data'; import { PanelProps } from '@grafana/data';
import { useTheme2 } from '@grafana/ui'; import { useTheme2, ZoomPlugin } from '@grafana/ui';
import { TimelineOptions } from './types'; import { TimelineOptions } from './types';
import { TimelineChart } from './TimelineChart'; import { TimelineChart } from './TimelineChart';
@ -9,7 +9,15 @@ interface TimelinePanelProps extends PanelProps<TimelineOptions> {}
/** /**
* @alpha * @alpha
*/ */
export const TimelinePanel: React.FC<TimelinePanelProps> = ({ data, timeRange, timeZone, options, width, height }) => { export const TimelinePanel: React.FC<TimelinePanelProps> = ({
data,
timeRange,
timeZone,
options,
width,
height,
onChangeTimeRange,
}) => {
const theme = useTheme2(); const theme = useTheme2();
if (!data || !data.series?.length) { if (!data || !data.series?.length) {
@ -30,6 +38,8 @@ export const TimelinePanel: React.FC<TimelinePanelProps> = ({ data, timeRange, t
width={width} width={width}
height={height} height={height}
{...options} {...options}
/> >
{(config, alignedDataFrame) => <ZoomPlugin config={config} onZoom={onChangeTimeRange} />}
</TimelineChart>
); );
}; };