Make max decimal points 20, and define constants for magic numbers

ui/src/dashboards/components/GraphOptionsDecimalPlaces.tsx

@@ -1,6 +1,7 @@
 import React, {PureComponent} from 'react'
 import {ErrorHandling} from 'src/shared/decorators/errors'
 import OptIn from 'src/shared/components/OptIn'
+import {MIN_DECIMAL_PLACES, MAX_DECIMAL_PLACES} from 'src/dashboards/constants'
 
 import {DecimalPlaces} from 'src/types/dashboards'
 
@@ -41,8 +42,8 @@ class GraphOptionsDecimalPlaces extends PureComponent<Props> {
       <div className="form-group col-xs-6">
         <label> Decimal Places </label>
         <OptIn
-          min="0"
-          max="20"
+          min={MIN_DECIMAL_PLACES}
+          max={MAX_DECIMAL_PLACES}
           type="number"
           fixedPlaceholder=""
           customValue={this.value}

ui/src/dashboards/constants/index.ts

@@ -114,3 +114,7 @@ export enum CEOTabs {
   Queries = 'Queries',
   Vis = 'Visualization',
 }
+
+export const MAX_TOLOCALESTRING_VAL = 20 // 20 is the max input to maximumFractionDigits in spec for tolocalestring
+export const MIN_DECIMAL_PLACES = '0'
+export const MAX_DECIMAL_PLACES = MAX_TOLOCALESTRING_VAL.toString()

ui/src/shared/components/Gauge.tsx

@@ -8,6 +8,7 @@ import {
   COLOR_TYPE_MAX,
   MIN_THRESHOLDS,
 } from 'src/shared/constants/thresholds'
+import {MAX_TOLOCALESTRING_VAL} from 'src/dashboards/constants'
 
 import {ErrorHandling} from 'src/shared/decorators/errors'
 
@@ -321,14 +322,15 @@ class Gauge extends Component<Props> {
     let valueString
 
     if (decimalPlaces.isEnforced) {
+      const digits = Math.min(decimalPlaces.digits, MAX_TOLOCALESTRING_VAL)
       valueString = value.toLocaleString(undefined, {
         minimumFractionDigits: 0,
-        maximumFractionDigits: decimalPlaces.digits,
+        maximumFractionDigits: digits,
       })
     } else {
       valueString = value.toLocaleString(undefined, {
         minimumFractionDigits: 0,
-        maximumFractionDigits: 20,
+        maximumFractionDigits: MAX_TOLOCALESTRING_VAL,
       })
     }
 
@@ -341,14 +343,15 @@ class Gauge extends Component<Props> {
     let valueString
 
     if (decimalPlaces.isEnforced) {
+      const digits = Math.min(decimalPlaces.digits, MAX_TOLOCALESTRING_VAL)
       valueString = value.toLocaleString(undefined, {
-        minimumFractionDigits: decimalPlaces.digits,
-        maximumFractionDigits: decimalPlaces.digits,
+        minimumFractionDigits: digits,
+        maximumFractionDigits: digits,
       })
     } else {
       valueString = value.toLocaleString(undefined, {
         minimumFractionDigits: 0,
-        maximumFractionDigits: 20,
+        maximumFractionDigits: MAX_TOLOCALESTRING_VAL,
       })
     }