Play w/ metric on canvas color and fix nested radius in squircles

- Remove node's grey-inner-border when showing metrics

client/app/scripts/charts/node-shape-circle.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import classNames from 'classnames';
 import {getMetricValue} from '../utils/data-utils.js';
 
 export default function NodeShapeCircle({highlighted, size, color, metric}) {
@@ -6,8 +7,12 @@ export default function NodeShapeCircle({highlighted, size, color, metric}) {
   const clipId = `mask-${Math.random()}`;
   const {height, value, formattedValue} = getMetricValue(metric, size);
 
+  const className = classNames('shape', {
+    'metrics': value !== null
+  });
+
   return (
-    <g className="shape">
+    <g className={className}>
       <defs>
         <clipPath id={clipId}>
           <rect

client/app/scripts/charts/node-shape-heptagon.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import d3 from 'd3';
+import classNames from 'classnames';
 import {getMetricValue} from '../utils/data-utils.js';
 
 const line = d3.svg.line()
@@ -25,8 +26,12 @@ export default function NodeShapeHeptagon({highlighted, size, color, metric}) {
   const clipId = `mask-${Math.random()}`;
   const {height, value, formattedValue} = getMetricValue(metric, size);
 
+  const className = classNames('shape', {
+    'metrics': value !== null
+  });
+
   return (
-    <g className="shape">
+    <g className={className}>
       <defs>
         <clipPath id={clipId}>
           <rect

client/app/scripts/charts/node-shape-hex.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import d3 from 'd3';
+import classNames from 'classnames';
 import {getMetricValue} from '../utils/data-utils.js';
 
 const line = d3.svg.line()
@@ -36,9 +37,12 @@ export default function NodeShapeHex({highlighted, size, color, metric}) {
 
   const clipId = `mask-${Math.random()}`;
   const {height, value, formattedValue} = getMetricValue(metric, size);
+  const className = classNames('shape', {
+    'metrics': value !== null
+  });
 
   return (
-    <g className="shape">
+    <g className={className}>
       <defs>
         <clipPath id={clipId}>
           <rect

client/app/scripts/charts/node-shape-square.js

@@ -1,23 +1,27 @@
 import React from 'react';
+import classNames from 'classnames';
 import {getMetricValue} from '../utils/data-utils.js';
 
 export default function NodeShapeSquare({
   highlighted, size, color, rx = 0, ry = 0, metric
 }) {
-  const rectProps = v => ({
+  const rectProps = (v, vr) => ({
     width: v * size * 2,
     height: v * size * 2,
-    rx: v * size * rx,
-    ry: v * size * ry,
+    rx: (vr || v) * size * rx,
+    ry: (vr || v) * size * ry,
     x: -size * v,
     y: -size * v
   });
 
   const clipId = `mask-${Math.random()}`;
   const {height, value, formattedValue} = getMetricValue(metric, size);
+  const className = classNames('shape', {
+    'metrics': value !== null
+  });
 
   return (
-    <g className="shape">
+    <g className={className}>
       <defs>
         <clipPath id={clipId}>
           <rect
@@ -29,9 +33,9 @@ export default function NodeShapeSquare({
         </clipPath>
       </defs>
       {highlighted && <rect className="highlighted" {...rectProps(0.7)} />}
-      <rect className="border" stroke={color} {...rectProps(0.5)} />
-      <rect className="shadow" {...rectProps(0.45)} />
-      <rect className="metric-fill" clipPath={`url(#${clipId})`} {...rectProps(0.45)} />
+      <rect className="border" stroke={color} {...rectProps(0.5, 0.5)} />
+      <rect className="shadow" {...rectProps(0.45, 0.39)} />
+      <rect className="metric-fill" clipPath={`url(#${clipId})`} {...rectProps(0.45, 0.39)} />
       {highlighted && value !== null ?
         <text dy="0.35em" style={{'textAnchor': 'middle'}}>{formattedValue}</text> :
         <circle className="node" r={Math.max(2, (size * 0.125))} />}

client/app/scripts/components/metric-selector.js

@@ -2,13 +2,10 @@ import React from 'react';
 import { selectMetric, lockMetric, unlockMetric } from '../actions/app-actions';
 import classNames from 'classnames';
 
-const CROSS = '\u274C';
+// const CROSS = '\u274C';
 // const MINUS = '\u2212';
 // const DOT = '\u2022';
 
-// docker_cpu_total_usage
-// docker_memory_usage
-
 function onMouseOver(k) {
   selectMetric(k);
 }
@@ -30,6 +27,9 @@ export default function MetricSelector({availableCanvasMetrics, selectedMetric,
     <div
       className="available-metrics"
       onMouseLeave={() => onMouseOut(lockedMetric)}>
+      <div className="sidebar-item">
+        METRICS
+      </div>
       {availableCanvasMetrics.map(({id, label}) => {
         const isLocked = (id === lockedMetric);
         const isSelected = (id === selectedMetric);
@@ -46,9 +46,7 @@ export default function MetricSelector({availableCanvasMetrics, selectedMetric,
             onClick={() => onMouseClick(id, lockedMetric)}>
             {label}
             {isLocked && <span className="sidebar-item-actions">
-              <span className="sidebar-item-action">
-                {CROSS}
-              </span>
+              <span className="sidebar-item-action fa fa-thumb-tack"></span>
             </span>}
           </div>
         );

client/app/styles/main.less

@@ -407,9 +407,13 @@ h2 {
       fill: @background-color;
     }
 
+    &.metrics .border {
+      fill: @background-lighter-color;
+    }
+
     .metric-fill {
       stroke: none;
-      fill: @background-darker-color;
+      fill: #A0BE7E;
     }
 
     .shadow {