diff --git a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx b/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx index 8cfea11fcd2..5320f371f19 100755 --- a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx +++ b/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx @@ -13,7 +13,7 @@ import { import { alignDataFrames } from './utils'; import { UPlotChart } from '../uPlot/Plot'; import { PlotProps } from '../uPlot/types'; -import { AxisPlacement, GraphFieldConfig, DrawStyle, PointMode } from '../uPlot/config'; +import { AxisPlacement, GraphFieldConfig, DrawStyle, PointVisibility } from '../uPlot/config'; import { useTheme } from '../../themes'; import { VizLayout } from '../VizLayout/VizLayout'; import { LegendDisplayMode, LegendItem, LegendOptions } from '../Legend/Legend'; @@ -36,7 +36,7 @@ export interface GraphNGProps extends Omit { const defaultConfig: GraphFieldConfig = { drawStyle: DrawStyle.Line, - points: PointMode.Auto, + showPoints: PointVisibility.Auto, axisPlacement: AxisPlacement.Auto, }; @@ -145,7 +145,7 @@ export const GraphNG: React.FC = ({ const colorMode = getFieldColorModeForField(field); const seriesColor = colorMode.getCalculator(field, theme)(0, 0); - const pointsMode = customConfig.drawStyle === DrawStyle.Points ? PointMode.Always : customConfig.points; + const showPoints = customConfig.drawStyle === DrawStyle.Points ? PointVisibility.Always : customConfig.showPoints; builder.addSeries({ scaleKey, @@ -153,7 +153,7 @@ export const GraphNG: React.FC = ({ lineColor: seriesColor, lineWidth: customConfig.lineWidth, lineInterpolation: customConfig.lineInterpolation, - points: pointsMode, + showPoints, pointSize: customConfig.pointSize, pointColor: seriesColor, fillOpacity: customConfig.fillOpacity, diff --git a/packages/grafana-ui/src/components/uPlot/config.ts b/packages/grafana-ui/src/components/uPlot/config.ts index a793a7ab472..a091d67e221 100644 --- a/packages/grafana-ui/src/components/uPlot/config.ts +++ b/packages/grafana-ui/src/components/uPlot/config.ts @@ -9,7 +9,7 @@ export enum AxisPlacement { Hidden = 'hidden', } -export enum PointMode { +export enum PointVisibility { Auto = 'auto', // will show points when the density is low or line is hidden Never = 'never', Always = 'always', @@ -41,7 +41,7 @@ export interface AreaConfig { } export interface PointsConfig { - points?: PointMode; + showPoints?: PointVisibility; pointSize?: number; pointColor?: string; pointSymbol?: string; // eventually dot,star, etc @@ -72,11 +72,11 @@ export const graphFieldOptions = { { label: 'Step After', value: LineInterpolation.StepAfter }, ] as Array>, - points: [ - { label: 'Auto', value: PointMode.Auto, description: 'Show points when the density is low' }, - { label: 'Always', value: PointMode.Always }, - { label: 'Never', value: PointMode.Never }, - ] as Array>, + showPoints: [ + { label: 'Auto', value: PointVisibility.Auto, description: 'Show points when the density is low' }, + { label: 'Always', value: PointVisibility.Always }, + { label: 'Never', value: PointVisibility.Never }, + ] as Array>, axisPlacement: [ { label: 'Auto', value: AxisPlacement.Auto, description: 'First field on the left, everything else on the right' }, 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 d55ddd38d78..0b72f6e0eb8 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, DrawStyle, PointMode } from '../config'; +import { AxisPlacement, DrawStyle, PointVisibility } from '../config'; describe('UPlotConfigBuilder', () => { describe('scales config', () => { @@ -127,7 +127,7 @@ describe('UPlotConfigBuilder', () => { scaleKey: 'scale-x', fillColor: '#ff0000', fillOpacity: 0.5, - points: PointMode.Auto, + showPoints: PointVisibility.Auto, pointSize: 5, pointColor: '#00ff00', lineColor: '#0000ff', diff --git a/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts b/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts index 30922ea3007..0d665c065f7 100755 --- a/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts +++ b/packages/grafana-ui/src/components/uPlot/config/UPlotSeriesBuilder.ts @@ -1,6 +1,6 @@ import tinycolor from 'tinycolor2'; import uPlot, { Series } from 'uplot'; -import { DrawStyle, LineConfig, AreaConfig, PointsConfig, PointMode, LineInterpolation } from '../config'; +import { DrawStyle, LineConfig, AreaConfig, PointsConfig, PointVisibility, LineInterpolation } from '../config'; import { barsBuilder, smoothBuilder, stepBeforeBuilder, stepAfterBuilder } from '../paths'; import { PlotConfigBuilder } from '../types'; @@ -16,7 +16,7 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder { lineInterpolation, lineColor, lineWidth, - points, + showPoints, pointColor, pointSize, fillColor, @@ -67,13 +67,13 @@ 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 (showPoints === PointVisibility.Auto) { if (drawStyle === DrawStyle.Bars) { pointsConfig.points!.show = false; } - } else if (points === PointMode.Never) { + } else if (showPoints === PointVisibility.Never) { pointsConfig.points!.show = false; - } else if (points === PointMode.Always) { + } else if (showPoints === PointVisibility.Always) { pointsConfig.points!.show = true; } diff --git a/public/app/plugins/panel/graph3/module.tsx b/public/app/plugins/panel/graph3/module.tsx index 87facfe39a1..112f06a63b7 100644 --- a/public/app/plugins/panel/graph3/module.tsx +++ b/public/app/plugins/panel/graph3/module.tsx @@ -2,7 +2,7 @@ import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/dat import { LegendDisplayMode } from '@grafana/ui'; import { GraphFieldConfig, - PointMode, + PointVisibility, DrawStyle, AxisPlacement, graphFieldOptions, @@ -76,11 +76,11 @@ export const plugin = new PanelPlugin(GraphPanel) showIf: c => c.drawStyle === DrawStyle.Line, }) .addRadio({ - path: 'points', - name: 'Points', - defaultValue: graphFieldOptions.points[0].value, + path: 'showPoints', + name: 'Show points', + defaultValue: graphFieldOptions.showPoints[0].value, settings: { - options: graphFieldOptions.points, + options: graphFieldOptions.showPoints, }, }) .addSliderInput({ @@ -92,7 +92,7 @@ export const plugin = new PanelPlugin(GraphPanel) max: 10, step: 1, }, - showIf: c => c.points !== PointMode.Never, + showIf: c => c.showPoints !== PointVisibility.Never, }) .addRadio({ path: 'axisPlacement',