metrics-on-canvas review feedback updates.

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

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

@@ -1,14 +1,35 @@
 import _ from 'lodash';
 import d3 from 'd3';
-import { formatMetric } from './string-utils';
-import { colors } from './color-utils';
+import { formatMetricSvg } from './string-utils';
+import { getNodeColorDark as colors } from './color-utils';
+import React from 'react';
 
 
+export function getClipPathDefinition(clipId, size, height,
+                                      x = -size * 0.5, y = size * 0.5 - height) {
+  return (
+    <defs>
+      <clipPath id={clipId}>
+        <rect
+          width={size}
+          height={size}
+          x={x}
+          y={y}
+          />
+      </clipPath>
+    </defs>
+  );
+}
+
+
+//
+// Open files, 100k should be enought for anyone?
 const openFilesScale = d3.scale.log().domain([1, 100000]).range([0, 1]);
 //
 // loadScale(1) == 0.5; E.g. a nicely balanced system :).
 const loadScale = d3.scale.log().domain([0.01, 100]).range([0, 1]);
 
+
 export function getMetricValue(metric, size) {
   if (!metric) {
     return {height: 0, value: null, formattedValue: 'n/a'};
@@ -17,40 +38,42 @@ export function getMetricValue(metric, size) {
   const value = m.value;
 
   let valuePercentage = value === 0 ? 0 : value / m.max;
+  let max = m.max;
   if (m.id === 'open_files_count') {
     valuePercentage = openFilesScale(value);
+    max = null;
   } else if (_.includes(['load1', 'load5', 'load15'], m.id)) {
     valuePercentage = loadScale(value);
+    max = null;
   }
 
   let displayedValue = Number(value).toFixed(1);
-  if (displayedValue > 0) {
+  if (displayedValue > 0 && (!max || displayedValue < max)) {
     const baseline = 0.1;
-    displayedValue = valuePercentage * (1 - baseline) + baseline;
+    displayedValue = valuePercentage * (1 - baseline * 2) + baseline;
+  } else if (displayedValue >= m.max && displayedValue > 0) {
+    displayedValue = 1;
   }
   const height = size * displayedValue;
 
   return {
     height,
-    value,
-    formattedValue: formatMetric(value, m, true)
+    hasMetric: value !== null,
+    formattedValue: formatMetricSvg(value, m)
   };
 }
 
 
 export function getMetricColor(metric) {
   const selectedMetric = metric && metric.get('id');
-  // bluey
-  if (/memory/.test(selectedMetric)) {
-    return '#1f77b4';
+  if (/mem/.test(selectedMetric)) {
+    return colors('p', 'a');
   } else if (/cpu/.test(selectedMetric)) {
-    return colors('cpu');
+    return colors('z', 'a');
   } else if (/files/.test(selectedMetric)) {
-    // return colors('files');
-    // purple
-    return '#9467bd';
+    return colors('t', 'a');
   } else if (/load/.test(selectedMetric)) {
-    return colors('load');
+    return colors('a', 'a');
   }
   return 'steelBlue';
 }

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;