metrics-on-canvas review feedback updates.

- Refactor some things.
- Fixes heptagon moc rendering
- Experiment w/ duller colors.

client/app/scripts/utils/string-utils.js

@@ -2,8 +2,10 @@ import React from 'react';
 import filesize from 'filesize';
 import d3 from 'd3';
 
+
 const formatLargeValue = d3.format('s');
 
+
 function renderHtml(text, unit) {
   return (
     <span className="metric-formatted">
@@ -14,6 +16,11 @@ function renderHtml(text, unit) {
 }
 
 
+function renderSvg(text, unit) {
+  return `${text}${unit}`;
+}
+
+
 function makeFormatters(renderFn) {
   const formatters = {
     filesize(value) {
@@ -45,13 +52,15 @@ function makeFormatters(renderFn) {
 }
 
 
-const formatters = makeFormatters(renderHtml);
-const svgFormatters = makeFormatters((text, unit) => `${text}${unit}`);
-
-export function formatMetric(value, opts, svg) {
-  const formatterBase = svg ? svgFormatters : formatters;
-  const formatter = opts && formatterBase[opts.format] ? opts.format : 'number';
-  return formatterBase[formatter](value);
+function makeFormatMetric(renderFn) {
+  const formatters = makeFormatters(renderFn);
+  return (value, opts) => {
+    const formatter = opts && formatters[opts.format] ? opts.format : 'number';
+    return formatters[formatter](value);
+  };
 }
 
+
+export const formatMetric = makeFormatMetric(renderHtml);
+export const formatMetricSvg = makeFormatMetric(renderSvg);
 export const formatDate = d3.time.format.iso;