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

trim node titles in graph via JS

Browse Source 
fix for #413

Sadly, the title attribute to show something on hover does not work in
SVG. So we might need another solution for that.
This commit is contained in:
David Kaltschmidt
2015-09-02 18:53:04 +02:00
parent e8ec3ed5fc
commit a439c7ca97
1 changed files with 19 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -66,12 +66,29 @@ const Node = React.createClass({
<circle r={scale(0.5)} className="border" stroke={color}></circle>
<circle r={scale(0.45)} className="shadow"></circle>
<circle r={Math.max(2, scale(0.125))} className="node"></circle>
<text className="node-label" textAnchor="middle" x={textOffsetX} y={textOffsetY}>{this.props.label}</text>
<text className="node-sublabel" textAnchor="middle" x={textOffsetX} y={textOffsetY + 17}>{this.props.subLabel}</text>
<text className="node-label" textAnchor="middle" x={textOffsetX} y={textOffsetY}>
{this.ellipsis(this.props.label, 14)}
</text>
<text className="node-sublabel" textAnchor="middle" x={textOffsetX} y={textOffsetY + 17}>
{this.ellipsis(this.props.subLabel, 12)}
</text>
</g>
);
},
ellipsis: function(text, fontSize) {
const maxWidth = this.props.scale(4);
const averageCharLength = fontSize / 1.5;
const allowedChars = maxWidth / averageCharLength;
let truncatedText = text;
let trimmedText = text;
while (text && trimmedText.length > 1 && trimmedText.length > allowedChars) {
trimmedText = trimmedText.slice(0, -1);
truncatedText = trimmedText + '...';
}
return truncatedText;
},
handleMouseEnter: function(ev) {
AppActions.enterNode(ev.currentTarget.id);
},