joyent-portal/spikes/graphs-topology/d3/client/graph/graph-node-metrics.js

48 lines
1.0 KiB
JavaScript
Raw Normal View History

2017-02-06 18:11:01 +02:00
const React = require('React');
const Styled = require('styled-components');
const GraphNodeButton = require('./graph-node-button');
const {
default: styled
} = Styled;
const StyledText = styled.text`
fill: white;
font-family: LibreFranklin;
font-size: 12px;
`;
class GraphNodeMetrics extends React.Component {
render() {
const {
metrics,
metricsPosition
} = this.props;
const metricSpacing = 18;
const metricsText = metrics.map((metric, index) => (
<StyledText x={0} y={12 + metricSpacing*index}>{`${metric.name}: ${metric.stat}`}</StyledText>
));
return (
<g transform={`translate(${metricsPosition.x}, ${metricsPosition.y})`}>
{metricsText}
</g>
);
}
}
GraphNodeMetrics.propTypes = {
metrics: React.PropTypes.arrayOf(React.PropTypes.shape({
name: React.PropTypes.string,
stat: React.PropTypes.string
})),
metricsPosition: React.PropTypes.shape({
x: React.PropTypes.number,
y: React.PropTypes.number
})
};
module.exports = GraphNodeMetrics;