GraphNG: rename "points" to "showPoints" (#29635)

* rename "points" to "showPoints"

* rename ShowPoints enum to PointVisibility

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

@@ -13,7 +13,7 @@ import {
 import { alignDataFrames } from './utils';
 import { alignDataFrames } from './utils';
 import { UPlotChart } from '../uPlot/Plot';
 import { UPlotChart } from '../uPlot/Plot';
 import { PlotProps } from '../uPlot/types';
 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 { useTheme } from '../../themes';
 import { VizLayout } from '../VizLayout/VizLayout';
 import { VizLayout } from '../VizLayout/VizLayout';
 import { LegendDisplayMode, LegendItem, LegendOptions } from '../Legend/Legend';
 import { LegendDisplayMode, LegendItem, LegendOptions } from '../Legend/Legend';
@@ -36,7 +36,7 @@ export interface GraphNGProps extends Omit<PlotProps, 'data' | 'config'> {
 
 
 const defaultConfig: GraphFieldConfig = {
 const defaultConfig: GraphFieldConfig = {
   drawStyle: DrawStyle.Line,
   drawStyle: DrawStyle.Line,
-  points: PointMode.Auto,
+  showPoints: PointVisibility.Auto,
   axisPlacement: AxisPlacement.Auto,
   axisPlacement: AxisPlacement.Auto,
 };
 };
 
 
@@ -145,7 +145,7 @@ export const GraphNG: React.FC<GraphNGProps> = ({
 
 
       const colorMode = getFieldColorModeForField(field);
       const colorMode = getFieldColorModeForField(field);
       const seriesColor = colorMode.getCalculator(field, theme)(0, 0);
       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({
       builder.addSeries({
         scaleKey,
         scaleKey,
@@ -153,7 +153,7 @@ export const GraphNG: React.FC<GraphNGProps> = ({
         lineColor: seriesColor,
         lineColor: seriesColor,
         lineWidth: customConfig.lineWidth,
         lineWidth: customConfig.lineWidth,
         lineInterpolation: customConfig.lineInterpolation,
         lineInterpolation: customConfig.lineInterpolation,
-        points: pointsMode,
+        showPoints,
         pointSize: customConfig.pointSize,
         pointSize: customConfig.pointSize,
         pointColor: seriesColor,
         pointColor: seriesColor,
         fillOpacity: customConfig.fillOpacity,
         fillOpacity: customConfig.fillOpacity,

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

@@ -9,7 +9,7 @@ export enum AxisPlacement {
   Hidden = 'hidden',
   Hidden = 'hidden',
 }
 }
 
 
-export enum PointMode {
+export enum PointVisibility {
   Auto = 'auto', // will show points when the density is low or line is hidden
   Auto = 'auto', // will show points when the density is low or line is hidden
   Never = 'never',
   Never = 'never',
   Always = 'always',
   Always = 'always',
@@ -41,7 +41,7 @@ export interface AreaConfig {
 }
 }
 
 
 export interface PointsConfig {
 export interface PointsConfig {
-  points?: PointMode;
+  showPoints?: PointVisibility;
   pointSize?: number;
   pointSize?: number;
   pointColor?: string;
   pointColor?: string;
   pointSymbol?: string; // eventually dot,star, etc
   pointSymbol?: string; // eventually dot,star, etc
@@ -72,11 +72,11 @@ export const graphFieldOptions = {
     { label: 'Step After', value: LineInterpolation.StepAfter },
     { label: 'Step After', value: LineInterpolation.StepAfter },
   ] as Array<SelectableValue<LineInterpolation>>,
   ] as Array<SelectableValue<LineInterpolation>>,
 
 
-  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<SelectableValue<PointMode>>,
+  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<SelectableValue<PointVisibility>>,
 
 
   axisPlacement: [
   axisPlacement: [
     { label: 'Auto', value: AxisPlacement.Auto, description: 'First field on the left, everything else on the right' },
     { label: 'Auto', value: AxisPlacement.Auto, description: 'First field on the left, everything else on the right' },

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

@@ -3,7 +3,7 @@
 import { UPlotConfigBuilder } from './UPlotConfigBuilder';
 import { UPlotConfigBuilder } from './UPlotConfigBuilder';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
 import { expect } from '../../../../../../public/test/lib/common';
 import { expect } from '../../../../../../public/test/lib/common';
-import { AxisPlacement, DrawStyle, PointMode } from '../config';
+import { AxisPlacement, DrawStyle, PointVisibility } from '../config';
 
 
 describe('UPlotConfigBuilder', () => {
 describe('UPlotConfigBuilder', () => {
   describe('scales config', () => {
   describe('scales config', () => {
@@ -127,7 +127,7 @@ describe('UPlotConfigBuilder', () => {
       scaleKey: 'scale-x',
       scaleKey: 'scale-x',
       fillColor: '#ff0000',
       fillColor: '#ff0000',
       fillOpacity: 0.5,
       fillOpacity: 0.5,
-      points: PointMode.Auto,
+      showPoints: PointVisibility.Auto,
       pointSize: 5,
       pointSize: 5,
       pointColor: '#00ff00',
       pointColor: '#00ff00',
       lineColor: '#0000ff',
       lineColor: '#0000ff',

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

 import tinycolor from 'tinycolor2';
 import tinycolor from 'tinycolor2';
 import uPlot, { Series } from 'uplot';
 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 { barsBuilder, smoothBuilder, stepBeforeBuilder, stepAfterBuilder } from '../paths';
 import { PlotConfigBuilder } from '../types';
 import { PlotConfigBuilder } from '../types';
 
 
@@ -16,7 +16,7 @@ export class UPlotSeriesBuilder extends PlotConfigBuilder<SeriesProps, Series> {
       lineInterpolation,
       lineInterpolation,
       lineColor,
       lineColor,
       lineWidth,
       lineWidth,
-      points,
+      showPoints,
       pointColor,
       pointColor,
       pointSize,
       pointSize,
       fillColor,
       fillColor,
@@ -67,13 +67,13 @@ 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
     // 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) {
       if (drawStyle === DrawStyle.Bars) {
         pointsConfig.points!.show = false;
         pointsConfig.points!.show = false;
       }
       }
-    } else if (points === PointMode.Never) {
+    } else if (showPoints === PointVisibility.Never) {
       pointsConfig.points!.show = false;
       pointsConfig.points!.show = false;
-    } else if (points === PointMode.Always) {
+    } else if (showPoints === PointVisibility.Always) {
       pointsConfig.points!.show = true;
       pointsConfig.points!.show = true;
     }
     }
 
 

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

@@ -2,7 +2,7 @@ import { FieldColorModeId, FieldConfigProperty, PanelPlugin } from '@grafana/dat
 import { LegendDisplayMode } from '@grafana/ui';
 import { LegendDisplayMode } from '@grafana/ui';
 import {
 import {
   GraphFieldConfig,
   GraphFieldConfig,
-  PointMode,
+  PointVisibility,
   DrawStyle,
   DrawStyle,
   AxisPlacement,
   AxisPlacement,
   graphFieldOptions,
   graphFieldOptions,
@@ -76,11 +76,11 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(GraphPanel)
           showIf: c => c.drawStyle === DrawStyle.Line,
           showIf: c => c.drawStyle === DrawStyle.Line,
         })
         })
         .addRadio({
         .addRadio({
-          path: 'points',
-          name: 'Points',
-          defaultValue: graphFieldOptions.points[0].value,
+          path: 'showPoints',
+          name: 'Show points',
+          defaultValue: graphFieldOptions.showPoints[0].value,
           settings: {
           settings: {
-            options: graphFieldOptions.points,
+            options: graphFieldOptions.showPoints,
           },
           },
         })
         })
         .addSliderInput({
         .addSliderInput({
@@ -92,7 +92,7 @@ export const plugin = new PanelPlugin<Options, GraphFieldConfig>(GraphPanel)
             max: 10,
             max: 10,
             step: 1,
             step: 1,
           },
           },
-          showIf: c => c.points !== PointMode.Never,
+          showIf: c => c.showPoints !== PointVisibility.Never,
         })
         })
         .addRadio({
         .addRadio({
           path: 'axisPlacement',
           path: 'axisPlacement',