<div id="sigma-container"></div>

<style>
  #sigma-container {
    width: 100%;
    height: 100%;
  }
</style>

<script>
  import { layerPiechart } from "@sigma/node-piechart";
  import Sigma from "sigma";

  import { getSmallGraph } from "../_data/small-graph";

  const container = document.getElementById("sigma-container") as HTMLElement;

  const graph = getSmallGraph();

  const SLICES: Record<string, { positive: number; neutral: number; negative: number }> = {
    a: { positive: 10, neutral: 17, negative: 14 },
    b: { positive: 2, neutral: 4, negative: 1 },
    c: { positive: 0, neutral: 8, negative: 3 },
    d: { positive: 0, neutral: 0, negative: 0 },
    e: { positive: 17, neutral: 1, negative: 3 },
    f: { positive: 0, neutral: 8, negative: 4 },
  };
  graph.forEachNode((node) => {
    graph.mergeNodeAttributes(node, SLICES[node]);
  });

  new Sigma(graph, container, {
    primitives: {
      nodes: {
        variables: {
          negative: { type: "number", default: 0 },
          neutral: { type: "number", default: 0 },
          positive: { type: "number", default: 0 },
        },
        layers: [
          layerPiechart({
            defaultColor: "#BCB7C4",
            slices: [
              { color: "#F05454", value: { attribute: "negative" } },
              { color: "#7798FA", value: { attribute: "neutral" } },
              { color: "#6DDB55", value: { attribute: "positive" } },
            ],
          }),
        ],
      },
    },
  });
</script>