initial design for way to build value formats lazily and a backward compatability layer via Proxy

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

@@ -1 +1,2 @@
 export * from './processTimeSeries';
+export * from './valueFormats';

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

@@ -0,0 +1,104 @@
+type ValueFormatter = (value: number, decimals?: number, scaledDecimals?: number) => string;
+
+interface ValueFormat {
+  name: string;
+  id: string;
+  fn: ValueFormatter;
+}
+
+interface ValueFormatCategory {
+  name: string;
+  formats: ValueFormat[];
+}
+
+interface ValueFormatterIndex {
+  [id: string]: ValueFormatter;
+}
+
+// Globals & formats cache
+let categories: ValueFormatCategory[] = [];
+const index: ValueFormatterIndex = {};
+let hasBuildIndex = false;
+
+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;
+}
+
+function buildFormats() {
+  categories = [
+    {
+      name: 'none',
+      formats: [
+        {
+          name: 'short',
+          id: 'short',
+          fn: toFixed,
+        },
+      ],
+    },
+  ];
+
+  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,
+          value: format.id,
+        };
+      }),
+    };
+  });
+}

public/app/core/utils/kbn.ts

@@ -1,5 +1,6 @@
 import _ from 'lodash';
 import moment from 'moment';
+import { getValueFormat, getValueFormatterIndex  } from '@grafana/ui';
 
 const kbn: any = {};
 
@@ -1218,4 +1219,24 @@ kbn.getUnitFormats = () => {
   ];
 };
 
+if (typeof Proxy !== "undefined") {
+  kbn.valueFormats = new Proxy(kbn.valueFormats, {
+    get(target, name, receiver) {
+      if (typeof name !== 'string') {
+        throw {message: `Value format ${String(name)} is not a string` };
+      }
+
+      const formatter = getValueFormat(name);
+      if  (formatter) {
+        return formatter;
+      }
+
+      // default to look here
+      return Reflect.get(target, name, receiver);
+    }
+  });
+} else {
+  kbn.valueFormats = getValueFormatterIndex();
+}
+
 export default kbn;

public/app/plugins/panel/graph2/GraphPanel.tsx

@@ -3,8 +3,14 @@ import _ from 'lodash';
 import React, { PureComponent } from 'react';
 import colors from 'app/core/utils/colors';
 
-// Components & Types
+// Utils
-import { Graph, PanelProps, NullValueMode, processTimeSeries } from '@grafana/ui';
+import { processTimeSeries } from '@grafana/ui/src/utils';
+
+// Components
+import { Graph } from '@grafana/ui';
+
+// Types
+import { PanelProps, NullValueMode } from '@grafana/ui/src/types';
 import { Options } from './types';
 
 interface Props extends PanelProps<Options> {}