GraphNG: rename GraphMode to DrawStyle (#29623)

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

@@ -12,7 +12,7 @@ import {
 import { alignDataFrames } from './utils';
 import { UPlotChart } from '../uPlot/Plot';
 import { PlotProps } from '../uPlot/types';
-import { AxisPlacement, GraphFieldConfig, GraphMode, PointMode } from '../uPlot/config';
+import { AxisPlacement, GraphFieldConfig, DrawStyle, PointMode } from '../uPlot/config';
 import { useTheme } from '../../themes';
 import { VizLayout } from '../VizLayout/VizLayout';
 import { LegendDisplayMode, LegendItem, LegendOptions } from '../Legend/Legend';
@@ -34,7 +34,7 @@ export interface GraphNGProps extends Omit<PlotProps, 'data' | 'config'> {
 }
 
 const defaultConfig: GraphFieldConfig = {
-  mode: GraphMode.Line,
+  drawStyle: DrawStyle.Line,
   points: PointMode.Auto,
   axisPlacement: AxisPlacement.Auto,
 };
@@ -134,11 +134,11 @@ export const GraphNG: React.FC<GraphNGProps> = ({
 
       const colorMode = getFieldColorModeForField(field);
       const seriesColor = colorMode.getCalculator(field, theme)(0, 0);
-      const pointsMode = customConfig.mode === GraphMode.Points ? PointMode.Always : customConfig.points;
+      const pointsMode = customConfig.drawStyle === DrawStyle.Points ? PointMode.Always : customConfig.points;
 
       builder.addSeries({
         scaleKey,
-        mode: customConfig.mode!,
+        drawStyle: customConfig.drawStyle!,
         lineColor: seriesColor,
         lineWidth: customConfig.lineWidth,
         lineInterpolation: customConfig.lineInterpolation,

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

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

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

@@ -15,7 +15,7 @@ export enum PointMode {
   Always = 'always',
 }
 
-export enum GraphMode {
+export enum DrawStyle {
   Line = 'line', // default
   Bars = 'bars', // will also have a gap percent
   Points = 'points', // Only show points
@@ -54,17 +54,16 @@ export interface AxisConfig {
 }
 
 export interface GraphFieldConfig extends LineConfig, AreaConfig, PointsConfig, AxisConfig {
-  mode?: GraphMode;
-
+  drawStyle?: DrawStyle;
   spanNulls?: boolean;
 }
 
 export const graphFieldOptions = {
-  mode: [
-    { label: 'Lines', value: GraphMode.Line },
-    { label: 'Bars', value: GraphMode.Bars },
-    { label: 'Points', value: GraphMode.Points },
-  ] as Array<SelectableValue<GraphMode>>,
+  drawStyle: [
+    { label: 'Lines', value: DrawStyle.Line },
+    { label: 'Bars', value: DrawStyle.Bars },
+    { label: 'Points', value: DrawStyle.Points },
+  ] as Array<SelectableValue<DrawStyle>>,
 
   lineInterpolation: [
     { label: 'Linear', value: LineInterpolation.Linear },

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

@@ -3,7 +3,7 @@
 import { UPlotConfigBuilder } from './UPlotConfigBuilder';
 import { GrafanaTheme } from '@grafana/data';
 import { expect } from '../../../../../../public/test/lib/common';
-import { AxisPlacement, GraphMode, PointMode } from '../config';
+import { AxisPlacement, DrawStyle, PointMode } from '../config';
 
 describe('UPlotConfigBuilder', () => {
   describe('scales config', () => {
@@ -121,7 +121,7 @@ describe('UPlotConfigBuilder', () => {
   it('allows series configuration', () => {
     const builder = new UPlotConfigBuilder();
     builder.addSeries({
-      mode: GraphMode.Line,
+      drawStyle: DrawStyle.Line,
       scaleKey: 'scale-x',
       fillColor: '#ff0000',
       fillOpacity: 0.5,

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

 import tinycolor from 'tinycolor2';
 import uPlot, { Series } from 'uplot';
-import { GraphMode, LineConfig, AreaConfig, PointsConfig, PointMode, LineInterpolation } from '../config';
+import { DrawStyle, LineConfig, AreaConfig, PointsConfig, PointMode, LineInterpolation } from '../config';
 import { barsBuilder, smoothBuilder, stepBeforeBuilder, stepAfterBuilder } from '../paths';
 import { PlotConfigBuilder } from '../types';
 
 export interface SeriesProps extends LineConfig, AreaConfig, PointsConfig {
-  mode: GraphMode;
+  drawStyle: DrawStyle;
   scaleKey: string;
 }
 
 export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
   getConfig() {
     const {
-      mode,
+      drawStyle,
       lineInterpolation,
       lineColor,
       lineWidth,
@@ -26,7 +26,7 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
 
     let lineConfig: Partial<Series> = {};
 
-    if (mode === GraphMode.Points) {
+    if (drawStyle === DrawStyle.Points) {
       lineConfig.paths = () => null;
     } else {
       lineConfig.stroke = lineColor;
@@ -41,9 +41,9 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
       ) => {
         let pathsBuilder = self.paths;
 
-        if (mode === GraphMode.Bars) {
+        if (drawStyle === DrawStyle.Bars) {
           pathsBuilder = barsBuilder;
-        } else if (mode === GraphMode.Line) {
+        } else if (drawStyle === DrawStyle.Line) {
           if (lineInterpolation === LineInterpolation.StepBefore) {
             pathsBuilder = stepBeforeBuilder;
           } else if (lineInterpolation === LineInterpolation.StepAfter) {
@@ -67,7 +67,7 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
 
     // we cannot set points.show property above (even to undefined) as that will clear uPlot's default auto behavior
     if (points === PointMode.Auto) {
-      if (mode === GraphMode.Bars) {
+      if (drawStyle === DrawStyle.Bars) {
         pointsConfig.points!.show = false;
       }
     } else if (points === PointMode.Never) {

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

@@ -3,7 +3,7 @@ import { LegendDisplayMode } from '@grafana/ui';
 import {
   GraphFieldConfig,
   PointMode,
-  GraphMode,
+  DrawStyle,
   AxisPlacement,
   graphFieldOptions,
 } from '@grafana/ui/src/components/uPlot/config';
@@ -25,11 +25,11 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(GraphPanel)
     useCustomConfig: builder => {
       builder
         .addRadio({
-          path: 'mode',
-          name: 'Display',
-          defaultValue: graphFieldOptions.mode[0].value,
+          path: 'drawStyle',
+          name: 'Style',
+          defaultValue: graphFieldOptions.drawStyle[0].value,
           settings: {
-            options: graphFieldOptions.mode,
+            options: graphFieldOptions.drawStyle,
           },
         })
         .addRadio({
@@ -39,7 +39,7 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(GraphPanel)
           settings: {
             options: graphFieldOptions.lineInterpolation,
           },
-          showIf: c => c.mode === GraphMode.Line,
+          showIf: c => c.drawStyle === DrawStyle.Line,
         })
         .addSliderInput({
           path: 'lineWidth',
@@ -50,7 +50,7 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(GraphPanel)
             max: 10,
             step: 1,
           },
-          showIf: c => c.mode !== GraphMode.Points,
+          showIf: c => c.drawStyle !== DrawStyle.Points,
         })
         .addSliderInput({
           path: 'fillOpacity',
@@ -61,7 +61,7 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(GraphPanel)
             max: 1,
             step: 0.1,
           },
-          showIf: c => c.mode !== GraphMode.Points,
+          showIf: c => c.drawStyle !== DrawStyle.Points,
         })
         .addRadio({
           path: 'points',