diff --git a/packages/grafana-ui/src/components/Graph/Graph.tsx b/packages/grafana-ui/src/components/Graph/Graph.tsx index 4b1d4c8e542..9c61e8691fd 100644 --- a/packages/grafana-ui/src/components/Graph/Graph.tsx +++ b/packages/grafana-ui/src/components/Graph/Graph.tsx @@ -8,11 +8,12 @@ import { TimeRange, GraphSeriesXY, TimeZone, createDimension } from '@grafana/da import { TooltipDisplayMode } from '@grafana/schema'; import { VizTooltipProps, VizTooltipContentProps, ActiveDimensions, VizTooltip } from '../VizTooltip'; +import { FlotPosition } from '../VizTooltip/VizTooltip'; import { GraphContextMenu, GraphContextMenuProps, ContextDimensions } from './GraphContextMenu'; import { GraphTooltip } from './GraphTooltip/GraphTooltip'; import { GraphDimensions } from './GraphTooltip/types'; -import { FlotPosition, FlotItem } from './types'; +import { FlotItem } from './types'; import { graphTimeFormat, graphTickFormatter } from './utils'; /** @deprecated */ diff --git a/packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.tsx b/packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.tsx index b41351e60b1..b6810da3e93 100644 --- a/packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.tsx +++ b/packages/grafana-ui/src/components/Graph/GraphTooltip/MultiModeGraphTooltip.tsx @@ -3,7 +3,7 @@ import React from 'react'; import { getValueFromDimension } from '@grafana/data'; import { SeriesTable } from '../../VizTooltip'; -import { FlotPosition } from '../types'; +import { FlotPosition } from '../../VizTooltip/VizTooltip'; import { getMultiSeriesGraphHoverInfo } from '../utils'; import { GraphTooltipContentProps } from './types'; diff --git a/packages/grafana-ui/src/components/Graph/types.ts b/packages/grafana-ui/src/components/Graph/types.ts index 24d5f59588d..60cdb44b983 100644 --- a/packages/grafana-ui/src/components/Graph/types.ts +++ b/packages/grafana-ui/src/components/Graph/types.ts @@ -1,13 +1,3 @@ -/** @deprecated */ -export interface FlotPosition { - pageX: number; - pageY: number; - x: number; - x1: number; - y: number; - y1: number; -} - /** @deprecated */ export interface FlotItem { datapoint: [number, number]; diff --git a/packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx b/packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx index 62b8448c643..5f7c4cf551e 100644 --- a/packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx +++ b/packages/grafana-ui/src/components/VizTooltip/VizTooltip.tsx @@ -5,11 +5,19 @@ import { Dimensions, TimeZone } from '@grafana/data'; import { TooltipDisplayMode } from '@grafana/schema'; import { useStyles2 } from '../../themes'; -import { FlotPosition } from '../Graph/types'; import { Portal } from '../Portal/Portal'; import { VizTooltipContainer } from './VizTooltipContainer'; +export interface FlotPosition { + pageX: number; + pageY: number; + x: number; + x1: number; + y: number; + y1: number; +} + // Describes active dimensions user interacts with // It's a key-value pair where: // - key is the name of the dimension diff --git a/public/app/plugins/panel/graph/graph.ts b/public/app/plugins/panel/graph/graph.ts index eccc354ac75..ec4d93dfe5c 100644 --- a/public/app/plugins/panel/graph/graph.ts +++ b/public/app/plugins/panel/graph/graph.ts @@ -36,7 +36,7 @@ import { PanelEvents, toUtc, } from '@grafana/data'; -import { graphTickFormatter, graphTimeFormat, MenuItemProps, MenuItemsGroup } from '@grafana/ui'; +import { MenuItemProps, MenuItemsGroup } from '@grafana/ui'; import { coreModule } from 'app/angular/core_module'; import config from 'app/core/config'; import { updateLegendValues } from 'app/core/core'; @@ -44,10 +44,9 @@ import { ContextSrv } from 'app/core/services/context_srv'; import { provideTheme } from 'app/core/utils/ConfigProvider'; import { tickStep } from 'app/core/utils/ticks'; import { TimeSrv } from 'app/features/dashboard/services/TimeSrv'; +import { DashboardModel } from 'app/features/dashboard/state'; import { getFieldLinksSupplier } from 'app/features/panel/panellinks/linkSuppliers'; -import { DashboardModel } from '../../../features/dashboard/state'; - import { GraphContextMenuCtrl } from './GraphContextMenuCtrl'; import { GraphLegendProps, Legend } from './Legend/Legend'; import { alignYLevel } from './align_yaxes'; @@ -57,7 +56,7 @@ import { convertToHistogramData } from './histogram'; import { GraphCtrl } from './module'; import { ThresholdManager } from './threshold_manager'; import { TimeRegionManager } from './time_region_manager'; -import { isLegacyGraphHoverEvent } from './utils'; +import { isLegacyGraphHoverEvent, graphTickFormatter, graphTimeFormat } from './utils'; const LegendWithThemeProvider = provideTheme(Legend, config.theme2); diff --git a/public/app/plugins/panel/graph/utils.test.ts b/public/app/plugins/panel/graph/utils.test.ts index 071ecc5d132..d96dad86ce1 100644 --- a/public/app/plugins/panel/graph/utils.test.ts +++ b/public/app/plugins/panel/graph/utils.test.ts @@ -1,6 +1,6 @@ import { toDataFrame, FieldType } from '@grafana/data'; -import { getDataTimeRange } from './utils'; +import { getDataTimeRange, graphTimeFormat } from './utils'; describe('DataFrame utility functions', () => { const frame = toDataFrame({ @@ -15,4 +15,14 @@ describe('DataFrame utility functions', () => { expect(range!.from).toEqual(2); expect(range!.to).toEqual(9); }); + + describe('graphTimeFormat', () => { + it('graphTimeFormat', () => { + expect(graphTimeFormat(5, 1, 45 * 5 * 1000)).toBe('HH:mm:ss'); + expect(graphTimeFormat(5, 1, 7200 * 5 * 1000)).toBe('HH:mm'); + expect(graphTimeFormat(5, 1, 80000 * 5 * 1000)).toBe('MM/DD HH:mm'); + expect(graphTimeFormat(5, 1, 2419200 * 5 * 1000)).toBe('MM/DD'); + expect(graphTimeFormat(5, 1, 12419200 * 5 * 1000)).toBe('YYYY-MM'); + }); + }); }); diff --git a/public/app/plugins/panel/graph/utils.ts b/public/app/plugins/panel/graph/utils.ts index d637391a216..aa2a7e15f78 100644 --- a/public/app/plugins/panel/graph/utils.ts +++ b/public/app/plugins/panel/graph/utils.ts @@ -5,6 +5,8 @@ import { LegacyGraphHoverEventPayload, reduceField, ReducerID, + dateTimeFormat, + systemDateFormats, } from '@grafana/data'; /** @@ -34,3 +36,45 @@ export function getDataTimeRange(frames: DataFrame[]): AbsoluteTimeRange | undef export function isLegacyGraphHoverEvent(event: unknown): event is LegacyGraphHoverEventPayload { return Boolean(event && typeof event === 'object' && event.hasOwnProperty('pos')); } + +/** @deprecated */ +export const graphTickFormatter = (epoch: number, axis: any) => { + return dateTimeFormat(epoch, { + format: axis?.options?.timeformat, + timeZone: axis?.options?.timezone, + }); +}; + +/** @deprecated */ +export const graphTimeFormat = (ticks: number | null, min: number | null, max: number | null): string => { + if (min && max && ticks) { + const range = max - min; + const secPerTick = range / ticks / 1000; + // Need have 10 millisecond margin on the day range + // As sometimes last 24 hour dashboard evaluates to more than 86400000 + const oneDay = 86400010; + const oneYear = 31536000000; + + if (secPerTick <= 10) { + return systemDateFormats.interval.millisecond; + } + if (secPerTick <= 45) { + return systemDateFormats.interval.second; + } + if (range <= oneDay) { + return systemDateFormats.interval.minute; + } + if (secPerTick <= 80000) { + return systemDateFormats.interval.hour; + } + if (range <= oneYear) { + return systemDateFormats.interval.day; + } + if (secPerTick <= 31536000) { + return systemDateFormats.interval.month; + } + return systemDateFormats.interval.year; + } + + return systemDateFormats.interval.minute; +};