Color of Types? (#16)

NybyDK · Feb 23, 2024 · 1e5f45d · 1e5f45d
2 parents 0ec059f + 29371ff
commit 1e5f45d
Showing 1 changed file with 12 additions and 3 deletions.
diff --git a/src/components/Mermaid.svelte b/src/components/Mermaid.svelte
@@ -3,13 +3,22 @@
 	import { onMount } from "svelte";
 	import { Render } from "svelte-purify/browser-only";
 	import { network } from "$lib/stores/network";
+	import { NodeType } from "$lib/interfaces/network";
+
+	const nodeColors = {
+		[NodeType.Customer]: "lightgreen",
+		[NodeType.Edge]: "cyan",
+		[NodeType.Core]: "hotpink",
+	};
 
 	let input: string;
 	$: {
-		input = `flowchart LR\n`;
-		input += $network.nodes.map((n) => `  ${n.id}[(${n.label})]`).join("\n");
+		input = `flowchart LR;\n`;
+		input += $network.nodes.map((n) => `  style ${n.id} fill:${nodeColors[n.type]};`).join("\n");
+		input += "\n";
+		input += $network.nodes.map((n) => `  ${n.id}[(${n.label})];`).join("\n");
 		input += "\n";
-		input += $network.connections.map((c) => `  ${c.source} --- ${c.target}`).join("\n");
+		input += $network.connections.map((c) => `  ${c.source} --- ${c.target};`).join("\n");
 	}
 
 	onMount(() => {