alemi/fedicharter
1
0
Fork 0
mirror of https://git.alemi.dev/fedicharter.git synced 2024-11-23 00:44:48 +01:00
Code Issues Projects Releases Packages Wiki Activity

feat: better UI

Browse source
This commit is contained in:
əlemi 2023-10-02 15:39:47 +02:00
parent 0a3b4781cc
commit fc8f858b0d
1 changed files with 30 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

47
dist/index.html vendored
View file

@ -10,14 +10,16 @@
body { body {
background: #111111; background: #111111;
} }
#mynetwork { #netgraph {
width: 100%; width: 100%;
height: 98vh; height: 98vh;
} }
</style> </style>
</head> </head>
<body> <body>
<div id="mynetwork"></div> <div id="netgraph">
<h3 style="text-align: center;" id="loader"><font color="#BF616A">crunching fedi network data, be patient...</font></h3>
</div>
<script type="text/javascript"> <script type="text/javascript">
let nodes_array = [] let nodes_array = []
let edges_array = [] let edges_array = []
@ -29,27 +31,38 @@
domain = domainParam; domain = domainParam;
console.log("scanning domain " + domain); console.log("scanning domain " + domain);
} else { } else {
domain = "social.alemi.dev"; domain = window.prompt("starting instance for charting", "social.alemi.dev");
console.log("defaulting to social.alemi.dev");
} }
fetch(`https://api.alemi.dev/akkoma/bubble/crawl?domain=${domain}`) fetch(`https://api.alemi.dev/akkoma/bubble/crawl?domain=${domain}`)
.then((res) => res.json().then((graph) => { .then((res) => res.json().then((graph) => {
const palette = [
'#81A1C1',
'#5B6EA3',
'#7468B0',
'#84508C',
'#AF875F',
'#EBCB8B',
'#2E8757',
'#05979A',
]
for (const i in graph.nodes) {
if (graph.nodes[i].label === domain) graph.nodes[i].color = '#BF616A';
else graph.nodes[i].color = palette[Math.floor(Math.random() * palette.length)];;
}
// create an array with nodes const nodes = new vis.DataSet(graph.nodes);
var nodes = new vis.DataSet(graph.nodes); const edges = new vis.DataSet(graph.vertices);
// create an array with edges // create a network
var edges = new vis.DataSet(graph.vertices); const container = document.getElementById("netgraph");
const data = {
// create a network nodes: nodes,
var container = document.getElementById("mynetwork"); edges: edges,
var data = { };
nodes: nodes, const options = { edges: { dashes: true, arrows: 'to' }, nodes: { mass: 3, color: "#bf616a", shape: "box" }};
edges: edges, const network = new vis.Network(container, data, options);
}; document.getElementById("loader").remove();
var options = { edges: { dashes: true }, nodes: { color: "#bf616a", shape: "box" }};
var network = new vis.Network(container, data, options);
})) }))
</script> </script>
</body> </body>