mirror of
https://git.alemi.dev/fedicharter.git
synced 2024-11-22 16:34:49 +01:00
feat: better UI
This commit is contained in:
parent
0a3b4781cc
commit
fc8f858b0d
1 changed files with 30 additions and 17 deletions
47
dist/index.html
vendored
47
dist/index.html
vendored
|
@ -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);
|
||||
const nodes = new vis.DataSet(graph.nodes);
|
||||
const edges = new vis.DataSet(graph.vertices);
|
||||
|
||||
// create an array with edges
|
||||
var edges = new vis.DataSet(graph.vertices);
|
||||
|
||||
// create a network
|
||||
var container = document.getElementById("mynetwork");
|
||||
var data = {
|
||||
nodes: nodes,
|
||||
edges: edges,
|
||||
};
|
||||
var options = { edges: { dashes: true }, nodes: { color: "#bf616a", shape: "box" }};
|
||||
var network = new vis.Network(container, data, options);
|
||||
// create a network
|
||||
const container = document.getElementById("netgraph");
|
||||
const data = {
|
||||
nodes: nodes,
|
||||
edges: edges,
|
||||
};
|
||||
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>
|
||||
|
|
Loading…
Reference in a new issue