Toggle the buttons above the chart to see how different options look with sequential combo arrangements.
In sequential charts where levels are unevenly sized due to differently sized combos, you can use the stretchType option to set variable level spacing and optimize the use of available space.
See also
import React, { useRef, useState } from "react";
import { createRoot } from "react-dom/client";
import { Chart } from "regraph";
import { data } from "./data";
import "@ci/theme/rg/css/layout.css";
const animation = {
time: 500,
};
const options = {
fit: "all",
};
export const Demo = () => <SequentialArrange items={data()} />;
function SequentialArrange(props) {
const { items } = props;
const [state, setState] = useState({
layout: {
name: "sequential",
orientation: "right",
stretchType: "auto",
tightness: 5,
stretch: 1.1,
linkShape: "curved",
},
combine: {
shape: "rectangle",
level: 1,
properties: ["group"],
},
showContentLinks: false,
linkShapeInCombos: "direct",
});
const openCombos = useRef({});
const onCombineNodesHandler = ({ setStyle, id, nodes }) => {
if (!(id in openCombos.current)) {
openCombos.current[id] = true;
}
const firstChild = Object.values(nodes)[0];
setStyle({
border: {
radius: 10,
},
label: { text: "" },
arrange: { ...state.layout, linkShape: state.linkShapeInCombos },
open: openCombos.current[id],
closedStyle: {
color: firstChild.color,
border: {
color: "gray",
radius: 10,
},
shape: {
width: 54,
height: 54,
},
},
});
};
const onCombineLinksHandler = ({ setStyle, links }) => {
const firstChild = Object.values(links)[0];
const style = {
contents: state.showContentLinks,
color: firstChild.color,
width: firstChild.width,
end2: {
arrow: true,
},
};
if (state.showContentLinks) {
style.fade = true;
}
setStyle(style);
};
const onDoubleClickHandler = ({ id }) => {
if (id in openCombos.current) {
openCombos.current[id] = !openCombos.current[id];
setState((current) => ({
...current,
combine: { ...current.combine },
}));
}
};
return (
<div className="story">
<div className="options">
<button
className={state.linkShapeInCombos === "curved" ? "active" : ""}
type="button"
onClick={() =>
setState((current) => {
return {
...current,
combine: { ...current.combine },
linkShapeInCombos:
state.linkShapeInCombos === "curved" ? "direct" : "curved",
animate: true,
};
})
}
>
Toggle curved links in combos
</button>
<div className="separator" />
<button
className={state.showContentLinks ? "active" : ""}
type="button"
onClick={() => {
setState((current) => ({
...current,
combine: { ...current.combine },
showContentLinks: !current.showContentLinks,
}));
}}
>
Toggle content links
</button>
</div>
<div className="chart-wrapper">
<Chart
animation={animation}
layout={state.layout}
items={items}
options={options}
combine={state.combine}
onCombineNodes={onCombineNodesHandler}
onCombineLinks={onCombineLinksHandler}
onDoubleClick={onDoubleClickHandler}
/>
</div>
</div>
);
}
const root = createRoot(document.getElementById("regraph"));
root.render(<Demo />);import { style } from "@ci/theme/rg/js/storyStyles";
export function data() {
return {
1: {
data: {
group: 5,
},
color: style.cat08.color,
},
2: {
data: {
group: 5,
},
color: style.cat08.color,
},
3: {
data: {
group: 5,
},
color: style.cat08.color,
},
4: {
data: {
group: 5,
},
color: style.cat08.color,
},
5: {
data: {
group: 5,
},
color: style.cat08.color,
},
6: {
data: {
group: 3,
},
color: style.cat06.color,
},
7: {
data: {
group: 6,
},
color: style.secondary2.color,
},
8: {
data: {
group: 7,
},
color: style.secondary1.color,
},
9: {
data: {
group: 3,
},
color: style.cat06.color,
},
10: {
data: {
group: 6,
},
color: style.secondary2.color,
},
11: {
data: {
group: 7,
},
color: style.secondary1.color,
},
12: {
data: {
group: 7,
},
color: style.secondary1.color,
},
13: {
data: {
group: 7,
},
color: style.secondary1.color,
},
14: {
data: {
group: 3,
},
color: style.cat06.color,
},
15: {
data: {
group: 3,
},
color: style.cat06.color,
},
16: {
data: {
group: 1,
},
color: style.primary3.color,
},
17: {
data: {
group: 6,
},
color: style.secondary2.color,
},
18: {
data: {
group: 7,
},
color: style.secondary1.color,
},
19: {
data: {
group: 0,
},
color: style.primary2.color,
},
20: {
data: {
group: 7,
},
color: style.secondary1.color,
},
21: {
data: {
group: 7,
},
color: style.secondary1.color,
},
22: {
data: {
group: 3,
},
color: style.cat06.color,
},
23: {
data: {
group: 1,
},
color: style.primary3.color,
},
24: {
data: {
group: 6,
},
color: style.secondary2.color,
},
25: {
data: {
group: 7,
},
color: style.secondary1.color,
},
26: {
data: {
group: 0,
},
color: style.primary2.color,
},
27: {
data: {
group: 3,
},
color: style.cat06.color,
},
28: {
data: {
group: 1,
},
color: style.primary3.color,
},
29: {
data: {
group: 1,
},
color: style.primary3.color,
},
30: {
data: {
group: 1,
},
color: style.primary3.color,
},
31: {
data: {
group: 7,
},
color: style.secondary1.color,
},
32: {
data: {
group: 7,
},
color: style.secondary1.color,
},
33: {
data: {
group: 0,
},
color: style.primary2.color,
},
34: {
data: {
group: 3,
},
color: style.cat06.color,
},
35: {
data: {},
color: style.primary1.color,
},
36: {
data: {
group: 3,
},
color: style.cat06.color,
},
37: {
data: {
group: 1,
},
color: style.primary3.color,
},
38: {
data: {
group: 1,
},
color: style.primary3.color,
},
39: {
data: {
group: 6,
},
color: style.secondary2.color,
},
40: {
data: {
group: 2,
},
color: style.secondary1.color,
},
41: {
data: {},
color: style.primary1.color,
},
42: {
data: {
group: 7,
},
color: style.secondary1.color,
},
43: {
data: {
group: 7,
},
color: style.secondary1.color,
},
44: {
data: {
group: 4,
},
color: style.cat07.color,
},
45: {
data: {
group: 0,
},
color: style.primary2.color,
},
46: {
data: {
group: 0,
},
color: style.primary2.color,
},
47: {
data: {
group: 3,
},
color: style.cat06.color,
},
48: {
data: {},
color: style.primary1.color,
},
49: {
data: {
group: 6,
},
color: style.secondary2.color,
},
50: {
data: {
group: 2,
},
color: style.secondary1.color,
},
51: {
data: {},
color: style.primary1.color,
},
52: {
data: {
group: 7,
},
color: style.secondary1.color,
},
53: {
data: {
group: 4,
},
color: style.cat07.color,
},
54: {
data: {
group: 0,
},
color: style.primary2.color,
},
55: {
data: {
group: 3,
},
color: style.cat06.color,
},
56: {
data: {},
color: style.primary1.color,
},
57: {
data: {},
color: style.primary1.color,
},
58: {
data: {},
color: style.primary1.color,
},
59: {
data: {
group: 4,
},
color: style.cat07.color,
},
60: {
data: {
group: 0,
},
color: style.primary2.color,
},
61: {
data: {
group: 0,
},
color: style.primary2.color,
},
62: {
data: {
group: 0,
},
color: style.primary2.color,
},
63: {
data: {
group: 3,
},
color: style.cat06.color,
},
64: {
data: {
group: 3,
},
color: style.cat06.color,
},
65: {
data: {},
color: style.primary1.color,
},
66: {
data: {},
color: style.primary1.color,
},
67: {
data: {
group: 6,
},
color: style.secondary2.color,
},
68: {
data: {
group: 6,
},
color: style.secondary2.color,
},
69: {
data: {
group: 2,
},
color: style.secondary1.color,
},
70: {
data: {
group: 2,
},
color: style.secondary1.color,
},
71: {
data: {
group: 2,
},
color: style.secondary1.color,
},
72: {
data: {
group: 2,
},
color: style.secondary1.color,
},
73: {
data: {
group: 2,
},
color: style.secondary1.color,
},
74: {
data: {},
color: style.primary1.color,
},
75: {
data: {},
color: style.primary1.color,
},
76: {
data: {},
color: style.primary1.color,
},
77: {
data: {},
color: style.primary1.color,
},
78: {
data: {
group: 4,
},
color: style.cat07.color,
},
79: {
data: {
group: 4,
},
color: style.cat07.color,
},
80: {
data: {
group: 4,
},
color: style.cat07.color,
},
81: {
data: {
group: 0,
},
color: style.primary2.color,
},
82: {
data: {
group: 3,
},
color: style.cat06.color,
},
83: {
data: {},
color: style.primary1.color,
},
84: {
data: {},
color: style.primary1.color,
},
85: {
data: {
group: 6,
},
color: style.secondary2.color,
},
86: {
data: {
group: 2,
},
color: style.secondary1.color,
},
87: {
data: {
group: 2,
},
color: style.secondary1.color,
},
88: {
data: {
group: 2,
},
color: style.secondary1.color,
},
89: {
data: {},
color: style.primary1.color,
},
90: {
data: {},
color: style.primary1.color,
},
91: {
data: {
group: 4,
},
color: style.cat07.color,
},
92: {
data: {
group: 4,
},
color: style.cat07.color,
},
93: {
data: {
group: 4,
},
color: style.cat07.color,
},
94: {
data: {
group: 0,
},
color: style.primary2.color,
},
"1-2": {
id1: 1,
id2: 2,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"1-3": {
id1: 1,
id2: 3,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"1-4": {
id1: 1,
id2: 4,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"1-5": {
id1: 1,
id2: 5,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"3-6": {
id1: 3,
id2: 6,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"4-7": {
id1: 4,
id2: 7,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"5-8": {
id1: 5,
id2: 8,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"9-6": {
id1: 9,
id2: 6,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"10-7": {
id1: 10,
id2: 7,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"11-8": {
id1: 11,
id2: 8,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"12-8": {
id1: 12,
id2: 8,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"13-8": {
id1: 13,
id2: 8,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"6-14": {
id1: 6,
id2: 14,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"6-15": {
id1: 6,
id2: 15,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"6-16": {
id1: 6,
id2: 16,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"7-17": {
id1: 7,
id2: 17,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"8-18": {
id1: 8,
id2: 18,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"8-19": {
id1: 8,
id2: 19,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"8-20": {
id1: 8,
id2: 20,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"8-21": {
id1: 8,
id2: 21,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"14-22": {
id1: 14,
id2: 22,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"16-23": {
id1: 16,
id2: 23,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"17-24": {
id1: 17,
id2: 24,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"18-25": {
id1: 18,
id2: 25,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"19-26": {
id1: 19,
id2: 26,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"27-22": {
id1: 27,
id2: 22,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"28-23": {
id1: 28,
id2: 23,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"29-23": {
id1: 29,
id2: 23,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"30-23": {
id1: 30,
id2: 23,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"31-25": {
id1: 31,
id2: 25,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"32-25": {
id1: 32,
id2: 25,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"33-26": {
id1: 33,
id2: 26,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"22-34": {
id1: 22,
id2: 34,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"22-35": {
id1: 22,
id2: 35,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"22-36": {
id1: 22,
id2: 36,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"23-37": {
id1: 23,
id2: 37,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"23-38": {
id1: 23,
id2: 38,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"24-39": {
id1: 24,
id2: 39,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"24-40": {
id1: 24,
id2: 40,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"24-41": {
id1: 24,
id2: 41,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"25-42": {
id1: 25,
id2: 42,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"25-43": {
id1: 25,
id2: 43,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"26-44": {
id1: 26,
id2: 44,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"26-45": {
id1: 26,
id2: 45,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"26-46": {
id1: 26,
id2: 46,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"34-47": {
id1: 34,
id2: 47,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"35-48": {
id1: 35,
id2: 48,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"39-49": {
id1: 39,
id2: 49,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"40-50": {
id1: 40,
id2: 50,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"41-51": {
id1: 41,
id2: 51,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"42-52": {
id1: 42,
id2: 52,
width: 4,
color: style.link.color,
end2: {
arrow: true,
},
},
"44-53": {
id1: 44,
id2: 53,
width: 4,
color: style.link.color,
end2: {
arrow: true,
// ...truncated 374 lines<!doctype html>
<html>
<body>
<div id="regraph" style="height: 100vh"></div>
<script type="module" src="./code.jsx"></script>
</body>
</html>