feat(ui): enable formatting line graph y ticks with binary prefix

CHANGELOG.md

@@ -1,3 +1,13 @@
+## UNRELEASED
+
+### Features
+
+1. [14059](https://github.com/influxdata/influxdb/pull/14059): Enable formatting line graph y ticks with binary prefix
+
+### Bug Fixes
+
+### UI Improvements
+
 ## v2.0.0-alpha.11 [2019-05-31]
 
 1. [14031](https://github.com/influxdata/influxdb/pull/14031): Correctly check if columnKeys include xColumn in heatmap

ui/src/dashboards/constants/cellEditor.ts

@@ -1,8 +1,8 @@
-import {Base, Scale} from 'src/types'
+import {Scale} from 'src/types'
 
 export const AXES_SCALE_OPTIONS = {
   LINEAR: Scale.Linear,
   LOG: Scale.Log,
-  BASE_2: Base.Two,
-  BASE_10: Base.Ten,
+  BASE_2: '2',
+  BASE_10: '10',
 }

ui/src/dashboards/resources.ts

@@ -13,7 +13,6 @@ import {
   TimeRange,
   QueryConfig,
   Scale,
-  Base,
 } from 'src/types'
 
 export const dashboard: Dashboard = {
@@ -133,15 +132,15 @@ export const axes: Axes = {
     label: '',
     prefix: '',
     suffix: '',
-    base: Base.Ten,
+    base: '10',
     scale: Scale.Linear,
   },
   y: {
     bounds: ['', ''],
     label: '',
     prefix: '',
     suffix: '',
-    base: Base.Ten,
+    base: '10',
     scale: Scale.Linear,
   },
 }

ui/src/shared/components/XYContainer.tsx

@@ -46,6 +46,7 @@ const XYContainer: FunctionComponent<Props> = ({
         prefix: yTickPrefix,
         suffix: yTickSuffix,
         bounds: yBounds,
+        base: yTickBase,
       },
     },
   },
@@ -94,7 +95,8 @@ const XYContainer: FunctionComponent<Props> = ({
   const yFormatter = getFormatter(
     table.getColumnType(yColumn),
     yTickPrefix,
-    yTickSuffix
+    yTickSuffix,
+    yTickBase
   )
 
   const config: Config = {

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

@@ -0,0 +1,28 @@
+import {formatNumber} from 'src/shared/utils/formatNumber'
+
+describe('formatNumber', () => {
+  test('can format numbers with no unit prefixes', () => {
+    expect(formatNumber(123456789.123456789)).toEqual('123456789.1235')
+  })
+
+  test('can format numbers with SI unit prefixes', () => {
+    expect(formatNumber(123456, '10')).toEqual('123.5k')
+    expect(formatNumber(123456789.123456789, '10')).toEqual('123.5M')
+    expect(formatNumber(12345678912345.123456789, '10')).toEqual('12.35T')
+  })
+
+  test('can format numbers with binary unit prefixes', () => {
+    expect(formatNumber(2 ** 10, '2')).toEqual('1K')
+    expect(formatNumber(2 ** 20, '2')).toEqual('1M')
+    expect(formatNumber(2 ** 30, '2')).toEqual('1G')
+  })
+
+  test('can format negative numbers with a binary unit prefix', () => {
+    expect(formatNumber(0 - 2 ** 30, '2')).toEqual('-1G')
+  })
+
+  test('formats small numbers without unit prefixes', () => {
+    expect(formatNumber(0.551249, '2')).toEqual('0.5512')
+    expect(formatNumber(0.551249, '10')).toEqual('0.5512')
+  })
+})

ui/src/shared/utils/formatNumber.ts

@@ -0,0 +1,33 @@
+// Libraries
+import {format} from 'd3-format'
+
+// Types
+import {Base} from 'src/types'
+
+const MAX_DECIMALS = 4 // We should eventually make this configurable
+
+const formatRaw = format(`.${MAX_DECIMALS}~f`) // e.g. "0.032"
+
+const formatSIPrefix = format(`.${MAX_DECIMALS}~s`) // e.g. "2.452M"
+
+const BINARY_PREFIXES = ['', 'K', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y']
+
+const formatBinaryPrefix = (t: number): string => {
+  const i = Math.floor(Math.log(Math.abs(t)) / Math.log(2 ** 10))
+
+  return `${formatRaw(t / 1024 ** i)}${BINARY_PREFIXES[i]}`
+}
+
+export const formatNumber = (t: number, base: Base = ''): string => {
+  const isSmallNumber = t >= -1 && t <= 1
+
+  if (base === '2' && !isSmallNumber) {
+    return formatBinaryPrefix(t)
+  }
+
+  if (base === '10' && !isSmallNumber) {
+    return formatSIPrefix(t)
+  }
+
+  return formatRaw(t)
+}

ui/src/shared/utils/mocks/resourceToTemplate.ts

@@ -7,7 +7,6 @@ import {
   XYViewGeom,
   Scale,
   QueryEditMode,
-  Base,
   Label,
   TaskStatus,
 } from 'src/types'
@@ -64,15 +63,15 @@ export const myView: View = {
         label: '',
         prefix: '',
         suffix: '',
-        base: Base.Ten,
+        base: '10',
         scale: Scale.Linear,
       },
       y: {
         bounds: ['', ''],
         label: '',
         prefix: '',
         suffix: '',
-        base: Base.Ten,
+        base: '10',
         scale: Scale.Linear,
       },
     },

ui/src/shared/utils/view.ts

@@ -64,15 +64,15 @@ function defaultLineViewProperties() {
         label: '',
         prefix: '',
         suffix: '',
-        base: Base.Ten,
+        base: '10' as Base,
         scale: Scale.Linear,
       },
       y: {
         bounds: ['', ''] as [string, string],
         label: '',
         prefix: '',
         suffix: '',
-        base: Base.Ten,
+        base: '10' as Base,
         scale: Scale.Linear,
       },
     },

ui/src/shared/utils/vis.ts

@@ -1,23 +1,11 @@
 // Libraries
-import {format} from 'd3-format'
 import {Table, ColumnType, LineInterpolation} from '@influxdata/vis'
 
-// Types
-import {XYViewGeom, Axis} from 'src/types'
-
-const MAX_DECIMALS = 3
-
-const formatSmallNumber = format(`.${MAX_DECIMALS}~f`) // e.g. "0.032"
-
-const formatLargeNumber = format(`.${MAX_DECIMALS}~s`) // e.g. "2.452M"
+// Utils
+import {formatNumber} from 'src/shared/utils/formatNumber'
 
-export const formatNumber = (t: number): string => {
-  if (t >= -1 && t <= 1) {
-    return formatSmallNumber(t)
-  }
-
-  return formatLargeNumber(t)
-}
+// Types
+import {XYViewGeom, Axis, Base} from 'src/types'
 
 /*
   A geom may be stored as "line", "step", "monotoneX", "bar", or "stacked", but
@@ -47,10 +35,11 @@ export const geomToInterpolation = (geom: XYViewGeom): LineInterpolation => {
 export const getFormatter = (
   columnType: ColumnType,
   prefix: string = '',
-  suffix: string = ''
+  suffix: string = '',
+  base: Base = ''
 ): null | ((x: any) => string) => {
   return columnType === 'number'
-    ? x => `${prefix}${formatNumber(x)}${suffix}`
+    ? x => `${prefix}${formatNumber(x, base)}${suffix}`
     : null
 }