Skip to content

Commit fb5e1e1

Browse files
BasicPrimitivesBasicPrimitives
committed
Added alignBranches option to OrgDiagram
1 parent b3a4f9a commit fb5e1e1

10 files changed

+201
-9
lines changed

Diff for: ‎docs/CrossBranchAlignment.md

+10
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# Cross-Branch children alignment
2+
In the Organizational Chart layout, the number of rows occupied by the immediate children depends on the number of assistants, advisers, and levels of children of the node. So nodes at the same logical level in the organizational chart hierarchy require visual alignment during visualization.
3+
As expected, the control aligns regular horizontally placed children across branches of the hierarchy. But we support the alignment of Assistants, SubAssistants, Advisers, and SubAdvisers hierarchies and child nodes in vertical and matrix formations across departments.
4+
5+
The following options control cross-branch nodes alignment:
6+
* `alignBranches` - property enables alignment
7+
* `placeAdvisersAboveChildren` - if this property is disabled, then advisers' children are placed at the same level and aligned to the children of the parent's node.
8+
9+
[React](../src/Samples/CrossBranchAlignment.js)
10+

Diff for: ‎docs/LevelAnnotation.md

+14-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
11
# Level Annotations
22

3-
Basic Primitives Diagrams render layered hierarchies and dependency diagrams. Level annotation decorates the level of nodes with title and background stripe drawn across the diagram's whole level. The title is placed outside the diagram's view area and occupies screen space. Optionally you can place level annotation titles inside of the diagram's view area in the background.
3+
Basic Primitives Diagrams render layered hierarchies and dependency diagrams. Level annotation decorates the level of nodes with title and background stripe drawn across the diagram's whole level. The title is placed outside the diagram's view area and occupies screen space. Optionally you can place level annotation titles inside the diagram's view area in the background.
44

55
Level Annotations reference logical levels of the diagram. The first node placed into the logical level defines the level index. So if you have manager nodes vertically aligned under their CEO, you will have multiple managerial level annotations alternating with direct reports level annotations. See vertical organizational chart demo application.
6+
The node's children types and layout options change the number of visual levels in the hierarchy; use the `alignBranches` option to align children having the same logical level at one visual level.
67

7-
[React](../src/Samples/LevelAnnotation.js)
8+
[React](../src/Samples/LevelAnnotation.js)
9+
10+
# Templates
11+
12+
Use the following options to modify level annotation default content and mouse events:
13+
14+
* `onLevelTitleRender` - callback function to render level title
15+
* `onLevelBackgroundRender` - callback function to render level background
16+
17+
Click on the level annotation title to see a popup message.
18+
19+
[React](../src/Samples/LevelAnnotationTemplate.js)

Diff for: ‎docs/readme.md

+1
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@
1818

1919
## Organizational Chart Layout Options
2020
* [Regular Children Layout](ChildrenLayout.md)
21+
* [Cross-Branch Alignment](CrossBranchAlignment.md)
2122
* [Adviser & Assistant item types](AdviserAndAssistantItemTypes.md)
2223
* [Partner item types](PartnerItemTypes.md)
2324
* [Multiple root items](MultipleRootItemsInChart.md)

Diff for: ‎package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
22
"name": "basicprimitivesreact",
33
"sideEffects": false,
4-
"version": "6.4.1",
4+
"version": "6.5.0",
55
"main": "dist/umd/index.js",
66
"module": "dist/esm/index.js",
77
"babel": {
@@ -20,7 +20,7 @@
2020
"homepage": "https://basicprimitives.github.io/react/",
2121
"license": "SEE LICENSE IN license.pdf",
2222
"dependencies": {
23-
"basicprimitives": "6.4.1",
23+
"basicprimitives": "6.5.0",
2424
"resize-observer-polyfill": "^1.5.1"
2525
},
2626
"devDependencies": {

Diff for: ‎src/Diagrams/Schemas/OrgConfigShape.js

+1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import LevelAnnotationConfigShape from './LevelAnnotationConfigShape';
1414
const OrgConfigShape = PropTypes.shape({
1515
navigationMode: PropTypes.oneOf(Object.values(NavigationMode)),
1616
pageFitMode: PropTypes.oneOf(Object.values(PageFitMode)),
17+
alignBranches: PropTypes.bool,
1718
minimalVisibility: PropTypes.oneOf(Object.values(Visibility)),
1819
minimumVisibleLevels: PropTypes.number,
1920
orientationType: PropTypes.oneOf(Object.values(OrientationType)),

Diff for: ‎src/Samples/ChildrenPlacementType.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ class Sample extends Component {
66
render() {
77
const config = {
88
pageFitMode: PageFitMode.None,
9-
maximumColumnsInMatrix: 2,
9+
maximumColumnsInMatrix: 3,
1010
cursorItem: 1,
1111
highlightItem: 0,
1212
normalItemsInterval: 20,

Diff for: ‎src/Samples/CrossBranchAlignment.js

+162
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,162 @@
1+
import React, { Component } from 'react';
2+
import { OrgDiagram } from '../Diagrams';
3+
import { Enabled, PageFitMode, GroupByType, OrgItemConfig, ChildrenPlacementType } from 'basicprimitives';
4+
5+
class Sample extends Component {
6+
constructor(props) {
7+
super(props);
8+
9+
this.state = {
10+
alignBranches: false
11+
}
12+
}
13+
14+
onAlignBranches(alignBranches) {
15+
this.setState({ alignBranches });
16+
}
17+
18+
render() {
19+
const { alignBranches } = this.state;
20+
const config = {
21+
alignBranches,
22+
hasSelectorCheckbox: Enabled.False,
23+
pageFitMode: PageFitMode.None,
24+
arrowsDirection: GroupByType.Children,
25+
defaultTemplateName: "info",
26+
templates: [{
27+
name: "info",
28+
itemSize: { width: 80, height: 36 },
29+
minimizedItemSize: { width: 3, height: 3 },
30+
highlightPadding: { left: 4, top: 4, right: 4, bottom: 4 },
31+
onItemRender: ({ context: itemConfig }) => {
32+
return <div className="InfoTemplate">{itemConfig.title}</div>;
33+
}
34+
}],
35+
items: [
36+
new OrgItemConfig({
37+
id: 1,
38+
parent: null,
39+
title: "Branch 1",
40+
childrenPlacementType: ChildrenPlacementType.Matrix,
41+
}),
42+
new OrgItemConfig({
43+
id: 10,
44+
parent: 1,
45+
levelOffset: 0,
46+
title: "Child 1 at row 0",
47+
}),
48+
new OrgItemConfig({
49+
id: 11,
50+
parent: 1,
51+
levelOffset: 0,
52+
title: "Child 2 at row 0",
53+
}),
54+
new OrgItemConfig({
55+
id: 12,
56+
parent: 1,
57+
levelOffset: 1,
58+
title: "Child 3 at row 1",
59+
}),
60+
new OrgItemConfig({
61+
id: 13,
62+
parent: 1,
63+
levelOffset: 1,
64+
title: "Child 4 at row 1",
65+
}),
66+
new OrgItemConfig({
67+
id: 14,
68+
parent: 1,
69+
levelOffset: 1,
70+
title: "Child 5 at row 1",
71+
}),
72+
new OrgItemConfig({
73+
id: 15,
74+
parent: 1,
75+
levelOffset: 1,
76+
title: "Child 6 at row 1",
77+
}),
78+
79+
new OrgItemConfig({ id: 2, parent: 1, title: "Child 7" }),
80+
new OrgItemConfig({ id: 3, parent: 1, title: "Child 8" }),
81+
new OrgItemConfig({ id: 4, parent: 1, title: "Child 9" }),
82+
new OrgItemConfig({ id: 5, parent: 1, title: "Child 10" }),
83+
new OrgItemConfig({ id: 6, parent: 1, title: "Child 11" }),
84+
new OrgItemConfig({ id: 7, parent: 1, title: "Child 12" }),
85+
new OrgItemConfig({ id: 8, parent: 1, title: "Child 13" }),
86+
new OrgItemConfig({ id: 9, parent: 1, title: "Child 14" }),
87+
88+
/* Branch 2 */
89+
new OrgItemConfig({
90+
id: 101,
91+
parent: null,
92+
title: "Branch 2",
93+
}),
94+
new OrgItemConfig({
95+
id: 102,
96+
parent: 101,
97+
levelOffset: 1,
98+
title: "Child 1 at row 1",
99+
}),
100+
new OrgItemConfig({
101+
id: 103,
102+
parent: 101,
103+
levelOffset: 1,
104+
title: "Child 2 at row 1",
105+
childrenPlacementType: ChildrenPlacementType.Vertical,
106+
}),
107+
new OrgItemConfig({
108+
id: 104,
109+
parent: 103,
110+
title: "Sub Child 3",
111+
}),
112+
new OrgItemConfig({
113+
id: 105,
114+
parent: 103,
115+
title: "Sub Child 4",
116+
}),
117+
new OrgItemConfig({
118+
id: 106,
119+
parent: 101,
120+
title: "Child 3",
121+
}),
122+
new OrgItemConfig({
123+
id: 107,
124+
parent: 101,
125+
title: "Child 4",
126+
})
127+
]
128+
};
129+
130+
return <>
131+
<p>Enable cross-branch children alignment:
132+
<br />
133+
<label>
134+
<input
135+
onChange={() => this.onAlignBranches(true)}
136+
name="alignBranches"
137+
type="radio"
138+
value="1"
139+
checked={alignBranches === true ? 'checked' : ''}
140+
/>
141+
True
142+
</label>
143+
<br />
144+
<label>
145+
<input
146+
onChange={() => this.onAlignBranches(false)}
147+
name="alignBranches"
148+
type="radio"
149+
value="0"
150+
checked={alignBranches === false ? 'checked' : ''}
151+
/>
152+
False
153+
</label>
154+
</p>
155+
<div className="placeholder">
156+
<OrgDiagram centerOnCursor={true} config={config} />
157+
</div>
158+
</>
159+
}
160+
}
161+
162+
export default Sample;

Diff for: ‎src/Samples/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ export { default as ItemAndGroupTitleColors} from './ItemAndGroupTitleColors';
1212
export { default as GroupTitleTemplate} from './GroupTitleTemplate';
1313
export { default as Labels} from './Labels';
1414
export { default as ChildrenPlacementType} from './ChildrenPlacementType';
15+
export { default as CrossBranchAlignment} from './CrossBranchAlignment';
1516
export { default as AdviserAndAssistantItemTypes} from './AdviserAndAssistantItemTypes';
1617
export { default as PlaceAssistantsAboveChildren} from './PlaceAssistantsAboveChildren';
1718
export { default as PlaceAdvisersAboveChildren} from './PlaceAdvisersAboveChildren';

Diff for: ‎src/SamplesList.js

+5
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
GroupTitleTemplate,
1515
Labels,
1616
ChildrenPlacementType,
17+
CrossBranchAlignment,
1718
AdviserAndAssistantItemTypes,
1819
PlaceAdvisersAboveChildren,
1920
PlaceAssistantsAboveChildren,
@@ -128,6 +129,10 @@ const SamplesList = [
128129
label: "Children Placement",
129130
component: <ChildrenPlacementType />
130131
},
132+
{
133+
label: "Cross-Branch Alignment",
134+
component: <CrossBranchAlignment />
135+
},
131136
{
132137
label: "Children & Assistants Levels",
133138
component: <ChildrenAndAssistantsLevelOffset />

Diff for: ‎yarn.lock

+4-4
Original file line numberDiff line numberDiff line change
@@ -2722,10 +2722,10 @@ base@^0.11.1:
27222722
mixin-deep "^1.2.0"
27232723
pascalcase "^0.1.1"
27242724

2725-
basicprimitives@6.4.1:
2726-
version "6.4.1"
2727-
resolved "https://registry.yarnpkg.com/basicprimitives/-/basicprimitives-6.4.1.tgz#9ad74f77916adf9f0e8cde07f4aa05bb914aea6a"
2728-
integrity sha512-xqZgOi1x3lLxh/kS+YYJaDi8ESv4pxIa+jESo0CwTPleZDd3i8mA2pk8JLxdDf+TsKUtxrMVppG+7du49n0FHw==
2725+
basicprimitives@6.5.0:
2726+
version "6.5.0"
2727+
resolved "https://registry.yarnpkg.com/basicprimitives/-/basicprimitives-6.5.0.tgz#68265e4f80bda6de31896ca04501086b2257694b"
2728+
integrity sha512-nFvF67UAjn++5Ps2RuaZ0dzgZ+Snf1z5XLft1N5u+VRGRomi9gVAs3eCo5+X/9QEnC6zHyQPWgvKC1InkY8ETg==
27292729

27302730
[email protected]:
27312731
version "0.6.1"

0 commit comments

Comments
 (0)