This package contains a node pie-chart renderer for sigma.js. Its API is inspired by @sigma/node-border.
Because sigma render nodes using WebGL, the program cannot handle a dynamic number of pie slices. For this reason, instead of a program, this package exposes createNodePiechartProgram, a factory that creates a program to render nodes as pie-charts, with the description of what slices must represent given as input.
Within your application that uses sigma.js, you can use @sigma/node-piechart as following:
import { createNodePiechartProgram } from "@sigma/node-piechart";
const graph = new Graph();
graph.addNode("some-node", {
x: 0,
y: 0,
size: 10,
type: "piechart",
label: "Some node",
positive: 10,
neutral: 17,
negative: 14,
});
const NodePiechartProgram = createNodePiechartProgram({
defaultColor: "#BCB7C4",
slices: [
{ color: { value: "#F05454" }, value: { attribute: "negative" } },
{ color: { value: "#7798FA" }, value: { attribute: "neutral" } },
{ color: { value: "#6DDB55" }, value: { attribute: "positive" } },
],
});
const sigma = new Sigma(graph, container, {
nodeProgramClasses: {
piechart: NodePiechartProgram,
},
});Please check the related Storybook for more advanced examples.