From 0df2a2bce40598bf806a64f9669036d296714af7 Mon Sep 17 00:00:00 2001
From: Simon Howe <footless@gmail.com>
Date: Thu, 10 Mar 2016 19:29:38 +0100
Subject: [PATCH] Metric fill color based on node color

---
 client/app/scripts/charts/node-shape-circle.js | 6 +++++-
 client/app/scripts/charts/node-shape-hex.js    | 6 +++++-
 client/app/scripts/charts/node-shape-square.js | 7 ++++++-
 3 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/client/app/scripts/charts/node-shape-circle.js b/client/app/scripts/charts/node-shape-circle.js
index 227ea41f3..528ff0057 100644
--- a/client/app/scripts/charts/node-shape-circle.js
+++ b/client/app/scripts/charts/node-shape-circle.js
@@ -10,6 +10,10 @@ export default function NodeShapeCircle({highlighted, size, color, metric}) {
   const className = classNames('shape', {
     'metrics': value !== null
   });
+  const metricStyle = {
+    fillOpacity: 0.5,
+    fill: color
+  };
 
   return (
     <g className={className}>
@@ -26,7 +30,7 @@ export default function NodeShapeCircle({highlighted, size, color, metric}) {
       {highlighted && hightlightNode}
       <circle r={size * 0.5} className="border" stroke={color} />
       <circle r={size * 0.45} className="shadow" />
-      <circle r={size * 0.45} className="metric-fill" clipPath={`url(#${clipId})`} />
+      <circle r={size * 0.45} className="metric-fill" style={metricStyle} clipPath={`url(#${clipId})`} />
       {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 ba40003e4..00317097e 100644
--- a/client/app/scripts/charts/node-shape-hex.js
+++ b/client/app/scripts/charts/node-shape-hex.js
@@ -40,6 +40,10 @@ export default function NodeShapeHex({highlighted, size, color, metric}) {
   const className = classNames('shape', {
     'metrics': value !== null
   });
+  const metricStyle = {
+    fillOpacity: 0.5,
+    fill: color
+  };
 
   return (
     <g className={className}>
@@ -55,7 +59,7 @@ export default function NodeShapeHex({highlighted, size, color, metric}) {
       {highlighted && <path className="highlighted" {...pathProps(0.7)} />}
       <path className="border" stroke={color} {...pathProps(0.5)} />
       <path className="shadow" {...pathProps(shadowSize)} />
-      <path className="metric-fill" clipPath={`url(#${clipId})`} {...pathProps(shadowSize)} />
+      <path className="metric-fill" style={metricStyle} clipPath={`url(#${clipId})`} {...pathProps(shadowSize)} />
       {highlighted && value !== null ?
         <text dy="0.35em" style={{'textAnchor': 'middle'}}>
           {formattedValue}
diff --git a/client/app/scripts/charts/node-shape-square.js b/client/app/scripts/charts/node-shape-square.js
index ad553e67f..f708db485 100644
--- a/client/app/scripts/charts/node-shape-square.js
+++ b/client/app/scripts/charts/node-shape-square.js
@@ -20,6 +20,11 @@ export default function NodeShapeSquare({
     'metrics': value !== null
   });
 
+  const metricStyle = {
+    fillOpacity: 0.5,
+    fill: color
+  };
+
   return (
     <g className={className}>
       <defs>
@@ -35,7 +40,7 @@ export default function NodeShapeSquare({
       {highlighted && <rect className="highlighted" {...rectProps(0.7)} />}
       <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)} />
+      <rect className="metric-fill" style={metricStyle} 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))} />}