GraphNG: rename GraphMode to DrawStyle (#29623)

2f92794c · Leon Sorokin · GitHub · a36bd895 · 2f92794c · 2f92794c
Commit 2f92794c authored Dec 04, 2020 by Leon Sorokin Committed by GitHub Dec 04, 2020
6 changed files
--- a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx
+++ b/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,

--- a/packages/grafana-ui/src/components/uPlot/Plot.test.tsx
+++ b/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>,
  });

--- a/packages/grafana-ui/src/components/uPlot/config.ts
+++ b/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: [
+  drawStyle: [
-    { label: 'Lines', value: GraphMode.Line },
+    { label: 'Lines', value: DrawStyle.Line },
-    { label: 'Bars', value: GraphMode.Bars },
+    { label: 'Bars', value: DrawStyle.Bars },
-    { label: 'Points', value: GraphMode.Points },
+    { label: 'Points', value: DrawStyle.Points },
-  ] as Array<SelectableValue<GraphMode>>,
+  ] as Array<SelectableValue<DrawStyle>>,
  lineInterpolation: [
    { label: 'Linear', value: LineInterpolation.Linear },

--- a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts
+++ b/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,

--- a/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts
+++ b/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) {

--- a/public/app/plugins/panel/graph3/module.tsx
+++ b/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',
+          path: 'drawStyle',
-          name: 'Display',
+          name: 'Style',
-          defaultValue: graphFieldOptions.mode[0].value,
+          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',