github/weave-scope
1
0
Fork 0
mirror of https://github.com/weaveworks/scope.git synced 2026-03-04 18:51:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Metric fill color based on node color

Browse Source
This commit is contained in:
Simon Howe
2016-03-10 19:29:38 +01:00
parent eb66800496
commit 0df2a2bce4
3 changed files with 16 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
client/app/scripts/charts/node-shape-circle.js
View File

@@ -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))} />}

6
client/app/scripts/charts/node-shape-hex.js
View File

@@ -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}

7
client/app/scripts/charts/node-shape-square.js
View File

@@ -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))} />}