Skip to content

Commit 3790d63

Browse files
BasicPrimitivesBasicPrimitives
authored
Merge pull request #81 from BasicPrimitives/alignbranches
Added `alignBranches` option to `OrgConfig`.
2 parents c526f67 + 8bb58ac commit 3790d63

60 files changed

Lines changed: 4619 additions & 1025 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎changelog.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1+
#### Version 6.5.0
2+
**Warning**: Non-backward compatible API changes!
3+
* Added `alignBranches` option to `OrgConfig`.
4+
* Removed children formation for items having `levelOffset`.
5+
* Fixed highlight path annotation tracing over partner connection.
6+
* Fixed `placeAssistantsAboveChildren` property for multiple assistants rows
17
#### Version 6.4.1
28
* Added `onGroupTitleRender`, `onLevelTitleRender` and `onLevelBackgroundRender` options to `OrgConfig` and `FamConfig`
39
#### Version 6.4.0

‎index.html‎

Lines changed: 14 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,12 @@
4242
javascript: "samples/javascript.controls/DemoVerticalLayout.html"
4343
}
4444
},
45+
{
46+
label: "Cross-branch alignment",
47+
frameworks: {
48+
javascript: "samples/javascript.controls/DemoCrossBranchAlignment.html"
49+
}
50+
},
4551
{
4652
label: "Cross Team Working Group",
4753
frameworks: {
@@ -281,6 +287,12 @@
281287
pdfkit: "samples/pdfkit.plugins/ChildrenPlacementType.html"
282288
}
283289
},
290+
{
291+
label: "Cross-branch alignment",
292+
frameworks: {
293+
javascript: "samples/javascript.controls/CaseCrossBranchAlignment.html"
294+
}
295+
},
284296
{
285297
label: "Children & Assistants Levels",
286298
frameworks: {
@@ -348,7 +360,7 @@
348360
}
349361
},
350362
{
351-
label: "Skip levels",
363+
label: "Skip levels with invisible items",
352364
frameworks: {
353365
javascript: "samples/javascript.controls/CaseSkippedLevels.html"
354366
}
@@ -523,8 +535,7 @@
523535
{
524536
label: "Level Annotation - Custom Templates",
525537
frameworks: {
526-
javascript: "samples/javascript.controls/CaseLevelAnnotationTemplate.html",
527-
pdfkit: "samples/pdfkit.plugins/LevelAnnotationTemplate.html"
538+
javascript: "samples/javascript.controls/CaseLevelAnnotationTemplate.html"
528539
}
529540
},
530541
{

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"name": "basicprimitives",
33
"sideEffects": false,
44
"homepage": "https://www.basicprimitives.com/",
5-
"version": "6.4.1",
5+
"version": "6.5.0",
66
"author": "Basic Primitives Inc. <support@basicprimitives.com> (https://www.basicprimitives.com)",
77
"description": "Basic Primitives Diagrams for JavaScript - data visualization components library that implements organizational chart and multi-parent dependency diagrams, contains implementations of JavaScript Controls and PDF rendering plugins.",
88
"repository": {

‎samples/AdviserAndAssistantItemTypes.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ Use the `levelOffset` option to arrange assistants into multiple rows. See the r
2727

2828
## Sub Adviser & Sub Assistant item types
2929

30-
Sub Adviser & Sub Assistant item types are variations of regular Adviser & Assistant types. The only difference is that they have the connection line going from the top edge of the node, and they are shift down one level relative to their parents.
30+
Sub Adviser & Sub Assistant item types are variations of regular Adviser & Assistant types. The only difference is that they shifted one level down relative to their original position.
3131

3232
Use the `adviserPlacementType` option to place them on the parent's hierarchy's left or right side.
3333

@@ -37,7 +37,7 @@ Use the `adviserPlacementType` option to place them on the parent's hierarchy's
3737

3838
## Adviser child nodes placement above parent's node children
3939

40-
If the adviser node has its children, then control adds extra levels, so it places advisers children at rows above the parent's children. You can alter this layout schema with the `placeAdvisersAboveChildren` option. If you set it to false, control would place advisers and the parent's children at the same row of the diagram.
40+
If the adviser node has children, then they can be placed side by side with parents children or above them. You can choose the adviser's children's placement with the `placeAdvisersAboveChildren` option. If you set it to false, control would place advisers and the parent's children at the same row of the diagram. See Cross -Branch alignment for more options.
4141

4242
[JavaScript](javascript.controls/CasePlaceAdvisersAboveChildren.html)
4343

‎samples/ChildrenLayout.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
# Children Layout
2-
Children Placement Layout can be defined individually per item or globally for all chart items. Following chart and item config properties are used to define the layout of children:
2+
The organizational chart control provides options for individual node placement and global settings controlling the layout of the entire diagram. Use the following chart and item config properties to define nodes position in the hierarchy:
33

44
* `childrenPlacementType` - this property is available for chart and for individual items, it defines shape of children with the `primitives.ChildrenPlacementType` enumeration, which has following options `Vertical`, `Horizontal` & `Matrix`
55
* `leavesPlacementType` - this option is available only at the global chart level. It controls children's layout with no own children, so it is only for children of the hierarchy's last level.
@@ -10,9 +10,10 @@ Children Placement Layout can be defined individually per item or globally for a
1010
![Screenshot](javascript.controls/__image_snapshots__/CaseChildrenPlacementType-snap.png)
1111

1212
# Placing children into multiple horizontal levels
13-
To programmatically place children nodes into multiple rows, use the `levelOffset` property. Child nodes would be grouped by that property and placed in rows. If level offsets defined for children have gaps, then the control would preserve empty row, so different branches and teams of the same organizations would be properly aligned. See the matrixed layout demo for the matrixed team structure in the organization.
13+
To programmatically place children nodes into multiple rows, use the `levelOffset` property. If level offsets are inconsistent and have missing levels, the control will automatically align levels across branches. See cross-branch alignment for more details. The matrixed layout demo shows the matrixed team structure visualization and alignment in the organization.
1414

1515

16-
If you use the `levelOffset` property, then the children's last row is only shaped into matrixed or vertical formation by the `childrenPlacementType` property setting.
16+
Only children having the `levelOffset` property set to `null`, are shaped into matrixed or vertical formation by the `childrenPlacementType` property setting.
17+
1718

1819
[JavaScript](javascript.controls/CaseChildrenAndAssistantsLevelOffset.html)

‎samples/CrossBranchAlignment.md‎

Lines changed: 10 additions & 0 deletions
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+
The following options control cross-branch nodes alignment:
5+
* `alignBranches` - property enables alignment
6+
* `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.
7+
8+
[JavaScript](javascript.controls/CaseCrossBranchAlignment.html)
9+
10+
![Screenshot](javascript.controls/__image_snapshots__/CaseCrossBranchAlignment-snap.png)

‎samples/LevelAnnotation.md‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,24 @@
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

78
[JavaScript](javascript.controls/CaseLevelAnnotation.html)
89
[PDFKit](pdfkit.plugins/LevelAnnotation.html)
910

10-
![Screenshot](javascript.controls/__image_snapshots__/CaseLevelAnnotation-snap.png)
11+
![Screenshot](javascript.controls/__image_snapshots__/CaseLevelAnnotation-snap.png)
12+
13+
# Level Annotations Templates
14+
15+
Use the following options to modify level annotation default content and mouse events:
16+
17+
* `onLevelTitleRender` - callback function to render level title
18+
* `onLevelBackgroundRender` - callback function to render level background
19+
20+
Click on the level annotation title to see a popup message.
21+
22+
[JavaScript](javascript.controls/CaseLevelAnnotationTemplate.html)
23+
24+
![Screenshot](javascript.controls/__image_snapshots__/CaseLevelAnnotationTemplate-snap.png)

‎samples/data/editordata.js‎

Lines changed: 23 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -248,12 +248,12 @@ function getMatrixedLeaves() {
248248

249249
var counter = 8;
250250
var groups = {
251-
"E": { levels: [0, 0, 6, 2, 25] },
252-
"V": { levels: [14, 12, 8, 8, 56]},
253-
"U": { levels: [2, 4, 6, 8, 37] },
254-
"O": { levels: [0, 0, 0, 0, 12] },
255-
"P": { levels: [1, 10, 0, 1, 24] },
256-
"L": { levels: [1, 5, 0, 2, 18] }
251+
"E": { levels: [0, 0, 6, 2], childrenCount: 25 },
252+
"V": { levels: [14, 12, 8, 8], childrenCount: 56},
253+
"U": { levels: [2, 4, 6, 8], childrenCount: 37 },
254+
"O": { levels: [0, 0, 0, 0], childrenCount: 12 },
255+
"P": { levels: [1, 10, 0, 1], childrenCount: 24 },
256+
"L": { levels: [1, 5, 0, 2], childrenCount: 18 }
257257
};
258258
for (var groupKey in groups) {
259259
var group = groups[groupKey];
@@ -278,16 +278,31 @@ function getMatrixedLeaves() {
278278
id: counter,
279279
parent: manager.id,
280280
title: GetNextName(),
281-
description: "Description of #" + counter.toString() + " member of group " + groupKey,
281+
description: "Description of #" + counter.toString() + " row child of group " + groupKey,
282282
image: "../images/photos/" + groupKey.toLowerCase() + ".png",
283-
email: GetRandomEmail(counter.toString() + " member of " + groupKey),
283+
email: GetRandomEmail(counter.toString() + " row member of " + groupKey),
284284
phone: GetRandomPhone(),
285285
label: counter.toString(),
286286
levelOffset: levelIndex
287287
});
288288
items.push(memberItem);
289289
}
290290
}
291+
var childrenCount = group.childrenCount;
292+
for (var index = 0; index < childrenCount; index += 1) {
293+
counter++;
294+
var memberItem = new primitives.OrgItemConfig({
295+
id: counter,
296+
parent: manager.id,
297+
title: GetNextName(),
298+
description: "Description of #" + counter.toString() + " member of group " + groupKey,
299+
image: "../images/photos/" + groupKey.toLowerCase() + ".png",
300+
email: GetRandomEmail(counter.toString() + " member of " + groupKey),
301+
phone: GetRandomPhone(),
302+
label: counter.toString()
303+
});
304+
items.push(memberItem);
305+
}
291306
}
292307

293308
return items;

‎samples/javascript.controls/CaseChildrenAndAssistantsLevelOffset.html‎

Lines changed: 142 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -138,14 +138,14 @@
138138
image: "../images/photos/p.png",
139139
groupTitle: "Part Time",
140140
groupTitleColor: primitives.Colors.Green,
141-
levelOffset: 2
141+
levelOffset: null
142142
});
143143
};
144144

145145
items.push({
146146
id: 1003,
147147
parent: 103,
148-
title: "Assistant",
148+
title: "Assistant 1",
149149
description: "Assistant Description",
150150
image: "../images/photos/b.png",
151151
itemType: primitives.ItemType.Assistant,
@@ -158,7 +158,7 @@
158158
items.push({
159159
id: 1004,
160160
parent: 17,
161-
title: "Assistant",
161+
title: "Assistant 2",
162162
description: "Assistant Description",
163163
image: "../images/photos/b.png",
164164
itemType: primitives.ItemType.Assistant,
@@ -170,9 +170,9 @@
170170

171171
items.push({
172172
id: 1005,
173-
parent: 16,
174-
title: "Assistant",
175-
description: "Assistant Description",
173+
parent: 14,
174+
title: "Adviser 3",
175+
description: "Adviser Description 3",
176176
image: "../images/photos/b.png",
177177
itemType: primitives.ItemType.Adviser,
178178
adviserPlacementType: primitives.AdviserPlacementType.Right,
@@ -181,6 +181,141 @@
181181
levelOffset: 0
182182
});
183183

184+
185+
items.push({
186+
id: 1006,
187+
parent: 1005,
188+
title: "Child of Ass 3",
189+
description: "Child Description",
190+
image: "../images/photos/b.png",
191+
itemType: primitives.ItemType.Regular,
192+
groupTitle: "Audit",
193+
groupTitleColor: primitives.Colors.Olive,
194+
levelOffset: 0
195+
});
196+
197+
items.push({
198+
id: 1007,
199+
parent: 1006,
200+
title: "Child of Child of Ass 3",
201+
description: "Child Description",
202+
image: "../images/photos/b.png",
203+
itemType: primitives.ItemType.Regular,
204+
groupTitle: "Audit",
205+
groupTitleColor: primitives.Colors.Olive,
206+
levelOffset: 0
207+
});
208+
209+
items.push({
210+
id: 1008,
211+
parent: 1007,
212+
title: "Child of Child of Child of Ass 3",
213+
description: "Child Description",
214+
image: "../images/photos/b.png",
215+
itemType: primitives.ItemType.Regular,
216+
groupTitle: "Audit",
217+
groupTitleColor: primitives.Colors.Olive,
218+
levelOffset: 0
219+
});
220+
221+
items.push({
222+
id: 1009,
223+
parent: 17,
224+
title: "Test Adviser",
225+
description: "Child Description",
226+
image: "../images/photos/b.png",
227+
itemType: primitives.ItemType.Adviser,
228+
adviserPlacementType: primitives.AdviserPlacementType.Left,
229+
groupTitle: "Test",
230+
groupTitleColor: primitives.Colors.Olive,
231+
levelOffset: 0
232+
});
233+
234+
items.push({
235+
id: 1010,
236+
parent: 1009,
237+
title: "Test Adviser 2",
238+
description: "Adviser Description 2",
239+
image: "../images/photos/b.png",
240+
itemType: primitives.ItemType.Adviser,
241+
groupTitle: "Test",
242+
groupTitleColor: primitives.Colors.Olive,
243+
levelOffset: 0
244+
});
245+
246+
items.push({
247+
id: 1011,
248+
parent: 1010,
249+
title: "Test Child 2",
250+
description: "Child Description",
251+
image: "../images/photos/b.png",
252+
itemType: primitives.ItemType.Regular,
253+
groupTitle: "Test",
254+
groupTitleColor: primitives.Colors.Olive,
255+
levelOffset: 0
256+
});
257+
258+
items.push({
259+
id: 1012,
260+
parent: 1011,
261+
title: "Test Child 3",
262+
description: "Child Description",
263+
image: "../images/photos/b.png",
264+
itemType: primitives.ItemType.Regular,
265+
groupTitle: "Test",
266+
groupTitleColor: primitives.Colors.Olive,
267+
levelOffset: 0
268+
});
269+
270+
271+
items.push({
272+
id: 1013,
273+
parent: 31,
274+
title: "Test Adviser",
275+
description: "Child Description",
276+
image: "../images/photos/b.png",
277+
itemType: primitives.ItemType.Adviser,
278+
groupTitle: "Test",
279+
groupTitleColor: primitives.Colors.Olive,
280+
levelOffset: 0
281+
});
282+
283+
items.push({
284+
id: 1014,
285+
parent: 1013,
286+
title: "Test Child",
287+
description: "Child Description",
288+
image: "../images/photos/b.png",
289+
itemType: primitives.ItemType.Adviser,
290+
groupTitle: "Test",
291+
groupTitleColor: primitives.Colors.Olive,
292+
levelOffset: 0
293+
});
294+
295+
items.push({
296+
id: 1015,
297+
parent: 1014,
298+
title: "Test Child 2",
299+
description: "Child Description",
300+
image: "../images/photos/b.png",
301+
itemType: primitives.ItemType.Regular,
302+
groupTitle: "Test",
303+
groupTitleColor: primitives.Colors.Olive,
304+
levelOffset: 0
305+
});
306+
307+
items.push({
308+
id: 1016,
309+
parent: 1015,
310+
title: "Test Child 3",
311+
description: "Child Description",
312+
image: "../images/photos/b.png",
313+
itemType: primitives.ItemType.Regular,
314+
groupTitle: "Test",
315+
groupTitleColor: primitives.Colors.Olive,
316+
levelOffset: 0
317+
});
318+
184319
options.items = items;
185320

186321
options.cursorItem = 0;
@@ -202,6 +337,7 @@
202337
options.leavesPlacementType = primitives.ChildrenPlacementType.Matrix;
203338

204339
options.arrowsDirection = primitives.GroupByType.Children;
340+
options.placeAdvisersAboveChildren = true;
205341

206342
options.annotations = [
207343
{

0 commit comments

Comments
 (0)