Complex hierarchical tree layout in Vue Diagram control
14 Dec 202424 minutes to read
Complex hierarchical tree layout arranges nodes in a tree-like structure, where the child node can have more than one parent. This layout is an extended version of the hierarchical tree layout. To create a complex hierarchical tree, the type property of layout should be set as ComplexHierarchicalTree.
Complex hierarchical tree layout with nodes and connectors
The following example demonstrates how to render a complex hierarchical tree layout using nodes and connectors. To achieve this, you need to define the nodes and connectors collections and assign them to the diagram. Additionally, you need to set the layout type to ComplexHierarchicalTree.
<template>
<div id="app">
<ejs-diagram id="diagram" :width="width" :height="height" :nodes="nodes" :connectors="connectors"
:getNodeDefaults="getNodeDefaults" :getConnectorDefaults="getConnectorDefaults"
:layout="layout"></ejs-diagram>
</div>
</template>
<script setup>
import { provide } from "vue";
import { DiagramComponent as EjsDiagram, ComplexHierarchicalTree, DataBinding } from '@syncfusion/ej2-vue-diagrams';
const nodes = [
{ id: 'node1' },
{ id: 'node2' },
{ id: 'node3' },
{ id: 'node4' },
{ id: 'node5' },
{ id: 'node6' },
{ id: 'node7' },
];
const connectors = [
{ id: 'node1-node4', sourceID: 'node1', targetID: 'node4' },
{ id: 'node2-node4', sourceID: 'node2', targetID: 'node4' },
{ id: 'node3-node4', sourceID: 'node3', targetID: 'node4' },
{ id: 'node4-node5', sourceID: 'node4', targetID: 'node5' },
{ id: 'node4-node6', sourceID: 'node4', targetID: 'node6' },
{ id: 'node5-node6', sourceID: 'node6', targetID: 'node7' },
];
const width = '100%';
const height = '590px';
const layout = {
//Sets layout type
type: 'ComplexHierarchicalTree',
orientation: 'TopToBottom',
horizontalAlignment: 'Center',
verticalAlignment: 'Top',
};
//Sets the default properties for nodes and connectors
const getNodeDefaults = (node) => {
node.width = 70;
node.height = 70;
node.annotations = [{ content: node.id }];
return node;
};
const getConnectorDefaults = (connector) => {
connector.type = 'Orthogonal';
return connector;
};
provide('diagram', [ComplexHierarchicalTree, DataBinding]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width="width" :height="height" :nodes="nodes" :connectors="connectors"
:getNodeDefaults="getNodeDefaults" :getConnectorDefaults="getConnectorDefaults"
:layout="layout"></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, ComplexHierarchicalTree, DataBinding } from '@syncfusion/ej2-vue-diagrams';
let nodes = [
{ id: 'node1' },
{ id: 'node2' },
{ id: 'node3' },
{ id: 'node4' },
{ id: 'node5' },
{ id: 'node6' },
{ id: 'node7' },
];
let connectors = [
{ id: 'node1-node4', sourceID: 'node1', targetID: 'node4' },
{ id: 'node2-node4', sourceID: 'node2', targetID: 'node4' },
{ id: 'node3-node4', sourceID: 'node3', targetID: 'node4' },
{ id: 'node4-node5', sourceID: 'node4', targetID: 'node5' },
{ id: 'node4-node6', sourceID: 'node4', targetID: 'node6' },
{ id: 'node5-node6', sourceID: 'node6', targetID: 'node7' },
];
export default {
name: 'App',
components: {
'ejs-diagram': DiagramComponent,
},
data() {
return {
width: '100%',
height: '590px',
nodes: nodes,
connectors: connectors,
//Uses layout to auto-arrange nodes on the Diagram page
layout: {
//Sets layout type
type: 'ComplexHierarchicalTree',
orientation: 'TopToBottom',
horizontalAlignment: 'Center',
verticalAlignment: 'Top',
},
//Sets the default properties for nodes and connectors
getNodeDefaults: (node) => {
node.width = 70;
node.height = 70;
node.annotations = [{ content: node.id }];
return node;
},
getConnectorDefaults: (connector) => {
connector.type = 'Orthogonal';
return connector;
},
};
},
provide: {
diagram: [ComplexHierarchicalTree, DataBinding],
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Complex hierarchical tree layout with DataSource
The following code example illustrates how to create a complex hierarchical tree with DataSource.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :getNodeDefaults='getNodeDefaults'
:getConnectorDefaults='getConnectorDefaults' :layout='layout'
:dataSourceSettings='dataSourceSettings'></ejs-diagram>
</div>
</template>
<script setup>
import { provide } from "vue";
import { DiagramComponent as EjsDiagram, ComplexHierarchicalTree, DataBinding } from '@syncfusion/ej2-vue-diagrams';
import { DataManager, Query } from "@syncfusion/ej2-data";
let data = [
{ "Name": "node11" },
{ "Name": "node12", "ReportingPerson": ["node114"] },
{ "Name": "node13", "ReportingPerson": ["node12"] },
{ "Name": "node14", "ReportingPerson": ["node12"] },
{ "Name": "node15", "ReportingPerson": ["node12"] },
{ "Name": "node16", "ReportingPerson": [] },
{ "Name": "node17", "ReportingPerson": ["node13", "node14", "node15"] },
{ "Name": "node18", "ReportingPerson": [] },
{ "Name": "node19", "ReportingPerson": ["node16", "node17", "node18"] },
{ "Name": "node110", "ReportingPerson": ["node16", "node17", "node18"] },
{ "Name": "node111", "ReportingPerson": ["node16", "node17", "node18", "node116"] },
{ "Name": "node21" },
{ "Name": "node22", "ReportingPerson": ["node114"] },
{ "Name": "node23", "ReportingPerson": ["node22"] },
{ "Name": "node24", "ReportingPerson": ["node22"] },
{ "Name": "node25", "ReportingPerson": ["node22"] },
{ "Name": "node26", "ReportingPerson": [] },
{ "Name": "node27", "ReportingPerson": ["node23", "node24", "node25"] },
{ "Name": "node28", "ReportingPerson": [] },
{ "Name": "node29", "ReportingPerson": ["node26", "node27", "node28", "node116"] },
{ "Name": "node210", "ReportingPerson": ["node26", "node27", "node28"] },
{ "Name": "node211", "ReportingPerson": ["node26", "node27", "node28"] },
{ "Name": "node31" },
{ "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"] },
{ "Name": "node116", "ReportingPerson": ["node12", "node22"], }
];
let items = new DataManager(data, new Query().take(7));
const width = "100%";
const height = "590px";
//Uses layout to auto-arrange nodes on the Diagram page
const layout = {
//Sets layout type
type: 'ComplexHierarchicalTree',
}
//Initializes the node template.
const dataSourceSettings = {
id: 'Name',
parentId: 'ReportingPerson',
dataManager: items
}
//Sets the default properties for nodes and connectors
const getNodeDefaults = (node) => {
node.width = 70; node.height = 70;
return node;
}
const getConnectorDefaults = (connector) => {
connector.type = 'Orthogonal';
return connector;
}
provide('diagram', [DataBinding, ComplexHierarchicalTree]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :getNodeDefaults='getNodeDefaults'
:getConnectorDefaults='getConnectorDefaults' :layout='layout'
:dataSourceSettings='dataSourceSettings'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, ComplexHierarchicalTree, DataBinding } from '@syncfusion/ej2-vue-diagrams';
import { DataManager, Query } from "@syncfusion/ej2-data";
let data = [
{ "Name": "node11" },
{ "Name": "node12", "ReportingPerson": ["node114"] },
{ "Name": "node13", "ReportingPerson": ["node12"] },
{ "Name": "node14", "ReportingPerson": ["node12"] },
{ "Name": "node15", "ReportingPerson": ["node12"] },
{ "Name": "node16", "ReportingPerson": [] },
{ "Name": "node17", "ReportingPerson": ["node13", "node14", "node15"] },
{ "Name": "node18", "ReportingPerson": [] },
{ "Name": "node19", "ReportingPerson": ["node16", "node17", "node18"] },
{ "Name": "node110", "ReportingPerson": ["node16", "node17", "node18"] },
{ "Name": "node111", "ReportingPerson": ["node16", "node17", "node18", "node116"] },
{ "Name": "node21" },
{ "Name": "node22", "ReportingPerson": ["node114"] },
{ "Name": "node23", "ReportingPerson": ["node22"] },
{ "Name": "node24", "ReportingPerson": ["node22"] },
{ "Name": "node25", "ReportingPerson": ["node22"] },
{ "Name": "node26", "ReportingPerson": [] },
{ "Name": "node27", "ReportingPerson": ["node23", "node24", "node25"] },
{ "Name": "node28", "ReportingPerson": [] },
{ "Name": "node29", "ReportingPerson": ["node26", "node27", "node28", "node116"] },
{ "Name": "node210", "ReportingPerson": ["node26", "node27", "node28"] },
{ "Name": "node211", "ReportingPerson": ["node26", "node27", "node28"] },
{ "Name": "node31" },
{ "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"] },
{ "Name": "node116", "ReportingPerson": ["node12", "node22"], }
];
let items = new DataManager(data, new Query().take(5));
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "100%",
height: "590px",
//Uses layout to auto-arrange nodes on the Diagram page
layout: {
//Sets layout type
type: 'ComplexHierarchicalTree'
}, //Configures data source for Diagram
dataSourceSettings: {
id: 'Name',
parentId: 'ReportingPerson',
dataManager: items
}, //Sets the default properties for nodes and connectors
getNodeDefaults: (node) => {
node.width = 70; node.height = 70;
return node;
},
getConnectorDefaults: (connector) => {
connector.type = 'Orthogonal';
return connector;
}
}
},
provide: {
diagram: [ComplexHierarchicalTree, DataBinding]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>
NOTE
In Diagram Layouts, all root nodes will always render at the same level. This default behavior cannot be changed to render different trees at distinct levels.
Line Distribution
Line distribution is used to arrange the connectors without overlapping in automatic layout. In some cases, the automatic layout connectors connecting to the nodes will be overlapped with one another. So user can decide whether the segment of each connector from a single parent node should be same point or different point. The connectionPointOrigin property of layout is used to enable or disable the line distribution in layout. By default ConnectionPointOrigin will be SamePoint.
The following code example illustrates how to create a complex hierarchical tree with line distribution.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :getNodeDefaults='getNodeDefaults'
:getConnectorDefaults='getConnectorDefaults' :layout='layout'
:dataSourceSettings='dataSourceSettings'></ejs-diagram>
</div>
</template>
<script setup>
import { provide } from "vue";
import { DiagramComponent as EjsDiagram, ComplexHierarchicalTree, ConnectionPointOrigin, LineDistribution, DataBinding } from '@syncfusion/ej2-vue-diagrams';
import { DataManager, Query } from "@syncfusion/ej2-data";
let data = [
{ "Name": "node11" },
{ "Name": "node12", "ReportingPerson": ["node114"] },
{ "Name": "node13", "ReportingPerson": ["node12"] },
{ "Name": "node14", "ReportingPerson": ["node12"] },
{ "Name": "node15", "ReportingPerson": ["node12"] },
{ "Name": "node116", "ReportingPerson": ["node22", "node12"] },
{ "Name": "node16", "ReportingPerson": [] },
{ "Name": "node18", "ReportingPerson": [] },
{ "Name": "node21" },
{ "Name": "node22", "ReportingPerson": ["node114"] },
{ "Name": "node23", "ReportingPerson": ["node22"] },
{ "Name": "node24", "ReportingPerson": ["node22"] },
{ "Name": "node25", "ReportingPerson": ["node22"] },
{ "Name": "node26", "ReportingPerson": [] },
{ "Name": "node28", "ReportingPerson": [] },
{ "Name": "node31" },
{ "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"] }
];
let items = new DataManager(data, new Query().take(7));
const width = "1000px";
const height = "590px";
//Uses layout to auto-arrange nodes on the Diagram page
const layout = {
//Sets layout type
type: 'ComplexHierarchicalTree',
connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
}
//Initializes the node template.
const dataSourceSettings = {
id: 'Name',
parentId: 'ReportingPerson',
dataManager: items
}
//Sets the default properties for nodes and connectors
const getNodeDefaults = (node) => {
node.width = 40; node.height = 40;
return node;
}
const getConnectorDefaults = (connector) => {
connector.type = 'Orthogonal';
connector.cornerRadius = 7;
return connector;
}
provide('diagram', [DataBinding, ComplexHierarchicalTree, LineDistribution]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :getNodeDefaults='getNodeDefaults'
:getConnectorDefaults='getConnectorDefaults' :layout='layout'
:dataSourceSettings='dataSourceSettings'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, ComplexHierarchicalTree, LineDistribution, DataBinding, ConnectionPointOrigin } from '@syncfusion/ej2-vue-diagrams';
import { DataManager, Query } from "@syncfusion/ej2-data";
let data = [
{ "Name": "node11" },
{ "Name": "node12", "ReportingPerson": ["node114"] },
{ "Name": "node13", "ReportingPerson": ["node12"] },
{ "Name": "node14", "ReportingPerson": ["node12"] },
{ "Name": "node15", "ReportingPerson": ["node12"] },
{ "Name": "node116", "ReportingPerson": ["node22", "node12"] },
{ "Name": "node16", "ReportingPerson": [] },
{ "Name": "node18", "ReportingPerson": [] },
{ "Name": "node21" },
{ "Name": "node22", "ReportingPerson": ["node114"] },
{ "Name": "node23", "ReportingPerson": ["node22"] },
{ "Name": "node24", "ReportingPerson": ["node22"] },
{ "Name": "node25", "ReportingPerson": ["node22"] },
{ "Name": "node26", "ReportingPerson": [] },
{ "Name": "node28", "ReportingPerson": [] },
{ "Name": "node31" },
{ "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"] }
];
let items = new DataManager(data, new Query().take(7));
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "1000px",
height: "590px",
//Uses layout to auto-arrange nodes on the Diagram page
layout: {
//Sets layout type
type: 'ComplexHierarchicalTree',
connectionPointOrigin: ConnectionPointOrigin.DifferentPoint,
},
//Configures data source for Diagram
dataSourceSettings: {
id: 'Name',
parentId: 'ReportingPerson',
dataManager: items
},
//Sets the default properties for nodes and connectors
getNodeDefaults: (node) => {
node.width = 40; node.height = 40;
return node;
},
getConnectorDefaults: (connector) => {
connector.type = 'Orthogonal';
connector.cornerRadius = 7;
return connector;
}
}
},
provide: {
diagram: [ComplexHierarchicalTree, LineDistribution, DataBinding]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>NOTE
If you want to use line distribution in diagram layout, you need to inject LineDistribution module in the diagram.
Linear Arrangement
Linear arrangement is used to linearly arrange the child nodes in layout, which means the parent node is placed in the center corresponding to its children. When line distribution is enabled, linear arrangement is also activated by default. The arrangement property of layout is used to enable or disable the linear arrangement in layout. By default arrangement will be Nonlinear.
NOTE
If you want to use linear arrangement in diagram layout, you need to inject LineDistribution module in the diagram. Linear arrangement is applicable only for complex hierarchical tree layout.
The following code illustrates how to allow a linear arrangement in diagram layout.
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :getNodeDefaults='getNodeDefaults'
:getConnectorDefaults='getConnectorDefaults' :layout='layout'
:dataSourceSettings='dataSourceSettings'></ejs-diagram>
</div>
</template>
<script setup>
import { provide } from "vue";
import { DiagramComponent as EjsDiagram, ComplexHierarchicalTree, ChildArrangement, LineDistribution, DataBinding } from '@syncfusion/ej2-vue-diagrams';
import { DataManager, Query } from "@syncfusion/ej2-data";
let data = [
{ "Name": "node11" },
{ "Name": "node12", "ReportingPerson": ["node114"] },
{ "Name": "node13", "ReportingPerson": ["node12"] },
{ "Name": "node14", "ReportingPerson": ["node12"] },
{ "Name": "node15", "ReportingPerson": ["node12"] },
{ "Name": "node116", "ReportingPerson": ["node22", "node12"] },
{ "Name": "node16", "ReportingPerson": [] },
{ "Name": "node18", "ReportingPerson": [] },
{ "Name": "node21" },
{ "Name": "node22", "ReportingPerson": ["node114"] },
{ "Name": "node23", "ReportingPerson": ["node22"] },
{ "Name": "node24", "ReportingPerson": ["node22"] },
{ "Name": "node25", "ReportingPerson": ["node22"] },
{ "Name": "node26", "ReportingPerson": [] },
{ "Name": "node28", "ReportingPerson": [] },
{ "Name": "node31" },
{ "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"] }
];
let items = new DataManager(data, new Query().take(7));
const width = "1000px";
const height = "590px";
//Uses layout to auto-arrange nodes on the Diagram page
const layout = {
//Sets layout type
type: 'ComplexHierarchicalTree',
arrangement: ChildArrangement.Linear
}
//Initializes the node template.
const dataSourceSettings = {
id: 'Name',
parentId: 'ReportingPerson',
dataManager: items
}
//Sets the default properties for nodes and connectors
const getNodeDefaults = (node) => {
node.width = 40; node.height = 40;
return node;
}
const getConnectorDefaults = (connector) => {
connector.type = 'Orthogonal';
connector.cornerRadius = 7;
return connector;
}
provide('diagram', [DataBinding, ComplexHierarchicalTree, LineDistribution]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :getNodeDefaults='getNodeDefaults'
:getConnectorDefaults='getConnectorDefaults' :layout='layout'
:dataSourceSettings='dataSourceSettings'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, ComplexHierarchicalTree, LineDistribution, DataBinding, ChildArrangement } from '@syncfusion/ej2-vue-diagrams';
import { DataManager, Query } from "@syncfusion/ej2-data";
let data = [
{ "Name": "node11" },
{ "Name": "node12", "ReportingPerson": ["node114"] },
{ "Name": "node13", "ReportingPerson": ["node12"] },
{ "Name": "node14", "ReportingPerson": ["node12"] },
{ "Name": "node15", "ReportingPerson": ["node12"] },
{ "Name": "node116", "ReportingPerson": ["node22", "node12"] },
{ "Name": "node16", "ReportingPerson": [] },
{ "Name": "node18", "ReportingPerson": [] },
{ "Name": "node21" },
{ "Name": "node22", "ReportingPerson": ["node114"] },
{ "Name": "node23", "ReportingPerson": ["node22"] },
{ "Name": "node24", "ReportingPerson": ["node22"] },
{ "Name": "node25", "ReportingPerson": ["node22"] },
{ "Name": "node26", "ReportingPerson": [] },
{ "Name": "node28", "ReportingPerson": [] },
{ "Name": "node31" },
{ "Name": "node114", "ReportingPerson": ["node11", "node21", "node31"] }
];
let items = new DataManager(data, new Query().take(7));
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "1000px",
height: "590px",
//Uses layout to auto-arrange nodes on the Diagram page
layout: {
//Sets layout type
type: 'ComplexHierarchicalTree',
arrangement: ChildArrangement.Linear
},
//Configures data source for Diagram
dataSourceSettings: {
id: 'Name',
parentId: 'ReportingPerson',
dataManager: items
},
//Sets the default properties for nodes and connectors
getNodeDefaults: (node) => {
node.width = 40; node.height = 40;
return node;
},
getConnectorDefaults: (connector) => {
connector.type = 'Orthogonal';
connector.cornerRadius = 7;
return connector;
}
}
},
provide: {
diagram: [ComplexHierarchicalTree, LineDistribution, DataBinding]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>Enable routing for layout
In some complex parent-child relationships, connectors may overlap nodes in the layout. To address this issue, you can utilize the enableRouting functionality. This feature finds a connector path that avoids any obstacles.
To enable routing in the layout, set the enableRouting property to true.
The following example shows how to activate enableRouting in the layout:
<template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :getNodeDefaults='getNodeDefaults'
:getConnectorDefaults='getConnectorDefaults' :layout='layout'
:dataSourceSettings='dataSourceSettings'></ejs-diagram>
</div>
</template>
<script setup>
import { provide } from "vue";
import { DiagramComponent as EjsDiagram, ComplexHierarchicalTree, LineDistribution, DataBinding } from '@syncfusion/ej2-vue-diagrams';
import { DataManager, Query } from "@syncfusion/ej2-data";
let data = [
{ Name: 'node11' },
{ Name: 'node12', ReportingPerson: ['node114'] },
{ Name: 'node13', ReportingPerson: ['node12'] },
{ Name: 'node14', ReportingPerson: ['node12'] },
{ Name: 'node15', ReportingPerson: ['node12'] },
{ Name: 'node16', ReportingPerson: ['node12'] },
{ Name: 'node116', ReportingPerson: ['node22', 'node12', 'node114'] },
{ Name: 'node21' },
{ Name: 'node22', ReportingPerson: ['node114'] },
{ Name: 'node222', ReportingPerson: ['node114'] },
{ Name: 'node2222', ReportingPerson: ['node114'] },
{ Name: 'node23', ReportingPerson: ['node22'] },
{ Name: 'node31' },
{ Name: 'node114', ReportingPerson: ['node11', 'node21', 'node31'] },
];
let items = new DataManager(data, new Query().take(7));
const width = "1000px";
const height = "590px";
//Uses layout to auto-arrange nodes on the Diagram page
const layout = {
//Sets layout type
type: 'ComplexHierarchicalTree',
enableRouting: true
}
//Initializes the node template.
const dataSourceSettings = {
id: 'Name',
parentId: 'ReportingPerson',
dataManager: items
}
//Sets the default properties for nodes and connectors
const getNodeDefaults = (node) => {
node.width = 40; node.height = 40;
return node;
}
const getConnectorDefaults = (connector) => {
connector.type = 'Orthogonal';
connector.cornerRadius = 7;
return connector;
}
provide('diagram', [DataBinding, ComplexHierarchicalTree, LineDistribution]);
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style><template>
<div id="app">
<ejs-diagram id="diagram" :width='width' :height='height' :getNodeDefaults='getNodeDefaults'
:getConnectorDefaults='getConnectorDefaults' :layout='layout'
:dataSourceSettings='dataSourceSettings'></ejs-diagram>
</div>
</template>
<script>
import { DiagramComponent, ComplexHierarchicalTree, LineDistribution, DataBinding } from '@syncfusion/ej2-vue-diagrams';
import { DataManager, Query } from "@syncfusion/ej2-data";
let data = [
{ Name: 'node11' },
{ Name: 'node12', ReportingPerson: ['node114'] },
{ Name: 'node13', ReportingPerson: ['node12'] },
{ Name: 'node14', ReportingPerson: ['node12'] },
{ Name: 'node15', ReportingPerson: ['node12'] },
{ Name: 'node16', ReportingPerson: ['node12'] },
{ Name: 'node116', ReportingPerson: ['node22', 'node12', 'node114'] },
{ Name: 'node21' },
{ Name: 'node22', ReportingPerson: ['node114'] },
{ Name: 'node222', ReportingPerson: ['node114'] },
{ Name: 'node2222', ReportingPerson: ['node114'] },
{ Name: 'node23', ReportingPerson: ['node22'] },
{ Name: 'node31' },
{ Name: 'node114', ReportingPerson: ['node11', 'node21', 'node31'] },
];
let items = new DataManager(data, new Query().take(7));
export default {
name: "App",
components: {
"ejs-diagram": DiagramComponent
},
data() {
return {
width: "1000px",
height: "590px",
//Uses layout to auto-arrange nodes on the Diagram page
layout: {
//Sets layout type
type: 'ComplexHierarchicalTree',
enableRouting: true
},
//Configures data source for Diagram
dataSourceSettings: {
id: 'Name',
parentId: 'ReportingPerson',
dataManager: items
},
//Sets the default properties for nodes and connectors
getNodeDefaults: (node) => {
node.width = 40; node.height = 40;
return node;
},
getConnectorDefaults: (connector) => {
connector.type = 'Orthogonal';
connector.cornerRadius = 7;
return connector;
}
}
},
provide: {
diagram: [ComplexHierarchicalTree, LineDistribution, DataBinding]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-diagrams/styles/material.css";
</style>