@piratuks/tree-structure v1.0.5

Tree Structure

Tree structure component which generates the set of properties for further visualisation.

Install

npm install --save @piratuks/tree-structure

Usage

Then you need to import it:

import TreeStructure from '@piratuks/tree-structure';

Or you can also do it the old fashioned way:

<script src="dist/app.min.js"></script>
<script>
let treeStructure = window.TreeStructure;
</script>

Description

Component has three main methods:

• prepareTreeData.
• createTree.
• center.

prepareTreeData

Method prepares provided data for further usage. This should be the first method which is called before using center or createTree. Method assigns the set of specific properties for further usage. Properties basically idendicate tree structure:

• _row
• _column
• _order
• _root_tree_index
• _tree_index
• _max_rows
• _max_columns
• _tree_parent_id

Method accepts array of objects data and object which are the set of keys which needed within the method. The following example indicates that id_key is a key which is unique and it is called id. Also sort_key is relation count which is under each item. Also each item within provided array of object should have a key (The following example contains to_objects) which is array of numbers and it holds related item id's.

• Accepts:
  • data - array of object.
  • keys - object which must contain {id - string, sort_key - string, key - string}.
• Returns: - data - array of object. Example:

        //-----------------------------
        //Usage example
        //-----------------------------

        let tree_data1 = TreeHelper.prepareTreeData(obj1, 
            {
                "id_key":"id", 
                "sort_key":"relation_count", 
                "key":"to_objects"
            }
        )
        let tree_data2 = TreeHelper.prepareTreeData(obj2, 
            {
                "id_key":"id", 
                "sort_key":"relation_count", 
                "key":"to_objects"
            }
        )        

createTree

Method calculates y and x based on data provided which is why prepareTreeData needs to be executed first. Returned data contains provided data with new attributes y and x and it contains how many trees there are under this provided data. Method accepts prepared data, previous tree group data (optional might be null, this is used if it is wanted to generate multiple group of trees where each group could have more than one tree. If it is want to generate only one group with many trees then it is provided null, the example uses two groups that is why method is called twice). Also accepts the set of keys such as id_key which is a key and is unique and it is called id, height which is array of keys to find heigh of each item within provided data. If height property is not nested and is found within specific key then it can be used as height. Same applies for width. Also accepts the secod set of keys which contains space between nodes space_between_nodes and other input value such as for example scrollbar width or any other within other.

• Accepts:
  • data - array of object.
  • prevData - array of object.
  • keys1 - object which must contain {height - array of string, width - array of string, id_key - string}.
  • keys2 - object which must contain {space_between_nodes - number, other - number}.
• Returns: - data - array of object. Example:

        //-----------------------------
        //Usage example
        //-----------------------------
    
        TreeHelper.createTree(tree_data1, null, 
            {
                "height": ["heightConstraint", "minimum"], 
                "width": ["widthConstraint", "minimum"],
                "id_key":"id"
            }, 
            { 
                space_between_nodes : space_between_nodes, 
                other: scrollbar_width
            }, 
            function(data1){
                //do something here.
               
                TreeHelper.createTree(tree_data2, tree_data1, 
                    {
                        "height": ["heightConstraint", "minimum"], 
                        "width": ["widthConstraint", "minimum"],
                        "id_key":"id"
                    }, 
                    { 
                        space_between_nodes : space_between_nodes, 
                        other: scrollbar_width
                    }, 
                    function(data2){
                        //do something here.
                    });
            });

center

Method basically adjusts x and y for provided data in such way that everything would be horizontally and vertically centered. This method should be used only if it is needed to have data with multiple groups where each group can have more than one trees. Otherwise only createTree should be used.

• Accepts:
  • data - array of object (first group).
  • data - array of object (second group).
• Returns: - data - array of object (adjusts data). Example:

        //-----------------------------
        //Usage example
        //-----------------------------

        TreeHelper.center(tree_data1, tree_data2, 
            function(old){
            //do something here.
        });