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

39
dist/index.html vendored
View file

@ -10,14 +10,16 @@
body {
background: #111111;
}
#mynetwork {
#netgraph {
width: 100%;
height: 98vh;
}
</style>
</head>
<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">
let nodes_array = []
let edges_array = []
@ -29,27 +31,38 @@
domain = domainParam;
console.log("scanning domain " + domain);
} else {
domain = "social.alemi.dev";
console.log("defaulting to social.alemi.dev");
domain = window.prompt("starting instance for charting", "social.alemi.dev");
}
fetch(`https://api.alemi.dev/akkoma/bubble/crawl?domain=${domain}`)
.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
var nodes = new vis.DataSet(graph.nodes);
// create an array with edges
var edges = new vis.DataSet(graph.vertices);
const nodes = new vis.DataSet(graph.nodes);
const edges = new vis.DataSet(graph.vertices);
// create a network
var container = document.getElementById("mynetwork");
var data = {
const container = document.getElementById("netgraph");
const data = {
nodes: nodes,
edges: edges,
};
var options = { edges: { dashes: true }, nodes: { color: "#bf616a", shape: "box" }};
var network = new vis.Network(container, data, options);
const options = { edges: { dashes: true, arrows: 'to' }, nodes: { mass: 3, color: "#bf616a", shape: "box" }};
const network = new vis.Network(container, data, options);
document.getElementById("loader").remove();
}))
</script>
</body>