From 587124a7017db21fbaec34b5a21a70cbed4c575a Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Sun, 28 Jul 2019 16:42:25 +0300
Subject: [PATCH] Docs for Org Chart

---
 .../OrganizationChartDemo.vue                 |   6 +-
 .../OrganizationChartDoc.vue                  | 683 +++++++++++++++---
 2 files changed, 599 insertions(+), 90 deletions(-)

diff --git a/src/views/organizationchart/OrganizationChartDemo.vue b/src/views/organizationchart/OrganizationChartDemo.vue
index a152b2b5e..7e9986f19 100644
--- a/src/views/organizationchart/OrganizationChartDemo.vue
+++ b/src/views/organizationchart/OrganizationChartDemo.vue
@@ -8,8 +8,7 @@
         </div>
 
         <div class="content-section implementation">
-            <h3 class="first">Advanced</h3>
-            <p>Hierarchical data with zero configuration.</p>
+            <h3>Advanced</h3>
             <OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
                 @node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
                 <template #person="slotProps">
@@ -25,7 +24,6 @@
             </OrganizationChart>
 
             <h3>Basic</h3>
-            <p>Hierarchical data with zero configuration.</p>
             <OrganizationChart :value="data2">
                 <template #default="slotProps">
                     <span>{{slotProps.node.data.label}}</span>
@@ -227,6 +225,4 @@ export default {
         color: #8a0a39 !important;
     }
 }
-
-
 </style>
\ No newline at end of file
diff --git a/src/views/organizationchart/OrganizationChartDoc.vue b/src/views/organizationchart/OrganizationChartDoc.vue
index 14100199b..163c40727 100644
--- a/src/views/organizationchart/OrganizationChartDoc.vue
+++ b/src/views/organizationchart/OrganizationChartDoc.vue
@@ -4,56 +4,344 @@
 			<TabPanel header="Documentation">
 				<h3>Import</h3>
 <CodeHighlight lang="javascript">
-import Panel from 'primevue/panel';
+import OrganizationChart from 'primevue/organizationchart';
 </CodeHighlight>
 
 				<h3>Getting Started</h3>
-				<p>Panel is a container component that accepts content as its children.</p>
+				<p>OrganizationChart requires an OrganizationChartNode instance as its root value and at least one template to display node content where node instance is passed via slotProps.</p>
 <CodeHighlight>
-&lt;Panel header="Godfather I"&gt;
-	The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-	His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-	Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-	kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-&lt;/Panel&gt;
-</CodeHighlight>
-
-                <h3>Custom Header</h3>
-                <p>Header of the panel is either defined with the <i>header</i> property or the header template.</p>
-<CodeHighlight>
-&lt;Panel&gt;
-    &lt;template #header&gt;
-        Header Content
+<template v-pre>
+ &lt;OrganizationChart :value="data"&gt;
+    &lt;template #default="slotProps"&gt;
+        &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
     &lt;/template&gt;
-	Content
-&lt;/Panel&gt;
+&lt;/OrganizationChart&gt;
+</template>
 </CodeHighlight>
 
-				<h3>Toggleable</h3>
-				<p>Content of the panel can be expanded and collapsed using <i>toggleable</i> option.</p>
-<CodeHighlight>
-&lt;Panel header="Godfather I" :toggleable="true"&gt;
-	The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-	His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-	Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-	kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-&lt;/Panel&gt;
+<CodeHighlight lang="javascript">
+export default {
+    data() {
+        return {
+            data: {
+                key: '0',
+                data: {label: 'F.C. Barcelona'},
+                children: [
+                    {
+                        key: '0_0',
+                        data: {label: 'F.C. Barcelona'},
+                        children: [
+                            {
+                                key: '0_0_0',
+                                data: {label: 'Chelsea F.C.'}
+                            },
+                            {
+                                key: '0_0_1',
+                                data: {label: 'F.C. Barcelona'}
+                            }
+                        ]
+                    },
+                    {
+                        key: '0_1',
+                        data: {label: 'Real Madrid'},
+                        children: [
+                            {
+                                key: '0_1_0',
+                                data: {label: 'Bayern Munich'}
+                            },
+                            {
+                                key: '0_1_1',
+                                data: {label: 'Real Madrid'}
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+    }
+}
 </CodeHighlight>
 
-                <p>To control the initial state of the toggleable panel, use the <i>collapsed</i> property.</p>
+                <h3>OrganizationChartNode</h3>
+                <p>API of the OrganizationChartNode has the properties below.</p>
+                <div class="doc-tablewrapper">
+                    <table class="doc-table">
+                        <thead>
+                            <tr>
+                                <th>Name</th>
+                                <th>Type</th>
+                                <th>Default</th>
+                                <th>Description</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            <tr>
+                                <td>key</td>
+                                <td>any</td>
+                                <td>null</td>
+                                <td>Unique identifier of the node. (required)</td>
+                            </tr>
+                            <tr>
+                                <td>type</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Type of the node to match a template.</td>
+                            </tr>
+                            <tr>
+                                <td>styleClass</td>
+                                <td>string</td>
+                                <td>null</td>
+                                <td>Style class of the node content.</td>
+                            </tr>
+                            <tr>
+                                <td>data</td>
+                                <td>any</td>
+                                <td>null</td>
+                                <td>Data represented by the node.</td>
+                            </tr>
+                            <tr>
+                                <td>selectable</td>
+                                <td>boolean</td>
+                                <td>true</td>
+                                <td>Whether node is selectable when selection is enabled.</td>
+                            </tr>
+                            <tr>
+                                <td>children</td>
+                                <td>array</td>
+                                <td>null</td>
+                                <td>Children nodes array.</td>
+                            </tr>
+                        </tbody>
+                    </table>
+                </div>
+
+                <h3>Collapsible Nodes</h3>
+                <p>All nodes are expanded by default however they can be expanded and collapsed when <i>collapsible</i> is enabled. The optional <i>collapsedKeys</i> property defines the keys
+                    that are collapsed, this property is two-way binding enabled so that user changes or programmatic changes are reflected to the UI.
+                </p>
+                <p>Example below displays the root of chart in previous example as collapsed. Notice that the collapsedKeys is a map whose key is the 
+                    key of the node and value is true.
+                </p>
 <CodeHighlight>
-&lt;Panel header="Header Text" :toggleable="true" :collapsed="true"&gt;
-	Content
-&lt;/Panel&gt;
+<template v-pre>
+ &lt;OrganizationChart :value="data" :collapsible="true" :collapsedKeys="collapsedKeys"&gt;
+    &lt;template #default="slotProps"&gt;
+        &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
+    &lt;/template&gt;
+&lt;/OrganizationChart&gt;
+</template>
 </CodeHighlight>
 
-                <p>Use the sync operator to enable two-way binding.</p>
+<CodeHighlight lang="javascript">
+export default {
+    data() {
+        return {
+            collapsedKeys: {
+                '0': true
+            },
+            data: {
+                key: '0',
+                data: {label: 'F.C. Barcelona'},
+                children: [
+                    {
+                        key: '0_0',
+                        data: {label: 'F.C. Barcelona'},
+                        children: [
+                            {
+                                key: '0_0_0',
+                                data: {label: 'Chelsea F.C.'}
+                            },
+                            {
+                                key: '0_0_1',
+                                data: {label: 'F.C. Barcelona'}
+                            }
+                        ]
+                    },
+                    {
+                        key: '0_1',
+                        data: {label: 'Real Madrid'},
+                        children: [
+                            {
+                                key: '0_1_0',
+                                data: {label: 'Bayern Munich'}
+                            },
+                            {
+                                key: '0_1_1',
+                                data: {label: 'Real Madrid'}
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+    }
+}
+</CodeHighlight>
+
+				<h3>Selection</h3>
+				<p>Selection is enabled by defining the <i>selectionMode</i> to either "single" or "multiple" and specifying the <i>selectionKeys</i> with the sync operator. Note that
+                selection on a particular node can be disabled if the <i>selectable</i> is false on the node instance.</p>
+<CodeHighlight>
+<template v-pre>
+ &lt;OrganizationChart :value="data" selecionMode="single" :selectionKeys.sync="selectionKeys"&gt;
+    &lt;template #default="slotProps"&gt;
+        &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
+    &lt;/template&gt;
+&lt;/OrganizationChart&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+    data() {
+        return {
+            selectionKeys: null,
+            data: {
+                key: '0',
+                data: {label: 'F.C. Barcelona'},
+                children: [
+                    {
+                        key: '0_0',
+                        data: {label: 'F.C. Barcelona'},
+                        children: [
+                            {
+                                key: '0_0_0',
+                                data: {label: 'Chelsea F.C.'}
+                            },
+                            {
+                                key: '0_0_1',
+                                data: {label: 'F.C. Barcelona'}
+                            }
+                        ]
+                    },
+                    {
+                        key: '0_1',
+                        data: {label: 'Real Madrid'},
+                        children: [
+                            {
+                                key: '0_1_0',
+                                data: {label: 'Bayern Munich'}
+                            },
+                            {
+                                key: '0_1_1',
+                                data: {label: 'Real Madrid'}
+                            }
+                        ]
+                    }
+                ]
+            }
+        }
+    }
+}
+</CodeHighlight>
+
+                <h3>Templating</h3>
+                <p>The <i>type</i> property of an OrganizationChartNode is used to map a template to a node. If it is undefined, the default template is used.</p>
 
 <CodeHighlight>
-&lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt;
-&lt;Panel header="Header Text" :toggleable="true" :collapsed.sync="isCollapsed"&gt;
-	Content
-&lt;/Panel&gt;
+<template v-pre>
+&lt;OrganizationChart :value="data"&gt;
+    &lt;template #person="slotProps"&gt;
+        &lt;div class="node-header ui-corner-top"&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/div&gt;
+        &lt;div class="node-content"&gt;
+            &lt;img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32"&gt;
+            &lt;div&gt;&#123;&#123;slotProps.node.data.name&#125;&#125;&lt;/div&gt;
+        &lt;/div&gt;
+    &lt;/template&gt;
+    &lt;template #default="slotProps"&gt;
+        &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
+    &lt;/template&gt;
+&lt;/OrganizationChart&gt;
+</template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+    data() {
+        return {
+            data: {
+                key: '0',
+                type: 'person',
+                styleClass: 'p-person',
+                data: {label: 'CEO', name: 'Walter White', avatar: 'walter.jpg'},
+                children: [
+                    {
+                        key: '0_0',
+                        type: 'person',
+                        styleClass: 'p-person',
+                        data: {label: 'CFO', name:'Saul Goodman', avatar: 'saul.jpg'},
+                        children:[{
+                            key: '0_0_0',
+                            data: {label: 'Tax'},
+                            selectable: false,
+                            styleClass: 'department-cfo'
+                        },
+                        {
+                            key: '0_0_1',
+                            data: {label: 'Legal'},
+                            selectable: false,
+                            styleClass: 'department-cfo'
+                        }],
+                    },
+                    {
+                        key: '0_1',
+                        type: 'person',
+                        styleClass: 'p-person',
+                        data: {label: 'COO', name:'Mike E.', avatar: 'mike.jpg'},
+                        children:[{
+                            key: '0_1_0',
+                            data: {label: 'Operations'},
+                            selectable: false,
+                            styleClass: 'department-coo'
+                        }]
+                    },
+                    {
+                        key: '0_2',
+                        type: 'person',
+                        styleClass: 'p-person',
+                        data: {label: 'CTO', name:'Jesse Pinkman', avatar: 'jesse.jpg'},
+                        children:[{
+                            key: '0_2_0',
+                            data: {label: 'Development'},
+                            selectable: false,
+                            styleClass: 'department-cto',
+                            children:[{
+                                key: '0_2_0_0',
+                                data: {label: 'Analysis'},
+                                selectable: false,
+                                styleClass: 'department-cto'
+                            },
+                            {
+                                key: '0_2_0_1',
+                                data: {label: 'Front End'},
+                                selectable: false,
+                                styleClass: 'department-cto'
+                            },
+                            {
+                                key: '0_2_0_2',
+                                data: {label: 'Back End'},
+                                selectable: false,
+                                styleClass: 'department-cto'
+                            }]
+                        },
+                        {
+                            key: '0_2_1',
+                            data: {label: 'QA'},
+                            selectable: false,
+                            styleClass: 'department-cto'
+                        },
+                        {
+                            key: '0_2_2',
+                            data: {label: 'R&amp;D'},
+                            selectable: false,
+                            styleClass: 'department-cto'
+                        }]
+                    }
+                ]
+            }
+        }
+    }
+}
 </CodeHighlight>
 
 				<h3>Properties</h3>
@@ -70,22 +358,34 @@ import Panel from 'primevue/panel';
 						</thead>
 						<tbody>
                             <tr>
-                                <td>header</td>
+                                <td>value</td>
+                                <td>OrganizationChartNode</td>
+                                <td>null</td>
+                                <td>Value of the component.</td>
+                            </tr>
+                            <tr>
+                                <td>selectionKeys</td>
+                                <td>object</td>
+                                <td>null</td>
+                                <td>A map instance of key-value pairs to represented the selected nodes.</td>
+                            </tr>
+                            <tr>
+                                <td>selectionMode</td>
                                 <td>string</td>
                                 <td>null</td>
-                                <td>Header text of the panel.</td>
+                                <td>Type of the selection, valid values are "single" and "multiple".</td>
                             </tr>
                             <tr>
-                                <td>toggleable</td>
+                                <td>collapsible</td>
                                 <td>boolean</td>
-                                <td>null</td>
-                                <td>Defines if content of panel can be expanded and collapsed.</td>
+                                <td>false</td>
+                                <td>Whether the nodes can be expanded or toggled.</td>
                             </tr>
                             <tr>
-                                <td>collapsed</td>
-                                <td>boolean</td>
+                                <td>collapsedKeys</td>
+                                <td>object</td>
                                 <td>null</td>
-                                <td>Defines the initial state of panel content.</td>
+                                <td>A map instance of key-value pairs to represented the collapsed nodes.</td>
                             </tr>
 						</tbody>
 					</table>
@@ -103,11 +403,24 @@ import Panel from 'primevue/panel';
 						</thead>
 						<tbody>
                             <tr>
-                                <td>toggle</td>
-                                <td>event.originalEvent: browser event <br />
-                                    event.value: collapsed state as a boolean
-                                </td>
-                                <td>Callback to invoke when a tab toggle.</td>
+                                <td>noode-select</td>
+                                <td>node: Node instance</td>
+                                <td>Callback to invoke when a node is selected.</td>
+                            </tr>
+                            <tr>
+                                <td>noode-unselect</td>
+                                <td>node: Node instance</td>
+                                <td>Callback to invoke when a node is unselected.</td>
+                            </tr>
+                            <tr>
+                                <td>noode-expand</td>
+                                <td>node: Node instance</td>
+                                <td>Callback to invoke when a node is expanded.</td>
+                            </tr>
+                            <tr>
+                                <td>noode-collapse</td>
+                                <td>node: Node instance</td>
+                                <td>Callback to invoke when a node is collapsed.</td>
                             </tr>
 						</tbody>
 					</table>
@@ -125,24 +438,32 @@ import Panel from 'primevue/panel';
 						</thead>
 						<tbody>
                             <tr>
-                                <td>p-panel</td>
+                                <td>p-organizationchart</td>
                                 <td>Container element.</td>
                             </tr>
                             <tr>
-                                <td>p-panel-titlebar</td>
-                                <td>Header section.</td>
+                                <td>p-organizationchart-table</td>
+                                <td>Table container of a node.</td>
                             </tr>
                             <tr>
-                                <td>p-panel-title</td>
-                                <td>Title text of panel.</td>
+                                <td>p-organizationchart-lines</td>
+                                <td>Connector lines container.</td>
                             </tr>
                             <tr>
-                                <td>p-panel-titlebar-toggler</td>
-                                <td>Toggle icon.</td>
+                                <td>p-organizationchart-nodes</td>
+                                <td>Contained of node children.</td>
                             </tr>
                             <tr>
-                                <td>p-panel-content</td>
-                                <td>Content of panel.</td>
+                                <td>p-organizationchart-line-right</td>
+                                <td>Right side line of a node connector.</td>
+                            </tr>
+                            <tr>
+                                <td>p-organizationchart-line-left</td>
+                                <td>Left side line of a node connector.</td>
+                            </tr>
+                            <tr>
+                                <td>p-organizationchart-line-top</td>
+                                <td>Top side line of a node connector.</td>
                             </tr>
 						</tbody>
 					</table>
@@ -153,40 +474,232 @@ import Panel from 'primevue/panel';
 			</TabPanel>
 
 			<TabPanel header="Source">
-				<a href="https://github.com/primefaces/primevue/tree/master/src/views/panel" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
+				<a href="https://github.com/primefaces/primevue/tree/master/src/views/organizationchart" class="btn-viewsource" target="_blank" rel="noopener noreferrer">
 					<span>View on GitHub</span>
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;template&gt;
-	&lt;div&gt;
-		&lt;div class="content-section introduction"&gt;
-			&lt;div class="feature-intro"&gt;
-				&lt;h1&gt;Panel&lt;/h1&gt;
-				&lt;p&gt;Panel is a grouping component with the optional content toggle feature.&lt;/p&gt;
-			&lt;/div&gt;
-		&lt;/div&gt;
+&lt;div&gt;
+    &lt;div class="content-section introduction"&gt;
+        &lt;div class="feature-intro"&gt;
+            &lt;h1&gt;OrganizationChart&lt;/h1&gt;
+            &lt;p&gt;OrganizationChart visualizes hierarchical organization data.&lt;/p&gt;
+        &lt;/div&gt;
+    &lt;/div&gt;
 
-		&lt;div class="content-section implementation"&gt;
-			&lt;h3 class="first"&gt;Regular&lt;/h3&gt;
-			&lt;Panel header="Godfather I"&gt;
-				The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-				His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-				Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-				kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-			&lt;/Panel&gt;
+    &lt;div class="content-section implementation"&gt;
+        &lt;h3&gt;Advanced&lt;/h3&gt;
+        &lt;OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
+            @node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand"&gt;
+            &lt;template #person="slotProps"&gt;
+                &lt;div class="node-header ui-corner-top"&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/div&gt;
+                &lt;div class="node-content"&gt;
+                    &lt;img :src="'demo/images/organization/' + slotProps.node.data.avatar" width="32"&gt;
+                    &lt;div&gt;&#123;&#123;slotProps.node.data.name&#125;&#125;&lt;/div&gt;
+                &lt;/div&gt;
+            &lt;/template&gt;
+            &lt;template #default="slotProps"&gt;
+                &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
+            &lt;/template&gt;
+        &lt;/OrganizationChart&gt;
 
-			&lt;h3&gt;Toggleable&lt;/h3&gt;
-			&lt;Panel header="Godfather I" :toggleable="true"&gt;
-				The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding.
-				His beloved son Michael has just come home from the war, but does not intend to become part of his father's business.
-				Through Michael's life the nature of the family business becomes clear. The business of the family is just like the head of the family,
-				kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family.
-			&lt;/Panel&gt;
-		&lt;/div&gt;
-	&lt;/div&gt;
-&lt;/template&gt;
+        &lt;h3&gt;Basic&lt;/h3&gt;
+        &lt;OrganizationChart :value="data2"&gt;
+            &lt;template #default="slotProps"&gt;
+                &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
+            &lt;/template&gt;
+        &lt;/OrganizationChart&gt;
+    &lt;/div&gt;
+&lt;/div&gt;
 </template>
+</CodeHighlight>
+
+<CodeHighlight lang="javascript">
+export default {
+    data() {
+        return {
+            data1: {
+                key: '0',
+                type: 'person',
+                styleClass: 'p-person',
+                data: {label: 'CEO', name: 'Walter White', avatar: 'walter.jpg'},
+                children: [
+                    {
+                        key: '0_0',
+                        type: 'person',
+                        styleClass: 'p-person',
+                        data: {label: 'CFO', name:'Saul Goodman', avatar: 'saul.jpg'},
+                        children:[{
+                            key: '0_0_0',
+                            data: {label: 'Tax'},
+                            selectable: false,
+                            styleClass: 'department-cfo'
+                        },
+                        {
+                            key: '0_0_1',
+                            data: {label: 'Legal'},
+                            selectable: false,
+                            styleClass: 'department-cfo'
+                        }],
+                    },
+                    {
+                        key: '0_1',
+                        type: 'person',
+                        styleClass: 'p-person',
+                        data: {label: 'COO', name:'Mike E.', avatar: 'mike.jpg'},
+                        children:[{
+                            key: '0_1_0',
+                            data: {label: 'Operations'},
+                            selectable: false,
+                            styleClass: 'department-coo'
+                        }]
+                    },
+                    {
+                        key: '0_2',
+                        type: 'person',
+                        styleClass: 'p-person',
+                        data: {label: 'CTO', name:'Jesse Pinkman', avatar: 'jesse.jpg'},
+                        children:[{
+                            key: '0_2_0',
+                            data: {label: 'Development'},
+                            selectable: false,
+                            styleClass: 'department-cto',
+                            children:[{
+                                key: '0_2_0_0',
+                                data: {label: 'Analysis'},
+                                selectable: false,
+                                styleClass: 'department-cto'
+                            },
+                            {
+                                key: '0_2_0_1',
+                                data: {label: 'Front End'},
+                                selectable: false,
+                                styleClass: 'department-cto'
+                            },
+                            {
+                                key: '0_2_0_2',
+                                data: {label: 'Back End'},
+                                selectable: false,
+                                styleClass: 'department-cto'
+                            }]
+                        },
+                        {
+                            key: '0_2_1',
+                            data: {label: 'QA'},
+                            selectable: false,
+                            styleClass: 'department-cto'
+                        },
+                        {
+                            key: '0_2_2',
+                            data: {label: 'R&amp;D'},
+                            selectable: false,
+                            styleClass: 'department-cto'
+                        }]
+                    }
+                ]
+            },
+            data2 : {
+                key: '0',
+                data: {label: 'F.C. Barcelona'},
+                children: [
+                    {
+                        key: '0_0',
+                        data: {label: 'F.C. Barcelona'},
+                        children: [
+                            {
+                                key: '0_0_0',
+                                data: {label: 'Chelsea F.C.'}
+                            },
+                            {
+                                key: '0_0_1',
+                                data: {label: 'F.C. Barcelona'}
+                            }
+                        ]
+                    },
+                    {
+                        key: '0_1',
+                        data: {label: 'Real Madrid'},
+                        children: [
+                            {
+                                key: '0_1_0',
+                                data: {label: 'Bayern Munich'}
+                            },
+                            {
+                                key: '0_1_1',
+                                data: {label: 'Real Madrid'}
+                            }
+                        ]
+                    }
+                ]
+            },
+            selection: {}
+        }
+    },
+    methods: {
+        onNodeSelect(node) {
+            this.$toast.add({severity:'success', summary: 'Node Selected', detail: node.data.label, life: 3000});
+        },
+        onNodeUnselect(node) {
+            this.$toast.add({severity:'success', summary: 'Node Unselected', detail: node.data.label, life: 3000});
+        },
+        onNodeExpand(node) {
+            this.$toast.add({severity:'success', summary: 'Node Expanded', detail: node.data.label, life: 3000});
+        },
+        onNodeCollapse(node) {
+            this.$toast.add({severity:'success', summary: 'Node Collapsed', detail: node.data.label, life: 3000});
+        }
+    }
+}
+</CodeHighlight>
+
+<CodeHighlight lang="scss">
+/deep/ .p-organizationchart {
+    .p-person {
+        padding: 0;
+        border: 0 none;
+    }
+
+    .node-header, .node-content {
+        padding: .5em .7em;
+    }
+
+    .node-header {
+        background-color: #495ebb;
+        color: #ffffff;
+    }
+
+    .node-content {
+        text-align: center;
+        border: 1px solid #495ebb;
+    }
+
+    .node-content img {
+        border-radius: 50%;
+    }
+
+    .department-cfo {
+        background-color: #7247bc;
+        color: #ffffff;
+    }
+
+    .department-coo {
+        background-color: #a534b6;
+        color: #ffffff;
+    }
+
+    .department-cto {
+        background-color: #e9286f;
+        color: #ffffff;
+    }
+
+    .p-person .p-node-toggler {
+        color: #495ebb !important;
+    }
+
+    .department-cto .p-node-toggler {
+        color: #8a0a39 !important;
+    }
+}
 </CodeHighlight>
 			</TabPanel>
 		</TabView>