basicprimitives/react

Basic Primitives Diagrams for React. Data visualization components library that implements organizational chart and multi-parent dependency diagrams.

react's Issues

Showing users as Dots

Hi, In the Large Hierarchy demo that is available on the website, the users beyond 3 level are showing as dots ( this is one the best features I've ever seen ), But for me it doesn't show that way.
As I saw the config file in ItemTemplate, the pageFitMode is set to PageFitMode.AutoSize,
but in the demo on the website, it's set to PageFitMode.FitToPage.
when I change pageFitMode in the config file to PageFitMode.FitToPage, the chart breaks and nothing get rendered.

I don't know where I'm doing wrong

Button Rendering Problem

Hi, based on the docs on this page we can use ItemTemplate to render custom design Items and buttons.
when I add templates entity into config object, the onItemRender function works fine, but the onButtonsRender doesn't work.

I noticed that even in the demo page of itemtemplates the buttons that are in the config object don't get rendered. I wonder what is the problem with it.

Thanks

How to use custom component which is expandable?

I am stuck how to use custom component here whose size can change when selected on click. It will show expanded data.

Feature Request: Ability to connect a partner without having children

Currently, this library enables us to create family trees by displaying how each relative is inter-connected. However, these connections are not visually complete...
When we create a new sibling or parent, we can clearly see in the tree that each of them has been positioned and connected through a line in the graph, though we don't see the same behavior while adding a spouse/partner.
Creating a spouse doesn't place the newly created relative in the corresponding position, nor does it create a line to connect them unless there is already a child created with the corresponding "relative Id" in the JSON file.
This is not desirable in some cases as, for example, we would like to be able to show at all time who is the spouse of whom, regardless of if they have a child in common or not.
In other words, in some instances, this is undesirable; for instance, it's preferable to consistently display spousal relationships, irrespective of whether they share a child.
It would be great, and it is our humble request, to have an option that additionally connects two or more siblings if they happen to be twins.
This is quite similar to the desired connection described and requested by cloetensbrecht

Lines customization

Hello. I want to change the styles of connection lines between nodes in family chart from that

to that

Please tell me if it is possible to implement this. I'm a little confused about your documentation :)

Thank you!

Org Chart Node flickering in React

I am using basicprimitives in ReactJS and using custom node. It is only single div. but it is flickering on render:

const itemNode = ({ context: itemConfig }:NodeProps) => (
    <div style={{ backgroundColor: itemConfig.isPlaceholderContact ? 'red' : itemConfig.isPartnerContact ? 'green' : 'white' }}>{`${itemConfig.firstName} ${itemConfig.lastName}`}</div>
);


const orgConfig = {
        items: getLinkedContacts(),
        scale,
        pageFitMode: PageFitMode.None,
        hasSelectorCheckbox: Enabled.False,
        defaultTemplateName: 'contactTemplate',
        calloutMaximumVisibility: Visibility.Normal,
        minimumVisibleLevels: 1,
        normalLevelShift: 40,
        dotLevelShift: 20,
        normalItemsInterval: 10,
        dotItemsInterval: 8,
        lineItemsInterval: 4,
        cursorItem: searchedActiveContact,
        templates: [{
            name: 'contactTemplate',
            itemBorderWidth: 0,
            itemSize: { width: 235, height: 100 },
            cursorPadding: {
                left: 3, top: 3, right: 0, bottom: 0,
            },
            cursorBorderWidth: 0,
            onCursorRender: cursorItem,
            highlightBorderWidth: 0,
            onHighlightRender: highlightItem,
            onItemRender: itemNode,
        },
        {
            name: 'contactDot',
            itemBorderWidth: 0,
            itemSize: { width: 9, height: 10 },
            cursorPadding: {
                left: 0, top: 0, right: 0, bottom: 0,
            },
            cursorBorderWidth: 0,
            onCursorRender: cursorItem,
            highlightBorderWidth: 0,
            onHighlightRender: highlightItem,
            onItemRender: dotItemNode,
        },
        ],
    };

Video of the issue can be found below:

https://www.veed.io/view/e31b6f25-b101-410b-bcac-f3e9b1f6874c?sharingWidget=true
https://www.veed.io/view/ea162037-1c93-4bcd-a693-9bd8c4c1f6f4?sharingWidget=true

Feature request: add your own custom component

For now all items have the same layout. You can modify some colors but you can not change the layout or position of the elements. It's also not possible to add extra information if you need more data than a title, description and an image. For this it would be nice to add custom components to the diagrams.

Something like this would be possible in this case:

onItemRender not working with orgDiagramPdfkit

I'm trying to use PDFkit with orgchart. It is working but custom template is not rendering even when onItemRender is passed with templates. Card size is changing from template but custom layout not working with orgDiagramPdfkit

How to change cursor's border color?

On 67 line in node_modules/basicprimitivesreact/dist/Templates/CursorTemplate.js

How could I overwrite this option? Thx

Doc examples not working for `react-dnd` v15 and v16

Please update docs and integration to support react-dnd v15 and v16

Drag and Drop not working with connector enabled

Drag and drop not working with connector annotation enabled. Can I add a class to div that SVG for connector annotations? Or can I add z-index to -1 to the connector div container? It works after setting z-index to -1.

How to have spouses without common children on the same level?

Is there a way to mark items that have to be on the same level without having a common child?

Dragging the chart with the mouse cursor

Hello, in this example https://basicprimitives.github.io/javascript/ chart may be dragged by clicking the mouse button. As i understood while reading docs, it provides by option "enable panning". But it doesn't work in react version of the library (i mean the whole chart, not individual nodes). Could you tell me please, if react version support chart dragging by the mouse. And if so, how can it be enabled? Thank you :)

Mouse pointer always in loading state

Hi,

Whenever I am putting the component inside placeholder the mouse pointer is always loading. And also dots are not appearing according to react-demo project.

how to long title (wrap text) in a orgchart

want two-line title (wrap text) in the orgchart. Can you please help me with how can I do that?

PDFKit hanging when partial orgchart expanded

Export to PDF using PDFKit hangs up when orgchart is partially expanded. Please guide.

Below is list of items:

[
    {
        "id": "86b44554-d725-4bec-90ac-9002cc51127b",
        "firstName": "Edward",
        "lastName": "Adams",
        "fullName": "Edward Adams",
        "email": "[email protected]",
        "title": "Telecommunications researcher",
        "department": "Richardson, Scott and Price",
        "powerMeter": "very_high",
        "isKeyContact": false,
        "state": "DEFAULT",
        "pinned": false,
        "isLeftOfOrgChart": false,
        "numberOfTasks": 0,
        "numberOfMeetings": 0,
        "isOpportunityActive": true,
        "status": "unaware",
        "account": {
            "id": "190e8af3-9f9c-42e4-aec6-dab90b3dbf51",
            "name": "Lionel Warren",
            "status": "ACTIVE",
            "accountType": "KEY_ACCOUNT"
        },
        "hasParent": false,
        "children": 2,
        "reportsTo": {},
        "relationship": {
            "user": {
                "id": "5d65c27a-2772-b6aa-d77a-d17ca8188342",
                "firstName": "admin",
                "lastName": "admin",
                "status": "ACTIVE"
            },
            "role": "tactical",
            "isPrimary": true
        },
        "extraRelationshipCount": 0,
        "contactType": "PLACEHOLDER",
        "isDefaultContact": false,
        "isPlaceholderContact": true,
        "isPartnerContact": false,
        "level": "staff",
        "expanded": "full",
        "showCallout": 1,
        "templateName": "contactTemplate",
        "calloutTemplateName": "contactTemplate"
    },
    {
        "id": "915eff32-36e7-4a8f-813a-2cc06f522966",
        "firstName": "Xavier",
        "lastName": "Puckett",
        "fullName": "Xavier Puckett",
        "email": "",
        "title": "Sexton Chan Traders",
        "department": "",
        "powerMeter": null,
        "isKeyContact": true,
        "state": "DEFAULT",
        "pinned": false,
        "isLeftOfOrgChart": false,
        "numberOfTasks": 0,
        "numberOfMeetings": 0,
        "isOpportunityActive": false,
        "status": null,
        "account": {
            "id": "190e8af3-9f9c-42e4-aec6-dab90b3dbf51",
            "name": "Lionel Warren",
            "status": "ACTIVE",
            "accountType": "KEY_ACCOUNT"
        },
        "parent": "86b44554-d725-4bec-90ac-9002cc51127b",
        "hasParent": true,
        "children": 4,
        "reportsTo": {
            "id": "86b44554-d725-4bec-90ac-9002cc51127b",
            "firstName": "Edward",
            "lastName": "Adams"
        },
        "relationship": {
            "user": null
        },
        "extraRelationshipCount": 0,
        "contactType": "DEFAULT",
        "isDefaultContact": true,
        "isPlaceholderContact": false,
        "isPartnerContact": false,
        "level": null,
        "expanded": "none",
        "showCallout": 0,
        "templateName": "contactDot",
        "calloutTemplateName": "contactTemplate"
    },
    {
        "id": "9f071987-ae47-45d6-91a2-6c54f84c6c48",
        "firstName": "Seth",
        "lastName": "English",
        "fullName": "Seth English",
        "email": null,
        "title": "Shepherd Frazier Inc",
        "department": null,
        "powerMeter": null,
        "isKeyContact": false,
        "state": "DEFAULT",
        "pinned": false,
        "isLeftOfOrgChart": false,
        "numberOfTasks": 0,
        "numberOfMeetings": 0,
        "isOpportunityActive": true,
        "status": null,
        "account": {
            "id": "190e8af3-9f9c-42e4-aec6-dab90b3dbf51",
            "name": "Lionel Warren",
            "status": "ACTIVE",
            "accountType": "KEY_ACCOUNT"
        },
        "parent": "86b44554-d725-4bec-90ac-9002cc51127b",
        "hasParent": true,
        "children": 0,
        "reportsTo": {
            "id": "86b44554-d725-4bec-90ac-9002cc51127b",
            "firstName": "Edward",
            "lastName": "Adams"
        },
        "relationship": {
            "user": null
        },
        "extraRelationshipCount": 0,
        "contactType": "PARTNER",
        "isDefaultContact": false,
        "isPlaceholderContact": false,
        "isPartnerContact": true,
        "level": null,
        "expanded": "full",
        "showCallout": 1,
        "templateName": "contactTemplate",
        "calloutTemplateName": "contactTemplate"
    },
    {
        "id": "064768b5-b600-4e77-98aa-9c7886c066d7",
        "firstName": "Dawn",
        "lastName": "Leach",
        "fullName": "Dawn Leach",
        "email": "[email protected]",
        "title": "Advertising art director",
        "department": "Brown, Sanchez and Burns",
        "powerMeter": "very_low",
        "isKeyContact": false,
        "state": "DEFAULT",
        "pinned": false,
        "isLeftOfOrgChart": false,
        "numberOfTasks": 0,
        "numberOfMeetings": 0,
        "isOpportunityActive": false,
        "status": "aware_positive",
        "account": {
            "id": "190e8af3-9f9c-42e4-aec6-dab90b3dbf51",
            "name": "Lionel Warren",
            "status": "ACTIVE",
            "accountType": "KEY_ACCOUNT"
        },
        "parent": "915eff32-36e7-4a8f-813a-2cc06f522966",
        "hasParent": true,
        "children": 0,
        "reportsTo": {
            "id": "915eff32-36e7-4a8f-813a-2cc06f522966",
            "firstName": "Xavier",
            "lastName": "Puckett"
        },
        "relationship": {
            "user": null
        },
        "extraRelationshipCount": 0,
        "contactType": "PLACEHOLDER",
        "isDefaultContact": false,
        "isPlaceholderContact": true,
        "isPartnerContact": false,
        "level": "staff",
        "expanded": "none",
        "showCallout": 0,
        "templateName": "contactDot",
        "calloutTemplateName": "contactTemplate"
    },
    {
        "id": "7cbf28d7-7381-417a-a85b-6772922e1dd9",
        "firstName": "Melanie",
        "lastName": "Lewis",
        "fullName": "Melanie Lewis",
        "email": "[email protected]",
        "title": "Animal technologist",
        "department": "Smith-Reed",
        "powerMeter": "very_high",
        "isKeyContact": false,
        "state": "DEFAULT",
        "pinned": false,
        "isLeftOfOrgChart": false,
        "numberOfTasks": 0,
        "numberOfMeetings": 0,
        "isOpportunityActive": true,
        "status": "champion",
        "account": {
            "id": "190e8af3-9f9c-42e4-aec6-dab90b3dbf51",
            "name": "Lionel Warren",
            "status": "ACTIVE",
            "accountType": "KEY_ACCOUNT"
        },
        "parent": "915eff32-36e7-4a8f-813a-2cc06f522966",
        "hasParent": true,
        "children": 0,
        "reportsTo": {
            "id": "915eff32-36e7-4a8f-813a-2cc06f522966",
            "firstName": "Xavier",
            "lastName": "Puckett"
        },
        "relationship": {
            "user": null
        },
        "extraRelationshipCount": 0,
        "contactType": "PLACEHOLDER",
        "isDefaultContact": false,
        "isPlaceholderContact": true,
        "isPartnerContact": false,
        "level": "staff",
        "expanded": "none",
        "showCallout": 0,
        "templateName": "contactDot",
        "calloutTemplateName": "contactTemplate"
    },
    {
        "id": "9afc8ebc-2820-424a-a7c7-4be50972d6b0",
        "firstName": "Byron",
        "lastName": "Kirby",
        "fullName": "Byron Kirby",
        "email": "",
        "title": "Romero and Dennis Co",
        "department": "",
        "powerMeter": null,
        "isKeyContact": true,
        "state": "DEFAULT",
        "pinned": false,
        "isLeftOfOrgChart": false,
        "numberOfTasks": 0,
        "numberOfMeetings": 0,
        "isOpportunityActive": false,
        "status": null,
        "account": {
            "id": "190e8af3-9f9c-42e4-aec6-dab90b3dbf51",
            "name": "Lionel Warren",
            "status": "ACTIVE",
            "accountType": "KEY_ACCOUNT"
        },
        "parent": "915eff32-36e7-4a8f-813a-2cc06f522966",
        "hasParent": true,
        "children": 4,
        "reportsTo": {
            "id": "915eff32-36e7-4a8f-813a-2cc06f522966",
            "firstName": "Xavier",
            "lastName": "Puckett"
        },
        "relationship": {
            "user": null
        },
        "extraRelationshipCount": 0,
        "contactType": "DEFAULT",
        "isDefaultContact": true,
        "isPlaceholderContact": false,
        "isPartnerContact": false,
        "level": null,
        "expanded": "none",
        "showCallout": 0,
        "templateName": "contactDot",
        "calloutTemplateName": "contactTemplate"
    },
    {
        "id": "c4fb19bf-2fcc-4c2c-8470-97fd89af0b46",
        "firstName": "Melinda",
        "lastName": "Rivera",
        "fullName": "Melinda Rivera",
        "email": "[email protected]",
        "title": "Scientist, audiological",
        "department": "Burton, Flores and Parker",
        "powerMeter": "moderate",
        "isKeyContact": false,
        "state": "DEFAULT",
        "pinned": false,
        "isLeftOfOrgChart": true,
        "numberOfTasks": 0,
        "numberOfMeetings": 0,
        "isOpportunityActive": true,
        "status": "champion",
        "account": {
            "id": "190e8af3-9f9c-42e4-aec6-dab90b3dbf51",
            "name": "Lionel Warren",
            "status": "ACTIVE",
            "accountType": "KEY_ACCOUNT"
        },
        "parent": "915eff32-36e7-4a8f-813a-2cc06f522966",
        "hasParent": true,
        "children": 0,
        "reportsTo": {
            "id": "915eff32-36e7-4a8f-813a-2cc06f522966",
            "firstName": "Xavier",
            "lastName": "Puckett"
        },
        "relationship": {
            "user": null
        },
        "extraRelationshipCount": 0,
        "contactType": "DEFAULT",
        "isDefaultContact": true,
        "isPlaceholderContact": false,
        "isPartnerContact": false,
        "level": "staff",
        "expanded": "none",
        "showCallout": 0,
        "templateName": "contactDot",
        "calloutTemplateName": "contactTemplate"
    },
    {
        "id": "46779ec0-f1ae-47bd-8adb-63a9994bd098",
        "firstName": "Jeffery",
        "lastName": "Mullins",
        "fullName": "Jeffery Mullins",
        "email": "[email protected]",
        "title": "Child psychotherapist",
        "department": "Mayo-Collins",
        "powerMeter": "very_low",
        "isKeyContact": true,
        "state": "DEFAULT",
        "pinned": false,
        "isLeftOfOrgChart": false,
        "numberOfTasks": 0,
        "numberOfMeetings": 0,
        "isOpportunityActive": false,
        "status": "aware_positive",
        "account": {
            "id": "190e8af3-9f9c-42e4-aec6-dab90b3dbf51",
            "name": "Lionel Warren",
            "status": "ACTIVE",
            "accountType": "KEY_ACCOUNT"
        },
        "parent": "9afc8ebc-2820-424a-a7c7-4be50972d6b0",
        "hasParent": true,
        "children": 0,
        "reportsTo": {
            "id": "9afc8ebc-2820-424a-a7c7-4be50972d6b0",
            "firstName": "Byron",
            "lastName": "Kirby"
        },
        "relationship": {
            "user": null
        },
        "extraRelationshipCount": 0,
        "contactType": "DEFAULT",
        "isDefaultContact": true,
        "isPlaceholderContact": false,
        "isPartnerContact": false,
        "level": "staff",
        "expanded": "none",
        "showCallout": 0,
        "templateName": "contactDot",
        "calloutTemplateName": "contactTemplate"
    },
    {
        "id": "281b5823-a9ca-461c-a513-dfce80ac4b4a",
        "firstName": "Randy",
        "lastName": "Roberts",
        "fullName": "Randy Roberts",
        "email": "[email protected]",
        "title": "Software engineer",
        "department": "Ramirez Inc",
        "powerMeter": "very_high",
        "isKeyContact": false,
        "state": "DEFAULT",
        "pinned": false,
        "isLeftOfOrgChart": false,
        "numberOfTasks": 0,
        "numberOfMeetings": 0,
        "isOpportunityActive": true,
        "status": "aware_neutral",
        "account": {
            "id": "190e8af3-9f9c-42e4-aec6-dab90b3dbf51",
            "name": "Lionel Warren",
            "status": "ACTIVE",
            "accountType": "KEY_ACCOUNT"
        },
        "parent": "9afc8ebc-2820-424a-a7c7-4be50972d6b0",
        "hasParent": true,
        "children": 0,
        "reportsTo": {
            "id": "9afc8ebc-2820-424a-a7c7-4be50972d6b0",
            "firstName": "Byron",
            "lastName": "Kirby"
        },
        "relationship": {
            "user": null
        },
        "extraRelationshipCount": 0,
        "contactType": "DEFAULT",
        "isDefaultContact": true,
        "isPlaceholderContact": false,
        "isPartnerContact": false,
        "level": "staff",
        "expanded": "none",
        "showCallout": 0,
        "templateName": "contactDot",
        "calloutTemplateName": "contactTemplate"
    },
    {
        "id": "b1cb5e0c-871b-4e02-a332-e79921d40e33",
        "firstName": "Sally",
        "lastName": "Miranda",
        "fullName": "Sally Miranda",
        "email": "[email protected]",
        "title": "Printmaker",
        "department": "Bates-Smith",
        "powerMeter": "low",
        "isKeyContact": false,
        "state": "DEFAULT",
        "pinned": false,
        "isLeftOfOrgChart": false,
        "numberOfTasks": 0,
        "numberOfMeetings": 0,
        "isOpportunityActive": false,
        "status": "unaware",
        "account": {
            "id": "190e8af3-9f9c-42e4-aec6-dab90b3dbf51",
            "name": "Lionel Warren",
            "status": "ACTIVE",
            "accountType": "KEY_ACCOUNT"
        },
        "parent": "9afc8ebc-2820-424a-a7c7-4be50972d6b0",
        "hasParent": true,
        "children": 4,
        "reportsTo": {
            "id": "9afc8ebc-2820-424a-a7c7-4be50972d6b0",
            "firstName": "Byron",
            "lastName": "Kirby"
        },
        "relationship": {
            "user": null
        },
        "extraRelationshipCount": 0,
        "contactType": "DEFAULT",
        "isDefaultContact": true,
        "isPlaceholderContact": false,
        "isPartnerContact": false,
        "level": "staff",
        "expanded": "none",
        "showCallout": 0,
        "templateName": "contactDot",
        "calloutTemplateName": "contactTemplate"
    },
    {
        "id": "c764f13f-fd2c-4e48-8aa7-3dfdf84b2e8f",
        "firstName": "Fulton",
        "lastName": "Shelton",
        "fullName": "Fulton Shelton",
        "email": "",
        "title": "Sharp Norris Plc",
        "department": "",
        "powerMeter": null,
        "isKeyContact": false,
        "state": "DEFAULT",
        "pinned": false,
        "isLeftOfOrgChart": false,
        "numberOfTasks": 0,
        "numberOfMeetings": 0,
        "isOpportunityActive": false,
        "status": null,
        "account": {
            "id": "190e8af3-9f9c-42e4-aec6-dab90b3dbf51",
            "name": "Lionel Warren",
            "status": "ACTIVE",
            "accountType": "KEY_ACCOUNT"
        },
        "parent": "9afc8ebc-2820-424a-a7c7-4be50972d6b0",
        "hasParent": true,
        "children": 0,
        "reportsTo": {
            "id": "9afc8ebc-2820-424a-a7c7-4be50972d6b0",
            "firstName": "Byron",
            "lastName": "Kirby"
        },
        "relationship": {
            "user": null
        },
        "extraRelationshipCount": 0,
        "contactType": "PLACEHOLDER",
        "isDefaultContact": false,
        "isPlaceholderContact": true,
        "isPartnerContact": false,
        "level": null,
        "expanded": "none",
        "showCallout": 0,
        "templateName": "contactDot",
        "calloutTemplateName": "contactTemplate"
    },
    {
        "id": "55e528fd-ec91-40f5-bdf9-f6e4138d6a6d",
        "firstName": "Christopher",
        "lastName": "Hall",
        "fullName": "Christopher Hall",
        "email": "[email protected]",
        "title": "IT sales professional",
        "department": "Taylor LLC",
        "powerMeter": "low",
        "isKeyContact": false,
        "state": "DEFAULT",
        "pinned": false,
        "isLeftOfOrgChart": false,
        "numberOfTasks": 0,
        "numberOfMeetings": 0,
        "isOpportunityActive": true,
        "status": "aware_negative",
        "account": {
            "id": "190e8af3-9f9c-42e4-aec6-dab90b3dbf51",
            "name": "Lionel Warren",
            "status": "ACTIVE",
            "accountType": "KEY_ACCOUNT"
        },
        "parent": "b1cb5e0c-871b-4e02-a332-e79921d40e33",
        "hasParent": true,
        "children": 0,
        "reportsTo": {
            "id": "b1cb5e0c-871b-4e02-a332-e79921d40e33",
            "firstName": "Sally",
            "lastName": "Miranda"
        },
        "relationship": {
            "user": null
        },
        "extraRelationshipCount": 0,
        "contactType": "PLACEHOLDER",
        "isDefaultContact": false,
        "isPlaceholderContact": true,
        "isPartnerContact": false,
        "level": "staff",
        "expanded": "none",
        "showCallout": 0,
        "templateName": "contactDot",
        "calloutTemplateName": "contactTemplate"
    },
    {
        "id": "69684419-350e-466e-bb5d-4c17b52f1932",
        "firstName": "Sydney",
        "lastName": "Castro",
        "fullName": "Sydney Castro",
        "email": "[email protected]",
        "title": "IT trainer",
        "department": "Cox Inc",
        "powerMeter": "very_low",
        "isKeyContact": false,
        "state": "DEFAULT",
        "pinned": false,
        "isLeftOfOrgChart": false,
        "numberOfTasks": 0,
        "numberOfMeetings": 0,
        "isOpportunityActive": false,
        "status": "unaware",
        "account": {
            "id": "190e8af3-9f9c-42e4-aec6-dab90b3dbf51",
            "name": "Lionel Warren",
            "status": "ACTIVE",
            "accountType": "KEY_ACCOUNT"
        },
        "parent": "b1cb5e0c-871b-4e02-a332-e79921d40e33",
        "hasParent": true,
        "children": 4,
        "reportsTo": {
            "id": "b1cb5e0c-871b-4e02-a332-e79921d40e33",
            "firstName": "Sally",
            "lastName": "Miranda"
        },
        "relationship": {
            "user": null
        },
        "extraRelationshipCount": 0,
        "contactType": "DEFAULT",
        "isDefaultContact": true,
        "isPlaceholderContact": false,
        "isPartnerContact": false,
        "level": "staff",
        "expanded": "none",
        "showCallout": 0,
        "templateName": "contactDot",
        "calloutTemplateName": "contactTemplate"
    },
    {
        "id": "3073aef3-3459-44d6-abba-6adb1a81b63c",
        "firstName": "Anne",
        "lastName": "Wolfe",
        "fullName": "Anne Wolfe",
        "email": "",
        "title": "James Murray Trading",
        "department": "",
        "powerMeter": null,
        "isKeyContact": false,
        "state": "DEFAULT",
        "pinned": false,
        "isLeftOfOrgChart": false,
        "numberOfTasks": 0,
        "numberOfMeetings": 0,
        "isOpportunityActive": false,
        "status": null,
        "account": {
            "id": "190e8af3-9f9c-42e4-aec6-dab90b3dbf51",
            "name": "Lionel Warren",
            "status": "ACTIVE",
            "accountType": "KEY_ACCOUNT"
        },
        "parent": "b1cb5e0c-871b-4e02-a332-e79921d40e33",
        "hasParent": true,
        "children": 0,
        "reportsTo": {
            "id": "b1cb5e0c-871b-4e02-a332-e79921d40e33",
            "firstName": "Sally",
            "lastName": "Miranda"
        },
        "relationship": {
            "user": null
        },
        "extraRelationshipCount": 0,
        "contactType": "PLACEHOLDER",
        "isDefaultContact": false,
        "isPlaceholderContact": true,
        "isPartnerContact": false,
        "level": null,
        "expanded": "none",
        "showCallout": 0,
        "templateName": "contactDot",
        "calloutTemplateName": "contactTemplate"
    }
]

Add Typescript

how we do long title (wrap text) in a orgchart

I want two line title (wrap text) in the orgchart. Can you please help me with how can I do that?

changing the design of nodes

Hi, hope you are doing well

I wonder how could I change the design from its default to something like in the picture?
I tried editing some elements on the template folder in source code, but the problem is when I deploy the chart on heroku, it rebuild it with default settings.

if there is better way to fully edit the design ( colors, fonts, etc.. ) I would really thankful to show it how.
for example: how can I change the title blue background?
I read the API refrence for OrgChartConfig and found a "itemtitleColor" , but when I pass it to config file with for example "ff0000" color, it doesn't get applied

Feature request: Connect a partner without having children

It would be great to have the possibility to add a partner to the FamDiagram. It seems only possible to connect items through their parents. But if you want to connect an item as a partner it seems not possible. You can use the annotations to draw a line between the partners, but within a family tree it's more obvious to add partners next to eachother.

Ex: connect them with an empty child:

Desired connection:

Cannot set properties of undefined (setting 'id') in OrgItemConfig()

Hi all, I found a confusing issue inside OrgItemConfig

this is where I create the OrgItemConfig object

and this is the result in the console log

on the 6.5.1 version inside React project

I don't have any idea about this error, please help me.

www.basicprimitives.com

https://www.basicprimitives.com/ is returning a 502 Bad Gateway error

How to create separate section in orgchart

I want to create a section in left of orgchart to place some cards there. Can you please help me how can I do that?

onCursorChanged and onCursorChanging event handlers not working in React

I am using onCursorChanged and onCursorChanging event handlers in React. But its not working correctly.

Here is link to project: https://replit.com/@cutemick3/AdoredScrawnyZip