From 2f92794c94507b71f319533c83cde20217251609 Mon Sep 17 00:00:00 2001 From: Leon Sorokin Date: Fri, 4 Dec 2020 13:08:25 -0600 Subject: [PATCH] GraphNG: rename GraphMode to DrawStyle (#29623) --- .../src/components/GraphNG/GraphNG.tsx | 8 ++++---- .../src/components/uPlot/Plot.test.tsx | 4 ++-- .../grafana-ui/src/components/uPlot/config.ts | 15 +++++++-------- .../uPlot/config/UPlotConfigBuilder.test.ts | 4 ++-- .../uPlot/config/UPlotSeriesBuilder.ts | 14 +++++++------- public/app/plugins/panel/graph3/module.tsx | 16 ++++++++-------- 6 files changed, 30 insertions(+), 31 deletions(-) diff --git a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx b/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx index fa57563d812..293e82a3c75 100755 --- 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 { } const defaultConfig: GraphFieldConfig = { - mode: GraphMode.Line, + drawStyle: DrawStyle.Line, points: PointMode.Auto, axisPlacement: AxisPlacement.Auto, }; @@ -134,11 +134,11 @@ export const GraphNG: React.FC = ({ 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, diff --git a/packages/grafana-ui/src/components/uPlot/Plot.test.tsx b/packages/grafana-ui/src/components/uPlot/Plot.test.tsx index a514f310b15..ea0a819853f 100644 --- 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, }); diff --git a/packages/grafana-ui/src/components/uPlot/config.ts b/packages/grafana-ui/src/components/uPlot/config.ts index 07f4879f787..d70c32b293f 100644 --- 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: [ - { label: 'Lines', value: GraphMode.Line }, - { label: 'Bars', value: GraphMode.Bars }, - { label: 'Points', value: GraphMode.Points }, - ] as Array>, + drawStyle: [ + { label: 'Lines', value: DrawStyle.Line }, + { label: 'Bars', value: DrawStyle.Bars }, + { label: 'Points', value: DrawStyle.Points }, + ] as Array>, lineInterpolation: [ { label: 'Linear', value: LineInterpolation.Linear }, diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotConfigBuilder.test.ts index 3973719f175..51b9d738633 100644 --- 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, diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts index 57425066ede..79e5f73afaa 100755 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts @@ -1,18 +1,18 @@ 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 { getConfig() { const { - mode, + drawStyle, lineInterpolation, lineColor, lineWidth, @@ -26,7 +26,7 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder { let lineConfig: Partial = {}; - if (mode === GraphMode.Points) { + if (drawStyle === DrawStyle.Points) { lineConfig.paths = () => null; } else { lineConfig.stroke = lineColor; @@ -41,9 +41,9 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder { ) => { 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 { // 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) { diff --git a/public/app/plugins/panel/graph3/module.tsx b/public/app/plugins/panel/graph3/module.tsx index 7ce99ad1737..ea677f3e377 100644 --- 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(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(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(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(GraphPanel) max: 1, step: 0.1, }, - showIf: c => c.mode !== GraphMode.Points, + showIf: c => c.drawStyle !== DrawStyle.Points, }) .addRadio({ path: 'points',