Schema: export existing types in @grafana/data|ui (#38518)

packages/grafana-data/src/index.ts

@@ -25,3 +25,6 @@ export { LayoutModes, LayoutMode } from './types/layout';
 export { PanelPlugin, SetFieldConfigOptionsArgs, StandardOptionConfig } from './panel/PanelPlugin';
 export { createFieldConfigRegistry } from './panel/registryFactories';
 export { QueryRunner, QueryRunnerOptions } from './types/queryRunner';
+
+// Moved to `@grafana/schema`, in Grafana 9, this will be removed
+export * from './schema';

packages/grafana-data/src/schema.ts

@@ -0,0 +1,11 @@
+// Moved to `@grafana/schema`, in Grafana 9, this will be removed
+//---------------------------------------------------------------
+// grafana/grafana/packages/grafana-schema$ grep export src/schema/*.ts
+/**
+ * @deprecated Moved to `@grafana/schema` package and will be removed in Grafana 9
+ * @public
+ */
+export {
+  // Styles that changed
+  VizTextDisplayOptions as TextDisplayOptions, // rename
+} from '@grafana/schema';

packages/grafana-data/src/types/displayValue.ts

@@ -23,17 +23,6 @@ export interface DisplayValue extends FormattedValue {
   description?: string;
 }
 
-/**
- * Explicit control for text settings
- * @deprecated Use VizTextDisplayOptions from @grafana/ui instead
- */
-export type TextDisplayOptions = {
-  /* Explicit text size */
-  titleSize?: number;
-  /* Explicit text size */
-  valueSize?: number;
-};
-
 /**
  * These represents the display value with the longest title and text.
  * Used to align widths and heights when displaying multiple DisplayValues

packages/grafana-schema/src/schema/graph.gen.ts

@@ -16,7 +16,7 @@ export enum PointVisibility {
   Auto = 'auto',
   Never = 'never',
 }
-export enum DrawStyle {
+export enum GraphDrawStyle {
   Bars = 'bars',
   Line = 'line',
   Points = 'points',
@@ -207,7 +207,7 @@ export interface GraphFieldConfig
     BarConfig,
     StackableFieldConfig,
     HideableFieldConfig {
-  drawStyle?: DrawStyle;
+  drawStyle?: GraphDrawStyle;
   gradientMode?: GraphGradientMode;
   thresholdsStyle?: GraphThresholdsStyleConfig;
 }

packages/grafana-ui/src/components/BigValue/BigValueLayout.tsx

@@ -9,7 +9,7 @@ import { calculateFontSize } from '../../utils/measureText';
 // Types
 import { BigValueColorMode, Props, BigValueJustifyMode, BigValueTextMode } from './BigValue';
 import { getTextColorForBackground } from '../../utils';
-import { DrawStyle, GraphFieldConfig } from '@grafana/schema';
+import { GraphDrawStyle, GraphFieldConfig } from '@grafana/schema';
 import { Sparkline } from '../Sparkline/Sparkline';
 
 const LINE_HEIGHT = 1.2;
@@ -178,7 +178,7 @@ export abstract class BigValueLayout {
     // The graph field configuration applied to Y values
     const config: FieldConfig<GraphFieldConfig> = {
       custom: {
-        drawStyle: DrawStyle.Line,
+        drawStyle: GraphDrawStyle.Line,
         lineWidth: 1,
         fillColor,
         lineColor,

packages/grafana-ui/src/components/GraphNG/utils.test.ts

@@ -14,7 +14,7 @@ import {
 } from '@grafana/data';
 import {
   BarAlignment,
-  DrawStyle,
+  GraphDrawStyle,
   GraphFieldConfig,
   GraphGradientMode,
   LineInterpolation,
@@ -36,7 +36,7 @@ function mockDataFrame() {
     displayName: 'Metric 1',
     decimals: 2,
     custom: {
-      drawStyle: DrawStyle.Line,
+      drawStyle: GraphDrawStyle.Line,
       gradientMode: GraphGradientMode.Opacity,
       lineColor: '#ff0000',
       lineWidth: 2,
@@ -60,7 +60,7 @@ function mockDataFrame() {
     displayName: 'Metric 2',
     decimals: 2,
     custom: {
-      drawStyle: DrawStyle.Bars,
+      drawStyle: GraphDrawStyle.Bars,
       gradientMode: GraphGradientMode.Hue,
       lineColor: '#ff0000',
       lineWidth: 2,
@@ -84,7 +84,7 @@ function mockDataFrame() {
     displayName: 'Metric 3',
     decimals: 2,
     custom: {
-      drawStyle: DrawStyle.Line,
+      drawStyle: GraphDrawStyle.Line,
       gradientMode: GraphGradientMode.Opacity,
       lineColor: '#ff0000',
       lineWidth: 2,
@@ -107,7 +107,7 @@ function mockDataFrame() {
     displayName: 'Metric 4',
     decimals: 2,
     custom: {
-      drawStyle: DrawStyle.Bars,
+      drawStyle: GraphDrawStyle.Bars,
       gradientMode: GraphGradientMode.Hue,
       lineColor: '#ff0000',
       lineWidth: 2,
@@ -130,7 +130,7 @@ function mockDataFrame() {
     displayName: 'Metric 4',
     decimals: 2,
     custom: {
-      drawStyle: DrawStyle.Bars,
+      drawStyle: GraphDrawStyle.Bars,
       gradientMode: GraphGradientMode.Hue,
       lineColor: '#ff0000',
       lineWidth: 2,

packages/grafana-ui/src/components/Sparkline/Sparkline.tsx

@@ -11,7 +11,7 @@ import {
 } from '@grafana/data';
 import {
   AxisPlacement,
-  DrawStyle,
+  GraphDrawStyle,
   GraphFieldConfig,
   PointVisibility,
   ScaleDirection,
@@ -38,7 +38,7 @@ interface State {
 }
 
 const defaultConfig: GraphFieldConfig = {
-  drawStyle: DrawStyle.Line,
+  drawStyle: GraphDrawStyle.Line,
   showPoints: PointVisibility.Auto,
   axisPlacement: AxisPlacement.Hidden,
 };
@@ -162,7 +162,8 @@ export class Sparkline extends PureComponent<SparklineProps, State> {
 
       const colorMode = getFieldColorModeForField(field);
       const seriesColor = colorMode.getCalculator(field, theme)(0, 0);
-      const pointsMode = customConfig.drawStyle === DrawStyle.Points ? PointVisibility.Always : customConfig.showPoints;
+      const pointsMode =
+        customConfig.drawStyle === GraphDrawStyle.Points ? PointVisibility.Always : customConfig.showPoints;
 
       builder.addSeries({
         pxAlign: false,

packages/grafana-ui/src/components/TimeSeries/utils.ts

@@ -17,7 +17,7 @@ import { UPlotConfigBuilder, UPlotConfigPrepFn } from '../uPlot/config/UPlotConf
 import { FIXED_UNIT } from '../GraphNG/GraphNG';
 import {
   AxisPlacement,
-  DrawStyle,
+  GraphDrawStyle,
   GraphFieldConfig,
   GraphTresholdsStyleMode,
   PointVisibility,
@@ -30,7 +30,7 @@ import uPlot from 'uplot';
 const defaultFormatter = (v: any) => (v == null ? '-' : v.toFixed(1));
 
 const defaultConfig: GraphFieldConfig = {
-  drawStyle: DrawStyle.Line,
+  drawStyle: GraphDrawStyle.Line,
   showPoints: PointVisibility.Auto,
   axisPlacement: AxisPlacement.Auto,
 };
@@ -150,7 +150,8 @@ export const preparePlotConfigBuilder: UPlotConfigPrepFn<{ sync: DashboardCursor
       });
     }
 
-    const showPoints = customConfig.drawStyle === DrawStyle.Points ? PointVisibility.Always : customConfig.showPoints;
+    const showPoints =
+      customConfig.drawStyle === GraphDrawStyle.Points ? PointVisibility.Always : customConfig.showPoints;
 
     let pointsFilter: uPlot.Series.Points.Filter = () => null;
 

packages/grafana-ui/src/components/uPlot/Plot.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { UPlotChart } from './Plot';
 import { render } from '@testing-library/react';
 import { ArrayVector, dateTime, FieldConfig, FieldType, MutableDataFrame } from '@grafana/data';
-import { GraphFieldConfig, DrawStyle } from '@grafana/schema';
+import { GraphFieldConfig, GraphDrawStyle } from '@grafana/schema';
 import uPlot from 'uplot';
 import createMockRaf from 'mock-raf';
 import { UPlotConfigBuilder } from './config/UPlotConfigBuilder';
@@ -42,7 +42,7 @@ const mockData = () => {
     values: new ArrayVector([10, 20, 5]),
     config: {
       custom: {
-        drawStyle: DrawStyle.Line,
+        drawStyle: GraphDrawStyle.Line,
       },
     } as FieldConfig<GraphFieldConfig>,
   });

packages/grafana-ui/src/components/uPlot/config.ts

@@ -2,7 +2,7 @@ import { SelectableValue } from '@grafana/data';
 import {
   AxisPlacement,
   BarAlignment,
-  DrawStyle,
+  GraphDrawStyle,
   GraphGradientMode,
   GraphTresholdsStyleMode,
   LineInterpolation,
@@ -15,10 +15,10 @@ import {
  */
 export const graphFieldOptions = {
   drawStyle: [
-    { label: 'Lines', value: DrawStyle.Line },
+    { label: 'Lines', value: GraphDrawStyle.Line },
-    { label: 'Bars', value: DrawStyle.Bars },
+    { label: 'Bars', value: GraphDrawStyle.Bars },
-    { label: 'Points', value: DrawStyle.Points },
+    { label: 'Points', value: GraphDrawStyle.Points },
-  ] as Array<SelectableValue<DrawStyle>>,
+  ] as Array<SelectableValue<GraphDrawStyle>>,
 
   lineInterpolation: [
     { description: 'Linear', value: LineInterpolation.Linear, icon: 'gf-interpolation-linear' },

packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts

@@ -4,7 +4,7 @@ import { UPlotConfigBuilder } from './UPlotConfigBuilder';
 import {
   GraphGradientMode,
   AxisPlacement,
-  DrawStyle,
+  GraphDrawStyle,
   PointVisibility,
   ScaleOrientation,
   ScaleDirection,
@@ -417,7 +417,7 @@ describe('UPlotConfigBuilder', () => {
   it('when fillColor is not set fill', () => {
     const builder = new UPlotConfigBuilder();
     builder.addSeries({
-      drawStyle: DrawStyle.Line,
+      drawStyle: GraphDrawStyle.Line,
       scaleKey: 'scale-x',
       lineColor: '#0000ff',
       theme: darkTheme,
@@ -429,7 +429,7 @@ describe('UPlotConfigBuilder', () => {
   it('when fillOpacity is set', () => {
     const builder = new UPlotConfigBuilder();
     builder.addSeries({
-      drawStyle: DrawStyle.Line,
+      drawStyle: GraphDrawStyle.Line,
       scaleKey: 'scale-x',
       lineColor: '#FFAABB',
       fillOpacity: 50,
@@ -442,7 +442,7 @@ describe('UPlotConfigBuilder', () => {
   it('when fillColor is set ignore fillOpacity', () => {
     const builder = new UPlotConfigBuilder();
     builder.addSeries({
-      drawStyle: DrawStyle.Line,
+      drawStyle: GraphDrawStyle.Line,
       scaleKey: 'scale-x',
       lineColor: '#FFAABB',
       fillOpacity: 50,
@@ -456,7 +456,7 @@ describe('UPlotConfigBuilder', () => {
   it('when fillGradient mode is opacity', () => {
     const builder = new UPlotConfigBuilder();
     builder.addSeries({
-      drawStyle: DrawStyle.Line,
+      drawStyle: GraphDrawStyle.Line,
       scaleKey: 'scale-x',
       lineColor: '#FFAABB',
       fillOpacity: 50,
@@ -470,7 +470,7 @@ describe('UPlotConfigBuilder', () => {
   it('allows series configuration', () => {
     const builder = new UPlotConfigBuilder();
     builder.addSeries({
-      drawStyle: DrawStyle.Line,
+      drawStyle: GraphDrawStyle.Line,
       scaleKey: 'scale-x',
       fillOpacity: 50,
       gradientMode: GraphGradientMode.Opacity,
@@ -534,7 +534,7 @@ describe('UPlotConfigBuilder', () => {
       const builder = new UPlotConfigBuilder();
       builder.setStacking();
       builder.addSeries({
-        drawStyle: DrawStyle.Line,
+        drawStyle: GraphDrawStyle.Line,
         scaleKey: 'scale-x',
         fillOpacity: 50,
         gradientMode: GraphGradientMode.Opacity,
@@ -545,7 +545,7 @@ describe('UPlotConfigBuilder', () => {
         theme: darkTheme,
       });
       builder.addSeries({
-        drawStyle: DrawStyle.Line,
+        drawStyle: GraphDrawStyle.Line,
         scaleKey: 'scale-x',
         fillOpacity: 50,
         gradientMode: GraphGradientMode.Opacity,
@@ -558,7 +558,7 @@ describe('UPlotConfigBuilder', () => {
       });
 
       builder.addSeries({
-        drawStyle: DrawStyle.Line,
+        drawStyle: GraphDrawStyle.Line,
         scaleKey: 'scale-x',
         fillOpacity: 50,
         gradientMode: GraphGradientMode.Opacity,

packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts

@@ -10,7 +10,7 @@ import uPlot, { Series } from 'uplot';
 import {
   BarAlignment,
   BarConfig,
-  DrawStyle,
+  GraphDrawStyle,
   FillConfig,
   GraphGradientMode,
   LineConfig,
@@ -29,7 +29,7 @@ export interface SeriesProps extends LineConfig, BarConfig, FillConfig, PointsCo
   thresholds?: ThresholdsConfig;
   /** Used when gradientMode is set to Scheme  */
   colorMode?: FieldColorMode;
-  drawStyle?: DrawStyle;
+  drawStyle?: GraphDrawStyle;
   pathBuilder?: Series.PathBuilder;
   pointsFilter?: Series.Points.Filter;
   pointsBuilder?: Series.Points.Show;
@@ -64,13 +64,13 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
 
     let lineColor = this.getLineColor();
 
-    // DrawStyle.Points mode also needs this for fill/stroke sharing & re-use in series.points. see getColor() below.
+    // GraphDrawStyle.Points mode also needs this for fill/stroke sharing & re-use in series.points. see getColor() below.
     lineConfig.stroke = lineColor;
 
     if (pathBuilder != null) {
       lineConfig.paths = pathBuilder;
       lineConfig.width = lineWidth;
-    } else if (drawStyle === DrawStyle.Points) {
+    } else if (drawStyle === GraphDrawStyle.Points) {
       lineConfig.paths = () => null;
     } else if (drawStyle != null) {
       lineConfig.width = lineWidth;
@@ -109,11 +109,11 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
       pointsConfig.points!.show = pointsBuilder;
     } else {
       // we cannot set points.show property above (even to undefined) as that will clear uPlot's default auto behavior
-      if (drawStyle === DrawStyle.Points) {
+      if (drawStyle === GraphDrawStyle.Points) {
         pointsConfig.points!.show = true;
       } else {
         if (showPoints === PointVisibility.Auto) {
-          if (drawStyle === DrawStyle.Bars) {
+          if (drawStyle === GraphDrawStyle.Bars) {
             pointsConfig.points!.show = false;
           }
         } else if (showPoints === PointVisibility.Never) {
@@ -184,7 +184,7 @@ interface PathBuilders {
 let builders: PathBuilders | undefined = undefined;
 
 function mapDrawStyleToPathBuilder(
-  style: DrawStyle,
+  style: GraphDrawStyle,
   lineInterpolation?: LineInterpolation,
   barAlignment = 0,
   barWidthFactor = 0.6,
@@ -202,7 +202,7 @@ function mapDrawStyleToPathBuilder(
     };
   }
 
-  if (style === DrawStyle.Bars) {
+  if (style === GraphDrawStyle.Bars) {
     // each bars pathBuilder is lazy-initialized and globally cached by a key composed of its options
     let barsCfgKey = `bars|${barAlignment}|${barWidthFactor}|${barMaxWidth}`;
 
@@ -214,7 +214,7 @@ function mapDrawStyleToPathBuilder(
     }
 
     return builders[barsCfgKey];
-  } else if (style === DrawStyle.Line) {
+  } else if (style === GraphDrawStyle.Line) {
     if (lineInterpolation === LineInterpolation.StepBefore) {
       return builders.stepBefore;
     }

packages/grafana-ui/src/index.ts

@@ -10,5 +10,8 @@ export * from './themes';
 export * from './options';
 export * from './slate-plugins';
 
+// Moved to `@grafana/schema`, in Grafana 9, this will be removed
+export * from './schema';
+
 // Exposes standard editors for registries of optionsUi config and panel options UI
 export { getStandardFieldConfigs, getStandardOptionEditors } from './utils/standardEditors';

packages/grafana-ui/src/schema.ts

@@ -0,0 +1,45 @@
+// Moved to `@grafana/schema`, in Grafana 9, this will be removed
+//---------------------------------------------------------------
+// grafana/grafana/packages/grafana-schema$ grep export src/schema/*.ts
+
+export {
+  // Styles that changed
+  GraphDrawStyle as DrawStyle,
+  // All exports
+  AxisPlacement,
+  PointVisibility,
+  LineInterpolation,
+  ScaleDistribution,
+  GraphGradientMode,
+  LineStyle,
+  PointsConfig,
+  ScaleDistributionConfig,
+  HideSeriesConfig,
+  BarAlignment,
+  BarValueVisibility,
+  ScaleOrientation,
+  ScaleDirection,
+  LineConfig,
+  BarConfig,
+  FillConfig,
+  AxisConfig,
+  HideableFieldConfig,
+  StackingMode,
+  StackingConfig,
+  StackableFieldConfig,
+  GraphTresholdsStyleMode,
+  GraphThresholdsStyleConfig,
+  GraphFieldConfig,
+  LegendPlacement,
+  LegendDisplayMode,
+  VizLegendOptions,
+  OptionsWithLegend,
+  TableFieldOptions,
+  TableCellDisplayMode,
+  FieldTextAlignment,
+  VizTextDisplayOptions,
+  OptionsWithTextFormatting,
+  TooltipDisplayMode,
+  VizTooltipOptions,
+  OptionsWithTooltip,
+} from '@grafana/schema';

public/app/core/logs_model.ts

@@ -1,5 +1,5 @@
 import { size } from 'lodash';
-import { BarAlignment, DrawStyle, StackingMode } from '@grafana/schema';
+import { BarAlignment, GraphDrawStyle, StackingMode } from '@grafana/schema';
 import { ansicolor, colors } from '@grafana/ui';
 
 import {
@@ -145,7 +145,7 @@ export function makeDataFramesForLogs(sortedRows: LogRowModel[], bucketSize: num
     data.fields[valueField.index].config.decimals = 0;
 
     data.fields[valueField.index].config.custom = {
-      drawStyle: DrawStyle.Bars,
+      drawStyle: GraphDrawStyle.Bars,
       barAlignment: BarAlignment.Center,
       barWidthFactor: 0.9,
       barMaxWidth: 5,

public/app/features/explore/ExploreGraphNGPanel.tsx

@@ -24,7 +24,7 @@ import {
   useTheme2,
   ZoomPlugin,
 } from '@grafana/ui';
-import { LegendDisplayMode, TooltipDisplayMode, DrawStyle } from '@grafana/schema';
+import { LegendDisplayMode, TooltipDisplayMode, GraphDrawStyle } from '@grafana/schema';
 import { defaultGraphConfig, getGraphFieldConfig } from 'app/plugins/panel/timeseries/config';
 import { ContextMenuPlugin } from 'app/plugins/panel/timeseries/plugins/ContextMenuPlugin';
 import { ExemplarsPlugin } from 'app/plugins/panel/timeseries/plugins/ExemplarsPlugin';
@@ -83,7 +83,7 @@ export function ExploreGraphNGPanel({
         mode: FieldColorModeId.PaletteClassic,
       },
       custom: {
-        drawStyle: DrawStyle.Line,
+        drawStyle: GraphDrawStyle.Line,
         fillOpacity: 0,
         pointSize: 5,
       },

public/app/features/explore/utils/decorators.test.ts

@@ -1,4 +1,4 @@
-import { DrawStyle, StackingMode } from '@grafana/schema';
+import { GraphDrawStyle, StackingMode } from '@grafana/schema';
 import { lastValueFrom } from 'rxjs';
 import {
   ArrayVector,
@@ -365,7 +365,7 @@ describe('decorateWithLogsResult', () => {
                 decimals: 0,
                 unit: undefined,
                 custom: {
-                  drawStyle: DrawStyle.Bars,
+                  drawStyle: GraphDrawStyle.Bars,
                   barAlignment: 0,
                   barMaxWidth: 5,
                   barWidthFactor: 0.9,

public/app/plugins/panel/timeseries/config.ts

@@ -8,7 +8,7 @@ import {
 } from '@grafana/data';
 import {
   BarAlignment,
-  DrawStyle,
+  GraphDrawStyle,
   GraphFieldConfig,
   GraphGradientMode,
   LineInterpolation,
@@ -26,7 +26,7 @@ import { SpanNullsEditor } from './SpanNullsEditor';
 import { ThresholdsStyleEditor } from './ThresholdsStyleEditor';
 
 export const defaultGraphConfig: GraphFieldConfig = {
-  drawStyle: DrawStyle.Line,
+  drawStyle: GraphDrawStyle.Line,
   lineInterpolation: LineInterpolation.Linear,
   lineWidth: 1,
   fillOpacity: 0,
@@ -73,7 +73,7 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
           settings: {
             options: graphFieldOptions.lineInterpolation,
           },
-          showIf: (c) => c.drawStyle === DrawStyle.Line,
+          showIf: (c) => c.drawStyle === GraphDrawStyle.Line,
         })
         .addRadio({
           path: 'barAlignment',
@@ -83,7 +83,7 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
           settings: {
             options: graphFieldOptions.barAlignment,
           },
-          showIf: (c) => c.drawStyle === DrawStyle.Bars,
+          showIf: (c) => c.drawStyle === GraphDrawStyle.Bars,
         })
         .addSliderInput({
           path: 'lineWidth',
@@ -95,7 +95,7 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
             max: 10,
             step: 1,
           },
-          showIf: (c) => c.drawStyle !== DrawStyle.Points,
+          showIf: (c) => c.drawStyle !== GraphDrawStyle.Points,
         })
         .addSliderInput({
           path: 'fillOpacity',
@@ -107,7 +107,7 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
             max: 100,
             step: 1,
           },
-          showIf: (c) => c.drawStyle !== DrawStyle.Points,
+          showIf: (c) => c.drawStyle !== GraphDrawStyle.Points,
         })
         .addRadio({
           path: 'gradientMode',
@@ -117,7 +117,7 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
           settings: {
             options: graphFieldOptions.fillGradient,
           },
-          showIf: (c) => c.drawStyle !== DrawStyle.Points,
+          showIf: (c) => c.drawStyle !== GraphDrawStyle.Points,
         })
         .addCustomEditor({
           id: 'fillBelowTo',
@@ -135,7 +135,7 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
           path: 'lineStyle',
           name: 'Line style',
           category: categoryStyles,
-          showIf: (c) => c.drawStyle === DrawStyle.Line,
+          showIf: (c) => c.drawStyle === GraphDrawStyle.Line,
           editor: LineStyleEditor,
           override: LineStyleEditor,
           process: identityOverrideProcessor,
@@ -149,7 +149,7 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
           defaultValue: false,
           editor: SpanNullsEditor,
           override: SpanNullsEditor,
-          showIf: (c) => c.drawStyle === DrawStyle.Line,
+          showIf: (c) => c.drawStyle === GraphDrawStyle.Line,
           shouldApply: (f) => f.type !== FieldType.time,
           process: identityOverrideProcessor,
         })
@@ -161,7 +161,7 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
           settings: {
             options: graphFieldOptions.showPoints,
           },
-          showIf: (c) => c.drawStyle !== DrawStyle.Points,
+          showIf: (c) => c.drawStyle !== GraphDrawStyle.Points,
         })
         .addSliderInput({
           path: 'pointSize',
@@ -173,7 +173,7 @@ export function getGraphFieldConfig(cfg: GraphFieldConfig): SetFieldConfigOption
             max: 40,
             step: 1,
           },
-          showIf: (c) => c.showPoints !== PointVisibility.Never || c.drawStyle === DrawStyle.Points,
+          showIf: (c) => c.showPoints !== PointVisibility.Never || c.drawStyle === GraphDrawStyle.Points,
         });
 
       commonOptionsBuilder.addStackingConfig(builder, cfg.stacking, categoryStyles);

public/app/plugins/panel/timeseries/migrations.ts

@@ -16,7 +16,7 @@ import {
   LegendDisplayMode,
   TooltipDisplayMode,
   AxisPlacement,
-  DrawStyle,
+  GraphDrawStyle,
   GraphFieldConfig,
   GraphGradientMode,
   GraphTresholdsStyleMode,
@@ -173,7 +173,7 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
             if (v) {
               rule.properties.push({
                 id: 'custom.drawStyle',
-                value: DrawStyle.Bars,
+                value: GraphDrawStyle.Bars,
               });
               rule.properties.push({
                 id: 'custom.fillOpacity',
@@ -182,7 +182,7 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
             } else {
               rule.properties.push({
                 id: 'custom.drawStyle',
-                value: DrawStyle.Line, // Change from bars
+                value: GraphDrawStyle.Line, // Change from bars
               });
             }
             break;
@@ -257,7 +257,7 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
   }
 
   const graph = y1.custom ?? ({} as GraphFieldConfig);
-  graph.drawStyle = angular.bars ? DrawStyle.Bars : angular.lines ? DrawStyle.Line : DrawStyle.Points;
+  graph.drawStyle = angular.bars ? GraphDrawStyle.Bars : angular.lines ? GraphDrawStyle.Line : GraphDrawStyle.Points;
 
   if (angular.points) {
     graph.showPoints = PointVisibility.Always;
@@ -265,7 +265,7 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
     if (isNumber(angular.pointradius)) {
       graph.pointSize = 2 + angular.pointradius * 2;
     }
-  } else if (graph.drawStyle !== DrawStyle.Points) {
+  } else if (graph.drawStyle !== GraphDrawStyle.Points) {
     graph.showPoints = PointVisibility.Never;
   }
 
@@ -291,7 +291,7 @@ export function flotToGraphOptions(angular: any): { fieldConfig: FieldConfigSour
     graph.lineInterpolation = LineInterpolation.StepAfter;
   }
 
-  if (graph.drawStyle === DrawStyle.Bars) {
+  if (graph.drawStyle === GraphDrawStyle.Bars) {
     graph.fillOpacity = 100; // bars were always
   }
 

public/app/plugins/panel/xychart/module.tsx

@@ -1,4 +1,4 @@
-import { GraphFieldConfig, DrawStyle } from '@grafana/schema';
+import { GraphFieldConfig, GraphDrawStyle } from '@grafana/schema';
 import { PanelPlugin } from '@grafana/data';
 import { commonOptionsBuilder } from '@grafana/ui';
 import { XYChartPanel } from './XYChartPanel';
@@ -10,7 +10,7 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(XYChartPanel)
   .useFieldConfig(
     getGraphFieldConfig({
       ...defaultGraphConfig,
-      drawStyle: DrawStyle.Points,
+      drawStyle: GraphDrawStyle.Points,
     })
   )
   .setPanelOptions((builder) => {