Click on a node to see its styling data in the overlay.
You can customize the appearance of nodes with images, labels, glyphs and more.
See also
import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import isEmpty from "lodash/isEmpty";
import { Chart } from "regraph";
import { items, positions } from "./data";
import "@fortawesome/fontawesome-free/css/fontawesome.css";
import "@fortawesome/fontawesome-free/css/solid.css";
import "@ci/theme/rg/css/properties.css";
function NodeGallery() {
const [selection, setSelection] = useState({});
const handleChartChange = (change) => {
if (change.selection) {
// change.selection includes details about the selected item
// so we use this to show the properties used
setSelection({ ...change.selection });
}
};
return (
<div style={{ width: "100%", height: "100%" }}>
<Chart
items={items}
positions={positions}
onChange={handleChartChange}
options={{
navigation: false,
overview: false,
iconFontFamily: "Font Awesome 5 Free",
imageAlignment: {
"fas fa-download": { dy: -12 },
"fas fa-user": { dy: -8 },
"fas fa-exclamation-triangle": { dy: -10 },
},
}}
/>
{isEmpty(selection) ? (
<pre className="properties empty">Select a node to view its properties.</pre>
) : (
<pre className="properties">{JSON.stringify(selection, null, 2)}</pre>
)}
</div>
);
}
const FontReadyChart = React.lazy(() =>
document.fonts.load("900 24px 'Font Awesome 5 Free'").then(() => ({
default: NodeGallery,
}))
);
export function Demo() {
return (
<React.Suspense fallback="">
<FontReadyChart />
</React.Suspense>
);
}
const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);const pearlGirl = "/img/pearlgirl.jpg";
const starryNight = "/img/starry-night.jpg";
const USA = "/img/flags/united-states-of-america.svg";
const userImage = "/img/people/Person8.png";
const primaryColor = "#2dcda8";
const darkColor = "#00423e";
const lightColor = "#8cedd0";
const accentColor = "#22BF6D";
const transparentColor = "rgba(255,255,255,0)";
const offset = 10000;
const items = {
l1: {
color: transparentColor,
label: [
{
bold: true,
color: darkColor,
text: "Basic Nodes",
textWrap: "normal",
backgroundColor: transparentColor,
fontSize: 20,
},
],
},
dw2: {
color: lightColor,
size: 0.3,
},
dw3: {
color: primaryColor,
size: 0.6,
},
dw4: {
color: accentColor,
size: 1,
},
dw5: {
color: darkColor,
size: 1.4,
},
b1: {
color: primaryColor,
border: {
color: darkColor,
width: 5,
},
},
b2: {
color: primaryColor,
border: {
color: darkColor,
width: 10,
},
},
b3: {
color: primaryColor,
border: {
color: darkColor,
lineStyle: "dashed",
},
},
f1: {
color: primaryColor,
fontIcon: {
text: "fas fa-user",
color: "white",
},
},
f2: {
color: transparentColor,
fontIcon: {
text: "fas fa-user",
color: primaryColor,
},
border: {
color: primaryColor,
width: 4,
},
},
f3: {
color: transparentColor,
fontIcon: {
text: "fas fa-user",
color: primaryColor,
},
},
l2: {
color: transparentColor,
label: [
{
bold: true,
color: darkColor,
text: "Image Nodes",
textWrap: "normal",
backgroundColor: transparentColor,
fontSize: 20,
},
],
},
i1: {
cutout: true,
image: pearlGirl,
},
i2: {
color: primaryColor,
border: {
color: darkColor,
},
cutout: true,
image: pearlGirl,
},
i3: {
shape: {
height: 57,
width: 91,
},
image: starryNight,
},
i4: {
border: {
color: accentColor,
},
shape: {
height: 57,
width: 91,
},
image: starryNight,
},
l3: {
color: transparentColor,
label: [
{
bold: true,
color: darkColor,
text: "Glyphs",
backgroundColor: transparentColor,
fontSize: 20,
},
],
},
g1: {
color: primaryColor,
glyphs: [
{
position: "sw",
image: USA,
},
{
position: "ne",
color: darkColor,
size: 1.5,
label: {
text: "1",
},
border: {
color: "white",
width: 1.5,
},
},
],
},
g2: {
color: primaryColor,
glyphs: [
{
angle: 30,
border: {
width: 0.5,
color: accentColor,
},
color: darkColor,
size: 1.5,
fontIcon: {
text: "fas fa-exclamation-triangle",
color: "white",
},
},
{
angle: 150,
border: {
width: 1,
color: "#016ba5",
},
color: accentColor,
size: 1.5,
fontIcon: {
text: "fas fa-exclamation-triangle",
color: "white",
},
},
{
angle: 270,
border: {
width: 1.5,
color: darkColor,
},
color: "#016ba5",
size: 1.5,
fontIcon: {
text: "",
color: "white",
},
},
],
},
g3: {
color: primaryColor,
glyphs: [
{
angle: 30,
blink: true,
border: {
color: transparentColor,
},
color: darkColor,
size: 1.7,
label: {
text: "30°",
},
},
{
angle: 120,
border: {
color: transparentColor,
},
color: darkColor,
size: 1.3,
label: {
text: "120°",
},
},
{
angle: 240,
border: {
color: transparentColor,
},
color: darkColor,
size: 0.9,
label: {
text: "240°",
},
},
],
},
g4: {
color: primaryColor,
glyphs: [
{
position: "ne",
color: accentColor,
size: 1.5,
label: {
text: "ne",
},
},
{
position: "se",
color: accentColor,
size: 1.5,
label: {
text: "se",
},
},
{
position: "sw",
color: accentColor,
size: 1.5,
label: {
text: "sw",
},
},
{
position: "nw",
color: accentColor,
size: 1.5,
label: {
text: "nw",
},
},
],
shape: "box",
},
l4: {
color: transparentColor,
label: [
{
bold: true,
color: darkColor,
text: "Basic Labels",
textWrap: "normal",
backgroundColor: transparentColor,
fontSize: 20,
},
],
},
lb1: {
color: primaryColor,
label: {
color: "white",
fontFamily: "Serif",
text: "label",
backgroundColor: primaryColor,
fontSize: 16,
},
},
lb3: {
color: primaryColor,
label: [
{
position: "s",
fontSize: 12,
text: "Sans-Serif 12pt",
fontFamily: "Sans-Serif",
},
],
},
lb4: {
color: primaryColor,
label: [
{
position: "n",
text: "Sans-Serif 16pt",
fontSize: 16,
fontFamily: "Sans-Serif",
color: "#22BF6D",
backgroundColor: transparentColor,
},
],
},
lb5: {
color: primaryColor,
label: [
{
text: "😀😂👻🔥",
backgroundColor: transparentColor,
fontSize: 16,
position: "s",
},
],
},
lb6: {
color: primaryColor,
label: [
{
text: "East Position",
position: "e",
},
],
},
l5: {
color: transparentColor,
label: [
{
bold: true,
color: darkColor,
text: "Halos",
backgroundColor: transparentColor,
fontSize: 20,
},
],
},
h1: {
color: primaryColor,
glyphs: [
{
angle: 20,
border: {
color: null,
},
color: accentColor,
radius: 50,
size: 0.8,
label: {
color: "white",
text: "1",
},
},
],
halos: [
{
color: lightColor,
radius: 30,
width: 5,
},
{
color: darkColor,
radius: 40,
width: 5,
},
{
color: accentColor,
radius: 50,
width: 5,
},
],
label: {
color: "white",
text: "",
backgroundColor: transparentColor,
},
size: 0.85,
},
l6: {
color: transparentColor,
label: [
{
bold: true,
color: darkColor,
text: "Donuts",
backgroundColor: transparentColor,
fontSize: 20,
},
],
},
d1: {
color: primaryColor,
donut: {
segments: [
{
size: 1,
color: accentColor,
},
{
size: 3,
color: darkColor,
},
{
size: 5,
color: lightColor,
},
],
width: 10,
border: {
color: "rgb(255, 255, 255)",
width: 2,
},
},
label: {
color: "white",
text: "",
backgroundColor: transparentColor,
},
},
d2: {
fontIcon: {
text: "fas fa-download",
color: "#2dcda8",
},
color: transparentColor,
donut: {
width: 9,
border: {
color: "black",
width: 1,
},
segments: [
{
color: "rgb(255,255,255)",
size: 1,
},
{
color: "rgb(245,252,252)",
size: 1,
},
{
color: "rgb(235,250,248)",
size: 1,
},
{
color: "rgb(226,247,244)",
size: 1,
},
{
color: "rgb(216,245,240)",
size: 1,
},
{
color: "rgb(207,243,236)",
size: 1,
},
{
color: "rgb(197,241,232)",
size: 1,
},
{
color: "rgb(188,238,228)",
size: 1,
},
{
color: "rgb(178,236,224)",
size: 1,
},
{
color: "rgb(169,234,220)",
size: 1,
},
{
color: "rgb(159,232,216)",
size: 1,
},
{
color: "rgb(150,230,212)",
size: 1,
},
{
color: "rgb(140, 227, 208)",
size: 1,
},
{
color: "rgb(131,225,204)",
size: 1,
},
{
color: "rgb(121,223,200)",
size: 1,
},
{
color: "rgb(112,221,196)",
size: 1,
},
{
color: "rgb(102,218,192)",
size: 1,
},
{
color: "rgb(93,216,188)",
size: 1,
},
{
color: "rgb(83,214,184)",
size: 1,
},
{
color: "rgb(74,211,180)",
size: 1,
},
{
color: "rgb(64,209,176)",
size: 1,
},
{
color: "rgb(55,207,172)",
size: 1,
},
{
color: "rgb(45, 205, 168)",
size: 1,
},
{
color: "rgb(0, 66, 62)",
size: 1,
},
{
color: "rgb(0,61,58)",
size: 1,
},
{
color: "rgb(0,57,54)",
size: 1,
},
{
color: "rgb(0,53,50)",
size: 1,
},
{
color: "rgb(0,49,46)",
size: 1,
},
{
color: "rgb(0,44,42)",
size: 1,
},
{
color: "rgb(0,40,38)",
size: 1,
},
{
color: "rgb(0,36,34)",
size: 1,
},
{
color: "rgb(0,32,30)",
size: 1,
},
{
color: "rgb(0,28,26)",
size: 1,
},
{
color: "rgb(0,24,22)",
size: 1,
},
{
color: "rgb(0,20,18)",
size: 1,
},
{
color: "rgb(0,16,14)",
size: 1,
},
{
color: "rgb(0,12,11)",
size: 1,
},
{
color: "rgb(0,8,8)",
size: 1,
},
{
color: "rgb(0,4,4)",
size: 1,
},
{
color: "rgb(0,0,0)",
size: 1,
},
],
},
},
l7: {
color: transparentColor,
label: [
{
bold: true,
color: darkColor,
text: "Complex Labels",
textWrap: "normal",
backgroundColor: transparentColor,
fontSize: 20,
},
],
},
lc1: {
color: primaryColor,
label: [
{
position: {
vertical: 5,
},
fontIcon: {
text: "fas fa-user",
},
backgroundColor: transparentColor,
color: "white",
},
{
text: "multi-line text",
textWrap: "normal",
fontSize: 10,
position: {
vertical: 25,
},
backgroundColor: transparentColor,
color: "white",
},
],
},
lc2: {
color: primaryColor,
fontIcon: {
text: "fas fa-user",
color: "white",
},
border: {
color: lightColor,
},
label: [
{
backgroundColor: transparentColor,
bold: true,
color: "black",
position: "s",
text: "Big Bold Text",
},
{
color: accentColor,
text: "small pink text",
fontSize: 10,
backgroundColor: transparentColor,
},
],
},
lc3: {
color: primaryColor,
fontIcon: {
text: "fas fa-user",
color: "white",
},
border: {
color: lightColor,
},
label: [
{
text: "Rounded Labels",
border: {
radius: [8, 8, 0, 0],
},
minWidth: 110,
padding: {
top: 8,
right: 8,
bottom: 0,
left: 8,
},
position: "s",
backgroundColor: lightColor,
},
{
text: "with padding",
fontSize: 10,
border: {
radius: [0, 0, 8, 8],
},
minWidth: 110,
padding: {
top: 0,
right: 8,
bottom: 8,
left: 8,
},
backgroundColor: lightColor,
},
],
},
l8: {
color: transparentColor,
label: [
{
bold: true,
color: darkColor,
text: "Rectangular Nodes",
textWrap: "normal",
backgroundColor: transparentColor,
fontSize: 20,
},
],
},
r1: {
border: {
radius: 6,
},
color: lightColor,
label: [
{
color: darkColor,
fontSize: 25,
fontIcon: {
text: "fas fa-user",
},
padding: 8,
backgroundColor: transparentColor,
position: { vertical: "top" },
},
{
backgroundColor: transparentColor,
bold: true,
color: darkColor,
fontSize: 10,
padding: 8,
position: { vertical: "bottom" },
text: "Rectangle Node",
textWrap: "normal",
},
],
shape: {
height: 60,
width: 75,
},
},
r2: {
color: lightColor,
border: {
color: darkColor,
width: 2,
},
label: [
{
color: darkColor,
fontSize: 20,
padding: {
top: 4,
right: 0,
bottom: 0,
left: 8,
},
position: {
vertical: "top",
horizontal: "left",
},
fontIcon: {
text: "fas fa-user",
},
backgroundColor: transparentColor,
},
{
bold: true,
text: "Rectangle Node",
padding: {
top: 8,
right: 8,
bottom: 0,
left: 8,
},
position: { vertical: "inherit" },
backgroundColor: transparentColor,
fontSize: 15,
color: darkColor,
},
{
text: "Multi-line and border",
fontSize: 8,
backgroundColor: transparentColor,
color: darkColor,
padding: { top: 4, left: 8 },
},
{
text: "Left Align",
fontSize: 8,
backgroundColor: transparentColor,
color: darkColor,
padding: { left: 8 },
},
],
shape: {
height: "auto",
width: "auto",
},
},
r3: {
color: lightColor,
border: {
radius: 6,
},
label: [
{
image: userImage,
maxHeight: 50,
maxWidth: 50,
position: {
vertical: 8,
horizontal: "left",
},
margin: [0, 0, 0, 10],
border: { color: darkColor, radius: 100 },
},
{
bold: true,
text: "Rectangle Node",
padding: {
top: 12,
right: 12,
bottom: 0,
left: 10,
},
position: {
horizontal: "right",
vertical: "top",
},
backgroundColor: transparentColor,
fontSize: 15,
color: darkColor,
},
{
text: "Rounded Corners",
fontSize: 8,
padding: {
top: 1,
right: 12,
bottom: 0,
left: 0,
},
backgroundColor: transparentColor,
color: darkColor,
},
{
text: "Image Label",
fontSize: 8,
padding: {
top: 0,
right: 12,
bottom: 0,
left: 0,
},
backgroundColor: transparentColor,
color: darkColor,
},
{
text: "Right Align",
fontSize: 8,
padding: {
top: 0,
right: 12,
bottom: 0,
left: 0,
},
backgroundColor: transparentColor,
color: darkColor,
},
],
shape: {
height: "auto",
width: "auto",
},
},
r4: {
color: lightColor,
glyphs: [
{
size: 1.2,
position: "ne",
border: {
width: 1,
color: "white",
},
color: accentColor,
label: {
text: "1",
},
},
],
border: {
radius: { bottomRight: 16 },
},
label: [
{
color: darkColor,
fontSize: 40,
padding: {
top: 0,
right: 0,
bottom: 0,
left: 8,
},
position: {
vertical: 12,
horizontal: "left",
},
fontIcon: {
text: "fas fa-user",
},
backgroundColor: transparentColor,
},
{
text: "Rectangle Node",
padding: {
top: 12,
right: 12,
bottom: 0,
left: 10,
},
position: {
horizontal: "right",
vertical: "top",
},
backgroundColor: transparentColor,
color: darkColor,
fontSize: 15,
},
{
text: "Single Rounded Corner",
fontSize: 8,
padding: {
top: 1,
right: 13,
bottom: 0,
left: 10,
},
backgroundColor: transparentColor,
color: darkColor,
},
{
text: "with Glyph",
fontSize: 8,
padding: {
top: 0,
right: 13,
bottom: 0,
left: 0,
},
backgroundColor: transparentColor,
color: darkColor,
},
],
shape: {
height: "auto",
width: "auto",
},
},
};
const positions = {
l1: { x: -70 + offset, y: 0 },
dw2: { x: 40 + offset, y: 0 },
dw3: { x: 100 + offset, y: 0 },
dw4: { x: 185 + offset, y: 0 },
dw5: { x: 290 + offset, y: 0 },
b1: { x: 410 + offset, y: 0 },
b2: { x: 510 + offset, y: 0 },
b3: { x: 610 + offset, y: 0 },
f1: { x: 710 + offset, y: 0 },
f2: { x: 810 + offset, y: 0 },
f3: { x: 900 + offset, y: 0 },
l2: { x: 470 + offset, y: 130 },
i1: { x: 550 + offset, y: 130 },
i2: { x: 640 + offset, y: 130 },
i3: { x: 750 + offset, y: 130 },
i4: { x: 870 + offset, y: 130 },
l3: { x: -70 + offset, y: 130 },
g1: { x: 50 + offset, y: 130 },
g2: { x: 150 + offset, y: 130 },
g3: { x: 250 + offset, y: 130 },
g4: { x: 350 + offset, y: 130 },
l4: { x: -70 + offset, y: 260 },
lb1: { x: 50 + offset, y: 260 },
lb3: { x: 160 + offset, y: 260 },
lb4: { x: 270 + offset, y: 260 },
lb5: { x: 380 + offset, y: 260 },
lb6: { x: 490 + offset, y: 260 },
l5: { x: 710 + offset, y: 260 },
h1: { x: 825 + offset, y: 260 },
l6: { x: 600 + offset, y: 390 },
d1: { x: 710 + offset, y: 390 },
d2: { x: 850 + offset, y: 390 },
l7: { x: -70 + offset, y: 390 },
lc1: { x: 50 + offset, y: 390 },
lc2: { x: 220 + offset, y: 390 },
lc3: { x: 390 + offset, y: 390 },
l8: { x: -70 + offset, y: 520 },
r1: { x: 50 + offset, y: 520 },
r2: { x: 240 + offset, y: 520 },
r3: { x: 479 + offset, y: 520 },
r4: { x: 723 + offset, y: 520 },
};
export { items, positions };<!doctype html>
<html>
<body>
<div id="regraph" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>