From 2a08f4bdc2404ab1f4b5ae8315abb6ca2bf34298 Mon Sep 17 00:00:00 2001
From: Dominik Prokop <dominik.prokop@grafana.com>
Date: Fri, 16 Oct 2020 16:21:42 +0200
Subject: [PATCH] GraphNG: Use AxisSide enum (#28320)

---
 .../grafana-ui/src/components/GraphNG/GraphNG.tsx  |  6 +++---
 packages/grafana-ui/src/components/index.ts        |  2 +-
 .../src/components/uPlot/geometries/types.ts       |  4 +++-
 packages/grafana-ui/src/components/uPlot/types.ts  | 12 ++++++------
 public/app/plugins/panel/graph3/module.tsx         | 14 ++++----------
 5 files changed, 17 insertions(+), 21 deletions(-)

diff --git a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx b/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx
index e077783ad8a..615761e0d54 100644
--- a/packages/grafana-ui/src/components/GraphNG/GraphNG.tsx
+++ b/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))}
         />
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 5e4d8f313f5..88a7b8db4b0 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/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';
diff --git a/packages/grafana-ui/src/components/uPlot/geometries/types.ts b/packages/grafana-ui/src/components/uPlot/geometries/types.ts
index a57f079fa05..e2373b9e2d3 100644
--- a/packages/grafana-ui/src/components/uPlot/geometries/types.ts
+++ b/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;
diff --git a/packages/grafana-ui/src/components/uPlot/types.ts b/packages/grafana-ui/src/components/uPlot/types.ts
index 4cd97dae04b..3135c7f955e 100644
--- a/packages/grafana-ui/src/components/uPlot/types.ts
+++ b/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;
 }
diff --git a/public/app/plugins/panel/graph3/module.tsx b/public/app/plugins/panel/graph3/module.tsx
index 7b7b0273232..9cb4d46c670 100644
--- a/public/app/plugins/panel/graph3/module.tsx
+++ b/public/app/plugins/panel/graph3/module.tsx
@@ -1,5 +1,5 @@
 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',