From 62c427a86471d9c33ec6c26df5912302d8ac1f9b Mon Sep 17 00:00:00 2001
From: Timmy Luong <TCL735@users.noreply.github.com>
Date: Wed, 14 Jul 2021 20:01:52 -0700
Subject: [PATCH] fix: update Gauge arc length to 1.5 PI when using Giraffe

---
 src/visualization/types/Gauge/constants.ts | 31 ++++++++++++----------
 src/visualization/types/Gauge/view.tsx     | 11 +++++++-
 2 files changed, 27 insertions(+), 15 deletions(-)

diff --git a/src/visualization/types/Gauge/constants.ts b/src/visualization/types/Gauge/constants.ts
index 32f6a4adfc..2709f2c200 100644
--- a/src/visualization/types/Gauge/constants.ts
+++ b/src/visualization/types/Gauge/constants.ts
@@ -21,20 +21,20 @@ export interface GaugeTheme {
 
 export const GAUGE_THEME_LIGHT: GaugeTheme = {
   degree: (5 / 4) * Math.PI,
-  lineCount: 5,
-  smallLineCount: 10,
-  lineColor: `${InfluxColors.Platinum}`,
   labelColor: `${InfluxColors.Storm}`,
   labelFontSize: 13,
-  lineStrokeSmall: 1,
+  lineColor: `${InfluxColors.Platinum}`,
+  lineCount: 5,
   lineStrokeLarge: 3,
-  tickSizeSmall: 9,
-  tickSizeLarge: 18,
+  lineStrokeSmall: 1,
   minFontSize: 22,
   minLineWidth: 24,
-  valueColor: `${InfluxColors.Graphite}`,
   needleColor0: `${InfluxColors.Wolf}`,
   needleColor1: `${InfluxColors.Smoke}`,
+  smallLineCount: 10,
+  tickSizeLarge: 18,
+  tickSizeSmall: 9,
+  valueColor: `${InfluxColors.Graphite}`,
 
   // This constant expresses how far past the gauge max the needle should be
   // drawn if the value for the needle is greater than the gauge max. It is
@@ -45,20 +45,20 @@ export const GAUGE_THEME_LIGHT: GaugeTheme = {
 
 export const GAUGE_THEME_DARK: GaugeTheme = {
   degree: (5 / 4) * Math.PI,
-  lineCount: 5,
-  smallLineCount: 10,
-  lineColor: `${InfluxColors.Graphite}`,
   labelColor: `${InfluxColors.Wolf}`,
   labelFontSize: 13,
-  lineStrokeSmall: 1,
+  lineColor: `${InfluxColors.Graphite}`,
+  lineCount: 5,
   lineStrokeLarge: 3,
-  tickSizeSmall: 9,
-  tickSizeLarge: 18,
+  lineStrokeSmall: 1,
   minFontSize: 22,
   minLineWidth: 24,
-  valueColor: `${InfluxColors.White}`,
   needleColor0: `${InfluxColors.Smoke}`,
   needleColor1: `${InfluxColors.White}`,
+  smallLineCount: 10,
+  tickSizeLarge: 18,
+  tickSizeSmall: 9,
+  valueColor: `${InfluxColors.White}`,
 
   // This constant expresses how far past the gauge max the needle should be
   // drawn if the value for the needle is greater than the gauge max. It is
@@ -66,3 +66,6 @@ export const GAUGE_THEME_DARK: GaugeTheme = {
   // draw halfway around the gauge from the max value
   overflowDelta: 0.03,
 }
+
+export const GAUGE_ARC_LENGTH_DEFAULT = 1.5 * Math.PI
+export const GAUGE_VALUE_POSITION_Y_OFFSET_DEFAULT = 1.5
diff --git a/src/visualization/types/Gauge/view.tsx b/src/visualization/types/Gauge/view.tsx
index 3880b66a0b..b3911444ab 100644
--- a/src/visualization/types/Gauge/view.tsx
+++ b/src/visualization/types/Gauge/view.tsx
@@ -10,7 +10,12 @@ import {isFlagEnabled} from '../../../shared/utils/featureFlag'
 
 // delete after testing
 import {AutoSizer} from 'react-virtualized'
-import {GAUGE_THEME_LIGHT, GAUGE_THEME_DARK} from './constants'
+import {
+  GAUGE_ARC_LENGTH_DEFAULT,
+  GAUGE_THEME_LIGHT,
+  GAUGE_THEME_DARK,
+  GAUGE_VALUE_POSITION_Y_OFFSET_DEFAULT,
+} from './constants'
 import {AppSettingContext} from 'src/shared/contexts/app'
 import Gauge from './Gauge'
 import LatestValueTransform from 'src/visualization/components/LatestValueTransform'
@@ -45,6 +50,10 @@ const GaugeChart: FC<Props> = ({result, properties}) => {
           tickSuffix: tickSuffix,
           decimalPlaces: decimalPlaces,
           gaugeColors: colors,
+          gaugeSize: GAUGE_ARC_LENGTH_DEFAULT,
+          gaugeTheme: {
+            valuePositionYOffset: GAUGE_VALUE_POSITION_Y_OFFSET_DEFAULT,
+          },
         },
       ],
     }