You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
@@ -153,6 +152,6 @@ Do you want to use a Basic Primitives diagram for a personal website, a school s
153
152
## Performance
154
153
Through a full API, you can add, remove and modify individual items and their properties. The component will only update the visual elements affected by the API changes. We put in much effort to make it happen!
Copy file name to clipboardExpand all lines: docs/AddingNewItemsToChartAtRuntime.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -10,4 +10,4 @@ The component ignores changes in node options, not affecting the diagram layout.
10
10
11
11
The application stores the collection of items in the application component: `state`. The diagram component updates its layout every time it gets a new configuration object reference. The diagram keeps the internal state between rendering cycles and tracks property changes for individual configuration objects. The configuration object properties may affect different visuals and transformations of the graph. The component tracks every property individually and optimizes rendering time. For the more complex implementation of chart editing functionality, see the matrixed organizational chart structure editor demo at this site.
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.
29
29
30
30
Use the `adviserPlacementType` option to place them on the parent's hierarchy's left or right side.
## Adviser child nodes placement above parent's node children
35
35
36
36
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.
## Assistant child nodes placement above parent's node children
41
41
If the assistant node has its children, then control pushes the parent's children down, placing assistant children at rows above the parent's children. You can alter this layout schema with the `placeAssistantsAboveChildren` option. If you set it to false, then the parent's and assistant's node children would be rendered side by side at the same level.
# Placing children into multiple horizontal levels
32
32
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.
@@ -44,28 +44,28 @@ import { ChildrenPlacementType } from basicprimitives;
Copy file name to clipboardExpand all lines: docs/ConnectorAnnotation.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -17,4 +17,4 @@ In general shape of connector annotation may indicate various relations, so comp
17
17
## Labels
18
18
Connector annotations labels are plain text or JSX elements. Please, pay attention that component does not resolve connector annotations labels overlapping, so many annotations labels can clutter view and diagram in general.
Copy file name to clipboardExpand all lines: docs/CrossBranchAlignment.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -6,5 +6,5 @@ The following options control cross-branch nodes alignment:
6
6
*`alignBranches` - property enables alignment
7
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.
We can use hidden items to skip levels in the organizational chart as well. The hidden nodes occupy space, so we can use them to shift child items down one row relative to their parents.
30
30
31
31
Use the `levelOffset` option of the item configuration object to arrange regular children into rows.
Another diagram integration scenario is diagram placement inside the article, so the component needs to auto expand its size to accommodate all diagram nodes without minimization or truncation. Set `pageFitMode` to `PageFitMode.AutoSize` and component will size itself to show all nodes of diagram.
@@ -44,4 +44,4 @@ import { Size } from basicprimitives;
If a node has multiple parents and belongs to distant branches of the diagram, then the `primaryParent` property can give higher priority to one of them. So the control would place the node to the hierarchy of that primary parent.
25
25
26
26
*`primaryParent` - defines the primary parent of the node. The control would place the node into the hierarchy of the primary node. If there is no parent found, then the layout engine will ignore it.
Another typical problem in connectors visualization is excessive grandparents relations. It is the situation when an item has direct links to all its grandparents. Usually, when we draw the family diagram, we are more interested in showing dependencies over actual relations. We know that the grandparent precedes the parent, the great grandparent precedes the grandparent, and so on. So this precedence defines the indirect link between the child node and grand-grandparent. So direct relation visualization between the child node and its grandparents can be omitted from the diagram and replaced with dynamic annotations. Look at the following example where every child references all preceding parents:
24
24
@@ -34,6 +34,6 @@ import { FamDiagram } from basicprimitivesreact;
So we got a relatively clean relations diagram between nodes. We still have all relations in place. The only difference is that grandparent's connections go through actual parents, so we need to visualize them dynamically with highlight path annotations. As we browse the diagram nodes, we can highlight all directly linked parents and children with Connector Path Annotations and set dynamically custom Item Template for them.
Copy file name to clipboardExpand all lines: docs/FirstFamilyChart.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
Basic Primitives Diagrams for React - data visualization component library that implements organizational chart and layered multi-parent dependency tree diagrams. It renders nodes using ReactJS Virtual DOM without direct DOM manipulations, so it compliant with all React features and popular react extensions like [React Drag & Drop](http://react-dnd.github.io/react-dnd/about) and [React Context](https://reactjs.org/docs/context.html)
4
4
5
-
Our site contains samples and demo published on GitHub. The recommended way to get familiar with our library is to clone our GitHub [React Sample](https://github.com/BasicPrimitives/react) repository and run it locally. It contains simple, single-page examples. If you need to see more complex end to end applications developed in ReactJS using hooks and Redux state management, then clone our GitHub [react-demos](https://github.com/BasicPrimitives/react-demo) repository
5
+
Our site contains samples and demo published on GitHub. The recommended way to get familiar with our library is to clone our GitHub [react](https://github.com/BasicPrimitives/react) repository and run it locally. It contains simple, single-page examples. If you need to see more complex end to end applications developed in ReactJS using hooks and Redux state management, then clone our GitHub [react-demos](https://github.com/BasicPrimitives/react-demo) repository
6
6
7
7
8
8
## Organizational chart vs. Family Diagram
@@ -25,7 +25,7 @@ You can guide the family diagram control on how to order nodes in layout relativ
25
25
26
26
The following is the copy-paste of the "First Organization Chart" sample, but for the family diagram. See the organizational chart sample for more technical details.
Copy file name to clipboardExpand all lines: docs/FirstOrganizationalChart.md
+2-2
Original file line number
Diff line number
Diff line change
@@ -2,7 +2,7 @@
2
2
3
3
Basic Primitives Diagrams for React - data visualization component library that implements organizational chart and multi-parent dependency tree diagrams. It renders nodes using ReactJS Virtual DOM without direct DOM manipulations, so it compliant with all React features and popular react extensions like [React Drag & Drop](http://react-dnd.github.io/react-dnd/about) and [React Context](https://reactjs.org/docs/context.html)
4
4
5
-
Our site contains samples and demo published on GitHub. The recommended way to get familiar with our library is to clone our GitHub [React Sample](https://github.com/BasicPrimitives/react) repository and run it locally. It contains simple, single-page examples. If you need to see more complex end to end applications developed in ReactJS using hooks and Redux state management, then clone our GitHub [react-demos](https://github.com/BasicPrimitives/react-demo) repository
5
+
Our site contains samples and demo published on GitHub. The recommended way to get familiar with our library is to clone our GitHub [react](https://github.com/BasicPrimitives/react) repository and run it locally. It contains simple, single-page examples. If you need to see more complex end to end applications developed in ReactJS using hooks and Redux state management, then clone our GitHub [react-demos](https://github.com/BasicPrimitives/react-demo) repository
6
6
7
7
## NPM packages:
8
8
Use the following commands to import our components from npm packages.
The diagramming components work in React applications created with [`create-react-app`](https://facebook.github.io/create-react-app/), use the following steps to create and run the first diagram:
## PERT - Program evaluation and review technique chart & Critical Path Visualization
20
20
PERT chart critical path visualization with Highlight Path Annotation. The chart does not provide any means to find a critical path. It is the developer's responsibility to trace items and visualize critical path with Highlight Path Annotation. The application should sequence the Critical path nodes and set them in the annotation.
0 commit comments