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

@@ -1,3 +1,5 @@
+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;
 }