GraphNG: Use AxisSide enum (#28320)

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

@@ -12,7 +12,7 @@ import { timeFormatToTemplate } from '../uPlot/utils';
 import { alignAndSortDataFramesByFieldName } from './utils';
 import { Area, Axis, Line, Point, Scale, SeriesGeometry } from '../uPlot/geometries';
 import { UPlotChart } from '../uPlot/Plot';
-import { GraphCustomFieldConfig, PlotProps } from '../uPlot/types';
+import { AxisSide, GraphCustomFieldConfig, PlotProps } from '../uPlot/types';
 import { useTheme } from '../../themes';
 
 const timeStampsConfig = [
@@ -103,7 +103,7 @@ export const GraphNG: React.FC<GraphNGProps> = ({ data, children, ...plotProps }
     scales.push(<Scale key="scale-x" scaleKey="x" time />);
   }
 
-  axes.push(<Axis key="axis-scale--x" scaleKey="x" values={timeStampsConfig} side={2} />);
+  axes.push(<Axis key="axis-scale--x" scaleKey="x" values={timeStampsConfig} side={AxisSide.Bottom} />);
 
   let seriesIdx = 0;
   const uniqueScales: Record<string, boolean> = {};
@@ -130,7 +130,7 @@ export const GraphNG: React.FC<GraphNGProps> = ({ data, children, ...plotProps }
           scaleKey={scale}
           label={config.custom?.axis?.label}
           size={config.custom?.axis?.width}
-          side={config.custom?.axis?.side || 3}
+          side={config.custom?.axis?.side || AxisSide.Left}
           grid={config.custom?.axis?.grid}
           formatValue={v => formattedValueToString(fmt(v))}
         />

packages/grafana-ui/src/components/index.ts

@@ -201,7 +201,7 @@ const LegacyForms = {
 export { LegacyForms, LegacyInputStatus };
 
 // WIP, need renames and exports cleanup
-export { GraphCustomFieldConfig } from './uPlot/types';
+export { GraphCustomFieldConfig, AxisSide } from './uPlot/types';
 export { UPlotChart } from './uPlot/Plot';
 export * from './uPlot/geometries';
 export { usePlotConfigContext } from './uPlot/context';

packages/grafana-ui/src/components/uPlot/geometries/types.ts

+import { AxisSide } from '../types';
+
 export interface LineProps {
   scaleKey: string;
   stroke: string;
@@ -22,7 +24,7 @@ export interface AxisProps {
   show?: boolean;
   size?: number;
   stroke?: string;
-  side?: number;
+  side?: AxisSide;
   grid?: boolean;
   formatValue?: (v: any) => string;
   values?: any;

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

@@ -4,16 +4,16 @@ import { DataFrame, FieldColor, TimeRange, TimeZone } from '@grafana/data';
 
 export type NullValuesMode = 'null' | 'connected' | 'asZero';
 
-export enum MicroPlotAxisSide {
-  top = 0,
-  right = 1,
-  bottom = 2,
-  left = 3,
+export enum AxisSide {
+  Top,
+  Right,
+  Bottom,
+  Left,
 }
 
 interface AxisConfig {
   label: string;
-  side: number;
+  side: AxisSide;
   grid: boolean;
   width: number;
 }

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

 import { FieldConfigProperty, PanelPlugin } from '@grafana/data';
-import { GraphCustomFieldConfig } from '@grafana/ui';
+import { AxisSide, GraphCustomFieldConfig } from '@grafana/ui';
 import { GraphPanel } from './GraphPanel';
 import { Options } from './types';
 
@@ -113,11 +113,11 @@ export const plugin = new PanelPlugin<Options, GraphCustomFieldConfig>(GraphPane
           path: 'axis.side',
           name: 'Y axis side',
           category: ['Axis'],
-          defaultValue: 3,
+          defaultValue: AxisSide.Left,
           settings: {
             options: [
-              { value: 3, label: 'Left' },
-              { value: 1, label: 'Right' },
+              { value: AxisSide.Left, label: 'Left' },
+              { value: AxisSide.Right, label: 'Right' },
             ],
           },
         })
@@ -167,12 +167,6 @@ export const plugin = new PanelPlugin<Options, GraphCustomFieldConfig>(GraphPane
           ],
         },
       })
-      // .addBooleanSwitch({
-      //   path: 'graph.realTimeUpdates',
-      //   name: 'Real time updates',
-      //   description: 'continue to update the graph so the time axis matches the clock.',
-      //   defaultValue: false,
-      // })
       .addBooleanSwitch({
         category: ['Legend'],
         path: 'legend.isVisible',