tweak: graph bigger + better colors

This commit is contained in:
NunoSempere 2022-06-18 14:56:37 -04:00
parent 17e78904ea
commit 7c2870b56f

View File

@ -92,6 +92,10 @@ export function Graph({
data: { data: {
id: cutOffLongNames(element.name), id: cutOffLongNames(element.name),
color: colors[i] || "darkgreen", color: colors[i] || "darkgreen",
labelColor:
isListOrdered && i >= listOfElementsForGraph.length - 2
? "black"
: "white",
}, },
}; };
}); });
@ -112,7 +116,7 @@ export function Graph({
{ {
selector: "node", selector: "node",
style: { style: {
padding: "25px", padding: "30px",
shape: "round-rectangle", shape: "round-rectangle",
content: "data(id)", content: "data(id)",
"background-color": "data(color)", "background-color": "data(color)",
@ -126,8 +130,8 @@ export function Graph({
selector: "node[id]", selector: "node[id]",
style: { style: {
label: "data(id)", label: "data(id)",
"font-size": "11", "font-size": "13",
color: "white", color: "data(labelColor)",
"text-halign": "center", "text-halign": "center",
"text-valign": "center", "text-valign": "center",
"z-index": 1, "z-index": 1,
@ -196,7 +200,7 @@ export function Graph({
useEffect(async () => { useEffect(async () => {
await callEffect({ listOfElements, links, isListOrdered, mergeSortOrder }); await callEffect({ listOfElements, links, isListOrdered, mergeSortOrder });
// console.log(JSON.stringify(config, null, 10)); // console.log(JSON.stringify(config, null, 10));
}, [listOfElements, links]); }, [listOfElements, links, isListOrdered]);
return ( return (
<div> <div>