Hawkin
/
arangodb
mirror of https://gitee.com/bigwinds/arangodb
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

GraphViewer: The colour-mapper now also creates a foreground colour. All labels are now readable

This commit is contained in:
Michael Hackstein 2013-06-04 13:28:13 +02:00
parent 826c186de0
commit b1f012ef22
6 changed files with 83 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

75
html/admin/js/graphViewer/graph/colourMapper.js
View File

@ -38,34 +38,37 @@ function ColourMapper() {
self = this,
nextColour = 0;
colours.push("navy");
colours.push("green");
colours.push("gold");
colours.push("red");
colours.push("saddlebrown");
colours.push("skyblue");
colours.push("olive");
colours.push("deeppink");
colours.push("orange");
colours.push("silver");
colours.push("blue");
colours.push("yellowgreen");
colours.push("firebrick");
colours.push("rosybrown");
colours.push("hotpink");
colours.push("purple");
colours.push("cyan");
colours.push("teal");
colours.push("peru");
colours.push("maroon");
colours.push({back: "navy", front: "white"});
colours.push({back: "green", front: "white"});
colours.push({back: "gold", front: "black"});
colours.push({back: "red", front: "black"});
colours.push({back: "saddlebrown", front: "white"});
colours.push({back: "skyblue", front: "black"});
colours.push({back: "olive", front: "black"});
colours.push({back: "deeppink", front: "black"});
colours.push({back: "orange", front: "black"});
colours.push({back: "silver", front: "black"});
colours.push({back: "blue", front: "white"});
colours.push({back: "yellowgreen", front: "black"});
colours.push({back: "firebrick", front: "black"});
colours.push({back: "rosybrown", front: "black"});
colours.push({back: "hotpink", front: "black"});
colours.push({back: "purple", front: "white"});
colours.push({back: "cyan", front: "black"});
colours.push({back: "teal", front: "black"});
colours.push({back: "peru", front: "black"});
colours.push({back: "maroon", front: "white"});
this.getColour = function(value) {
if (mapping[value] === undefined) {
mapping[value] = colours[nextColour];
if (reverseMapping[colours[nextColour]] === undefined) {
reverseMapping[colours[nextColour]] = [];
if (reverseMapping[colours[nextColour].back] === undefined) {
reverseMapping[colours[nextColour].back] = {
front: colours[nextColour].front,
list: []
};
}
reverseMapping[colours[nextColour]].push(value);
reverseMapping[colours[nextColour].back].list.push(value);
nextColour++;
if (nextColour === colours.length) {
nextColour = 0;
@ -74,10 +77,30 @@ function ColourMapper() {
if (listener !== undefined) {
listener(self.getList());
}
return mapping[value];
return mapping[value].back;
};
this.getForegroundColour = function(value) {
if (mapping[value] === undefined) {
mapping[value] = colours[nextColour];
if (reverseMapping[colours[nextColour].back] === undefined) {
reverseMapping[colours[nextColour].back] = {
front: colours[nextColour].front,
list: []
};
}
reverseMapping[colours[nextColour].back].list.push(value);
nextColour++;
if (nextColour === colours.length) {
nextColour = 0;
}
}
if (listener !== undefined) {
listener(self.getList());
}
return mapping[value].front;
};
this.reset = function() {
mapping = {};

18
html/admin/js/graphViewer/graph/nodeShaper.js
View File

@ -110,6 +110,7 @@ function NodeShaper(parent, flags, idfunc) {
addColor = noop,
addShape = noop,
addLabel = noop,
addLabelColor = function() {return "black";},
addCommunityShape = function(g) {
g.append("polygon")
.attr("points", "0,-25 -16,20 23,-10 -23,-10 16,20");
@ -263,7 +264,7 @@ function NodeShaper(parent, flags, idfunc) {
addLabel = function (node) {
var textN = node.append("text") // Append a label for the node
.attr("text-anchor", "middle") // Define text-anchor
.attr("fill", "black") // Force a black color
.attr("fill", addLabelColor) // Force a black color
.attr("stroke", "none"); // Make it readable
textN.each(function(d) {
var chunks = splitLabel(label(d));
@ -283,7 +284,7 @@ function NodeShaper(parent, flags, idfunc) {
addLabel = function (node) {
var textN = node.append("text") // Append a label for the node
.attr("text-anchor", "middle") // Define text-anchor
.attr("fill", "black") // Force a black color
.attr("fill", addLabelColor) // Force a black color
.attr("stroke", "none"); // Make it readable
textN.each(function(d) {
var chunks = splitLabel(d._data[label]);
@ -320,6 +321,9 @@ function NodeShaper(parent, flags, idfunc) {
g.attr("stroke", color.stroke);
g.attr("fill", color.fill);
};
addLabelColor = function (d) {
return color.stroke;
};
break;
case "expand":
addColor = function (g) {
@ -336,6 +340,9 @@ function NodeShaper(parent, flags, idfunc) {
return color.collapsed;
});
};
addLabelColor = function (d) {
return "black";
};
break;
case "attribute":
addColor = function (g) {
@ -352,6 +359,13 @@ function NodeShaper(parent, flags, idfunc) {
return colourMapper.getColour(n._data[color.key]);
});
};
addLabelColor = function (n) {
if (n._data === undefined) {
return colourMapper.getForegroundColour(undefined);
}
return colourMapper.getForegroundColour(n._data[color.key]);
};
break;
default:
throw "Sorry given colour-scheme not known";

4
html/admin/js/graphViewer/jasmine_test/specColourMapper/colourMapperSpec.js
View File

@ -125,8 +125,8 @@
expect(_.keys(colorList).length).toEqual(3);
_.each(_.values(colorList), function(v) {
expect(v).toEqual(jasmine.any(Array));
expect(v.length).toEqual(1);
expect(v.list).toEqual(jasmine.any(Array));
expect(v.list.length).toEqual(1);
});
});

6
html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperSpec.js
View File

@ -315,8 +315,8 @@
expect(_.keys(colorList).length).toEqual(3);
_.each(_.values(colorList), function(v) {
expect(v).toEqual(jasmine.any(Array));
expect(v.length).toEqual(1);
expect(v.list).toEqual(jasmine.any(Array));
expect(v.list.length).toEqual(1);
});
});
@ -775,7 +775,7 @@
textEl;
shaper.drawNodes(node);
textEl = $("svg .node text");
expect(textEl.attr("fill")).toEqual("black");
expect(textEl.attr("fill")).toEqual("#8AA051");
expect(textEl.attr("stroke")).toEqual("none");
});

10
html/admin/js/graphViewer/jasmine_test/specNodeShaper/nodeShaperUISpec.js
View File

@ -52,8 +52,14 @@
spyOn(shaper, 'changeTo');
spyOn(shaper, 'getColourMapping').andCallFake(function() {
return {
"blue": ["bl", "ue"],
"green": ["gr", "een"]
blue: {
list: ["bl", "ue"],
front: "white"
},
green: {
list: ["gr", "een"],
front: "black"
}
};
});
spyOn(shaper, "setColourMappingListener");

7
html/admin/js/graphViewer/ui/nodeShaperControls.js
View File

@ -47,9 +47,12 @@ function NodeShaperControls(list, shaper) {
}
var list = document.createElement("ul");
colourDiv.appendChild(list);
_.each(mapping, function(els, col) {
var li = document.createElement("li");
_.each(mapping, function(obj, col) {
var li = document.createElement("li"),
els = obj.list,
fore = obj.front;
li.style.backgroundColor = col;
li.style.color = fore;
li.appendChild(document.createTextNode(els.join(", ")));
list.appendChild(li);
});