fix(ui): Prevent negative zero and allow zero with decimal places (#16439)

* fix(ui): Prevent negative zero and allow zero with decimal places

* chore: update CHANGELOG

* fix(ui): Turn off lint rule no-compare-neg-zero

* test: add more tests by overriding prettier

* fix(ui): turn off lint rule for a specific usage, not universally

CHANGELOG.md

@@ -48,6 +48,7 @@
 1. [16430](https://github.com/influxdata/influxdb/pull/16430): Fixed table threshold bug that was defaulting set colors to the background.
 1. [16435](https://github.com/influxdata/influxdb/pull/16435): Time labels are no longer squished to the left
 1. [16427](https://github.com/influxdata/influxdb/pull/16427): Fixed underlying issue with disappearing queries made in Advanced Mode
+1. [16439](https://github.com/influxdata/influxdb/pull/16439): Prevent negative zero and allow zero to have decimal places
 
 ### UI Improvements
 

ui/src/shared/utils/formatStatValue.ts

@@ -1,8 +1,15 @@
-import {MAX_DECIMAL_PLACES} from 'src/dashboards/constants'
+// Libraries
 import {isNumber, isString} from 'lodash'
 
+// Types
 import {DecimalPlaces} from 'src/types/dashboards'
 
+// Constants
+import {MAX_DECIMAL_PLACES} from 'src/dashboards/constants'
+
+// Utils
+import {preventNegativeZero} from 'src/shared/utils/preventNegativeZero'
+
 interface FormatStatValueOptions {
   decimalPlaces?: DecimalPlaces
   prefix?: string
@@ -13,7 +20,7 @@ export const formatStatValue = (
   value: number | string = 0,
   {decimalPlaces, prefix, suffix}: FormatStatValueOptions = {}
 ): string => {
-  let localeFormattedValue = ''
+  let localeFormattedValue
 
   if (isNumber(value)) {
     let digits: number
@@ -26,15 +33,19 @@ export const formatStatValue = (
 
     const roundedValue = value.toFixed(digits)
 
-    localeFormattedValue = Number(roundedValue).toLocaleString(undefined, {
-      maximumFractionDigits: MAX_DECIMAL_PLACES,
-    })
+    localeFormattedValue =
+      Number(roundedValue) === 0
+        ? roundedValue
+        : Number(roundedValue).toLocaleString(undefined, {
+            maximumFractionDigits: MAX_DECIMAL_PLACES,
+          })
   } else if (isString(value)) {
     localeFormattedValue = value
   } else {
     return 'Data cannot be displayed'
   }
 
+  localeFormattedValue = preventNegativeZero(localeFormattedValue)
   const formattedValue = `${prefix || ''}${localeFormattedValue}${suffix || ''}`
 
   return formattedValue

ui/src/shared/utils/preventNegativeZero.test.ts

@@ -0,0 +1,43 @@
+import {preventNegativeZero} from 'src/shared/utils/preventNegativeZero'
+
+describe('preventNegativeZero', () => {
+  it('should not alter non-zero numbers', () => {
+    expect(preventNegativeZero(1)).toEqual(1)
+    expect(preventNegativeZero(0.000000000001)).toEqual(0.000000000001)
+    expect(preventNegativeZero(-456.78)).toEqual(-456.78)
+
+    let nonZeroString = '0.000000000000000000000000001'
+    expect(preventNegativeZero(nonZeroString)).toEqual(nonZeroString)
+
+    nonZeroString = '1234567890'
+    expect(preventNegativeZero(nonZeroString)).toEqual(nonZeroString)
+
+    nonZeroString = '-123456789.0001'
+    expect(preventNegativeZero(nonZeroString)).toEqual(nonZeroString)
+  })
+  it('should handle negative zero as a number', () => {
+    expect(preventNegativeZero(-0)).toEqual(0)
+    expect(preventNegativeZero(-0.0)).toEqual(0)
+
+    // prettier-ignore
+    expect(preventNegativeZero(-0.00)).toEqual(0)
+    // prettier-ignore
+    expect(preventNegativeZero(-0.000)).toEqual(0)
+    // prettier-ignore
+    expect(preventNegativeZero(-0.0000)).toEqual(0)
+    // prettier-ignore
+    expect(preventNegativeZero(-0.00)).toEqual(0.00)
+    // prettier-ignore
+    expect(preventNegativeZero(-0.000)).toEqual(0.000)
+    // prettier-ignore
+    expect(preventNegativeZero(-0.0000)).toEqual(0.0000)
+  })
+  it('should handle negative zero as a string', () => {
+    expect(preventNegativeZero('-0')).toEqual('0')
+    expect(preventNegativeZero('-0.0')).toEqual('0.0')
+    expect(preventNegativeZero('-0.00000000')).toEqual('0.00000000')
+
+    expect(preventNegativeZero('-0.0')).not.toEqual('0')
+    expect(preventNegativeZero('-0.00000000')).not.toEqual('0')
+  })
+})

ui/src/shared/utils/preventNegativeZero.ts

@@ -0,0 +1,9 @@
+export const preventNegativeZero = (
+  value: number | string
+): number | string => {
+  // eslint-disable-next-line no-compare-neg-zero
+  if (Number(value) === -0) {
+    return typeof value === 'number' ? 0 : value.replace(/-/g, '')
+  }
+  return value
+}