Skip to main content

Tree Data

The TreeSpider tree data is straight forward, each employee has the required id and parentId properties, the parentId is for specifying the employee that an employee reports to, and the root employee or the overall head of the organization should not have the parentId property.

Simple representation​

In simple diagram, the data is like so

CEO -> Chief of Engineering -> Lead Engineer -> Senior Engineer -> Junior Engineers

In the simple diagram the Junior Engineers report to the Senior Engineer who reports to the Lead Engineer who then also reports to the Chief of Engineering who then finally reports to the CEO, the CEO doesn't reports to anyone except if there is a board then in that case the root of the structure is going to be the organization's name then the board of directors then the CEO, but in the case of the simple diagram the CEO is the root of the structure, so in the object representation, all the employees except the CEO will have a parentId property pointing to the id of the employee they report to, for example the next section is the object representation of the above simple example diagram.

Simple Data Example​

[
    {
        id: "1",
        role: "CEO"
    },
    {
        id: "2",
        role: "Chief of Engineering",
        parentId: "1"
    },
    {
        id: "3",
        role: "Lead Engineer",
        parentId: "2"
    },
    {
        id: "4",
        role: "Senior Engineer",
        parentId: "3"
    },
    {
        id: "5",
        role: "Junior Engineer no. 1",
        parentId: "4"
    },
    {
        id: "6",
        role: "Junior Engineer no. 2",
        parentId: "4"
    },
    {
        id: "7",
        role: "Junior Engineer no. 3",
        parentId: "4"
    },

]

In the above data, notice the CEO doesn't have a parentId and the rest of the employees each have the parentId which points to the id of the employee they report to, and also notice that all the junior engineers have a parentId set to the id of the Senior Engineer which they report to, this is a valid data that can be passed to TreeSpider, then TreeSpider will do the hard work of sorting, organizing and displaying the data with your choice of selected tree type.

Now passing the data, still using the example data above but adding name property to each employee

// ...

const employee_data = [
    {
        id: "1",
        role: "CEO",
        name: "Lorem John"
    },
    {
        id: "2",
        role: "Chief of Engineering",
        parentId: "1",
        name: "Doe Ipsum"
    },
    {
        id: "3",
        role: "Lead Engineer",
        parentId: "2",
        name: "Walter Rock"
    },
    {
        id: "4",
        role: "Senior Engineer",
        parentId: "3",
        name: "Nick Rand"
    },
    {
        id: "5",
        role: "Junior Engineer no. 1",
        parentId: "4",
        name: "Bob Teest"
    },
    {
        id: "6",
        role: "Junior Engineer no. 2",
        parentId: "4",
        name: "Robb Derth"
    },
    {
        id: "7",
        role: "Junior Engineer no. 3",
        parentId: "4",
        name: "Pete Perth"
    },

]

const instance1 = new TreeSpider({
    targetContainer: "#container-1",
    tree_data: employee_data
})

The above data will be rendered like the working example below, zoom in and out and pan to interact

Data definition​

More about the data and other properties that can be provided to the employee data, the data structure is as below:

{
    id: string; 
    parentId: string; 
    name: string; 
    role?: string; 
    location?: string;
    image?: string;
}

Technically, only the id is required, but the parentId and name are also required for the data to make sense, explanation of each property below.

id​

  • required

The id property is required and it is a string that indicates the index of the data, if the id of an object in the data array is missing, it can cause recursion issue and which will affect the rendering operation of the data, the id is not compulsory to be ordered according to employee hierarchy, in fact the root of the organization can be ordered last in the array, it doesn't affect the data rendering.

parentId​

  • required

The parentId is required to be added to each employee except the root/head of the organization, it points to the department head to which the employee reports, and it is required that only one object/data should not have a parentId to indicate it as the root/head of the organization, if more than one data has a missing parentId it can give cause irregularities in the rendering or even an error.

name​

  • required

The name is also on the same level of requirement as the parentId except it indicate an employee instead of pointing to the lead which the employee reports too, as not everyone has first and last name, so at least a name must be provided either first or last, and if more than 2 names was provided in the name it would assume the first name comes first and the last name comes last and it will create the initials from them and also only display the first and last name, and in the case of only one name it will only render the only name passed and render the initial of the passed name.

role​

  • Optional

This is not required but neccessary to indicate the role, position, department or job title of the employee, set this role to the department name if the employee is a lead of their department.

location​

  • Optional

This is also not required but necessary to show the location of the employee, that is, the city and country of the employee.

image​

  • Optional

The picture of the employee, the link/url to the employee's picture, if an employee doesn't have a picture leave the image field in the employee's data as undefined, TreeSpider in that case will automatically use the employee's initials instead.

The data to be provided to TreeSpider is going to be an array of the object described above, for example

[
    { // taking this as the root, note this object is missing the parentId property
        id: string; 
        name: string; 
        role: string; 
        location: string;
        image: string;
    },
    {
        id: string; 
        parentId: string; 
        name: string; 
        role: string; 
        location: string;
        image: string;
    },
    {
        id: string; 
        parentId: string; 
        name: string; 
        role: string; 
        location: string;
        image: string;
    }
]