vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Docs for Org Chart

pull/41/head
cagataycivici 2019-07-28 16:42:25 +03:00
parent 782e34adde
commit 587124a701
2 changed files with 599 additions and 90 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/views/organizationchart/OrganizationChartDemo.vue
View File

@ -8,8 +8,7 @@
</div> </div>
<div class="content-section implementation"> <div class="content-section implementation">
<h3 class="first">Advanced</h3> <h3>Advanced</h3>
<p>Hierarchical data with zero configuration.</p>
<OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection" <OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
@node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand"> @node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand">
<template #person="slotProps"> <template #person="slotProps">
@ -25,7 +24,6 @@
</OrganizationChart> </OrganizationChart>
<h3>Basic</h3> <h3>Basic</h3>
<p>Hierarchical data with zero configuration.</p>
<OrganizationChart :value="data2"> <OrganizationChart :value="data2">
<template #default="slotProps"> <template #default="slotProps">
<span>{{slotProps.node.data.label}}</span> <span>{{slotProps.node.data.label}}</span>
@ -227,6 +225,4 @@ export default {
color: #8a0a39 !important; color: #8a0a39 !important;
} }
} }
</style> </style>

683
src/views/organizationchart/OrganizationChartDoc.vue
View File

@ -4,56 +4,344 @@
<TabPanel header="Documentation"> <TabPanel header="Documentation">
<h3>Import</h3> <h3>Import</h3>
<CodeHighlight lang="javascript"> <CodeHighlight lang="javascript">
import Panel from 'primevue/panel'; import OrganizationChart from 'primevue/organizationchart';
</CodeHighlight> </CodeHighlight>
<h3>Getting Started</h3> <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> <CodeHighlight>
&lt;Panel header="Godfather I"&gt; <template v-pre>
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. &lt;OrganizationChart :value="data"&gt;
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. &lt;template #default="slotProps"&gt;
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, &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
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
&lt;/template&gt; &lt;/template&gt;
Content &lt;/OrganizationChart&gt;
&lt;/Panel&gt; </template>
</CodeHighlight> </CodeHighlight>
<h3>Toggleable</h3> <CodeHighlight lang="javascript">
<p>Content of the panel can be expanded and collapsed using <i>toggleable</i> option.</p> export default {
<CodeHighlight> data() {
&lt;Panel header="Godfather I" :toggleable="true"&gt; return {
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. data: {
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. key: '0',
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, data: {label: 'F.C. Barcelona'},
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. children: [
&lt;/Panel&gt; {
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> </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> <CodeHighlight>
&lt;Panel header="Header Text" :toggleable="true" :collapsed="true"&gt; <template v-pre>
Content &lt;OrganizationChart :value="data" :collapsible="true" :collapsedKeys="collapsedKeys"&gt;
&lt;/Panel&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>
<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> <CodeHighlight>
&lt;button type="button" @click="isCollapsed = !isCollapsed">Toggle Programmatically&lt;/button&gt; <template v-pre>
&lt;Panel header="Header Text" :toggleable="true" :collapsed.sync="isCollapsed"&gt; &lt;OrganizationChart :value="data"&gt;
Content &lt;template #person="slotProps"&gt;
&lt;/Panel&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> </CodeHighlight>
<h3>Properties</h3> <h3>Properties</h3>
@ -70,22 +358,34 @@ import Panel from 'primevue/panel';
</thead> </thead>
<tbody> <tbody>
<tr> <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>string</td>
<td>null</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>
<tr> <tr>
<td>toggleable</td> <td>collapsible</td>
<td>boolean</td> <td>boolean</td>
<td>null</td> <td>false</td>
<td>Defines if content of panel can be expanded and collapsed.</td> <td>Whether the nodes can be expanded or toggled.</td>
</tr> </tr>
<tr> <tr>
<td>collapsed</td> <td>collapsedKeys</td>
<td>boolean</td> <td>object</td>
<td>null</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> </tr>
</tbody> </tbody>
</table> </table>
@ -103,11 +403,24 @@ import Panel from 'primevue/panel';
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>toggle</td> <td>noode-select</td>
<td>event.originalEvent: browser event <br /> <td>node: Node instance</td>
event.value: collapsed state as a boolean <td>Callback to invoke when a node is selected.</td>
</td> </tr>
<td>Callback to invoke when a tab toggle.</td> <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> </tr>
</tbody> </tbody>
</table> </table>
@ -125,24 +438,32 @@ import Panel from 'primevue/panel';
</thead> </thead>
<tbody> <tbody>
<tr> <tr>
<td>p-panel</td> <td>p-organizationchart</td>
<td>Container element.</td> <td>Container element.</td>
</tr> </tr>
<tr> <tr>
<td>p-panel-titlebar</td> <td>p-organizationchart-table</td>
<td>Header section.</td> <td>Table container of a node.</td>
</tr> </tr>
<tr> <tr>
<td>p-panel-title</td> <td>p-organizationchart-lines</td>
<td>Title text of panel.</td> <td>Connector lines container.</td>
</tr> </tr>
<tr> <tr>
<td>p-panel-titlebar-toggler</td> <td>p-organizationchart-nodes</td>
<td>Toggle icon.</td> <td>Contained of node children.</td>
</tr> </tr>
<tr> <tr>
<td>p-panel-content</td> <td>p-organizationchart-line-right</td>
<td>Content of panel.</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> </tr>
</tbody> </tbody>
</table> </table>
@ -153,40 +474,232 @@ import Panel from 'primevue/panel';
</TabPanel> </TabPanel>
<TabPanel header="Source"> <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> <span>View on GitHub</span>
</a> </a>
<CodeHighlight> <CodeHighlight>
<template v-pre> <template v-pre>
&lt;template&gt; &lt;div&gt;
&lt;div&gt; &lt;div class="content-section introduction"&gt;
&lt;div class="content-section introduction"&gt; &lt;div class="feature-intro"&gt;
&lt;div class="feature-intro"&gt; &lt;h1&gt;OrganizationChart&lt;/h1&gt;
&lt;h1&gt;Panel&lt;/h1&gt; &lt;p&gt;OrganizationChart visualizes hierarchical organization data.&lt;/p&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&gt;
&lt;div class="content-section implementation"&gt; &lt;div class="content-section implementation"&gt;
&lt;h3 class="first"&gt;Regular&lt;/h3&gt; &lt;h3&gt;Advanced&lt;/h3&gt;
&lt;Panel header="Godfather I"&gt; &lt;OrganizationChart :value="data1" :collapsible="true" class="company" selectionMode="single" :selectionKeys.sync="selection"
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. @node-select="onNodeSelect" @node-unselect="onNodeUnselect" @node-collapse="onNodeCollapse" @node-expand="onNodeExpand"&gt;
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. &lt;template #person="slotProps"&gt;
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, &lt;div class="node-header ui-corner-top"&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/div&gt;
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. &lt;div class="node-content"&gt;
&lt;/Panel&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;h3&gt;Basic&lt;/h3&gt;
&lt;Panel header="Godfather I" :toggleable="true"&gt; &lt;OrganizationChart :value="data2"&gt;
The story begins as Don Vito Corleone, the head of a New York Mafia family, oversees his daughter's wedding. &lt;template #default="slotProps"&gt;
His beloved son Michael has just come home from the war, but does not intend to become part of his father's business. &lt;span&gt;&#123;&#123;slotProps.node.data.label&#125;&#125;&lt;/span&gt;
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, &lt;/template&gt;
kind and benevolent to those who give respect, but given to ruthless violence whenever anything stands against the good of the family. &lt;/OrganizationChart&gt;
&lt;/Panel&gt; &lt;/div&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;/div&gt;
&lt;/template&gt;
</template> </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> </CodeHighlight>
</TabPanel> </TabPanel>
</TabView> </TabView>