Organization Chart #2726

bkrith · 2022-05-01T23:31:19Z

Fixes #2730

Overview

Basic organization chart for contacts.
Used d3 and d3-org-chart libraries.

Requirements

Have contacts with Org Manager field.
And, the root contact with Org Manager set to "Head".

Add field orgmanager in contact

Organization chart

Highlight path to root

Todo

What is the element in the top right, are there different org charts to switch between? Is this something we want to directly have in version 1, and if so how many charts are there usually? (Cause I would assume it would be just one?)
The background color would look better as color-main-background instead of grey
Currently there are a lot of inline styles. This results in the app not working with dark theme, and it also being difficult to change. Best is to use the variables supplied by Nextcloud :)
Currently everything is divs without semantics, which is not accessible. For example, the name of people need to be h3, the title and the info lines below p
The placeholder icon for people without avatar is not Nextcloud standard – if you use NcAvatar you will automatically get placeholders https://nextcloud-vue-components.netlify.app/#/Components/NcAvatar
The blue bar on top of each person looks nice – but does not seem to be taken from var(--color-primary) – would be better to do that. Also the whitespace above that bar can be removed.
The highlight path too root should also be color-primary, and to make it more obvious you can use a border of 2px. Also the border is not around the existing box, there’s another container around it?
The default border should be border: 1px solid var(--color-border) using the variable
You can use the border radius value var(--border-radius-large) on the containers
Manages/oversees uses custom small text sizes which are not accessible. Just use the default font size / no need to change it :)
For people who do not manage or oversee anyone, that part does not need to be shown at all
The icons next to manages/oversees introduce visual noise and are not needed, can be removed :)
BUG new avatars are transparent Fix non-user avatar on complex background nextcloud-libraries/nextcloud-vue#3272
BUG missing handling of deleted managers
BUG cyclic references (alice is bob's manager, bob is alice's manager) show blank chart page with empty list of charts
BUG graph element is not responsive. Enlarging the window causes partly hidden graphs.
Graph card link says https://localhost/apps/contacts/chart/All%20contacts but click on avatar gets me to https://localhost/apps/contacts/All%20contacts/4cee56a8-c43c-4e4a-bcba-55026faf1687~contacts. This means a ctrl+click (or right click and open in new tab) leads to a different page than an ordinary click
To research (for the lack of reproducibility at the moment): handling of shared address books and cross-addressbook references in general. I guess managers should only be assignable within the same addressbook so that we can assure there are no broken links.
Show more levels by default -> all levels?
Order chart dropdown by alphabet Sort org charts #2973
Hide chart dropdown when there is only one option
Expand button is rather small
Height of card header is not even -> some cards have a bigger height

Signed-off-by: Vassilis Kritharakis <bkrith@hotmail.com>

florisvangeel · 2022-05-02T15:16:52Z

This PR is the result of an idea proposal at NextGov 2022 Hackathon

Abstract:
In contacts there is one special circle with the company directory.
This helper app will create two relations from this contact to its manager and side reporter.
With that information the company directory can get a live organisational chart of all the people.
Using an open source library
https://www.npmjs.com/package/d3-org-chart

there might be some UX improvements needed. This challenge comes down to defining the datasets and building the first prototype within nextcloud.

As a result every team can be organised.

Presentation: https://docs.google.com/presentation/d/1r_J-nop5r-cgDtSQpHPNbwJ5igaCmftc/
Demo video: https://www.youtube.com/watch?v=vM_2yXlhbak

dinesh-dot-com · 2022-08-01T06:30:20Z

pls help me to build org chart

dinesh-dot-com

not working for me

bkrith · 2022-08-15T15:53:43Z

I'm sorry for the delay.. I was busy with my dayjob..

@DineshRefex maybe it was a confusion with HEAD value which needed for the top member(root) of chart.

Please try again I have removed this value(exists but it's not necessary anymore) and also added support for multiple charts.

bkrith · 2022-08-15T15:56:46Z

Dropdown at the right top with all available charts generated from contacts.
For now the name of chart is the org field of root contact and the fullName.

dinesh-dot-com · 2022-08-16T03:33:31Z

Thank you so much, I'll work on it and send you the result. Once again thank you for spending your time with me.

…

On Mon, Aug 15, 2022 at 9:26 PM Vassilis ***@***.***> wrote: Dropdown at the right top with all available charts generated from contacts. For now the name of chart is the org field of root contact and the fullName. [image: image] <https://user-images.githubusercontent.com/5513284/184670110-d2e47712-ca83-4261-bbc8-c6b866795c94.png> — Reply to this email directly, view it on GitHub <#2726 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZH7Y7VOYGYNNI2BQC2VKQDVZJSERANCNFSM5U2SKATQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- *The information contained in this communication is intended solely for the use of the individual or entity to whom it is addressed and others authorized to receive it. **Please note that as the recipient, it is your responsibility to check the email for malicious content or software. **It may contain confidential or legally privileged information. If you are not the intended recipient you are hereby notified that any disclosure, copying, distribution or taking any action in reliance on the contents of this information is strictly prohibited and may be unlawful. If you have received this communication in error, please notify us immediately by responding to this email.The firm is neither liable for the proper and complete transmission of the information contained in this communication nor for any delay in its receipt.*

ChristophWurst

It works

l10n/el.js

src/components/OrgChart.vue

ChristophWurst · 2022-08-18T12:22:24Z

src/models/contact.js

+ * @memberof Contact
+ */
+ get orgManager() {
+ return this.firstIfArray(this.vCard.getFirstPropertyValue('orgmanager'))


is this possibly a standardized property? I'm not able to find references of ORGMANAGER in the vcard specs. If it's not, should be prefix with X- @skjnldsv?

Yep, if not official, prefix is mandatory

If you use X-ManagersName, it will be compatible with korganizer/kalendar, better than nothing 😜

A similar concept exist in google eith manager and assistant name but they don't even use vcards

We already have "Relationship to you" with "Manager", "Colleague" and "Assistant", is that not a standard of sorts we can use here too?

I just pushed commit with all the requested changes/bugs/etc.
Currently I'm using X-ManagersName.. Relationship field is like first person property and I'm not sure(never used) if is anything else except an info.. except if extend/change it..

Relationship to you is not helpful because it only stores the type of relation and is always relative to the addressbook owner. E.g. in your addressbook there might be a contact for me and it says Colleague. Nothing more, nothing less.

X-ManagersName seems a lot more appropriate. The only issue we just found out is that KOrganizer stores the name of the other person for this field, not the UID. So it is not a reference to another contact. It is just a value. And this value is prone for conflicts in larger organizations where names are not unique.

I'll see if we can put together some kind of hybrid solution where we store the UID for our purposes but also X-ManagersName for interoperability.

We will go with something like X-MANAGERSNAME;UID=abc-def-123:John

src/components/AppContent/ChartContent.vue

CarlSchwan · 2022-08-18T17:19:34Z

src/models/contact.js

+ * @memberof Contact
+ */
+ get orgManager() {
+ return this.firstIfArray(this.vCard.getFirstPropertyValue('orgmanager'))


If you use X-ManagersName, it will be compatible with korganizer/kalendar, better than nothing 😜

A similar concept exist in google eith manager and assistant name but they don't even use vcards

bkrith · 2022-09-11T09:21:18Z

Property "Manager" based on X-ManagersName.

Re-aligned and improved dropdown for multiple charts.

align nodes styles and highlight path according color guidelines.

ChristophWurst · 2022-09-16T15:57:58Z

BUG I can no longer select a manager. Possibly related to the UI update because contactsOptions does contain data.

ChristophWurst · 2022-09-19T12:37:40Z

BUG I can no longer select a manager. Possibly related to the UI update because contactsOptions does contain data.

I tried again with the outdated branch. Same problem. However, once I created a third contact I was able to define managers. Bug?!

ChristophWurst · 2022-09-19T13:19:52Z

Today's state with the new Nextcloud 25 UI

ChristophWurst · 2022-09-19T17:03:26Z

@bkrith I have checked my previously commented bugs against the current state. Great job. Those are all resolved. ~~I haven't had the chance to also check Jan's design feedback~~. Since you don't have permission to edit other people's comments and markdown checklist, I moved the todos up into your PR description so you can check the items and mark everything that's already done.

I will also add any bugs to the todo list as I encounter them.

Edit: design feedback checked against the list.

src/components/ChartTemplate.vue

css/orgChart.scss

ChristophWurst · 2022-09-20T08:41:05Z

I'd say let's get the remaining bugs fixed, then we can merge a first version of this feature. Anything else can be done as follow-ups.

ChristophWurst · 2022-09-20T14:49:21Z

src/components/AppNavigation/RootNavigation.vue

+ name: 'chart',
+ params: { selectedChart: GROUP_ALL_CONTACTS },
+ }"
+ icon="icon-category-monitoring" />


icon classes are deprecated. this should use a material icon

ChristophWurst · 2022-09-20T14:50:38Z

src/components/AppNavigation/RootNavigation.vue

@@ -281,6 +292,11 @@ export default {
 return this.sortedContacts.filter(contact => this.contacts[contact.key].groups && this.contacts[contact.key].groups.length === 0)
 },

+ // check if any contact has manager, if not then is no need for organization chart menu
+ existChart() {
+ return !!Object.keys(this.contacts).filter(key => this.contacts[key].managersName).length


https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some as a lightweight alternative to .filter(...).length

src/components/ChartTemplate.vue

src/components/OrgChart.vue

ChristophWurst · 2022-09-20T14:59:01Z

src/models/contact.js

@@ -41,7 +41,7 @@ const isEmpty = value => {
 export const ContactKindProperties = ['KIND', 'X-ADDRESSBOOKSERVER-KIND']

 export const MinimalContactProperties = [
- 'EMAIL', 'UID', 'CATEGORIES', 'FN', 'ORG', 'N', 'X-PHONETIC-FIRST-NAME', 'X-PHONETIC-LAST-NAME',
+ 'EMAIL', 'UID', 'CATEGORIES', 'FN', 'ORG', 'N', 'X-PHONETIC-FIRST-NAME', 'X-PHONETIC-LAST-NAME', 'X-MANAGERSNAME', 'TITLE',


what are the consequences of this change? I'm not able to figure that out from the code

src/utils/chartUtils.js

ChristophWurst · 2022-09-20T15:01:57Z

@bkrith if you allow us to push commits to your branch we can fix some of the reported problems right away

ChristophWurst · 2022-09-21T15:51:50Z

I'll open a second PR with our branch

bkrith · 2022-09-22T11:54:11Z

Thank you! I'm too busy right now.. I'm moving on new apartment and I have overloaded in my day job.

ChristophWurst · 2022-09-22T15:14:59Z

src/components/OrgChart.vue

+ name: 'contact',
+ params: {
+ selectedGroup: this.$route.params.selectedChart,
+ selectedContact: `${uid}~contacts`,


I was wondering why my chart->contact links don't work anymore. turns out my addressbook just has a different name 🙈

ChristophWurst · 2022-09-22T16:22:18Z

#2954 is ready for review and test

dinesh-dot-com · 2022-10-11T09:12:31Z

Hi there ***@***.***, I have tried my level best but once I have done. It asking me to upgrade, after that no improvement it remains the same.* *I'm using 24 version of nextcloud server. Will that be ok, or else I have to swap the version. Help me in stucked with orgchat. *

…

On Thu, 18 Aug, 2022, 6:09 pm Christoph Wurst, ***@***.***> wrote: ***@***.**** commented on this pull request. It works [image: Bildschirmfoto vom 2022-08-18 14-39-11] <https://user-images.githubusercontent.com/1374172/185396767-07ae80f4-250c-42c5-9ca5-893476708105.png> ------------------------------ In l10n/el.js <#2726 (comment)>: > @@ -240,6 +240,8 @@ OC.L10N.register( "Pager" : "Βομβητής", "Voice" : "Ομιλία", "Car" : "Αμάξι", + "Organization Chart": "Οργανόγραμμα", translations are handled via Transifex, not directly in our code. You can revert these changes. ------------------------------ In src/components/OrgChart.vue <#2726 (comment)>: > + this.chartReference = new OrgChart() + } + this.chartReference + .container(this.$refs.svgElementContainer) // node or css selector + .data(data) + .nodeWidth((d) => 250) + .initialZoom(0.8) + .nodeHeight((d) => 175) + .childrenMargin((d) => 40) + .compactMarginBetween((d) => 15) + .compactMarginPair((d) => 80) + .nodeContent(function(d, i, arr, state) { + const imgEl = `<img src="${d.data.image || 'data:image/jpeg;base64,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'}" alt="${d.data.fullName}" style="margin-top:-30px;margin-left:${d.width / 2 - 30}px;border-radius:100px;border:1px solid lightgray;width:60px;height:60px;background-color: white" />` + + return ` + <div style="padding-top:30px;background-color:none;margin-left:1px;height:${d.height}px;border-radius:2px;overflow:visible"> is there any chance for d3 to work with Vue components instead of string concatenation so that we can safely prevent user content injection into the DOM? ------------------------------ In src/components/OrgChart.vue <#2726 (comment)>: > + .nodeContent(function(d, i, arr, state) { + const imgEl = `<img src="${d.data.image || 'data:image/jpeg;base64,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'}" alt="${d.data.fullName}" style="margin-top:-30px;margin-left:${d.width / 2 - 30}px;border-radius:100px;border:1px solid lightgray;width:60px;height:60px;background-color: white" />` + + return ` + <div style="padding-top:30px;background-color:none;margin-left:1px;height:${d.height}px;border-radius:2px;overflow:visible"> + <div class="inner-box" style="height:${d.height - 32}px;padding-top:0px;background-color:white;border:1px solid lightgray;border-radius:5px"> + <a href="${d.data.link}"> + ${imgEl} + </a> + <div style="margin-top:-27px;background-color:#3AB6E3;height:10px;width:${d.width - 2}px;border-radius:1px" /> + <div style="padding:20px; padding-top:35px;text-align:center"> + <div style="color:#111672;font-size:16px;font-weight:bold"> ${d.data.fullName}</div> + <div style="color:#404040;font-size:16px;margin-top:4px"> ${d.data.title}</div> + </div> + <div style="display:flex;justify-content:space-between;padding-left:15px;padding-right:15px;"> + <div> Manages: ${d.data._directSubordinates} 👤</div> l10n ------------------------------ In src/models/contact.js <#2726 (comment)>: > @@ -364,6 +364,31 @@ export default class Contact { this.vCard.updatePropertyWithValue('org', org) } + /** + * Return the first orgManager + * + * @readonly + * @memberof Contact + */ + get orgManager() { + return this.firstIfArray(this.vCard.getFirstPropertyValue('orgmanager')) is this possibly a standardized property? I'm not able to find references of ORGMANAGER in the vcard specs. If it's not, should be prefix with X- @skjnldsv <https://github.com/skjnldsv>? — Reply to this email directly, view it on GitHub <#2726 (review)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AZH7Y7W55DEMZAZU5G4O5ZLVZYVIXANCNFSM5U2SKATQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

-- *The information contained in this communication is intended solely for the use of the individual or entity to whom it is addressed and others authorized to receive it. **Please note that as the recipient, it is your responsibility to check the email for malicious content or software. **It may contain confidential or legally privileged information. If you are not the intended recipient you are hereby notified that any disclosure, copying, distribution or taking any action in reliance on the contents of this information is strictly prohibited and may be unlawful. If you have received this communication in error, please notify us immediately by responding to this email.The firm is neither liable for the proper and complete transmission of the information contained in this communication nor for any delay in its receipt.*

orgChart for contacts - basic mvp

97b63b2

Signed-off-by: Vassilis Kritharakis <bkrith@hotmail.com>

bkrith changed the title ~~orgChart for contacts - basic mvp~~ orgChart for contacts May 1, 2022

last fixes - sorted list and extra checks in orgChart

e6bd4c6

Signed-off-by: Vassilis Kritharakis <bkrith@hotmail.com>

This comment was marked as outdated.

Sign in to view

fix a bug

9b70626

Signed-off-by: Vassilis Kritharakis <bkrith@hotmail.com>

bkrith changed the title ~~orgChart for contacts~~ Organization Chart May 2, 2022

This comment was marked as outdated.

Sign in to view

Merge branch 'nextcloud:main' into feature/orgChart

6414e3d

bkrith mentioned this pull request May 4, 2022

Organization Chart #2730

Closed

dinesh-dot-com reviewed Aug 1, 2022

View reviewed changes

bkrith added 2 commits August 15, 2022 18:28

remove HEAD value from checks and added multiple charts support

2404120

sync with main

3ec5daa

AndyScherzinger assigned ChristophWurst Aug 18, 2022

AndyScherzinger added enhancement New feature or request 3. to review Waiting for reviews skill:backend Issues and PRs that require backend development skills skill:frontend Issues and PRs that require JavaScript/Vue/styling development skills labels Aug 18, 2022

ChristophWurst reviewed Aug 18, 2022

View reviewed changes

This comment was marked as resolved.

Sign in to view

CarlSchwan reviewed Aug 18, 2022

View reviewed changes

ChristophWurst added 2. developing Work in progress and removed 3. to review Waiting for reviews labels Sep 1, 2022

This comment was marked as resolved.

Sign in to view

ChristophWurst reviewed Sep 19, 2022

View reviewed changes

src/components/ChartTemplate.vue Show resolved Hide resolved

ChristophWurst reviewed Sep 19, 2022

View reviewed changes

css/orgChart.scss Show resolved Hide resolved

ChristophWurst mentioned this pull request Sep 20, 2022

Fix non-user avatar on complex background nextcloud-libraries/nextcloud-vue#3272

Merged

ChristophWurst added this to the v5.0 milestone Sep 20, 2022

ChristophWurst reviewed Sep 20, 2022

View reviewed changes

src/components/ChartTemplate.vue Show resolved Hide resolved

ChristophWurst reviewed Sep 20, 2022

View reviewed changes

src/components/OrgChart.vue Show resolved Hide resolved

ChristophWurst reviewed Sep 20, 2022

View reviewed changes

src/utils/chartUtils.js Show resolved Hide resolved

ChristophWurst mentioned this pull request Sep 22, 2022

Add organization charts #2954

Merged

ChristophWurst reviewed Sep 22, 2022

View reviewed changes

ChristophWurst closed this Sep 23, 2022

ChristophWurst mentioned this pull request Sep 23, 2022

Save UID and display name for managers of the org chart #2962

Merged

eltos mentioned this pull request Feb 25, 2023

Family tree #3250

Open

ChristophWurst mentioned this pull request Apr 28, 2023

Assign managers to users and map value in the system address book nextcloud/server#37963

Closed

Organization Chart #2726

Organization Chart #2726

Conversation

bkrith commented May 1, 2022 • edited by ChristophWurst Loading

Overview

Requirements

Add field orgmanager in contact

Organization chart

Highlight path to root

Todo

This comment was marked as outdated.

florisvangeel commented May 2, 2022

This comment was marked as outdated.

dinesh-dot-com commented Aug 1, 2022

dinesh-dot-com left a comment

Choose a reason for hiding this comment

bkrith commented Aug 15, 2022

bkrith commented Aug 15, 2022

dinesh-dot-com commented Aug 16, 2022 via email

ChristophWurst left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

CarlSchwan Aug 18, 2022 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

This comment was marked as resolved.

CarlSchwan Aug 18, 2022 • edited Loading

Choose a reason for hiding this comment

bkrith commented Sep 11, 2022 • edited Loading

This comment was marked as resolved.

ChristophWurst commented Sep 16, 2022 • edited Loading

ChristophWurst commented Sep 19, 2022

ChristophWurst commented Sep 19, 2022 • edited Loading

ChristophWurst commented Sep 19, 2022 • edited Loading

ChristophWurst commented Sep 20, 2022

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

ChristophWurst commented Sep 20, 2022

ChristophWurst commented Sep 21, 2022

bkrith commented Sep 22, 2022

Choose a reason for hiding this comment

ChristophWurst commented Sep 22, 2022

dinesh-dot-com commented Oct 11, 2022 via email

bkrith commented May 1, 2022 •

edited by ChristophWurst

Loading

CarlSchwan Aug 18, 2022 •

edited

Loading

CarlSchwan Aug 18, 2022 •

edited

Loading

bkrith commented Sep 11, 2022 •

edited

Loading

ChristophWurst commented Sep 16, 2022 •

edited

Loading

ChristophWurst commented Sep 19, 2022 •

edited

Loading

ChristophWurst commented Sep 19, 2022 •

edited

Loading