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

Different metrics get different fill colors

Browse Source
This commit is contained in:
Simon Howe
2016-03-14 12:45:23 +01:00
parent 0df2a2bce4
commit 439b3aaed8
6 changed files with 30 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

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

8
client/app/scripts/charts/node-shape-heptagon.js
View File

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

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

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

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

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

5
client/app/scripts/charts/node.js
View File

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

16
client/app/scripts/utils/data-utils.js
View File

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