From 439b3aaed808e9427b18bcbc93a6e42462dc38fc Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Mon, 14 Mar 2016 12:45:23 +0100
Subject: [PATCH] Different metrics get different fill colors

---
 client/app/scripts/charts/node-shape-circle.js   |  4 ++--
 client/app/scripts/charts/node-shape-heptagon.js |  8 ++++++--
 client/app/scripts/charts/node-shape-hex.js      |  4 ++--
 client/app/scripts/charts/node-shape-square.js   |  4 ++--
 client/app/scripts/charts/node.js                |  5 +++--
 client/app/scripts/utils/data-utils.js           | 16 +++++++++++++++-
 6 files changed, 30 insertions(+), 11 deletions(-)

diff --git a/client/app/scripts/charts/node-shape-circle.js b/client/app/scripts/charts/node-shape-circle.js
index 528ff0057..1d1769d33 100644
--- a/client/app/scripts/charts/node-shape-circle.js
+++ b/client/app/scripts/charts/node-shape-circle.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import {getMetricValue} from '../utils/data-utils.js';
+import {getMetricValue, getMetricColor} from '../utils/data-utils.js';
 
 export default function NodeShapeCircle({highlighted, size, color, metric}) {
   const hightlightNode = <circle r={size * 0.7} className="highlighted" />;
@@ -12,7 +12,7 @@ export default function NodeShapeCircle({highlighted, size, color, metric}) {
   });
   const metricStyle = {
     fillOpacity: 0.5,
-    fill: color
+    fill: getMetricColor()
   };
 
   return (
diff --git a/client/app/scripts/charts/node-shape-heptagon.js b/client/app/scripts/charts/node-shape-heptagon.js
index ef27e0b0e..bac92324f 100644
--- a/client/app/scripts/charts/node-shape-heptagon.js
+++ b/client/app/scripts/charts/node-shape-heptagon.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import d3 from 'd3';
 import classNames from 'classnames';
-import {getMetricValue} from '../utils/data-utils.js';
+import {getMetricValue, getMetricColor} from '../utils/data-utils.js';
 
 const line = d3.svg.line()
   .interpolate('cardinal-closed')
@@ -29,6 +29,10 @@ export default function NodeShapeHeptagon({highlighted, size, color, metric}) {
   const className = classNames('shape', {
     'metrics': value !== null
   });
+  const metricStyle = {
+    fillOpacity: 0.5,
+    fill: getMetricColor()
+  };
 
   return (
     <g className={className}>
@@ -45,7 +49,7 @@ export default function NodeShapeHeptagon({highlighted, size, color, metric}) {
       {highlighted && <path className="highlighted" {...pathProps(0.7)} />}
       <path className="border" stroke={color} {...pathProps(0.5)} />
       <path className="shadow" {...pathProps(0.45)} />
-      <path className="metric-fill" clipPath={`url(#${clipId})`} {...pathProps(0.45)} />
+      <path className="metric-fill" clipPath={`url(#${clipId})`} style={metricStyle} {...pathProps(0.45)} />
       {highlighted && value !== null ?
         <text dy="0.35em" style={{'textAnchor': 'middle'}}>{formattedValue}</text> :
         <circle className="node" r={Math.max(2, (size * 0.125))} />}
diff --git a/client/app/scripts/charts/node-shape-hex.js b/client/app/scripts/charts/node-shape-hex.js
index 00317097e..823daa382 100644
--- a/client/app/scripts/charts/node-shape-hex.js
+++ b/client/app/scripts/charts/node-shape-hex.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import d3 from 'd3';
 import classNames from 'classnames';
-import {getMetricValue} from '../utils/data-utils.js';
+import {getMetricValue, getMetricColor} from '../utils/data-utils.js';
 
 const line = d3.svg.line()
   .interpolate('cardinal-closed')
@@ -42,7 +42,7 @@ export default function NodeShapeHex({highlighted, size, color, metric}) {
   });
   const metricStyle = {
     fillOpacity: 0.5,
-    fill: color
+    fill: getMetricColor()
   };
 
   return (
diff --git a/client/app/scripts/charts/node-shape-square.js b/client/app/scripts/charts/node-shape-square.js
index f708db485..1984352a3 100644
--- a/client/app/scripts/charts/node-shape-square.js
+++ b/client/app/scripts/charts/node-shape-square.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import classNames from 'classnames';
-import {getMetricValue} from '../utils/data-utils.js';
+import {getMetricValue, getMetricColor} from '../utils/data-utils.js';
 
 export default function NodeShapeSquare({
   highlighted, size, color, rx = 0, ry = 0, metric
@@ -22,7 +22,7 @@ export default function NodeShapeSquare({
 
   const metricStyle = {
     fillOpacity: 0.5,
-    fill: color
+    fill: getMetricColor()
   };
 
   return (
diff --git a/client/app/scripts/charts/node.js b/client/app/scripts/charts/node.js
index 927a05725..b603a1b70 100644
--- a/client/app/scripts/charts/node.js
+++ b/client/app/scripts/charts/node.js
@@ -53,8 +53,9 @@ export default class Node extends React.Component {
     }
     let labelOffsetY = 18;
     let subLabelOffsetY = 35;
-    const color = getNodeColor(this.props.rank, this.props.label,
-                               this.props.pseudo);
+    // const color = this.props.metric ?  '#e2e2ec' : getNodeColor(
+    const color = getNodeColor(
+      this.props.rank, this.props.label, this.props.pseudo);
     const onMouseEnter = this.handleMouseEnter;
     const onMouseLeave = this.handleMouseLeave;
     const onMouseClick = this.handleMouseClick;
diff --git a/client/app/scripts/utils/data-utils.js b/client/app/scripts/utils/data-utils.js
index 8d57ba9d2..5a42a770c 100644
--- a/client/app/scripts/utils/data-utils.js
+++ b/client/app/scripts/utils/data-utils.js
@@ -87,7 +87,7 @@ const METRIC_FORMATS = {
   load1: 'number',
   load15: 'number',
   load5: 'number',
-  open_files_count: 'number',
+  open_files_count: 'integer',
   process_cpu_usage_percent: 'percent',
   process_memory_usage_bytes: 'filesize'
 };
@@ -128,3 +128,17 @@ export function getMetricValue(metric, size) {
     formattedValue: formatMetric(value, metricWithFormat, true)
   };
 }
+
+export function getMetricColor() {
+  const selectedMetric = AppStore.getSelectedMetric();
+  if (/memory/.test(selectedMetric)) {
+    return '#1f77b4';
+  } else if (/cpu/.test(selectedMetric)) {
+    return '#2ca02c';
+  } else if (/files/.test(selectedMetric)) {
+    return '#9467bd';
+  } else if (/load/.test(selectedMetric)) {
+    return '#17becf';
+  }
+  return 'steelBlue';
+}