Chore: Prepare to remove <Graph /> from @grafana/ui (#77522)

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 */

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';

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<T> {
   datapoint: [number, number];

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

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);
 

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');
+    });
+  });
 });

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;
+};