splitting into more files

packages/grafana-ui/src/utils/ValueFormats/arithmeticFormatters.test.ts

+import { toHex, toHex0x } from './arithmeticFormatters';
+
+describe('hex', () => {
+  it('positive integer', () => {
+    const str = toHex(100, 0);
+    expect(str).toBe('64');
+  });
+  it('negative integer', () => {
+    const str = toHex(-100, 0);
+    expect(str).toBe('-64');
+  });
+  it('positive float', () => {
+    const str = toHex(50.52, 1);
+    expect(str).toBe('32.8');
+  });
+  it('negative float', () => {
+    const str = toHex(-50.333, 2);
+    expect(str).toBe('-32.547AE147AE14');
+  });
+});
+
+describe('hex 0x', () => {
+  it('positive integeter', () => {
+    const str = toHex0x(7999, 0);
+    expect(str).toBe('0x1F3F');
+  });
+  it('negative integer', () => {
+    const str = toHex0x(-584, 0);
+    expect(str).toBe('-0x248');
+  });
+
+  it('positive float', () => {
+    const str = toHex0x(74.443, 3);
+    expect(str).toBe('0x4A.716872B020C4');
+  });
+  it('negative float', () => {
+    const str = toHex0x(-65.458, 1);
+    expect(str).toBe('-0x41.8');
+  });
+});

packages/grafana-ui/src/utils/ValueFormats/arithmeticFormatters.ts

+import { toFixed } from './valueFormats';
+
+export function toPercent(size: number, decimals: number) {
+  if (size === null) {
+    return '';
+  }
+  return toFixed(size, decimals) + '%';
+}
+
+export function toPercentUnit(size: number, decimals: number) {
+  if (size === null) {
+    return '';
+  }
+  return toFixed(100 * size, decimals) + '%';
+}
+
+export function toHex0x(value: number, decimals: number) {
+  if (value == null) {
+    return '';
+  }
+  const hexString = toHex(value, decimals);
+  if (hexString.substring(0, 1) === '-') {
+    return '-0x' + hexString.substring(1);
+  }
+  return '0x' + hexString;
+}
+
+export function toHex(value: number, decimals: number) {
+  if (value == null) {
+    return '';
+  }
+  return parseFloat(toFixed(value, decimals))
+    .toString(16)
+    .toUpperCase();
+}
+
+export function sci(value: number, decimals: number) {
+  if (value == null) {
+    return '';
+  }
+  return value.toExponential(decimals);
+}

packages/grafana-ui/src/utils/ValueFormats/dateTimeFormatters.test.ts

+import moment from 'moment';
+import {
+  dateTimeAsIso,
+  dateTimeAsUS,
+  dateTimeFromNow,
+  Interval,
+  toClock,
+  toDuration,
+  toDurationInMilliseconds,
+  toDurationInSeconds,
+} from './dateTimeFormatters';
+
+describe('date time formats', () => {
+  const epoch = 1505634997920;
+  const utcTime = moment.utc(epoch);
+  const browserTime = moment(epoch);
+
+  it('should format as iso date', () => {
+    const expected = browserTime.format('YYYY-MM-DD HH:mm:ss');
+    const actual = dateTimeAsIso(epoch, 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as iso date (in UTC)', () => {
+    const expected = utcTime.format('YYYY-MM-DD HH:mm:ss');
+    const actual = dateTimeAsIso(epoch, 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as iso date and skip date when today', () => {
+    const now = moment();
+    const expected = now.format('HH:mm:ss');
+    const actual = dateTimeAsIso(now.valueOf(), 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as iso date (in UTC) and skip date when today', () => {
+    const now = moment.utc();
+    const expected = now.format('HH:mm:ss');
+    const actual = dateTimeAsIso(now.valueOf(), 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as US date', () => {
+    const expected = browserTime.format('MM/DD/YYYY h:mm:ss a');
+    const actual = dateTimeAsUS(epoch, 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as US date (in UTC)', () => {
+    const expected = utcTime.format('MM/DD/YYYY h:mm:ss a');
+    const actual = dateTimeAsUS(epoch, 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as US date and skip date when today', () => {
+    const now = moment();
+    const expected = now.format('h:mm:ss a');
+    const actual = dateTimeAsUS(now.valueOf(), 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as US date (in UTC) and skip date when today', () => {
+    const now = moment.utc();
+    const expected = now.format('h:mm:ss a');
+    const actual = dateTimeAsUS(now.valueOf(), 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as from now with days', () => {
+    const daysAgo = moment().add(-7, 'd');
+    const expected = '7 days ago';
+    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as from now with days (in UTC)', () => {
+    const daysAgo = moment.utc().add(-7, 'd');
+    const expected = '7 days ago';
+    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as from now with minutes', () => {
+    const daysAgo = moment().add(-2, 'm');
+    const expected = '2 minutes ago';
+    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, false);
+    expect(actual).toBe(expected);
+  });
+
+  it('should format as from now with minutes (in UTC)', () => {
+    const daysAgo = moment.utc().add(-2, 'm');
+    const expected = '2 minutes ago';
+    const actual = dateTimeFromNow(daysAgo.valueOf(), 0, 0, true);
+    expect(actual).toBe(expected);
+  });
+});
+
+describe('duration', () => {
+  it('0 milliseconds', () => {
+    const str = toDurationInMilliseconds(0, 0);
+    expect(str).toBe('0 milliseconds');
+  });
+  it('1 millisecond', () => {
+    const str = toDurationInMilliseconds(1, 0);
+    expect(str).toBe('1 millisecond');
+  });
+  it('-1 millisecond', () => {
+    const str = toDurationInMilliseconds(-1, 0);
+    expect(str).toBe('1 millisecond ago');
+  });
+  it('seconds', () => {
+    const str = toDurationInSeconds(1, 0);
+    expect(str).toBe('1 second');
+  });
+  it('minutes', () => {
+    const str = toDuration(1, 0, Interval.Minute);
+    expect(str).toBe('1 minute');
+  });
+  it('hours', () => {
+    const str = toDuration(1, 0, Interval.Hour);
+    expect(str).toBe('1 hour');
+  });
+  it('days', () => {
+    const str = toDuration(1, 0, Interval.Day);
+    expect(str).toBe('1 day');
+  });
+  it('weeks', () => {
+    const str = toDuration(1, 0, Interval.Week);
+    expect(str).toBe('1 week');
+  });
+  it('months', () => {
+    const str = toDuration(1, 0, Interval.Month);
+    expect(str).toBe('1 month');
+  });
+  it('years', () => {
+    const str = toDuration(1, 0, Interval.Year);
+    expect(str).toBe('1 year');
+  });
+  it('decimal days', () => {
+    const str = toDuration(1.5, 2, Interval.Day);
+    expect(str).toBe('1 day, 12 hours, 0 minutes');
+  });
+  it('decimal months', () => {
+    const str = toDuration(1.5, 3, Interval.Month);
+    expect(str).toBe('1 month, 2 weeks, 1 day, 0 hours');
+  });
+  it('no decimals', () => {
+    const str = toDuration(38898367008, 0, Interval.Millisecond);
+    expect(str).toBe('1 year');
+  });
+  it('1 decimal', () => {
+    const str = toDuration(38898367008, 1, Interval.Millisecond);
+    expect(str).toBe('1 year, 2 months');
+  });
+  it('too many decimals', () => {
+    const str = toDuration(38898367008, 20, Interval.Millisecond);
+    expect(str).toBe('1 year, 2 months, 3 weeks, 4 days, 5 hours, 6 minutes, 7 seconds, 8 milliseconds');
+  });
+  it('floating point error', () => {
+    const str = toDuration(36993906007, 8, Interval.Millisecond);
+    expect(str).toBe('1 year, 2 months, 0 weeks, 3 days, 4 hours, 5 minutes, 6 seconds, 7 milliseconds');
+  });
+});
+
+describe('clock', () => {
+  it('size less than 1 second', () => {
+    const str = toClock(999, 0);
+    expect(str).toBe('999ms');
+  });
+  describe('size less than 1 minute', () => {
+    it('default', () => {
+      const str = toClock(59999);
+      expect(str).toBe('59s:999ms');
+    });
+    it('decimals equals 0', () => {
+      const str = toClock(59999, 0);
+      expect(str).toBe('59s');
+    });
+  });
+  describe('size less than 1 hour', () => {
+    it('default', () => {
+      const str = toClock(3599999);
+      expect(str).toBe('59m:59s:999ms');
+    });
+    it('decimals equals 0', () => {
+      const str = toClock(3599999, 0);
+      expect(str).toBe('59m');
+    });
+    it('decimals equals 1', () => {
+      const str = toClock(3599999, 1);
+      expect(str).toBe('59m:59s');
+    });
+  });
+  describe('size greater than or equal 1 hour', () => {
+    it('default', () => {
+      const str = toClock(7199999);
+      expect(str).toBe('01h:59m:59s:999ms');
+    });
+    it('decimals equals 0', () => {
+      const str = toClock(7199999, 0);
+      expect(str).toBe('01h');
+    });
+    it('decimals equals 1', () => {
+      const str = toClock(7199999, 1);
+      expect(str).toBe('01h:59m');
+    });
+    it('decimals equals 2', () => {
+      const str = toClock(7199999, 2);
+      expect(str).toBe('01h:59m:59s');
+    });
+  });
+  describe('size greater than or equal 1 day', () => {
+    it('default', () => {
+      const str = toClock(89999999);
+      expect(str).toBe('24h:59m:59s:999ms');
+    });
+    it('decimals equals 0', () => {
+      const str = toClock(89999999, 0);
+      expect(str).toBe('24h');
+    });
+    it('decimals equals 1', () => {
+      const str = toClock(89999999, 1);
+      expect(str).toBe('24h:59m');
+    });
+    it('decimals equals 2', () => {
+      const str = toClock(89999999, 2);
+      expect(str).toBe('24h:59m:59s');
+    });
+  });
+});

packages/grafana-ui/src/utils/ValueFormats/dateTimeFormatters.ts

+import { toFixed, toFixedScaled } from './valueFormats';
+import moment from 'moment';
+
+interface IntervalsInSeconds {
+  [interval: string]: number;
+}
+
+export enum Interval {
+  Year = 'year',
+  Month = 'month',
+  Week = 'week',
+  Day = 'day',
+  Hour = 'hour',
+  Minute = 'minute',
+  Second = 'second',
+  Millisecond = 'millisecond',
+}
+
+const INTERVALS_IN_SECONDS: IntervalsInSeconds = {
+  [Interval.Year]: 31536000,
+  [Interval.Month]: 2592000,
+  [Interval.Week]: 604800,
+  [Interval.Day]: 86400,
+  [Interval.Hour]: 3600,
+  [Interval.Minute]: 60,
+  [Interval.Second]: 1,
+  [Interval.Millisecond]: 0.001,
+};
+
+export function toNanoSeconds(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 1000) {
+    return toFixed(size, decimals) + ' ns';
+  } else if (Math.abs(size) < 1000000) {
+    return toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' µs');
+  } else if (Math.abs(size) < 1000000000) {
+    return toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, ' ms');
+  } else if (Math.abs(size) < 60000000000) {
+    return toFixedScaled(size / 1000000000, decimals, scaledDecimals, 9, ' s');
+  } else {
+    return toFixedScaled(size / 60000000000, decimals, scaledDecimals, 12, ' min');
+  }
+}
+
+export function toMicroSeconds(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 1000) {
+    return toFixed(size, decimals) + ' µs';
+  } else if (Math.abs(size) < 1000000) {
+    return toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' ms');
+  } else {
+    return toFixedScaled(size / 1000000, decimals, scaledDecimals, 6, ' s');
+  }
+}
+
+export function toMilliSeconds(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 1000) {
+    return toFixed(size, decimals) + ' ms';
+  } else if (Math.abs(size) < 60000) {
+    // Less than 1 min
+    return toFixedScaled(size / 1000, decimals, scaledDecimals, 3, ' s');
+  } else if (Math.abs(size) < 3600000) {
+    // Less than 1 hour, divide in minutes
+    return toFixedScaled(size / 60000, decimals, scaledDecimals, 5, ' min');
+  } else if (Math.abs(size) < 86400000) {
+    // Less than one day, divide in hours
+    return toFixedScaled(size / 3600000, decimals, scaledDecimals, 7, ' hour');
+  } else if (Math.abs(size) < 31536000000) {
+    // Less than one year, divide in days
+    return toFixedScaled(size / 86400000, decimals, scaledDecimals, 8, ' day');
+  }
+
+  return toFixedScaled(size / 31536000000, decimals, scaledDecimals, 10, ' year');
+}
+
+export function toSeconds(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  // Less than 1 µs, divide in ns
+  if (Math.abs(size) < 0.000001) {
+    return toFixedScaled(size * 1e9, decimals, scaledDecimals - decimals, -9, ' ns');
+  }
+  // Less than 1 ms, divide in µs
+  if (Math.abs(size) < 0.001) {
+    return toFixedScaled(size * 1e6, decimals, scaledDecimals - decimals, -6, ' µs');
+  }
+  // Less than 1 second, divide in ms
+  if (Math.abs(size) < 1) {
+    return toFixedScaled(size * 1e3, decimals, scaledDecimals - decimals, -3, ' ms');
+  }
+
+  if (Math.abs(size) < 60) {
+    return toFixed(size, decimals) + ' s';
+  } else if (Math.abs(size) < 3600) {
+    // Less than 1 hour, divide in minutes
+    return toFixedScaled(size / 60, decimals, scaledDecimals, 1, ' min');
+  } else if (Math.abs(size) < 86400) {
+    // Less than one day, divide in hours
+    return toFixedScaled(size / 3600, decimals, scaledDecimals, 4, ' hour');
+  } else if (Math.abs(size) < 604800) {
+    // Less than one week, divide in days
+    return toFixedScaled(size / 86400, decimals, scaledDecimals, 5, ' day');
+  } else if (Math.abs(size) < 31536000) {
+    // Less than one year, divide in week
+    return toFixedScaled(size / 604800, decimals, scaledDecimals, 6, ' week');
+  }
+
+  return toFixedScaled(size / 3.15569e7, decimals, scaledDecimals, 7, ' year');
+}
+
+export function toMinutes(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 60) {
+    return toFixed(size, decimals) + ' min';
+  } else if (Math.abs(size) < 1440) {
+    return toFixedScaled(size / 60, decimals, scaledDecimals, 2, ' hour');
+  } else if (Math.abs(size) < 10080) {
+    return toFixedScaled(size / 1440, decimals, scaledDecimals, 3, ' day');
+  } else if (Math.abs(size) < 604800) {
+    return toFixedScaled(size / 10080, decimals, scaledDecimals, 4, ' week');
+  } else {
+    return toFixedScaled(size / 5.25948e5, decimals, scaledDecimals, 5, ' year');
+  }
+}
+
+export function toHours(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 24) {
+    return toFixed(size, decimals) + ' hour';
+  } else if (Math.abs(size) < 168) {
+    return toFixedScaled(size / 24, decimals, scaledDecimals, 2, ' day');
+  } else if (Math.abs(size) < 8760) {
+    return toFixedScaled(size / 168, decimals, scaledDecimals, 3, ' week');
+  } else {
+    return toFixedScaled(size / 8760, decimals, scaledDecimals, 4, ' year');
+  }
+}
+
+export function toDays(size: number, decimals: number, scaledDecimals: number) {
+  if (size === null) {
+    return '';
+  }
+
+  if (Math.abs(size) < 7) {
+    return toFixed(size, decimals) + ' day';
+  } else if (Math.abs(size) < 365) {
+    return toFixedScaled(size / 7, decimals, scaledDecimals, 2, ' week');
+  } else {
+    return toFixedScaled(size / 365, decimals, scaledDecimals, 3, ' year');
+  }
+}
+
+export function toDuration(size: number, decimals: number, timeScale: Interval): string {
+  if (size === null) {
+    return '';
+  }
+  if (size === 0) {
+    return '0 ' + timeScale + 's';
+  }
+  if (size < 0) {
+    return toDuration(-size, decimals, timeScale) + ' ago';
+  }
+
+  const units = [
+    { long: Interval.Year },
+    { long: Interval.Month },
+    { long: Interval.Week },
+    { long: Interval.Day },
+    { long: Interval.Hour },
+    { long: Interval.Minute },
+    { long: Interval.Second },
+    { long: Interval.Millisecond },
+  ];
+  // convert $size to milliseconds
+  // intervals_in_seconds uses seconds (duh), convert them to milliseconds here to minimize floating point errors
+  size *= INTERVALS_IN_SECONDS[timeScale] * 1000;
+
+  const strings = [];
+  // after first value >= 1 print only $decimals more
+  let decrementDecimals = false;
+  for (let i = 0; i < units.length && decimals >= 0; i++) {
+    const interval = INTERVALS_IN_SECONDS[units[i].long] * 1000;
+    const value = size / interval;
+    if (value >= 1 || decrementDecimals) {
+      decrementDecimals = true;
+      const floor = Math.floor(value);
+      const unit = units[i].long + (floor !== 1 ? 's' : '');
+      strings.push(floor + ' ' + unit);
+      size = size % interval;
+      decimals--;
+    }
+  }
+
+  return strings.join(', ');
+}
+
+export function toClock(size: number, decimals?: number) {
+  if (size === null) {
+    return '';
+  }
+
+  // < 1 second
+  if (size < 1000) {
+    return moment.utc(size).format('SSS\\m\\s');
+  }
+
+  // < 1 minute
+  if (size < 60000) {
+    let format = 'ss\\s:SSS\\m\\s';
+    if (decimals === 0) {
+      format = 'ss\\s';
+    }
+    return moment.utc(size).format(format);
+  }
+
+  // < 1 hour
+  if (size < 3600000) {
+    let format = 'mm\\m:ss\\s:SSS\\m\\s';
+    if (decimals === 0) {
+      format = 'mm\\m';
+    } else if (decimals === 1) {
+      format = 'mm\\m:ss\\s';
+    }
+    return moment.utc(size).format(format);
+  }
+
+  let format = 'mm\\m:ss\\s:SSS\\m\\s';
+
+  const hours = `${('0' + Math.floor(moment.duration(size, 'milliseconds').asHours())).slice(-2)}h`;
+
+  if (decimals === 0) {
+    format = '';
+  } else if (decimals === 1) {
+    format = 'mm\\m';
+  } else if (decimals === 2) {
+    format = 'mm\\m:ss\\s';
+  }
+
+  return format ? `${hours}:${moment.utc(size).format(format)}` : hours;
+}
+
+export function toDurationInMilliseconds(size: number, decimals: number) {
+  return toDuration(size, decimals, Interval.Millisecond);
+}
+
+export function toDurationInSeconds(size: number, decimals: number) {
+  return toDuration(size, decimals, Interval.Second);
+}
+
+export function toDurationInHoursMinutesSeconds(size: number) {
+  const strings = [];
+  const numHours = Math.floor(size / 3600);
+  const numMinutes = Math.floor((size % 3600) / 60);
+  const numSeconds = Math.floor((size % 3600) % 60);
+  numHours > 9 ? strings.push('' + numHours) : strings.push('0' + numHours);
+  numMinutes > 9 ? strings.push('' + numMinutes) : strings.push('0' + numMinutes);
+  numSeconds > 9 ? strings.push('' + numSeconds) : strings.push('0' + numSeconds);
+  return strings.join(':');
+}
+
+export function toTimeTicks(size: number, decimals: number, scaledDecimals: number) {
+  return toSeconds(size, decimals, scaledDecimals);
+}
+
+export function toClockMilliseconds(size: number, decimals: number) {
+  return toClock(size, decimals);
+}
+
+export function toClockSeconds(size: number, decimals: number) {
+  return toClock(size * 1000, decimals);
+}
+
+export function dateTimeAsIso(value: number, decimals: number, scaledDecimals: number, isUtc: boolean) {
+  const time = isUtc ? moment.utc(value) : moment(value);
+
+  if (moment().isSame(value, 'day')) {
+    return time.format('HH:mm:ss');
+  }
+  return time.format('YYYY-MM-DD HH:mm:ss');
+}
+
+export function dateTimeAsUS(value: number, decimals: number, scaledDecimals: number, isUtc: boolean) {
+  const time = isUtc ? moment.utc(value) : moment(value);
+
+  if (moment().isSame(value, 'day')) {
+    return time.format('h:mm:ss a');
+  }
+  return time.format('MM/DD/YYYY h:mm:ss a');
+}
+
+export function dateTimeFromNow(value: number, decimals: number, scaledDecimals: number, isUtc: boolean) {
+  const time = isUtc ? moment.utc(value) : moment(value);
+  return time.fromNow();
+}

packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.test.ts

+import { currency } from './symbolFormatters';
+
+describe('Currency', () => {
+  it('should format as usd', () => {
+    expect(currency('$')(1532.82, 1, -1)).toEqual('$1.53K');
+  });
+
+  it('should format as usd', () => {
+    expect(currency('kr')(1532.82, 1, -1)).toEqual('1.53K kr');
+  });
+});

packages/grafana-ui/src/utils/ValueFormats/symbolFormatters.ts

+import { scaledUnits } from './valueFormats';
+
+export function currency(symbol: string) {
+  const units = ['', 'K', 'M', 'B', 'T'];
+  const scaler = scaledUnits(1000, units);
+  return (size: number, decimals: number, scaledDecimals: number) => {
+    if (size === null) {
+      return '';
+    }
+    const scaled = scaler(size, decimals, scaledDecimals);
+    return symbol + scaled;
+  };
+}
+
+export function binarySIPrefix(unit: string, offset = 0) {
+  const prefixes = ['', 'Ki', 'Mi', 'Gi', 'Ti', 'Pi', 'Ei', 'Zi', 'Yi'].slice(offset);
+  const units = prefixes.map(p => {
+    return ' ' + p + unit;
+  });
+  return scaledUnits(1024, units);
+}
+
+export function decimalSIPrefix(unit: string, offset = 0) {
+  let prefixes = ['n', 'µ', 'm', '', 'k', 'M', 'G', 'T', 'P', 'E', 'Z', 'Y'];
+  prefixes = prefixes.slice(3 + (offset || 0));
+  const units = prefixes.map(p => {
+    return ' ' + p + unit;
+  });
+  return scaledUnits(1000, units);
+}

packages/grafana-ui/src/utils/ValueFormats/valueFormats.ts

+import { getCategories } from './categories';
+
+type ValueFormatter = (value: number, decimals?: number, scaledDecimals?: number, isUtc?: boolean) => string;
+
+interface ValueFormat {
+  name: string;
+  id: string;
+  fn: ValueFormatter;
+}
+
+export interface ValueFormatCategory {
+  name: string;
+  formats: ValueFormat[];
+}
+
+interface ValueFormatterIndex {
+  [id: string]: ValueFormatter;
+}
+
+// Globals & formats cache
+let categories: ValueFormatCategory[] = [];
+const index: ValueFormatterIndex = {};
+let hasBuildIndex = false;
+
+export function toFixed(value: number, decimals?: number): string {
+  if (value === null) {
+    return '';
+  }
+
+  const factor = decimals ? Math.pow(10, Math.max(0, decimals)) : 1;
+  const formatted = String(Math.round(value * factor) / factor);
+
+  // if exponent return directly
+  if (formatted.indexOf('e') !== -1 || value === 0) {
+    return formatted;
+  }
+
+  // If tickDecimals was specified, ensure that we have exactly that
+  // much precision; otherwise default to the value's own precision.
+  if (decimals != null) {
+    const decimalPos = formatted.indexOf('.');
+    const precision = decimalPos === -1 ? 0 : formatted.length - decimalPos - 1;
+    if (precision < decimals) {
+      return (precision ? formatted : formatted + '.') + String(factor).substr(1, decimals - precision);
+    }
+  }
+
+  return formatted;
+}
+
+export function toFixedScaled(
+  value: number,
+  decimals: number,
+  scaledDecimals: number,
+  additionalDecimals: number,
+  ext: string
+) {
+  if (scaledDecimals === null) {
+    return toFixed(value, decimals) + ext;
+  } else {
+    return toFixed(value, scaledDecimals + additionalDecimals) + ext;
+  }
+}
+
+export function toFixedUnit(unit: string) {
+  return (size: number, decimals: number) => {
+    if (size === null) {
+      return '';
+    }
+    return toFixed(size, decimals) + ' ' + unit;
+  };
+}
+
+// Formatter which scales the unit string geometrically according to the given
+// numeric factor. Repeatedly scales the value down by the factor until it is
+// less than the factor in magnitude, or the end of the array is reached.
+export function scaledUnits(factor: number, extArray: string[]) {
+  return (size: number, decimals: number, scaledDecimals: number) => {
+    if (size === null) {
+      return '';
+    }
+
+    let steps = 0;
+    const limit = extArray.length;
+
+    while (Math.abs(size) >= factor) {
+      steps++;
+      size /= factor;
+
+      if (steps >= limit) {
+        return 'NA';
+      }
+    }
+
+    if (steps > 0 && scaledDecimals !== null) {
+      decimals = scaledDecimals + 3 * steps;
+    }
+
+    return toFixed(size, decimals) + extArray[steps];
+  };
+}
+
+export function locale(value: number, decimals: number) {
+  if (value == null) {
+    return '';
+  }
+  return value.toLocaleString(undefined, { maximumFractionDigits: decimals });
+}
+
+function buildFormats() {
+  categories = getCategories();
+
+  for (const cat of categories) {
+    for (const format of cat.formats) {
+      index[format.id] = format.fn;
+    }
+  }
+
+  hasBuildIndex = true;
+}
+
+export function getValueFormat(id: string): ValueFormatter {
+  if (!hasBuildIndex) {
+    buildFormats();
+  }
+
+  return index[id];
+}
+
+export function getValueFormatterIndex(): ValueFormatterIndex {
+  if (!hasBuildIndex) {
+    buildFormats();
+  }
+
+  return index;
+}
+
+export function getUnitFormats() {
+  if (!hasBuildIndex) {
+    buildFormats();
+  }
+
+  return categories.map(cat => {
+    return {
+      text: cat.name,
+      submenu: cat.formats.map(format => {
+        return {
+          text: format.name,
+          id: format.id,
+        };
+      }),
+    };
+  });
+}

packages/grafana-ui/src/utils/index.ts

 export * from './processTimeSeries';
-export * from './valueFormats';
+export * from './ValueFormats/valueFormats';